import { SolutionTabs } from "@/components/sections/solution-tabs";
import type { Metadata } from "next";
import Image from "next/image";

export const metadata: Metadata = {
  title: "EV Business Solutions | TIAR",
  description:
    "Explore TIAR AI solutions for consumer mobility, commercial fleets, and business partnerships.",
};

export default function SolutionsPage() {
  return (
    <div className="w-full bg-white">
      <section className="w-full bg-[url('/images/header-bg.png')] bg-cover bg-center bg-no-repeat py-20 text-gray-950 sm:py-24">
        <div className="mx-auto w-full max-w-7xl px-6 text-center sm:px-10">
          <h1 className="mx-auto max-w-4xl text-4xl font-bold tracking-tight sm:text-5xl">
            Solutions for Every EV Business Model
          </h1>
          <p className="mx-auto mt-5 max-w-3xl text-lg leading-relaxed text-gray-600">
            From individual EV users to commercial fleets and strategic business
            partners, TIAR AI provides one flexible platform for building and
            scaling connected charging services.
          </p>
        </div>
      </section>

      <section
        aria-labelledby="solutions-overview-heading"
        className="w-full py-16 sm:py-20"
      >
        <div className="mx-auto w-full max-w-7xl px-6 sm:px-10">
          <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16">
            <div>
              <h2
                id="solutions-overview-heading"
                className="text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl"
              >
                Business Models We Support
              </h2>

              <div className="mt-6 space-y-5 text-base leading-relaxed text-gray-600 sm:text-lg">
                <p>
                  Whether you operate B2C, B2B, or B2X, TIAR AI gives you the
                  flexibility to launch, monetize, and scale EV charging
                  services under your own brand.
                </p>
                <p>
                  TIAR AI helps CPOs, fleet operators, investors, landlords,
                  brands, and strategic partners build charging businesses that
                  are scalable, profitable, and ready for the future.
                </p>
              </div>

              <p className="mt-8 rounded-2xl border border-green-100 bg-green-50 p-5 leading-relaxed font-semibold text-green-950 sm:p-6 sm:text-lg">
                Let’s talk, review the options, and build the right EV charging
                model for your business.
              </p>
            </div>

            <div className="mx-auto flex w-full max-w-xl items-center justify-center rounded-3xl bg-gray-50 p-5 sm:p-8">
              <Image
                src="/images/business-model.png"
                alt="TIAR AI business models for B2C, B2B, and B2X EV charging services"
                width={1274}
                height={1234}
                sizes="(max-width: 1023px) 90vw, 560px"
                className="h-auto w-full object-contain"
              />
            </div>
          </div>
        </div>
      </section>

      <section
        aria-labelledby="solution-categories-heading"
        className="w-full bg-gray-50 py-16 sm:py-20"
      >
        <div className="mx-auto w-full max-w-7xl px-6 sm:px-10">
          <div className="max-w-3xl">
            <h2
              id="solution-categories-heading"
              className="text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl"
            >
              Explore Solutions by Category
            </h2>
            <p className="mt-4 text-lg leading-relaxed text-gray-600">
              Select a category to see the mobility and partnership models it
              supports.
            </p>
          </div>

          <div className="mt-10">
            <SolutionTabs />
          </div>
        </div>
      </section>
    </div>
  );
}