import Link from "next/link";
import { ShieldHalf, QrCode, BarChart3, CheckCircle2 } from "lucide-react";
import { inr } from "@/lib/utils";

const PLANS = [
  { name: "Free", price: 0, products: "1 product", users: "1 user" },
  { name: "Starter", price: 999, products: "100 products", users: "3 users", popular: true },
  { name: "Growth", price: 2999, products: "1,000 products", users: "15 users" },
  { name: "Business", price: 5999, products: "Unlimited products", users: "50 users" },
];

export default function Landing() {
  return (
    <div className="min-h-screen bg-white">
      <header className="flex items-center justify-between px-6 md:px-12 py-5 border-b border-slate-100">
        <div className="flex items-center gap-2 font-extrabold text-xl">
          <ShieldHalf className="h-6 w-6 text-brand-600" /> VerifyPack
        </div>
        <div className="flex items-center gap-3">
          <Link href="/login" className="text-sm font-medium text-slate-600">Login</Link>
          <Link href="/signup" className="text-sm font-semibold bg-brand-600 text-white px-4 py-2 rounded-lg">
            Get Started
          </Link>
        </div>
      </header>

      <section className="max-w-5xl mx-auto text-center px-6 py-20">
        <span className="inline-block text-xs font-semibold text-brand-600 bg-brand-50 px-3 py-1 rounded-full">
          Digital Trust for Every Product
        </span>
        <h1 className="text-4xl md:text-6xl font-extrabold mt-6 leading-tight">
          Verify product authenticity<br />with a single scan
        </h1>
        <p className="text-slate-500 text-lg mt-5 max-w-2xl mx-auto">
          Generate unlimited QR codes for your product batches. Let consumers verify
          authenticity instantly — no app, no login.
        </p>
        <div className="flex gap-3 justify-center mt-8">
          <Link href="/signup" className="bg-brand-600 text-white px-6 py-3 rounded-xl font-semibold">
            Start free
          </Link>
          <Link href="/v/demo" className="border border-slate-200 px-6 py-3 rounded-xl font-semibold">
            See a verification page
          </Link>
        </div>
      </section>

      <section className="max-w-6xl mx-auto grid md:grid-cols-3 gap-6 px-6 pb-16">
        {[
          { icon: QrCode, t: "Unlimited QR codes", d: "Batch QR or unique per-pack serialized QRs. Zero per-code cost." },
          { icon: ShieldHalf, t: "Anti-counterfeit", d: "Consumers scan to confirm genuine, recalled, or unverified status." },
          { icon: BarChart3, t: "Live analytics", d: "Track scans by location, device and time across every product." },
        ].map(({ icon: Icon, t, d }) => (
          <div key={t} className="card p-6">
            <Icon className="h-8 w-8 text-brand-600" />
            <h3 className="font-bold mt-4">{t}</h3>
            <p className="text-slate-500 text-sm mt-2">{d}</p>
          </div>
        ))}
      </section>

      <section className="max-w-6xl mx-auto px-6 py-16">
        <h2 className="text-3xl font-extrabold text-center">Simple, transparent pricing</h2>
        <p className="text-center text-slate-500 mt-2">QR generation is always unlimited & free. You only pay for product capacity.</p>
        <div className="grid md:grid-cols-4 gap-5 mt-10">
          {PLANS.map((p) => (
            <div key={p.name}
              className={`card p-6 ${p.popular ? "ring-2 ring-brand-500" : ""}`}>
              {p.popular && <span className="text-xs font-bold text-brand-600">MOST POPULAR</span>}
              <h3 className="font-bold text-lg mt-1">{p.name}</h3>
              <div className="text-3xl font-extrabold mt-2">
                {p.price === 0 ? "Free" : inr(p.price)}
                {p.price > 0 && <span className="text-sm font-normal text-slate-400">/mo</span>}
              </div>
              <ul className="mt-4 space-y-2 text-sm text-slate-600">
                <li className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500" />{p.products}</li>
                <li className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500" />{p.users}</li>
                <li className="flex gap-2"><CheckCircle2 className="h-4 w-4 text-emerald-500" />Unlimited QR codes</li>
              </ul>
              <Link href="/signup"
                className="block text-center mt-6 py-2 rounded-lg bg-brand-600 text-white text-sm font-semibold">
                Choose {p.name}
              </Link>
            </div>
          ))}
        </div>
      </section>

      <footer className="border-t border-slate-100 py-8 text-center text-sm text-slate-400">
        © {new Date().getFullYear()} VerifyPack. All rights reserved.
      </footer>
    </div>
  );
}