import Link from "next/link";

const plans = [
  { name: "Free", price: "0", desc: "基础下载与公开资源", features: ["基础下载源", "公开更新日志", "每日限量"] },
  { name: "Pro", price: "29", desc: "适合重度下载与创作者", features: ["高速下载源", "历史版本全集", "优先更新提醒"] },
  { name: "Ultra", price: "99", desc: "团队与运营场景", features: ["多端授权", "批量下载能力", "运营面板预留接口"] },
];

export default function PricingPage() {
  return (
    <div className="space-y-8 py-8">
      <section className="text-center">
        <h1 className="mt-2 text-4xl font-bold tracking-tight">会员套餐与权益</h1>
        <p className="mx-auto mt-3 max-w-2xl text-sm text-slate-300">按需选择，普通下载免费可用。</p>
      </section>
      <section className="grid gap-4 md:grid-cols-3">
        {plans.map((plan, idx) => (
          <article key={plan.name} className={`card-glass ${idx === 1 ? "border-cyan-300/40" : ""}`}>
            <p className="text-sm text-slate-300">{plan.name}</p>
            <p className="mt-2 text-4xl font-bold">¥{plan.price}<span className="text-base text-slate-400">/月</span></p>
            <p className="mt-2 text-sm text-slate-300">{plan.desc}</p>
            <ul className="mt-4 space-y-2 text-sm text-slate-200">
              {plan.features.map((f) => <li key={f}>- {f}</li>)}
            </ul>
            <Link href={`/checkout?plan=${plan.name.toLowerCase()}&slug=nova-ai-studio`} className={`mt-5 block w-full text-center ${idx === 1 ? "cta-main" : "cta-sub"}`}>
              立即开通
            </Link>
          </article>
        ))}
      </section>
      <section className="card-glass flex flex-wrap items-center justify-between gap-3">
        <p className="text-sm text-slate-300">已有解锁码？可直接前往解锁中心。</p>
        <Link href="/unlock" className="cta-sub">去解锁中心</Link>
      </section>
    </div>
  );
}