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

/* ── Hero stats ── */
const HERO_STATS = [
  { stat: "30–50%", label: "of pledges never collected" },
  { stat: "60s", label: "to complete a pledge" },
  { stat: "£0", label: "cost to charities" },
  { stat: "2 min", label: "signup to first link" },
]

/* ── Personas — defined by what they DID, not their job title ── */
const PERSONAS = [
  {
    slug: "charities",
    scenario: "You organized the dinner",
    stat1: "\u00A350,000 pledged.",
    stat2: "\u00A322,000 collected.",
    copy: "The speeches landed. The pledges poured in. Then Monday came \u2014 and the spreadsheet started. We follow up automatically. They pay. You stay focused on the mission.",
    cta: "For charity organizers",
    image: "/images/landing/persona-01-dinner.jpg",
  },
  {
    slug: "fundraisers",
    scenario: "You shared the link",
    stat1: "23 said \u201CI\u2019ll donate.\u201D",
    stat2: "8 actually did.",
    copy: "You shared it on WhatsApp, posted on Instagram, mentioned it over dinner. People promised. Then life got busy. We track every promise and send the reminders \u2014 so you don\u2019t have to chase friends.",
    cta: "For personal fundraisers",
    image: "/images/landing/persona-02-phone.jpg",
  },
  {
    slug: "volunteers",
    scenario: "You were on the ground",
    stat1: "40 pledges collected.",
    stat2: "0 updates received.",
    copy: "You spent the evening going table to table. Smiling, explaining, handing out cards. You went home and never found out what happened next. With us, you see every payment \u2014 live.",
    cta: "For event volunteers",
    image: "/images/landing/persona-03-volunteer.jpg",
  },
  {
    slug: "organisations",
    scenario: "You claim the Gift Aid",
    stat1: "200 rows. 47 typos.",
    stat2: "6 hours every quarter.",
    copy: "Names, amounts, home addresses, declaration dates. Half the records are incomplete. Every quarter, you build the spreadsheet from scratch. We give you a one\u2011click HMRC export \u2014 every field, every time.",
    cta: "For treasurers",
    image: "/images/landing/persona-04-desk.jpg",
  },
]

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

      {/* ━━ HERO (dark) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="bg-gray-950 overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 pt-20 pb-16 md:pt-28 md:pb-20">
          <div className="grid md:grid-cols-12 gap-10 md:gap-12 items-start md:items-stretch">

            {/* ── Text column ── */}
            <div className="md:col-span-7 pt-2 md:pt-6 stagger-children">
              {/* Eyebrow — border-l-2 accent (signature pattern 1) */}
              <div className="border-l-2 border-promise-blue pl-3 mb-8">
                <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
                  Pledge collection for UK charities
                </p>
              </div>

              {/* Headline — Display scale */}
              <h1 className="text-[2.75rem] leading-[0.95] sm:text-6xl md:text-[4.25rem] lg:text-7xl font-black text-white tracking-tighter">
                Turn &ldquo;I&apos;ll donate&rdquo;<br className="hidden lg:block" /> into money<br className="hidden lg:block" /> in the bank.
              </h1>

              {/* Sub */}
              <p className="text-base md:text-lg text-gray-400 max-w-md mt-7 leading-relaxed">
                People pledge at events, over dinner, on WhatsApp. We make sure the money actually arrives.
              </p>

              {/* CTAs */}
              <div className="flex flex-col sm:flex-row gap-3 mt-9">
                <Link
                  href="/signup"
                  className="inline-flex items-center justify-center bg-white px-7 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors"
                >
                  Start free — takes 2 minutes
                </Link>
                <Link
                  href="/login?demo=1"
                  className="inline-flex items-center justify-center border border-gray-700 px-7 py-3.5 text-sm font-bold text-gray-400 hover:text-white hover:border-gray-500 transition-colors"
                >
                  See live demo
                </Link>
              </div>

              {/* Trust line — vertical separators */}
              <div className="flex items-center gap-4 mt-7 text-[11px] text-gray-600">
                <span>No card required</span>
                <span className="w-px h-3 bg-gray-800" />
                <span>HMRC compliant</span>
                <span className="w-px h-3 bg-gray-800" />
                <span>Free forever</span>
              </div>
            </div>

            {/* ── Image column ── */}
            <div className="md:col-span-5" style={{ opacity: 0, animation: "fadeUp 0.5s ease-out 0.25s forwards" }}>
              <div className="aspect-[3/4] md:aspect-auto md:h-full w-full relative overflow-hidden">
                <Image
                  src="/images/landing/00-hero.jpg"
                  alt="Payment received notification on phone at a charity gala dinner"
                  fill
                  className="object-cover"
                  sizes="(max-width: 768px) 100vw, 40vw"
                  quality={90}
                  priority
                />
              </div>
            </div>

          </div>
        </div>

        {/* Stat strip — gap-px pattern (signature pattern 2) */}
        <div className="border-t border-gray-800/50">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-800/50">
              {HERO_STATS.map((s) => (
                <div key={s.stat} className="bg-gray-950 py-6 px-6 text-center">
                  <p className="text-xl md:text-2xl font-black text-white tracking-tight">{s.stat}</p>
                  <p className="text-[11px] text-gray-500 mt-1">{s.label}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ━━ THE PLEDGE GAP — alternating editorial rows ━━━━━━━━━ */}
      <section className="py-20 md:py-28 px-6">
        <div className="max-w-7xl mx-auto">
          {/* Eyebrow — border-l-2 accent (signature pattern 1) */}
          <div className="border-l-2 border-promise-blue pl-3 mb-6">
            <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
              The pledge gap
            </p>
          </div>
          <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
            People don&apos;t break promises.
          </h2>
          <p className="text-3xl md:text-4xl font-black text-gray-400 tracking-tight mt-1">
            Systems do.
          </p>
          <p className="text-base text-gray-500 mt-4 max-w-lg">
            We built the missing system between &ldquo;I&apos;ll donate&rdquo; and the money arriving.
          </p>

          {/* Alternating image/text rows — gap-px between */}
          <div className="flex flex-col gap-px bg-gray-200 mt-14">
            {PERSONAS.map((p, i) => {
              const imgFirst = i % 2 === 0
              return (
                <Link
                  key={p.slug}
                  href={`/for/${p.slug}`}
                  className="group bg-white block"
                >
                  <div className="grid md:grid-cols-12 items-stretch">
                    {/* Image — 7 cols, cinematic */}
                    <div
                      className={`md:col-span-7 ${!imgFirst ? "md:order-2" : ""} relative overflow-hidden aspect-[2/1]`}
                    >
                      <Image
                        src={p.image}
                        alt={p.scenario}
                        fill
                        className="object-cover transition-opacity duration-300 group-hover:opacity-90"
                        sizes="(max-width: 768px) 100vw, 58vw"
                      />
                    </div>

                    {/* Text — 5 cols */}
                    <div
                      className={`md:col-span-5 ${!imgFirst ? "md:order-1" : ""} p-8 md:p-12 lg:p-14 flex flex-col justify-center`}
                    >
                      <h3 className="text-lg md:text-xl font-black text-gray-900 group-hover:text-promise-blue transition-colors">
                        {p.scenario}
                      </h3>

                      {/* Pain stats — the gap, visible contrast */}
                      <div className="mt-5 space-y-1">
                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-400 tracking-tight leading-tight">
                          {p.stat1}
                        </p>
                        <p className="text-xl md:text-2xl lg:text-3xl font-black text-gray-900 tracking-tight leading-tight">
                          {p.stat2}
                        </p>
                      </div>

                      <p className="text-sm text-gray-500 leading-relaxed mt-5">
                        {p.copy}
                      </p>

                      <p className="text-xs font-semibold text-promise-blue mt-6 group-hover:underline">
                        {p.cta} &rarr;
                      </p>
                    </div>
                  </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>

      {/* ━━ COMPLIANCE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="py-24 px-6">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <LandingImage src="/images/landing/06-main-pledge-form.jpg" alt="Person holding phone showing pledge form with Gift Aid and consent checkboxes" aspect="square" />
          <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">
            <LandingImage src="/images/landing/07-main-schedule-step.jpg" alt="Hands holding phone at kitchen table showing payment schedule options" aspect="square" />
          </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>
  )
}
