import { Check, ArrowRight } from "lucide-react";
import { TrackedCtaLink } from "@/components/analytics/tracked-cta-link";

const TIERS = [
  {
    name: "Free",
    price: "€0",
    period: "/mo",
    description: "Perfect for hobby projects and prototypes.",
    features: [
      "2 MCP servers",
      "1,000 requests/mo",
      "7-day log retention",
      "Community support",
    ],
    cta: "Start Free",
    href: "/dashboard",
    highlight: false,
  },
  {
    name: "Starter",
    price: "€9",
    period: "/mo",
    description: "For growing apps and small teams.",
    features: [
      "10 MCP servers",
      "50,000 requests/mo",
      "30-day log retention",
      "Email support",
      "Overage: €0.50 / 10K req",
    ],
    cta: "Get Started",
    href: "/dashboard",
    highlight: true,
  },
  {
    name: "Pro",
    price: "€29",
    period: "/mo",
    description: "Scale your production workloads.",
    features: [
      "Unlimited servers",
      "500,000 requests/mo",
      "90-day log retention",
      "Priority support",
      "Overage: €0.50 / 10K req",
    ],
    cta: "Upgrade to Pro",
    href: "/dashboard",
    highlight: false,
  },
  {
    name: "Enterprise",
    price: "Custom",
    period: "",
    description: "Security, compliance, and dedicated support.",
    features: [
      "Custom request limits",
      "SSO & SAML",
      "99.99% SLA",
      "Dedicated support manager",
      "On-premise deployment",
    ],
    cta: "Contact Sales",
    href: "mailto:hello@apifold.com",
    highlight: false,
  },
] as const;

export function PricingCards() {
  return (
    <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
      {TIERS.map((tier) => (
        <div
          key={tier.name}
          className={`relative flex flex-col rounded-2xl border p-6 transition-all duration-300 hover:-translate-y-0.5 ${
            tier.highlight
              ? "border-foreground bg-card"
              : "border-border bg-card"
          }`}
        >
          {tier.highlight && (
            <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-foreground px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-background">
              Most Popular
            </div>
          )}

          <div className="mb-6">
            <h3 className="text-lg font-semibold text-foreground">
              {tier.name}
            </h3>
            <div className="mt-2 flex items-baseline gap-1">
              <span className="text-4xl font-extrabold text-foreground">
                {tier.price}
              </span>
              {tier.period && (
                <span className="text-sm text-muted-foreground">{tier.period}</span>
              )}
            </div>
            <p className="mt-2 text-sm text-muted-foreground">{tier.description}</p>
          </div>

          <div className="mb-8 flex-1 space-y-3">
            {tier.features.map((feature) => (
              <div
                key={feature}
                className="flex items-start gap-3 text-sm text-foreground"
              >
                <Check className="mt-0.5 h-4 w-4 shrink-0 text-foreground" />
                <span>{feature}</span>
              </div>
            ))}
          </div>

          <TrackedCtaLink
            href={tier.href}
            cta={tier.cta.toLowerCase().replace(/\s+/g, '_')}
            location="pricing"
            className={`inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-medium transition-all duration-200 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none ${
              tier.highlight
                ? "bg-foreground text-background hover:bg-foreground/90"
                : "border border-border bg-transparent text-foreground hover:bg-muted/50"
            }`}
          >
            {tier.cta}
            <ArrowRight className="h-3.5 w-3.5" />
          </TrackedCtaLink>
        </div>
      ))}
    </div>
  );
}
