import Link from "next/link";

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

const planSummaries = [
  {
    id: "startup",
    label: "Start free",
    title: "Startup. $0/month.",
    description:
      "Launch your network at no cost. You only pay payment processing fees and a one-time setup fee.",
    highlights: ["Full CSMS", "Your app", "10 chargers or fewer"],
    isFeatured: true,
  },
  {
    id: "growth",
    label: "Most operators",
    title: "Growth. $18/Nozzle/month.",
    description:
      "Everything you need to run public paid charging as a business — plus a small share of your public charging revenue.",
    highlights: ["Per nozzle", "All modules"],
    isFeatured: false,
  },
  {
    id: "enterprise",
    label: "At scale",
    title: "Enterprise. Custom.",
    description:
      "Your database, dedicated infrastructure, custom SLA. Priced around your architecture.",
    highlights: ["Dedicated", "Custom SLA"],
    isFeatured: false,
  },
];

export function PricingOverview() {
  return (
    <section
      aria-labelledby="pricing-overview-heading"
      className="w-full bg-gray-50 px-6 py-16 sm:px-10 sm:py-20"
    >
      <div className="mx-auto w-full max-w-7xl">
        <p className="flex items-center gap-3 text-sm font-semibold tracking-widest text-green-700 uppercase">
          <span aria-hidden="true" className="h-px w-6 bg-green-600" />
          Pricing
        </p>
        <h2
          id="pricing-overview-heading"
          className="mt-5 max-w-4xl text-3xl font-bold tracking-tight text-gray-950 sm:text-4xl lg:text-5xl"
        >
          Simple pricing for EV charging stations software, and free to start.
        </h2>
        <p className="mt-6 text-lg leading-relaxed text-gray-600">
          Pay for the charge points you run. Generate sales effortlessly
        </p>

        <div className="mt-12 grid grid-cols-1 gap-5 lg:grid-cols-3">
          {planSummaries.map((plan) => (
            <article
              key={plan.id}
              className={cn(
                "flex min-w-0 flex-col rounded-2xl border bg-white p-6 sm:p-8",
                plan.isFeatured
                  ? "border-green-600 shadow-lg ring-1 shadow-gray-950/5 ring-green-600"
                  : "border-gray-200",
              )}
            >
              <p
                className={cn(
                  "text-xs font-medium tracking-widest uppercase",
                  plan.isFeatured ? "text-green-700" : "text-gray-500",
                )}
              >
                {plan.label}
              </p>
              <h3 className="mt-5 text-xl font-semibold text-gray-950">
                {plan.title}
              </h3>
              <p className="mt-3 leading-relaxed text-gray-600">
                {plan.description}
              </p>
              <ul className="mt-auto flex flex-wrap gap-2 pt-7">
                {plan.highlights.map((highlight) => (
                  <li
                    key={highlight}
                    className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 text-xs leading-relaxed font-medium tracking-wider text-gray-600 uppercase"
                  >
                    {highlight}
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>

        <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
          <Link
            href="/pricing#startup-plan-heading"
            className={cn(
              buttonVariants({ size: "lg" }),
              "h-12 w-full rounded-full bg-green-600 px-6 text-white hover:bg-green-700 sm:w-auto",
            )}
          >
            Explore the Startup Plan
          </Link>
          <Link
            href="/pricing"
            className={cn(
              buttonVariants({ variant: "outline", size: "lg" }),
              "h-12 w-full rounded-full border-gray-200 bg-white px-6 text-gray-950 hover:bg-gray-100 sm:w-auto",
            )}
          >
            See full pricing
          </Link>
        </div>
      </div>
    </section>
  );
}