import { PricingPlans } from "@/components/sections/pricing-plans";
import { PricingCalculator } from "@/components/sections/pricing-calculator";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import type { Metadata } from "next";
import Link from "next/link";

export const metadata: Metadata = {
  title: "Pricing | TIAR",
  description:
    "Explore TIAR pricing options and compare the platform with other SaaS solutions.",
};

const cpoChallenges = [
  {
    id: "csms-starting-point",
    title: "A CSMS is only the starting point.",
    description:
      "It may manage chargers, but CPOs still need to assemble the rest of the technology and business infrastructure themselves.",
  },
  {
    id: "local-payments",
    title: "Local payments still require extra integration.",
    description:
      "Most CSMS platforms do not provide the payment channels customers actually use in each market—forcing CPOs to hire IT specialists, coordinate additional vendors, and carry more cost, complexity, and launch risk.",
  },
  {
    id: "financial-tracking",
    title: "Manual financial tracking",
    description:
      "for revenue, energy bills, profit-sharing, and rent—often across property partners with completely different commercial agreements.",
  },
  {
    id: "back-office",
    title: "An expanding back-office team",
    description:
      "just to keep contracts under control. One administrator may handle 10 agreements—but what happens at 50, 100, or more? Headcount rises, while the risks of human error, revenue leakage, and incorrect payments rise with it.",
  },
  {
    id: "roi-calculations",
    title: "Complex ROI calculations",
    description:
      "to determine whether each charging location is truly worth the investment.",
  },
  {
    id: "stakeholder-reporting",
    title: "Time-consuming stakeholder reporting",
    description:
      "for property partners, investors, and franchisees—each expecting real-time insights, self-service downloads, and tailored dashboard access.",
  },
  {
    id: "network-visibility",
    title: "Limited visibility as the network scales.",
    description:
      "Beyond 50 locations, CEOs and CFOs struggle to see which sites are profitable, which are underperforming, and which business models should be scaled or avoided. Tiar AI’s built-in Business Intelligence turns complex network data into timely, decision-ready insights—instantly, without adding more analysts.",
  },
  {
    id: "remote-maintenance",
    title: "Costly on-site maintenance.",
    description:
      "Tiar AI enables CTOs to diagnose technical issues and deploy firmware upgrades remotely—saving time, reducing travel, and keeping chargers performing at their best.",
  },
  {
    id: "customer-engagement",
    title: "Built-in customer engagement.",
    description:
      "Launch promotions, marketing campaigns, and company updates directly through integrated broadcast email.",
  },
  {
    id: "sales-pipeline",
    title: "A smarter sales pipeline.",
    description:
      "Tiar AI’s integrated CRM helps your network acquisition team capture, track, and convert every opportunity—so no promising location falls off the radar.",
  },
];

export default function PricingPage() {
  return (
    <div className="w-full">
      <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 grid w-full max-w-7xl items-center gap-10 px-6 sm:px-10 lg:grid-cols-2 lg:gap-12">
          <div>
            <p className="text-sm font-semibold tracking-[0.2em] text-green-700 uppercase">
              Flexible Pricing
            </p>
            <h1 className="mx-auto mt-3 max-w-3xl text-4xl font-bold tracking-tight sm:text-5xl">
              Choose a Plan That Supports Your Growth
            </h1>
            <p className="mx-auto mt-5 max-w-2xl text-lg leading-relaxed text-gray-600">
              Start free and pay as you grow. Tiar AI combines a low per-port
              subscription with a small share of each charging session — so your
              revenue always grows faster than your cost.
            </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>
          <PricingCalculator />
        </div>
      </section>

      <PricingPlans />

      <section
        id="saas-comparison"
        className="w-full scroll-mt-28 bg-gray-50 px-6 py-16 sm:px-10 sm:py-20"
      >
        <div className="mx-auto w-full max-w-7xl">
          <h2 className="text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl">
            Most CPOs don’t launch with one platform—they launch with a growing
            stack of problems.
          </h2>
          <p className="mt-5 text-lg leading-relaxed text-gray-600">
            From day one, they must piece together:
          </p>

          <ul className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            {cpoChallenges.map((challenge) => (
              <li
                key={challenge.id}
                className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm"
              >
                <div className="flex items-center gap-3">
                  <div
                    aria-hidden="true"
                    className="flex size-10 shrink-0 items-center justify-center rounded-full bg-green-100 font-bold text-green-700"
                  >
                    ✓
                  </div>
                  <h3 className="text-xl font-semibold text-gray-950">
                    {challenge.title}
                  </h3>
                </div>
                <p className="mt-3 leading-relaxed text-gray-600">
                  {challenge.description}
                </p>
              </li>
            ))}
          </ul>

          <div className="relative isolate mt-12 overflow-hidden rounded-3xl border border-gray-200 bg-linear-to-br from-white to-gray-100 p-6 text-gray-950 sm:p-10 lg:p-12">
            <div
              aria-hidden="true"
              className="pointer-events-none absolute -top-32 -right-32 -z-10 size-96 rounded-full border border-gray-200/60"
            />
            <div
              aria-hidden="true"
              className="pointer-events-none absolute -top-16 -right-16 -z-10 size-64 rounded-full border border-gray-200/60"
            />
            <div className="grid gap-8 lg:grid-cols-2 lg:gap-16">
              <div>
                <p className="text-sm font-semibold tracking-widest text-gray-500 uppercase">
                  One intelligent platform
                </p>
                <h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
                  Now imagine replacing that entire patchwork with{" "}
                  <span className="text-green-700">
                    one intelligent platform.
                  </span>
                </h2>
              </div>
              <div className="border-t border-gray-200 pt-8 lg:border-t-0 lg:border-l lg:pt-0 lg:pl-10">
                <p className="text-base leading-relaxed text-gray-600 sm:text-lg">
                  Tiar AI brings CSMS operations, local payments, financial
                  management, partner contracts, ROI analysis, real-time
                  reporting, Business Intelligence, remote firmware management,
                  customer engagement, and CRM into one powerful SaaS ecosystem.
                </p>
                <p className="mt-6 text-lg leading-relaxed font-medium text-gray-950">
                  The result: fewer systems, fewer manual processes, fewer
                  people required to manage complexity—and significantly more
                  savings as your network scales.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}