import Link from "next/link";
import { Check, Sparkles } from "lucide-react";
import { getWhatsAppUrl } from "@/lib/contact";

export type Plan = {
  name: string;
  price: string;
  period: string;
  desc: string;
  features: string[];
  featured: boolean;
};

const plans: Plan[] = [
  {
    name: "Referral Rewards",
    price: "Rs. 500",
    period: "/referral",
    desc: "Refer more and earn every time a friend books their first service.",
    features: [
      "Share your unique referral code",
      "Friend books a first service",
      "They get a discount",
      "You earn rewards",
    ],
    featured: false,
  },
  {
    name: "Roadside Assistance",
    price: "Fast help",
    period: "/on call",
    desc: "Stranded? Ride N Revive support is just a call away.",
    features: [
      "Battery jumpstart",
      "Flat tyre support",
      "Fuel delivery",
      "Minor repairs",
      "Towing assistance if needed",
    ],
    featured: true,
  },
  {
    name: "Doorstep Service",
    price: "Book",
    period: "/anywhere",
    desc: "A simple, reliable service experience right where you are.",
    features: [
      "No garage visit",
      "Transparent updates",
      "Skilled technicians",
      "Fast turnaround",
      "Reliable completion",
    ],
    featured: false,
  },
];

export function PlanCard({ plan }: { plan: Plan }) {
  return (
    <div
      className={`relative rounded-2xl p-6 border transition-all 2xl:p-8 ${plan.featured ? "bg-primary text-primary-foreground border-transparent shadow-elegant scale-[1.02]" : "bg-card border-border hover:border-primary/40 hover:-translate-y-1"}`}
    >
      {plan.featured && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center gap-1 rounded-full bg-background text-foreground px-3 py-1 text-xs font-semibold shadow-elegant">
          <Sparkles className="h-3 w-3 text-primary" /> Most popular
        </div>
      )}
      <h3 className="font-display text-2xl font-bold">{plan.name}</h3>
      <p
        className={`mt-2 text-sm ${plan.featured ? "text-primary-foreground/80" : "text-muted-foreground"}`}
      >
        {plan.desc}
      </p>
      <div className="mt-6 flex items-baseline gap-1">
        <span className="font-display text-4xl font-bold 2xl:text-5xl">{plan.price}</span>
        <span
          className={`text-sm ${plan.featured ? "text-primary-foreground/70" : "text-muted-foreground"}`}
        >
          {plan.period}
        </span>
      </div>
      <ul className="mt-6 space-y-3">
        {plan.features.map((f) => (
          <li key={f} className="flex items-start gap-2.5 text-sm">
            <Check
              className={`h-4 w-4 mt-0.5 shrink-0 ${plan.featured ? "text-primary-foreground" : "text-primary"}`}
            />
            <span>{f}</span>
          </li>
        ))}
      </ul>
      <Link
        href={getWhatsAppUrl(`Hi Ride N Revive, I am interested in ${plan.name}. Please help me.`)}
        target="_blank"
        rel="noreferrer"
        className={`mt-6 inline-flex w-full items-center justify-center rounded-lg px-5 py-3 text-sm font-semibold transition 2xl:mt-8 ${plan.featured ? "bg-background text-foreground hover:opacity-90" : "bg-foreground text-background hover:opacity-90"}`}
      >
        Choose {plan.name}
      </Link>
    </div>
  );
}

export function PlanCardsGrid() {
  return (
    <div className="grid gap-6 lg:grid-cols-3">
      {plans.map((plan) => (
        <PlanCard key={plan.name} plan={plan} />
      ))}
    </div>
  );
}