import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";

interface PartnershipModelRow {
  id: string;
  model: string;
  saasPlatform: string;
  chargerInfrastructure: string;
  location: string;
  brand: string;
}

const partnershipModelRows: PartnershipModelRow[] = [
  {
    id: "1",
    model: "TIAR.AI x CPO",
    saasPlatform: "TIAR",
    chargerInfrastructure: "CPO",
    location: "CPO",
    brand: "CPO",
  },
  {
    id: "2",
    model: "TIAR.AI x Investor",
    saasPlatform: "TIAR",
    chargerInfrastructure: "Investor",
    location: "CPO",
    brand: "CPO",
  },
  {
    id: "3",
    model: "TIAR.AI x Landlord",
    saasPlatform: "TIAR",
    chargerInfrastructure: "CPO",
    location: "Landlord",
    brand: "CPO",
  },
  {
    id: "4",
    model: "TIAR.AI x Car-Maker",
    saasPlatform: "TIAR",
    chargerInfrastructure: "CPO",
    location: "CPO",
    brand: "CPO & Car-Maker",
  },
  {
    id: "5",
    model: "TIAR.AI x Fleet (Taxi, Bus, Microbus)",
    saasPlatform: "TIAR",
    chargerInfrastructure: "CPO",
    location: "CPO",
    brand: "CPO & Fleet",
  },
  {
    id: "6",
    model: "TIAR.AI x Car-Showroom",
    saasPlatform: "TIAR",
    chargerInfrastructure: "CPO",
    location: "CPO",
    brand: "CPO & Car-Showroom",
  },
];

function PartnershipModelValue({ value }: { value: string }) {
  if (value === "TIAR") {
    return (
      <Image
        src="/images/TIAR.png"
        alt="TIAR AI"
        width={790}
        height={316}
        className="h-6 w-auto object-contain"
      />
    );
  }

  return <span>{value}</span>;
}

export const metadata: Metadata = {
  title: "Partnerships | TIAR",
  description:
    "Explore partnership opportunities with TIAR for CPOs, landowners, investors, automakers, fleets, and showrooms.",
};

export default function PartnershipsPage() {
  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">
          <p className="text-sm font-semibold tracking-[0.2em] text-green-700 uppercase">
            Let&apos;s Partner, Move Faster
          </p>
          <h1 className="mx-auto mt-3 max-w-4xl text-4xl font-bold tracking-tight sm:text-5xl">
            Partnerships Built to Grow the EV Charging Ecosystem
          </h1>
          <p className="mx-auto mt-5 max-w-3xl text-lg leading-relaxed text-gray-600">
            Whether you are a CPO, landowner, investor, automaker, fleet, or
            showroom owner, TIAR AI is ready to collaborate. Together, we can
            unlock new locations, reduce capital risk, accelerate deployment,
            and bring branded charging experiences to more customers.
          </p>
          <Link
            href="/book-demo"
            className={cn(
              buttonVariants({ size: "lg" }),
              "mt-8 bg-green-600 text-white hover:bg-green-700",
            )}
          >
            Book a Free Demo
          </Link>
        </div>
      </section>

      <section
        aria-labelledby="partnership-models-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="partnership-models-heading"
              className="text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl"
            >
              Capture the EV Charging Opportunity Together
            </h2>
            <p className="mt-5 text-lg leading-relaxed text-gray-600">
              Explore how TIAR AI and its partners can combine technology,
              infrastructure, locations, and brand ownership through flexible
              collaboration models.
            </p>
          </div>

          <div className="mt-10 overflow-hidden rounded-3xl border border-gray-200 bg-white shadow-sm">
            <div className="overflow-x-auto">
              <table className="w-full min-w-240 text-left">
                <caption className="sr-only">
                  TIAR AI partnership models and the responsibilities of each
                  participating party
                </caption>
                <thead className="bg-green-600 text-white">
                  <tr>
                    <th
                      scope="col"
                      className="w-16 px-5 py-5 text-center text-sm font-semibold"
                    >
                      No.
                    </th>
                    <th
                      scope="col"
                      className="w-80 px-6 py-5 text-sm font-semibold"
                    >
                      Partnership Model
                    </th>
                    <th scope="col" className="px-6 py-5 text-sm font-semibold">
                      SaaS Platform
                    </th>
                    <th scope="col" className="px-6 py-5 text-sm font-semibold">
                      Charger &amp; Cable Infrastructure
                    </th>
                    <th scope="col" className="px-6 py-5 text-sm font-semibold">
                      Location
                    </th>
                    <th scope="col" className="px-6 py-5 text-sm font-semibold">
                      Brand
                    </th>
                  </tr>
                </thead>

                <tbody className="divide-y divide-gray-200">
                  {partnershipModelRows.map((partnershipModelRow) => (
                    <tr
                      key={partnershipModelRow.id}
                      className="even:bg-gray-50/70 hover:bg-green-50/60"
                    >
                      <th
                        scope="row"
                        className="px-5 py-5 text-center text-sm font-semibold text-green-600"
                      >
                        {partnershipModelRow.id.padStart(2, "0")}
                      </th>
                      <td className="px-6 py-5 font-semibold text-gray-950">
                        {partnershipModelRow.model}
                      </td>
                      <td className="px-6 py-5 text-gray-600">
                        <PartnershipModelValue
                          value={partnershipModelRow.saasPlatform}
                        />
                      </td>
                      <td className="px-6 py-5 text-gray-600">
                        <PartnershipModelValue
                          value={partnershipModelRow.chargerInfrastructure}
                        />
                      </td>
                      <td className="px-6 py-5 text-gray-600">
                        <PartnershipModelValue
                          value={partnershipModelRow.location}
                        />
                      </td>
                      <td className="px-6 py-5 text-gray-600">
                        <PartnershipModelValue
                          value={partnershipModelRow.brand}
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <p className="mt-4 text-sm text-gray-500 sm:hidden">
            Swipe horizontally to view the complete partnership model.
          </p>
        </div>
      </section>
    </div>
  );
}