import Link from "next/link"

const PERSONAS = [
  {
    slug: "charities",
    icon: "🕌",
    title: "Charity Manager",
    oneLiner: "You raise pledges at events. We make sure the money actually arrives.",
    color: "trust-blue",
    gradient: "from-trust-blue to-blue-600",
    tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
  },
  {
    slug: "fundraisers",
    icon: "❤️",
    title: "Personal Fundraiser",
    oneLiner: "You share a LaunchGood or JustGiving link. We track who actually donates.",
    color: "purple-600",
    gradient: "from-purple-600 to-pink-500",
    tags: ["LaunchGood", "Enthuse", "JustGiving", "Social sharing", "Conversion tracking"],
  },
  {
    slug: "volunteers",
    icon: "🙋",
    title: "Volunteer",
    oneLiner: "You help collect pledges. We show you exactly how much you raised.",
    color: "warm-amber",
    gradient: "from-warm-amber to-orange-500",
    tags: ["Personal link", "Live stats", "Leaderboard", "WhatsApp share"],
  },
  {
    slug: "donors",
    icon: "🤲",
    title: "Donor",
    oneLiner: "You pledged to give. We make it simple, safe, and on your schedule.",
    color: "success-green",
    gradient: "from-success-green to-emerald-500",
    tags: ["Pay when ready", "WhatsApp receipts", "Gift Aid +25%", "Full transparency"],
  },
]

export default function HomePage() {
  return (
    <div className="min-h-screen bg-white">
      {/* ── Nav ── */}
      <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
        <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-4">
          <div className="flex items-center gap-2.5">
            <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center">
              <span className="text-white text-base">🤲</span>
            </div>
            <span className="font-black text-sm">Pledge Now, Pay Later</span>
          </div>
          <div className="flex items-center gap-3">
            <Link href="/login" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Sign In</Link>
            <Link href="/signup" className="rounded-lg bg-trust-blue px-4 py-2 text-sm font-semibold text-white hover:bg-trust-blue/90 transition-colors">Get Started Free</Link>
          </div>
        </div>
      </header>

      {/* ── Hero ── */}
      <section className="py-20 md:py-28 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-7">
          <div className="inline-flex items-center gap-2 bg-trust-blue/5 border border-trust-blue/20 rounded-full px-4 py-1.5 text-xs font-medium text-trust-blue">
            🇬🇧 Built for UK charities &amp; fundraisers · Free forever
          </div>
          <h1 className="text-4xl md:text-6xl font-black text-gray-900 leading-[1.08] tracking-tight">
            Turn &ldquo;I&apos;ll donate&rdquo;<br />
            <span className="bg-gradient-to-r from-trust-blue to-blue-500 bg-clip-text text-transparent">into money in the bank.</span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
            Capture pledges at events, on WhatsApp, or anywhere. Automated reminders do the chasing. You see every penny from promise to payment.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
            <Link href="/signup" className="rounded-2xl bg-trust-blue px-8 py-4 text-base font-bold text-white hover:bg-trust-blue/90 transition-all shadow-xl shadow-trust-blue/20 hover:shadow-2xl hover:shadow-trust-blue/30 hover:-translate-y-0.5">
              Start Free — 2 min setup →
            </Link>
            <Link href="/login?demo=1" className="rounded-2xl border-2 border-gray-200 px-8 py-4 text-base font-bold text-gray-700 hover:border-trust-blue hover:text-trust-blue transition-all hover:-translate-y-0.5">
              See live demo
            </Link>
          </div>
          <p className="text-[11px] text-muted-foreground/60">No card required · Unlimited pledges · HMRC &amp; GDPR compliant</p>
        </div>
      </section>

      {/* ── The Problem — single stat ── */}
      <section className="border-y bg-gray-950 py-16 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-4">
          <p className="text-6xl md:text-8xl font-black text-white">30–50%</p>
          <p className="text-lg text-gray-400">
            of charity pledges <span className="text-white font-semibold">never convert into actual donations.</span>
          </p>
          <p className="text-sm text-gray-500 max-w-md mx-auto">
            No follow-up. No system. Donors meant it, but life got in the way. That changes now.
          </p>
        </div>
      </section>

      {/* ── 4 Personas ── */}
      <section className="py-20 px-4">
        <div className="max-w-5xl mx-auto space-y-10">
          <div className="text-center space-y-2">
            <h2 className="text-3xl md:text-4xl font-black text-gray-900">Built for how you actually work</h2>
            <p className="text-muted-foreground">Four people. One platform. Every pledge tracked.</p>
          </div>

          <div className="grid md:grid-cols-2 gap-5">
            {PERSONAS.map((p) => (
              <Link
                key={p.slug}
                href={`/for/${p.slug}`}
                className="group relative bg-white rounded-3xl border-2 border-gray-100 p-7 space-y-4 hover:border-gray-200 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
              >
                <div className="flex items-center gap-4">
                  <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${p.gradient} flex items-center justify-center text-2xl shadow-lg`}>
                    {p.icon}
                  </div>
                  <div>
                    <h3 className="text-lg font-black text-gray-900 group-hover:text-trust-blue transition-colors">{p.title}</h3>
                    <p className="text-sm text-muted-foreground">{p.oneLiner}</p>
                  </div>
                </div>
                <div className="flex flex-wrap gap-1.5">
                  {p.tags.map((t) => (
                    <span key={t} className="text-[10px] font-medium bg-gray-50 text-gray-500 px-2.5 py-1 rounded-full border border-gray-100">{t}</span>
                  ))}
                </div>
                <div className="flex items-center gap-1 text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity">
                  See how it works <span className="group-hover:translate-x-1 transition-transform">→</span>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ── How it works — 4 steps ── */}
      <section className="py-20 bg-gray-50 px-4">
        <div className="max-w-4xl mx-auto space-y-12">
          <div className="text-center">
            <h2 className="text-3xl font-black text-gray-900">Four steps. Zero pledges lost.</h2>
          </div>
          <div className="grid md:grid-cols-4 gap-8">
            {[
              { n: "1", icon: "🔗", title: "Create a pledge link", desc: "One link per campaign, table, volunteer, or WhatsApp group. Share anywhere." },
              { n: "2", icon: "🤲", title: "Donor pledges", desc: "Amount, Gift Aid, Zakat, payment schedule — all in a 60-second mobile flow." },
              { n: "3", icon: "💬", title: "WhatsApp follows up", desc: "Automated reminders with bank details. Donor replies PAID when done." },
              { n: "4", icon: "✅", title: "Money arrives", desc: "Live dashboard shows who pledged, who paid, who needs a nudge." },
            ].map((s) => (
              <div key={s.n} className="text-center space-y-3">
                <div className="relative inline-flex">
                  <div className="w-16 h-16 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-2xl shadow-sm">{s.icon}</div>
                  <div className="absolute -top-2 -right-2 w-7 h-7 rounded-full bg-trust-blue text-white text-xs font-black flex items-center justify-center shadow-lg">{s.n}</div>
                </div>
                <h3 className="font-bold text-sm">{s.title}</h3>
                <p className="text-xs text-muted-foreground leading-relaxed">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Compliance strip ── */}
      <section className="py-14 px-4 border-y">
        <div className="max-w-4xl mx-auto">
          <div className="text-center space-y-2 mb-8">
            <h2 className="text-2xl font-black text-gray-900">Compliance is not optional</h2>
            <p className="text-sm text-muted-foreground">Every pledge collects bulletproof consent. Ready for HMRC, ICO, and your trustees.</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {[
              { icon: "🎁", label: "Gift Aid", sub: "HMRC declaration + address", color: "border-success-green/20 bg-success-green/5" },
              { icon: "🌙", label: "Zakat", sub: "Per-campaign toggle", color: "border-trust-blue/20 bg-trust-blue/5" },
              { icon: "📧", label: "Email opt-in", sub: "GDPR · never pre-ticked", color: "border-gray-200 bg-gray-50" },
              { icon: "💬", label: "WhatsApp opt-in", sub: "PECR · reply STOP", color: "border-[#25D366]/20 bg-[#25D366]/5" },
            ].map((c) => (
              <div key={c.label} className={`rounded-2xl border-2 ${c.color} p-4 text-center space-y-1`}>
                <span className="text-2xl">{c.icon}</span>
                <p className="text-sm font-bold">{c.label}</p>
                <p className="text-[10px] text-muted-foreground">{c.sub}</p>
              </div>
            ))}
          </div>
          <p className="text-center text-[11px] text-muted-foreground mt-4">
            Every consent stored with exact text shown · timestamp · IP address · version number
          </p>
        </div>
      </section>

      {/* ── Payment flexibility ── */}
      <section className="py-16 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-8">
          <h2 className="text-3xl font-black text-gray-900">Donors pay when they&apos;re ready</h2>
          <div className="grid grid-cols-3 gap-4">
            {[
              { icon: "⚡", title: "Now", desc: "Bank transfer or external page", border: "border-trust-blue/20" },
              { icon: "📅", title: "Later", desc: "Pick a date — reminders sent automatically", border: "border-warm-amber/20" },
              { icon: "📆", title: "Monthly", desc: "2–12 instalments, each tracked separately", border: "border-success-green/20" },
            ].map((o) => (
              <div key={o.title} className={`rounded-2xl border-2 ${o.border} p-5 space-y-2 bg-white`}>
                <div className="text-3xl">{o.icon}</div>
                <h3 className="font-bold">{o.title}</h3>
                <p className="text-[11px] text-muted-foreground">{o.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Platforms ── */}
      <section className="py-14 bg-gray-50 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-6">
          <h2 className="text-2xl font-black text-gray-900">Works with your existing platform</h2>
          <div className="flex flex-wrap justify-center gap-3">
            {[
              { name: "Bank Transfer", icon: "🏦", c: "#1e40af" },
              { name: "LaunchGood", icon: "🌙", c: "#00C389" },
              { name: "Enthuse", icon: "💜", c: "#6B4FBB" },
              { name: "JustGiving", icon: "💛", c: "#AD29B6" },
              { name: "GoFundMe", icon: "💚", c: "#00B964" },
              { name: "Any URL", icon: "🔗", c: "#6b7280" },
            ].map((p) => (
              <div key={p.name} className="flex items-center gap-2 rounded-xl border px-4 py-2.5 bg-white" style={{ borderColor: p.c + "30" }}>
                <span className="text-lg">{p.icon}</span>
                <span className="text-sm font-medium">{p.name}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Final CTA ── */}
      <section className="py-20 bg-gradient-to-br from-gray-950 to-gray-900 px-4">
        <div className="max-w-2xl mx-auto text-center space-y-8">
          <h2 className="text-3xl md:text-4xl font-black text-white leading-tight">
            Every day without this,<br />you&apos;re losing pledges.
          </h2>
          <p className="text-gray-400 max-w-md mx-auto">
            Free forever. Two-minute setup. Works tonight.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/signup" className="rounded-2xl bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-all shadow-xl hover:-translate-y-0.5">
              Create Free Account →
            </Link>
            <Link href="/login?demo=1" className="rounded-2xl border-2 border-white/20 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all hover:-translate-y-0.5">
              See live demo
            </Link>
          </div>
        </div>
      </section>

      {/* ── Footer ── */}
      <footer className="py-8 px-4 border-t">
        <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
          <div className="flex items-center gap-2">
            <div className="h-6 w-6 rounded-lg bg-trust-blue flex items-center justify-center"><span className="text-white text-[10px]">🤲</span></div>
            <span>Pledge Now, Pay Later</span>
          </div>
          <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
            <Link href="/for/charities" className="hover:text-foreground">For Charities</Link>
            <Link href="/for/fundraisers" className="hover:text-foreground">For Fundraisers</Link>
            <Link href="/for/volunteers" className="hover:text-foreground">For Volunteers</Link>
            <Link href="/for/donors" className="hover:text-foreground">For Donors</Link>
            <Link href="/login" className="hover:text-foreground">Sign In</Link>
          </div>
          <span>© {new Date().getFullYear()} QuikCue Ltd</span>
        </div>
      </footer>
    </div>
  )
}
