import Link from "next/link"
import { Nav, Footer, BottomCta, LandingImage } from "../_components"

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

      {/* ── Hero ── */}
      <section className="pt-24 pb-16 md:pt-32 md:pb-20 px-6">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div className="space-y-6">
            <p className="text-sm font-semibold text-purple-600 tracking-wide uppercase">For personal fundraisers</p>
            <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
              You shared your link 50&nbsp;times. 3&nbsp;people donated.
            </h1>
            <p className="text-lg text-gray-500 leading-relaxed">
              People say &ldquo;I&apos;ll donate later.&rdquo; They mean it. But your LaunchGood link gets buried. We capture the promise and follow up until they actually&nbsp;pay.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 pt-2">
              <Link href="/signup" className="inline-flex items-center justify-center bg-gray-900 px-8 py-4 text-base font-bold text-white hover:bg-gray-800 transition-colors">
                Start free — takes 2 minutes
              </Link>
              <Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 transition-colors">
                See live demo
              </Link>
            </div>
          </div>
          <LandingImage src="/images/landing/11-fundraisers-hero.jpg" alt="Fundraiser sharing pledge link on phone with friend on London high street" aspect="square" />
        </div>
      </section>

      {/* ── The gap ── */}
      <section className="py-20 bg-gray-50 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">The gap between &ldquo;I&apos;ll donate&rdquo; and actually donating</h2>
          <div className="grid md:grid-cols-3 gap-px bg-gray-200">
            {[
              { label: "They say", desc: "\"I'll donate after work\"" },
              { label: "What happens", desc: "Life gets in the way. They forget. Your link is buried in chat." },
              { label: "With Pledge Now, Pay Later", desc: "WhatsApp reminder arrives. They tap. They pay. You see it happen." },
            ].map((s, i) => (
              <div key={s.label} className={`bg-white p-8 ${i === 2 ? "bg-gray-950 text-white" : ""}`}>
                <p className={`text-xs font-semibold tracking-wide uppercase mb-3 ${i === 2 ? "text-gray-400" : "text-gray-400"}`}>{s.label}</p>
                <p className={`text-base font-medium leading-relaxed ${i === 2 ? "text-white" : "text-gray-700"}`}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── How it works ── */}
      <section className="py-24 px-6">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-start">
          <div>
            <h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">How it works for fundraisers</h2>
            <div className="space-y-8">
              {[
                { n: "01", title: "Add your fundraising page", desc: "Paste your LaunchGood, Enthuse, JustGiving, or any URL. We brand the redirect to match." },
                { n: "02", title: "Share your pledge link", desc: "WhatsApp groups, Instagram bio, Twitter, email. Every link is trackable." },
                { n: "03", title: "People pledge an amount", desc: "They commit, then get redirected to your page to pay. Pledge recorded either way." },
                { n: "04", title: "We follow up for you", desc: "WhatsApp reminders. They tap \"I've Donated\" or reply PAID." },
                { n: "05", title: "You see who actually gave", desc: "Who pledged, who clicked through, who confirmed. No more guessing." },
              ].map((s) => (
                <div key={s.n} className="flex gap-5">
                  <p className="text-2xl font-black text-gray-200 flex-shrink-0 w-8">{s.n}</p>
                  <div>
                    <h3 className="text-sm font-bold text-gray-900">{s.title}</h3>
                    <p className="text-sm text-gray-500 mt-1">{s.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="space-y-6">
            <LandingImage src="/images/landing/12-fundraisers-redirect.jpg" alt="Hands holding phone in café showing fundraising page redirect" aspect="square" />
            <LandingImage src="/images/landing/13-fundraisers-dashboard.jpg" alt="Laptop showing pledge tracking dashboard with conversion funnel" aspect="video" />
          </div>
        </div>
      </section>

      {/* ── Before / After ── */}
      <section className="py-24 bg-gray-50 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">Why not just share the link directly?</h2>
          <div className="space-y-4">
            {[
              { before: "Share link → hope for the best", after: "Share link → capture pledge → auto follow-up → confirmed donation" },
              { before: "No idea who saw it vs who donated", after: "47 clicked, 23 pledged, 18 paid, 5 need a nudge" },
              { before: "One link, zero tracking", after: "Separate link per WhatsApp group, Instagram, email — see which converts" },
            ].map((r, i) => (
              <div key={i} className="grid md:grid-cols-2 gap-px bg-gray-200">
                <div className="bg-white p-6">
                  <p className="text-xs font-semibold text-gray-400 uppercase mb-2">Without</p>
                  <p className="text-sm text-gray-500">{r.before}</p>
                </div>
                <div className="bg-gray-950 p-6">
                  <p className="text-xs font-semibold text-gray-500 uppercase mb-2">With Pledge Now, Pay Later</p>
                  <p className="text-sm text-white font-medium">{r.after}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Platforms ── */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl font-black text-gray-900 tracking-tight mb-8">Donors pay on the platform they trust</h2>
          <p className="text-sm text-gray-500 mb-8">We capture the pledge. They pay on your page.</p>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-px bg-gray-200">
            {[
              { name: "LaunchGood", desc: "Islamic crowdfunding" },
              { name: "Enthuse", desc: "UK charity platform" },
              { name: "JustGiving", desc: "Personal fundraising" },
              { name: "GoFundMe", desc: "Emergency and personal" },
              { name: "Bank Transfer", desc: "Direct to your account" },
              { name: "Any URL", desc: "Your own website" },
            ].map((p) => (
              <div key={p.name} className="bg-white p-6">
                <p className="text-sm font-bold text-gray-900">{p.name}</p>
                <p className="text-xs text-gray-400 mt-0.5">{p.desc}</p>
              </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."
      />
      <Footer active="fundraisers" />
    </div>
  )
}
