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

const PERSONAS = [
  {
    slug: "charities",
    title: "Charity Manager",
    oneLiner: "You raise pledges at events. We make sure the money actually arrives.",
    tags: ["Dashboard", "WhatsApp reminders", "Gift Aid", "Zakat", "HMRC export"],
    image: "charity-manager-gala-dinner",
  },
  {
    slug: "fundraisers",
    title: "Personal Fundraiser",
    oneLiner: "You share a LaunchGood or JustGiving link. We track who actually donates.",
    tags: ["LaunchGood", "Enthuse", "JustGiving", "Social sharing", "Conversion tracking"],
    image: "fundraiser-sharing-phone",
  },
  {
    slug: "volunteers",
    title: "Volunteer",
    oneLiner: "You help collect pledges at events. We show you exactly how much you raised.",
    tags: ["Personal link", "Live stats", "Leaderboard", "WhatsApp share"],
    image: "volunteer-event-table",
  },
  {
    slug: "organisations",
    title: "Organisation",
    oneLiner: "You coordinate pledges across multiple charities or departments. We track every commitment.",
    tags: ["Multi-party", "Fund allocation", "Pipeline view", "Instalments"],
    image: "org-boardroom-meeting",
  },
]

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

      {/* ── Hero ── */}
      <section className="pt-24 pb-20 md:pt-32 md:pb-28 px-6">
        <div className="max-w-3xl mx-auto space-y-8">
          <p className="text-sm font-semibold text-trust-blue tracking-wide uppercase">
            Built for UK charities &amp; fundraisers · Free forever
          </p>
          <h1 className="text-5xl md:text-7xl font-black text-gray-900 leading-[1.05] tracking-tight">
            Turn &ldquo;I&apos;ll donate&rdquo;<br />
            into money in&nbsp;the&nbsp;bank.
          </h1>
          <p className="text-xl text-gray-500 max-w-2xl leading-relaxed">
            Capture pledges at events, on WhatsApp, or anywhere online. Automated reminders chase the money. You see every penny from promise to&nbsp;payment.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 pt-2">
            <Link href="/signup" className="inline-flex items-center justify-center rounded-lg 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 rounded-lg border border-gray-300 px-8 py-4 text-base font-bold text-gray-700 hover:border-gray-900 hover:text-gray-900 transition-colors">
              See live demo
            </Link>
          </div>
          <p className="text-xs text-gray-400">No card required · Unlimited pledges · HMRC &amp; GDPR compliant</p>
        </div>
      </section>

      {/* ── Hero image placeholder ── */}
      <section className="px-6 pb-20">
        <div className="max-w-5xl mx-auto">
          <ImagePlaceholder aspect="video" label="Dashboard screenshot — live pledge pipeline" />
        </div>
      </section>

      {/* ── Stat ── */}
      <section className="bg-gray-950 py-20 px-6">
        <div className="max-w-3xl mx-auto text-center space-y-5">
          <p className="text-7xl md:text-9xl font-black text-white tracking-tighter">30–50%</p>
          <p className="text-xl text-gray-400">
            of charity pledges <span className="text-white font-semibold">never convert into donations.</span>
          </p>
          <p className="text-sm text-gray-600 max-w-md mx-auto">
            No follow-up system. Donors meant it, but life got in the way.
          </p>
        </div>
      </section>

      {/* ── 4 Personas ── */}
      <section className="py-24 px-6">
        <div className="max-w-5xl mx-auto space-y-14">
          <div className="max-w-2xl">
            <h2 className="text-4xl font-black text-gray-900 tracking-tight">Built for how you actually work</h2>
            <p className="text-lg text-gray-500 mt-3">Four roles. One platform. Every pledge tracked.</p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {PERSONAS.map((p) => (
              <Link
                key={p.slug}
                href={`/for/${p.slug}`}
                className="group block bg-white border border-gray-200 hover:border-gray-900 transition-colors"
              >
                <ImagePlaceholder aspect="video" label={p.image} />
                <div className="p-6 space-y-3">
                  <h3 className="text-lg font-black text-gray-900 group-hover:text-trust-blue transition-colors">{p.title}</h3>
                  <p className="text-sm text-gray-500 leading-relaxed">{p.oneLiner}</p>
                  <div className="flex flex-wrap gap-2">
                    {p.tags.map((t) => (
                      <span key={t} className="text-[11px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">{t}</span>
                    ))}
                  </div>
                  <p className="text-sm font-semibold text-trust-blue opacity-0 group-hover:opacity-100 transition-opacity pt-1">
                    Learn more →
                  </p>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ── How it works ── */}
      <section className="py-24 bg-gray-50 px-6">
        <div className="max-w-5xl mx-auto">
          <div className="max-w-2xl mb-16">
            <h2 className="text-4xl font-black text-gray-900 tracking-tight">Four steps. Zero pledges lost.</h2>
          </div>
          <div className="grid md:grid-cols-4 gap-10">
            {[
              { n: "01", title: "Create a pledge link", desc: "One link per campaign, table, volunteer, or WhatsApp group. Share anywhere." },
              { n: "02", title: "Donor pledges", desc: "Amount, Gift Aid, Zakat, schedule — 60-second mobile flow. No app download." },
              { n: "03", title: "WhatsApp follows up", desc: "Automated reminders with bank details. They reply PAID when done." },
              { n: "04", title: "Money arrives", desc: "Live dashboard. Who pledged, who paid, who needs a nudge." },
            ].map((s) => (
              <div key={s.n} className="space-y-4">
                <p className="text-4xl font-black text-gray-200">{s.n}</p>
                <h3 className="text-base font-bold text-gray-900">{s.title}</h3>
                <p className="text-sm text-gray-500 leading-relaxed">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Split: Image + compliance ── */}
      <section className="py-24 px-6">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <ImagePlaceholder aspect="square" label="Pledge form — Gift Aid, Zakat, consent checkboxes" />
          <div className="space-y-8">
            <div>
              <h2 className="text-3xl font-black text-gray-900 tracking-tight">Compliance is not optional</h2>
              <p className="text-gray-500 mt-3">Every pledge collects bulletproof consent. Ready for HMRC, ICO, and your trustees.</p>
            </div>
            <div className="space-y-5">
              {[
                { label: "Gift Aid", sub: "HMRC model declaration, home address, timestamped. One-click CSV for claiming." },
                { label: "Zakat", sub: "Per-campaign toggle. Donors tick one checkbox. Tracked separately in reports." },
                { label: "Email consent", sub: "GDPR compliant. Separate opt-in, never pre-ticked. Full audit trail." },
                { label: "WhatsApp consent", sub: "PECR compliant. Separate opt-in. Reply STOP to opt out. No sends without permission." },
              ].map((c) => (
                <div key={c.label} className="border-l-2 border-gray-900 pl-4">
                  <p className="text-sm font-bold text-gray-900">{c.label}</p>
                  <p className="text-xs text-gray-500 mt-0.5">{c.sub}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── Payment flexibility ── */}
      <section className="py-24 bg-gray-50 px-6">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div className="space-y-6 order-2 md:order-1">
            <h2 className="text-3xl font-black text-gray-900 tracking-tight">Donors pay when they&apos;re ready</h2>
            <div className="space-y-4">
              {[
                { title: "Pay now", desc: "Bank transfer or redirect to their fundraising page." },
                { title: "Pick a date", desc: "\"I'll pay on payday\" — WhatsApp reminder sent automatically." },
                { title: "Monthly instalments", desc: "Split into 2–12 payments. Each one tracked and reminded separately." },
              ].map((o) => (
                <div key={o.title} className="border-l-2 border-gray-900 pl-4">
                  <p className="text-sm font-bold text-gray-900">{o.title}</p>
                  <p className="text-xs text-gray-500 mt-0.5">{o.desc}</p>
                </div>
              ))}
            </div>
          </div>
          <div className="order-1 md:order-2">
            <ImagePlaceholder aspect="square" label="Schedule step — now, date, monthly options" />
          </div>
        </div>
      </section>

      {/* ── Platforms ── */}
      <section className="py-20 px-6 border-t">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-10">
            <h2 className="text-2xl font-black text-gray-900">Works with your existing platform</h2>
          </div>
          <div className="flex flex-wrap justify-center gap-4">
            {["Bank Transfer (UK)", "LaunchGood", "Enthuse", "JustGiving", "GoFundMe", "Any URL"].map((p) => (
              <div key={p} className="border border-gray-200 px-5 py-3 text-sm font-medium text-gray-700">{p}</div>
            ))}
          </div>
        </div>
      </section>

      <BottomCta />
      <Footer />
    </div>
  )
}