import Link from "next/link";
import type { Plan } from "@/lib/pricing";

export default function Pricing({ plans }: { plans: Plan[] }) {
  return (
    <section className="relative py-24 border-t border-neutral-200 dark:border-neutral-800 bg-gradient-to-b from-white via-neutral-50 to-white dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
      <div className="container mx-auto max-w-6xl px-4 text-center">
        <h2 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
          Simple, flat pricing
        </h2>
        <div className="mt-12 grid gap-8 sm:grid-cols-3">
          {plans.map((p, i) => (
            <div
              key={p.id}
              className={`rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-8 shadow-sm hover:shadow-lg transition backdrop-blur animate-[fadeInUp_0.6s_ease_forwards]`}
              style={{ animationDelay: `${i * 100}ms` }}
            >
              {p.popular && (
                <div className="mb-3 inline-block rounded-full bg-gradient-to-r from-blue-600 to-purple-600 px-3 py-1 text-xs text-white">
                  Most popular
                </div>
              )}
              <div className="text-xl font-semibold">{p.name}</div>
              <div className="mt-3 flex items-baseline justify-center gap-1">
                <div className="text-4xl font-bold text-neutral-900 dark:text-white">{p.price}</div>
                {p.periodicity && (
                  <div className="text-sm text-neutral-500 dark:text-neutral-400">{p.periodicity}</div>
                )}
              </div>
              <p className="mt-3 text-sm text-neutral-600 dark:text-neutral-300">{p.description}</p>
              <ul className="mt-5 space-y-2 text-sm text-neutral-700 dark:text-neutral-300 text-left">
                {p.features.map((f, idx) => (
                  <li key={idx}>• {f}</li>
                ))}
              </ul>
              <Link
                href={p.cta.href}
                className="mt-8 inline-block w-full rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 text-sm font-medium hover:opacity-90 transition"
              >
                {p.cta.label}
              </Link>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}