import Link from "next/link"

export default function ForFundraisersPage() {
  return (
    <div className="min-h-screen bg-white">
      <Nav />

      {/* ── Hero ── */}
      <section className="py-20 md:py-28 px-4 bg-gradient-to-b from-purple-50 to-white">
        <div className="max-w-3xl mx-auto text-center space-y-7">
          <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-purple-600 to-pink-500 text-4xl shadow-xl shadow-purple-500/20">
            ❤️
          </div>
          <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
            You shared your link 50 times.<br />
            <span className="text-purple-600">3 people donated.</span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
            People say &ldquo;I&apos;ll donate later&rdquo; — and they mean it. But your LaunchGood link gets buried in their WhatsApp. Pledge Now, Pay Later captures that promise and follows up until they actually pay.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
            <Link href="/signup" className="rounded-2xl bg-purple-600 px-8 py-4 text-base font-bold text-white hover:bg-purple-700 transition-all shadow-xl shadow-purple-600/20 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-purple-600 hover:text-purple-600 transition-all hover:-translate-y-0.5">
              See live demo
            </Link>
          </div>
        </div>
      </section>

      {/* ── The gap ── */}
      <section className="py-16 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-8">
          <h2 className="text-2xl font-black text-gray-900">The gap between &ldquo;I&apos;ll donate&rdquo; and actually donating</h2>
          <div className="grid grid-cols-3 gap-4">
            {[
              { icon: "💬", label: "They say", desc: "\"I'll donate after work\"", bg: "bg-purple-50 border-purple-100" },
              { icon: "😴", label: "What happens", desc: "Life gets in the way. They forget.", bg: "bg-gray-50 border-gray-100" },
              { icon: "✅", label: "With PNPL", desc: "WhatsApp reminder → they tap → they pay", bg: "bg-success-green/5 border-success-green/20" },
            ].map((s) => (
              <div key={s.label} className={`rounded-2xl border-2 ${s.bg} p-5 space-y-2`}>
                <span className="text-2xl">{s.icon}</span>
                <p className="text-xs font-bold text-gray-500 uppercase">{s.label}</p>
                <p className="text-sm font-medium text-gray-900">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── How it works ── */}
      <section className="py-16 bg-gray-50 px-4">
        <div className="max-w-4xl mx-auto space-y-10">
          <div className="text-center">
            <h2 className="text-3xl font-black text-gray-900">How it works for fundraisers</h2>
          </div>
          <div className="space-y-6">
            {[
              { n: "1", title: "Add your fundraising page", desc: "Paste your LaunchGood, Enthuse, JustGiving, GoFundMe, or any URL. We brand the flow to match.", icon: "🔗" },
              { n: "2", title: "Share your pledge link", desc: "Send it in WhatsApp groups, Instagram bio, Twitter, email. Every link is trackable — see where pledges come from.", icon: "📲" },
              { n: "3", title: "People pledge an amount", desc: "They commit to a number. Then they're redirected to your fundraising page to actually pay. The pledge is recorded either way.", icon: "🤲" },
              { n: "4", title: "We follow up on your behalf", desc: "Automated WhatsApp messages remind them to complete the donation. They tap \"I've Donated\" or reply PAID.", icon: "💬" },
              { n: "5", title: "You see who actually gave", desc: "Dashboard shows: who pledged, who clicked through, who confirmed payment. No more guessing.", icon: "📊" },
            ].map((s) => (
              <div key={s.n} className="flex gap-5 items-start">
                <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-xl shadow-sm">{s.icon}</div>
                <div>
                  <div className="flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-purple-600 text-white text-xs font-black flex items-center justify-center">{s.n}</span>
                    <h3 className="font-bold">{s.title}</h3>
                  </div>
                  <p className="text-sm text-muted-foreground mt-1">{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Platforms ── */}
      <section className="py-16 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-8">
          <h2 className="text-2xl font-black text-gray-900">Donors pay on the platform they trust</h2>
          <p className="text-sm text-muted-foreground">We capture the pledge. They pay on your page. Branded per platform.</p>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
            {[
              { name: "LaunchGood", icon: "🌙", color: "#00C389", desc: "Islamic crowdfunding" },
              { name: "Enthuse", icon: "💜", color: "#6B4FBB", desc: "UK charity platform" },
              { name: "JustGiving", icon: "💛", color: "#AD29B6", desc: "Personal fundraising" },
              { name: "GoFundMe", icon: "💚", color: "#00B964", desc: "Emergency & personal" },
              { name: "Bank Transfer", icon: "🏦", color: "#1e40af", desc: "Direct to your account" },
              { name: "Any URL", icon: "🔗", color: "#6b7280", desc: "Your own website" },
            ].map((p) => (
              <div key={p.name} className="rounded-2xl border-2 p-5 text-center space-y-1" style={{ borderColor: p.color + "30" }}>
                <span className="text-3xl">{p.icon}</span>
                <p className="font-bold text-sm">{p.name}</p>
                <p className="text-[11px] text-muted-foreground">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── What makes this different ── */}
      <section className="py-16 bg-gray-50 px-4">
        <div className="max-w-3xl mx-auto space-y-8">
          <div className="text-center">
            <h2 className="text-2xl font-black text-gray-900">Why not just share the link directly?</h2>
          </div>
          <div className="space-y-4">
            {[
              { before: "Share link → hope for the best", after: "Share link → capture pledge → automated follow-up → confirmed donation" },
              { before: "No idea who saw it vs who donated", after: "See exactly: 47 clicked, 23 pledged, 18 paid, 5 need a nudge" },
              { before: "One link, no tracking", after: "Separate link per WhatsApp group, Instagram, email. See which converts best." },
            ].map((r, i) => (
              <div key={i} className="grid md:grid-cols-2 gap-3">
                <div className="rounded-xl bg-red-50 border border-red-100 p-4 text-sm">
                  <span className="text-xs font-bold text-danger-red">❌ Without</span>
                  <p className="text-muted-foreground mt-1">{r.before}</p>
                </div>
                <div className="rounded-xl bg-success-green/5 border border-success-green/20 p-4 text-sm">
                  <span className="text-xs font-bold text-success-green">✅ With Pledge Now, Pay Later</span>
                  <p className="text-gray-900 mt-1 font-medium">{r.after}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <BottomCta
        headline="Your supporters want to give."
        sub="Give them a reason to do it now — and a reminder if they don't. Free forever."
        color="purple-600"
      />
      <Footer active="fundraisers" />
    </div>
  )
}

function Nav() {
  return (
    <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">
        <Link href="/" 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>
        </Link>
        <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>
  )
}

function BottomCta({ headline, sub, color }: { headline: string; sub: string; color?: string }) {
  return (
    <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-6">
        <h2 className="text-3xl font-black text-white">{headline}</h2>
        <p className="text-gray-400 max-w-md mx-auto">{sub}</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 ${color ? `text-${color}` : "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>
  )
}

function Footer({ active }: { active?: string }) {
  const links = [
    { href: "/for/charities", label: "For Charities" },
    { href: "/for/fundraisers", label: "For Fundraisers" },
    { href: "/for/volunteers", label: "For Volunteers" },
    { href: "/for/donors", label: "For Donors" },
  ]
  return (
    <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">
        <Link href="/" 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>
        </Link>
        <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
          {links.map((l) => (
            <Link key={l.href} href={l.href} className={`hover:text-foreground ${active && l.href.includes(active) ? "font-medium text-foreground" : ""}`}>{l.label}</Link>
          ))}
        </div>
        <span>© {new Date().getFullYear()} QuikCue Ltd</span>
      </div>
    </footer>
  )
}
