import { Check } from "lucide-react";
import Link from "next/link";

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const pricingPlans = [
  {
    id: "startup",
    name: "Startup.",
    tagline: "Great for new operators",
    price: "$0",
    unit: "/month",
    billing: "Free for life · Up to 10 chargers",
    setup: "$999 one-time setup",
    description:
      "Everything essential to enter the EV space and launch quickly.",
    featureHeading: null,
    features: [
      "Up to 10 chargers included",
      "Real-time monitoring & control",
      "White-labelled native Android and iOS app",
      "Sessions, revenue & wallet management",
      "Payment gateway integration",
      "Charger & location management",
      "Email support (10/5)",
    ],
    note: "Only pay when you scale beyond ten — an EV charging software free tier for as long as you stay there.",
    action: "Know more",
    isFeatured: false,
  },
  {
    id: "growth",
    name: "Growth.",
    tagline: "For operators ready to scale",
    price: "$18",
    unit: "/Nozzle/mo",
    billing: "Billed monthly as you scale",
    originalSetup: "$10,000",
    setup: "$1,999 one-time setup",
    description: "Every advanced feature, zero compromise.",
    featureHeading: "👈 Everything in Startup, plus:",
    features: [
      "Dynamic tariff & surge pricing",
      "Load balancing & self-healing tech",
      "Private charging & Host Portal",
      "Operations & maintenance portal",
      "Fleet Portal for your fleet customers",
      "Subscriptions, offers & rewards",
      "RFID & firmware management",
      "OCPI interoperability",
      "API access & custom integrations",
      "Advanced monitoring · dedicated account manager",
    ],
    note: "Operators lift earnings 25–40% with smart uptime and dynamic pricing.",
    action: "Get started",
    isFeatured: true,
  },
  {
    id: "enterprise",
    name: "Enterprise.",
    tagline: "Custom package",
    price: "Let's talk",
    unit: null,
    billing: "Annual licence · Custom volume pricing",
    setup: "Custom one-time setup",
    description: "Complete ownership or private infrastructure, at scale.",
    featureHeading: "👈 Everything in Growth, plus:",
    features: [
      "Your database",
      "Dedicated infrastructure setup",
      "Custom SLA & response times",
      "Enterprise security & compliance",
      "Bespoke feature development",
      "Dedicated engineering support",
    ],
    note: "A tailored package built around your exact needs.",
    action: "Contact us",
    isFeatured: false,
  },
];

export function PricingPlans() {
  return (
    <section
      id="table-pricing"
      aria-labelledby="pricing-plans-heading"
      className="w-full scroll-mt-28 bg-white px-6 py-16 sm:px-10 sm:py-20"
    >
      <h2 id="pricing-plans-heading" className="sr-only">
        Compare pricing plans
      </h2>
      <div className="mx-auto grid w-full max-w-7xl grid-cols-1 gap-8 lg:grid-cols-3 lg:gap-5">
        {pricingPlans.map((plan) => (
          <article
            key={plan.id}
            aria-labelledby={`${plan.id}-plan-heading`}
            className={cn(
              "relative flex min-w-0 flex-col rounded-3xl border bg-white p-6 text-gray-950 sm:p-8",
              plan.isFeatured
                ? "border-green-600 shadow-xl shadow-green-950/10"
                : "border-green-100",
            )}
          >
            {plan.isFeatured && (
              <p className="absolute -top-4 left-6 rounded-full bg-green-600 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase sm:left-8">
                Most Operators
              </p>
            )}
            <h3
              id={`${plan.id}-plan-heading`}
              className="mt-2 scroll-mt-32 text-2xl font-semibold tracking-tight"
            >
              {plan.name}
            </h3>
            <p className="mt-2 text-xs font-medium tracking-widest text-gray-500 uppercase">
              {plan.tagline}
            </p>
            <p className="mt-7 flex flex-wrap items-baseline gap-x-2 gap-y-1">
              <span className="text-5xl font-semibold tracking-tight">
                {plan.price}
              </span>
              {plan.unit && (
                <span className="text-xs tracking-widest text-gray-500 uppercase">
                  {plan.unit}
                </span>
              )}
            </p>
            <p className="mt-5 text-xs leading-relaxed font-medium tracking-widest text-green-700 uppercase">
              {plan.billing}
            </p>
            <p className="mt-2 text-xs leading-relaxed tracking-widest text-gray-500 uppercase">
              {plan.originalSetup && (
                <>
                  <span className="sr-only">Previously </span>
                  <del className="mr-2">{plan.originalSetup}</del>
                  <span className="sr-only">Now </span>
                </>
              )}
              {plan.setup}
            </p>
            <p className="mt-6 leading-relaxed text-gray-600">
              {plan.description}
            </p>
            {plan.featureHeading && (
              <p className="mt-6 text-xs font-medium tracking-widest text-gray-600 uppercase">
                {plan.featureHeading}
              </p>
            )}
            <ul className="mt-5 space-y-4">
              {plan.features.map((feature) => (
                <li
                  key={feature}
                  className="flex items-start gap-3 leading-relaxed"
                >
                  <Check
                    aria-hidden="true"
                    className="mt-1 size-4 shrink-0 text-green-600"
                  />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <div className="mt-auto pt-10">
              <p className="leading-relaxed text-gray-500">{plan.note}</p>
              <Link
                href="/book-demo"
                aria-label={`${plan.action} — ${plan.name.replace(/\.$/, "")} plan`}
                className={cn(
                  buttonVariants({ variant: "outline", size: "lg" }),
                  "mt-6 h-12 w-full rounded-full",
                  plan.isFeatured
                    ? "border-green-600 bg-green-600 text-white hover:border-green-700 hover:bg-green-700 hover:text-white"
                    : "border-green-200 bg-white text-green-700 hover:bg-green-50 hover:text-green-800",
                )}
              >
                {plan.action}
              </Link>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}