"use client"

import Link from "next/link"
import Image from "next/image"
import { useState, useEffect, useRef, useCallback } from "react"
import { Nav, Footer } from "./for/_components"
import { Landmark, Globe } from "lucide-react"

/* ── 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 ── */
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/brand/event-01-speaker-passion.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/brand/ramadan-05-charity-collection.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/brand/event-06-volunteer-serving.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/brand/ops-03-laptop-late-night.jpg",
  },
]

/* ── FAQ ── */
const FAQS = [
  {
    q: "How is this free? What\u2019s the catch?",
    a: "No catch. No tiers. No \u201Cupgrade to unlock.\u201D The tool is genuinely free because it helps us identify charities that need broader technology support. If your org grows beyond pledge collection, we offer fractional Head of Technology services \u2014 but that\u2019s a separate conversation you\u2019d start, not us.",
  },
  {
    q: "Will my donors actually use this?",
    a: "They scan a QR code or tap a link. Three screens: amount, payment method, email or phone. 60 seconds, done. No app download, no account creation. We\u2019ve designed it for the least tech-confident person at your event.",
  },
  {
    q: "Is this GDPR and HMRC compliant?",
    a: "Yes. Gift Aid declarations use the exact HMRC model wording with timestamped consent. Email and WhatsApp opt-ins are separate, never pre-ticked, with full audit trails. Data is stored on UK-hosted infrastructure.",
  },
  {
    q: "We already use JustGiving / LaunchGood / a CRM.",
    a: "We\u2019re not replacing any of those. We\u2019re the layer between \u201CI\u2019ll donate\u201D and the money reaching your platform. Donors can be redirected to your existing fundraising page to pay. We just make sure they don\u2019t forget.",
  },
  {
    q: "How long does setup take?",
    a: "Two minutes. Create an account, name your first event, generate a pledge link. You can test the donor flow on your own phone immediately.",
  },
  {
    q: "What happens to donor data?",
    a: "You own it. Export everything as CSV anytime. We never sell or share donor data. When you delete your account, the data goes with it.",
  },
]

const GALLERY_IMAGES = [
  { src: "/images/brand/life-04-family-dinner.jpg", alt: "Multi-generational family sharing dinner at home" },
  { src: "/images/brand/everyday-03-school-gate.jpg", alt: "Parents chatting at the school gate" },

  { src: "/images/brand/intergen-01-grandma-cooking.jpg", alt: "Grandmother teaching granddaughter to cook" },
  { src: "/images/brand/everyday-04-nhs-nurse.jpg", alt: "NHS nurse on a busy shift" },
  { src: "/images/brand/life-05-eid-morning.jpg", alt: "Eid morning celebrations outside the mosque" },
  { src: "/images/brand/sport-01-football.jpg", alt: "Weekend football in the park" },
  { src: "/images/brand/season-02-rainy-commute.jpg", alt: "Rainy London commute" },
  { src: "/images/brand/intergen-02-walking-together.jpg", alt: "Grandfather and grandson walking together" },
  { src: "/images/brand/ramadan-04-suhoor-kitchen.jpg", alt: "Pre-dawn suhoor preparation in the kitchen" },
  { src: "/images/brand/everyday-01-barbershop.jpg", alt: "Local barbershop conversation" },
  { src: "/images/brand/youth-02-mentoring.jpg", alt: "Young mentor working with a student" },
  { src: "/images/brand/life-02-food-prep.jpg", alt: "Women preparing food in the community kitchen" },
  { src: "/images/brand/season-03-park-summer.jpg", alt: "Summer afternoon in the park" },
  { src: "/images/brand/everyday-05-taxi-driver.jpg", alt: "Taxi driver between fares" },
  { src: "/images/brand/sacred-03-dua-hands.jpg", alt: "Hands raised in quiet dua" },
  { src: "/images/brand/intergen-03-tech-help.jpg", alt: "Grandchild helping elder with a phone" },
  { src: "/images/brand/sport-03-cricket-park.jpg", alt: "Cricket match in the park" },
  { src: "/images/brand/everyday-02-corner-shop.jpg", alt: "Corner shop chat with the shopkeeper" },

  { src: "/images/brand/life-06-charity-shop.jpg", alt: "Browsing the local charity shop" },
  { src: "/images/brand/youth-03-childrens-class.jpg", alt: "Children's class at the community centre" },
  { src: "/images/brand/season-01-winter-coats.jpg", alt: "Bundled up in winter coats" },
  { src: "/images/brand/everyday-06-graduation.jpg", alt: "Graduation day with the whole family" },
  { src: "/images/brand/intergen-04-mosque-elders.jpg", alt: "Elders gathered at the mosque" },
  { src: "/images/brand/sacred-01-wudu.jpg", alt: "Wudu before prayer" },
  { src: "/images/brand/sport-02-sisters-gym.jpg", alt: "Sisters gym session" },
  { src: "/images/brand/life-01-mosque-exterior.jpg", alt: "The mosque at golden hour" },
  { src: "/images/brand/season-04-snow-mosque.jpg", alt: "Snow falling outside the mosque" },
  { src: "/images/brand/youth-01-workshop.jpg", alt: "Youth workshop in full swing" },
]

const SLIDE_DIR: [string, string] = ["translateX(100%)", "translateX(-100%)"] // slide from right
const SLIDE_SPEED = 150 // ms — fast snap-slide
const SLIDE_INTERVAL = 3500

function GallerySlideshow() {
  const [idx, setIdx] = useState(0)
  const [prevIdx, setPrevIdx] = useState(-1)
  const [phase, setPhase] = useState<"idle" | "prep" | "go">("idle")
  const dirRef = useRef(SLIDE_DIR)
  const inRef = useRef<HTMLDivElement>(null)
  const outRef = useRef<HTMLDivElement>(null)

  const advance = useCallback(() => {
    setIdx((i) => { setPrevIdx(i); return (i + 1) % GALLERY_IMAGES.length })
    setPhase("prep")
  }, [])

  useEffect(() => {
    if (phase === "prep") {
      if (inRef.current) { inRef.current.style.transition = "none"; inRef.current.style.transform = dirRef.current[0] }
      if (outRef.current) { outRef.current.style.transition = "none"; outRef.current.style.transform = "translate(0,0)" }
      requestAnimationFrame(() => requestAnimationFrame(() => setPhase("go")))
    }
    if (phase === "go") {
      const t = `transform ${SLIDE_SPEED}ms cubic-bezier(0.16, 1, 0.3, 1)`
      if (inRef.current) { inRef.current.style.transition = t; inRef.current.style.transform = "translate(0,0)" }
      if (outRef.current) { outRef.current.style.transition = t; outRef.current.style.transform = dirRef.current[1] }
      const timer = setTimeout(() => { setPrevIdx(-1); setPhase("idle") }, SLIDE_SPEED + 10)
      return () => clearTimeout(timer)
    }
  }, [phase])

  useEffect(() => {
    const t = setInterval(advance, SLIDE_INTERVAL)
    return () => clearInterval(t)
  }, [advance])

  return (
    <div className="relative min-h-[280px] md:min-h-[360px] overflow-hidden bg-gray-100">
      {prevIdx !== -1 && (
        <div ref={outRef} className="absolute inset-0 z-[1] will-change-transform">
          <Image src={GALLERY_IMAGES[prevIdx].src} alt={GALLERY_IMAGES[prevIdx].alt} fill className="object-cover" sizes="(max-width: 768px) 100vw, 50vw" />
        </div>
      )}
      <div ref={inRef} className="absolute inset-0 z-[2] will-change-transform">
        <Image src={GALLERY_IMAGES[idx].src} alt={GALLERY_IMAGES[idx].alt} fill className="object-cover" sizes="(max-width: 768px) 100vw, 50vw" priority={idx === 0} />
      </div>
    </div>
  )
}

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

      {/* ━━ HERO — The hook is the headline ━━━━━━━━━━━━━━━━━━━━━━
          Two-line gut punch: the promise, then the loss.
          Everything else serves that moment of recognition.
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="bg-white">
        <div className="max-w-7xl mx-auto px-6 pt-10 md:pt-16 lg:pt-20">
          {/* Hook — full width, nothing competing */}
          <h1 className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-900 tracking-tighter">
            Last night they pledged&nbsp;£50k.
          </h1>
          <p className="text-[2.75rem] leading-[0.92] sm:text-6xl md:text-7xl lg:text-8xl font-black text-gray-300 tracking-tighter mt-1">
            Half won&apos;t arrive.
          </p>

          {/* Body — image left, copy + CTAs right */}
          <div className="grid md:grid-cols-5 gap-0 mt-8 md:mt-10">
            <div className="md:col-span-3 relative aspect-[16/10] md:aspect-auto md:min-h-[400px] overflow-hidden">
              <Image
                src="/images/brand/product-pledge-03-couple-discussing.jpg"
                alt="Couple at a charity dinner leaning in together over a phone, a Donate Here QR code card on the table between plates — the moment a pledge is made"
                fill
                className="object-cover"
                sizes="(max-width: 768px) 100vw, 60vw"
                quality={90}
                priority
              />
            </div>
            <div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
              <p className="text-base text-gray-400 leading-relaxed">
                People pledge at dinners, over chai, on WhatsApp. We follow up automatically so the money actually reaches your&nbsp;cause.
              </p>
              <p className="text-2xl sm:text-3xl font-black text-white tracking-tight mt-6">
                We fix&nbsp;that.
              </p>

              <div className="flex gap-3 mt-8">
                <Link
                  href="/signup"
                  className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
                >
                  Start free
                </Link>
                <Link
                  href="/login?demo=1"
                  className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
                >
                  Live demo
                </Link>
              </div>

              <div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
                <span>No card required</span>
                <span className="w-px h-3 bg-gray-700" />
                <span>HMRC compliant</span>
                <span className="w-px h-3 bg-gray-700" />
                <span>Free forever</span>
              </div>
            </div>
          </div>

          {/* Stats — flush underneath, same width */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-gray-200">
            {HERO_STATS.map((s) => (
              <div key={s.stat} className="bg-white py-5 px-6">
                <p className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">{s.stat}</p>
                <p className="text-[11px] text-gray-400 mt-0.5">{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ━━ WHERE PLEDGES HAPPEN — Four moments, one truth ━━━━━━
          Each image is a specific moment where someone says "I'll
          donate." These aren't decoration — they're the origin 
          story of every lost pledge we exist to recover.
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="pt-24 md:pt-32 pb-0 px-6 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="border-l-2 border-generosity-gold pl-3 mb-6">
            <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
              Where pledges happen
            </p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-1.5">
            {[
              { src: "/images/brand/event-03-table-conversation.jpg", alt: "Friends leaning in over dinner at a fundraising gala — the moment someone says I'll donate", label: "At the dinner table" },
              { src: "/images/brand/life-03-friday-prayer.jpg", alt: "Community streaming out after Friday prayer, the weekly moment where charity appeals land", label: "After Jumuah" },
              { src: "/images/brand/modern-04-whatsapp-group.jpg", alt: "Hands holding phone in a WhatsApp conversation — where most pledge links get shared and buried", label: "In the group chat" },
              { src: "/images/brand/outdoor-04-cake-sale.jpg", alt: "Community bake sale with volunteers and families — everyday fundraising where promises are made face to face", label: "At the bake sale" },
            ].map((img) => (
              <div key={img.src} className="relative aspect-[4/3] overflow-hidden group">
                <Image
                  src={img.src}
                  alt={img.alt}
                  fill
                  className="object-cover"
                  sizes="(max-width: 768px) 50vw, 25vw"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-gray-950/60 to-transparent" />
                <div className="absolute bottom-0 left-0 p-4">
                  <p className="text-[11px] font-semibold text-white/90 tracking-wide">{img.label}</p>
                </div>
              </div>
            ))}
          </div>
          <p className="text-center text-sm text-gray-400 mt-6 max-w-lg mx-auto">
            Pledges happen in these moments. We make sure they&apos;re not lost.
          </p>
        </div>
      </section>

      {/* ━━ THE PLEDGE GAP — persona cards with brand photography ━━ */}
      <section className="pt-24 md:pt-32 pb-0 px-6">
        <div className="max-w-5xl mx-auto">
          <div className="border-l-2 border-generosity-gold 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-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
            Systems do.
          </p>
          <p className="text-base text-gray-500 leading-relaxed mt-4 max-w-lg">
            We built the missing system between &ldquo;I&apos;ll donate&rdquo; and the money&nbsp;arriving.
          </p>

          <div className="mt-14">
            {PERSONAS.flatMap((p, i) => {
              const els = [
                <div
                  key={p.slug}
                  className="sticky md:sticky"
                  style={{ top: `${72 + i * 28}px`, zIndex: i + 1 }}
                >
                  <Link
                    href={`/for/${p.slug}`}
                    className="group block bg-white overflow-hidden shadow-sm"
                  >
                    <div className="flex flex-col md:flex-row">
                      {/* Image — brand photography, generous sizing */}
                      <div className="md:w-1/2 relative overflow-hidden min-h-[260px] md:min-h-[440px]">
                        <Image
                          src={p.image}
                          alt={p.scenario}
                          fill
                          className="object-cover group-hover:scale-[1.02] transition-transform duration-700"
                          sizes="(max-width: 768px) 100vw, 50vw"
                        />
                        {/* Warm tint on hover */}
                        <div className="absolute inset-0 bg-generosity-gold/0 group-hover:bg-generosity-gold/5 transition-colors duration-500" />
                      </div>
                      {/* Text */}
                      <div className="md:w-1/2 p-8 md:p-12 lg:p-16 flex flex-col justify-center bg-white">
                        <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-400 mb-4">
                          {p.cta}
                        </p>
                        <h3 className="text-xl md:text-2xl font-black text-gray-900 tracking-tight group-hover:text-promise-blue transition-colors">
                          {p.scenario}
                        </h3>
                        <div className="mt-6 space-y-1">
                          <p className="text-2xl md:text-3xl lg:text-4xl font-black text-gray-300 tracking-tight leading-tight">
                            {p.stat1}
                          </p>
                          <p className="text-2xl md:text-3xl lg:text-4xl font-black text-gray-900 tracking-tight leading-tight">
                            {p.stat2}
                          </p>
                        </div>
                        <p className="text-sm text-gray-500 leading-relaxed mt-6 max-w-sm">
                          {p.copy}
                        </p>
                        <div className="mt-8">
                          <span className="inline-flex items-center text-sm font-semibold text-promise-blue group-hover:underline">
                            Learn more
                            <svg className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
                          </span>
                        </div>
                      </div>
                    </div>
                  </Link>
                </div>,
              ]
              if (i < PERSONAS.length - 1) {
                els.push(<div key={`sp-${i}`} className="h-6" aria-hidden="true" />)
              }
              return els
            })}
            <div className="h-[20vh]" aria-hidden="true" />
          </div>
        </div>
      </section>

      {/* ━━ HOW IT WORKS — with brand photography ━━━━━━━━━━━━━━━ */}
      <section className="py-24 md:py-32 bg-gray-50 px-6">
        <div className="max-w-5xl mx-auto">
          <div className="max-w-2xl mb-16 md:mb-20">
            <div className="border-l-2 border-generosity-gold pl-3 mb-6">
              <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
                How it works
              </p>
            </div>
            <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
              Four steps.
            </h2>
            <p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
              Zero pledges lost.
            </p>
          </div>

          <div className="space-y-6 md:space-y-0">
            {[
              {
                n: "01",
                title: "Create a pledge link",
                desc: "One link per campaign, table, volunteer, or WhatsApp group. Share it anywhere \u2014 print, text, post.",
                detail: "Takes 30 seconds",
                image: "/images/brand/product-setup-05-briefing-volunteers.jpg",
                alt: "Event organiser briefing young volunteers with QR code cards before a fundraising dinner",
              },
              {
                n: "02",
                title: "Donor pledges in 60 seconds",
                desc: "Amount, Gift Aid, Zakat, payment schedule. Three screens on their phone. No app download. No account.",
                detail: "Works on any phone",
                image: "/images/brand/product-pledge-01-scanning-table.jpg",
                alt: "Guest at a charity dinner scanning a QR code on the table with their phone, fairy lights in the background",
              },
              {
                n: "03",
                title: "Automatic follow-up",
                desc: "Four-step reminder sequence with your bank details attached. They pay when ready. You never send an awkward text.",
                detail: "Stops when they pay",
                image: "/images/brand/digital-03-notification-smile.jpg",
                alt: "Young man at a London bus stop smiling at his phone — the moment a gentle WhatsApp reminder lands and he thinks oh right, I need to do that",
              },
              {
                n: "04",
                title: "Money arrives",
                desc: "Upload your bank statement. We match payments to pledges automatically. Live dashboard shows who paid, who hasn\u2019t.",
                detail: "One-click Gift Aid export",
                image: "/images/brand/impact-02-thank-you-letter.jpg",
                alt: "Woman reading a hand-drawn thank-you card under a warm desk lamp — the quiet moment that happens when the money gets through",
              },
            ].map((s, i) => (
              <div key={s.n} className="grid md:grid-cols-2 gap-0">
                <div className={`relative overflow-hidden min-h-[260px] md:min-h-[380px] ${i % 2 === 1 ? "md:order-1" : "md:order-2"}`}>
                  <Image
                    src={s.image}
                    alt={s.alt}
                    fill
                    className="object-cover"
                    sizes="(max-width: 768px) 100vw, 50vw"
                  />
                </div>
                <div className={`bg-white p-8 md:p-12 lg:p-16 flex flex-col justify-center ${i % 2 === 1 ? "md:order-2" : "md:order-1"}`}>
                  <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-generosity-gold mb-4">
                    Step {s.n}
                  </p>
                  <h3 className="text-xl md:text-2xl font-black text-gray-900 tracking-tight">
                    {s.title}
                  </h3>
                  <p className="text-sm text-gray-500 leading-relaxed mt-4 max-w-sm">
                    {s.desc}
                  </p>
                  <p className="text-[11px] font-semibold text-promise-blue tracking-wide mt-5">
                    {s.detail}
                  </p>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-12 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
            <Link
              href="/signup"
              className="inline-flex items-center justify-center bg-promise-blue px-7 py-3.5 text-sm font-bold text-white hover:bg-blue-900 transition-colors"
            >
              Start free — takes 2 minutes
            </Link>
            <p className="text-[11px] text-gray-400">
              No card required. Works with your existing bank account.
            </p>
          </div>
        </div>
      </section>

      {/* ━━ COMPLIANCE — The audit you're not ready for ━━━━━━━━━━
          Psychology: trigger the specific fear every treasurer has
          (the HMRC letter, the trustee question, the missing field)
          then resolve it with structure that looks like a compliance
          document, not a marketing grid. Zero photos — the absence
          of decoration IS the design. This is serious.
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="py-24 md:py-32 px-6">
        <div className="max-w-5xl mx-auto">
          <div className="border-l-2 border-generosity-gold pl-3 mb-6">
            <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
              Compliance
            </p>
          </div>
          <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
            Your next HMRC audit.
          </h2>
          <p className="text-4xl md:text-5xl font-black text-gray-400 tracking-tight mt-1">
            We&apos;ve already done the paperwork.
          </p>
          <p className="text-base text-gray-500 leading-relaxed mt-4 max-w-lg">
            Every pledge captures the exact data your trustees, HMRC, and the ICO require. No manual entry. No missing fields. No&nbsp;3am spreadsheet&nbsp;panic.
          </p>

          {/* The compliance ledger — looks like a formal document, not marketing */}
          <div className="mt-14 border-t-2 border-gray-900">
            {[
              {
                code: "HMRC",
                title: "Gift Aid declarations",
                desc: "Exact model wording. Full name, home address, postcode, timestamped consent. Donors confirm with one tap — you get a one-click CSV ready for HMRC.",
                result: "+25% on every eligible pledge",
              },
              {
                code: "GDPR",
                title: "Data consent & audit trail",
                desc: "Separate opt-in per channel. Never pre-ticked. Every consent recorded with timestamp, IP address, and the exact text the donor saw.",
                result: "ICO audit-ready",
              },
              {
                code: "PECR",
                title: "WhatsApp & email permissions",
                desc: "No message sent without explicit permission. Reply STOP cancels instantly. Consent and unsubscribe events logged permanently.",
                result: "Zero unsolicited messages",
              },
              {
                code: "Zakat",
                title: "Zakat fund separation",
                desc: "Per-campaign toggle. Donors tick one checkbox. Zakat pledges tracked in their own column across every report and export. Never mixed with general funds.",
                result: "Separate ledger, always",
              },
            ].map((c) => (
              <div key={c.code} className="grid md:grid-cols-[140px,1fr] border-b border-gray-200">
                <div className="pt-6 pb-2 md:py-8 pr-6">
                  <p className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight">{c.code}</p>
                </div>
                <div className="pb-6 md:py-8 md:border-l md:border-gray-200 md:pl-8">
                  <h3 className="text-base font-bold text-gray-900">{c.title}</h3>
                  <p className="text-sm text-gray-500 leading-relaxed mt-1.5 max-w-lg">{c.desc}</p>
                  <p className="text-[11px] font-semibold text-fulfilled-green tracking-wide mt-3">{c.result}</p>
                </div>
              </div>
            ))}
          </div>

          <p className="text-[11px] text-gray-400 mt-6">
            Every pledge. Every field. Every time.
          </p>
        </div>
      </section>

      {/* ━━ PAYMENT FLEXIBILITY — Three real conversations ━━━━━━━
          Psychology: donors aren't flaky. Life is unpredictable.
          Start with THEIR words — the things people actually say
          at the dinner table — then show how each one is handled.
          Family dinner image anchors the warmth of why people give.
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="py-24 md:py-32 bg-gray-50 px-6">
        <div className="max-w-5xl mx-auto">
          <div className="border-l-2 border-generosity-gold pl-3 mb-6">
            <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
              Payment flexibility
            </p>
          </div>

          {/* Gallery + headline side by side */}
          <div className="grid md:grid-cols-2 gap-0 items-stretch overflow-hidden">
            <GallerySlideshow />
            <div className="bg-white p-8 md:p-10 lg:p-12 flex flex-col justify-center">
              <h2 className="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">
                Donors pay when they&apos;re&nbsp;ready
              </h2>
              <p className="text-base text-gray-500 leading-relaxed mt-4 max-w-sm">
                Life is busy. Between school runs, work, and family dinners — we make sure the intention to give doesn&apos;t get&nbsp;lost.
              </p>
            </div>
          </div>

          {/* Three donor realities — gap-px grid */}
          <div className="grid md:grid-cols-3 gap-px bg-gray-200">
            {[
              {
                n: "01",
                quote: "\u201CLet me do it right now.\u201D",
                desc: "Redirect straight to your fundraising page or show your bank transfer details. Pledge marked as initiated immediately.",
                label: "Pay now",
              },
              {
                n: "02",
                quote: "\u201CI\u2019ll pay on payday.\u201D",
                desc: "They pick a date. We send a WhatsApp reminder that morning with your bank details attached. They tap, they pay.",
                label: "Pick a date",
              },
              {
                n: "03",
                quote: "\u201CCan I pay monthly?\u201D",
                desc: "2\u201312 monthly instalments. Each one tracked separately. Each one reminded separately. You see every payment land.",
                label: "Monthly instalments",
              },
            ].map((o) => (
              <div key={o.n} className="bg-white p-8 md:p-10 flex flex-col">
                <p className="text-4xl font-black text-gray-200">{o.n}</p>
                <p className="text-base font-black text-gray-900 tracking-tight mt-4 leading-snug">
                  {o.quote}
                </p>
                <p className="text-sm text-gray-500 leading-relaxed mt-4 flex-1">
                  {o.desc}
                </p>
                <p className="text-[11px] font-semibold text-generosity-gold tracking-wide mt-6">
                  {o.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ━━ PLATFORMS — Integrations that already work ━━━━━━━━━━
          Psychology: reassurance. They're thinking "but we already
          use X." Show them we slot in, not replace. Same ledger
          feel as the compliance section — serious, trustworthy.
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="py-24 md:py-32 px-6">
        <div className="max-w-5xl mx-auto">
          {/* Header — image panel + dark copy panel */}
          <div className="grid md:grid-cols-2 gap-0">
            <div className="relative min-h-[240px] md:min-h-[340px] overflow-hidden">
              <Image
                src="/images/brand/digital-04-dashboard-team.jpg"
                alt="Team reviewing donation dashboard together on a laptop"
                fill
                className="object-cover"
                sizes="(max-width: 768px) 100vw, 50vw"
              />
            </div>
            <div className="bg-gray-950 p-8 md:p-12 lg:p-16 flex flex-col justify-center">
              <div className="border-l-2 border-generosity-gold pl-3 mb-6">
                <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
                  Integrations
                </p>
              </div>
              <h2 className="text-3xl md:text-4xl font-black text-white tracking-tight">
                Works with what you already&nbsp;use.
              </h2>
              <p className="text-sm text-gray-400 leading-relaxed mt-4 max-w-sm">
                We&apos;re not replacing your fundraising platform. We&apos;re the
                missing layer between &ldquo;I&apos;ll donate&rdquo; and the money
                arriving.
              </p>
            </div>
          </div>

          {/* 3×3 integration grid — real brand logos */}
          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-px bg-gray-200">
            {([
              {
                name: "JustGiving",
                logo: "/images/logos/justgiving.svg",
                color: "#AD29B6",
                desc: "Redirect donors to your JustGiving page. They pay there — we track it here.",
                tag: "Fundraising",
              },
              {
                name: "LaunchGood",
                logo: "/images/logos/launchgood.png",
                color: "#1BAA4A",
                desc: "Built for Ramadan, Zakat, and community campaigns. Donors land on your campaign.",
                tag: "Fundraising",
              },
              {
                name: "GoFundMe",
                logo: "/images/logos/gofundme.svg",
                color: "#00B964",
                desc: "Connect any GoFundMe as a payment destination. We follow up, they click through.",
                tag: "Fundraising",
              },
              {
                name: "Enthuse",
                logo: "/images/logos/enthuse.png",
                color: "#2563EB",
                desc: "UK-native charity platform. Gift Aid handled at their end or ours — your choice.",
                tag: "Fundraising",
              },
              {
                name: "Stripe",
                logo: "/images/logos/stripe.svg",
                color: "#635BFF",
                desc: "Accept card payments directly. PCI compliant. Money lands in your Stripe account.",
                tag: "Card payments",
              },
              {
                name: "UK Bank Transfer",
                logo: null,
                color: "#37474F",
                desc: "Show your sort code and account number. We generate unique references to match payments.",
                tag: "Bank payment",
              },
              {
                name: "GoCardless",
                logo: "/images/logos/gocardless.png",
                color: "#00827F",
                desc: "Set up Direct Debit mandates for recurring pledges. Lower fees than cards.",
                tag: "Direct Debit",
              },
              {
                name: "WhatsApp",
                logo: "/images/logos/whatsapp.svg",
                color: "#25D366",
                desc: "Automated reminders with your bank details attached. Reply STOP to cancel instantly.",
                tag: "Messaging",
              },
              {
                name: "Any URL",
                logo: null,
                color: "#1E40AF",
                desc: "Paste any donation page link. We redirect donors when they\u2019re ready to pay.",
                tag: "Universal",
              },
            ]).map((p) => (
              <div key={p.name} className="bg-white p-7 md:p-8 flex flex-col">
                <div className="flex items-center gap-3 mb-4">
                  <div
                    className="w-10 h-10 flex items-center justify-center shrink-0 rounded-lg"
                    style={{ backgroundColor: p.color + "12" }}
                  >
                    {p.logo ? (
                      <img src={p.logo} alt="" className="w-6 h-6 object-contain" />
                    ) : p.name === "UK Bank Transfer" ? (
                      <Landmark className="w-5 h-5" style={{ color: p.color }} />
                    ) : (
                      <Globe className="w-5 h-5" style={{ color: p.color }} />
                    )}
                  </div>
                  <h3 className="text-sm font-bold text-gray-900">{p.name}</h3>
                </div>
                <p className="text-sm text-gray-500 leading-relaxed flex-1">{p.desc}</p>
                <p
                  className="text-[10px] font-semibold tracking-[0.15em] uppercase mt-5"
                  style={{ color: p.color }}
                >
                  {p.tag}
                </p>
              </div>
            ))}
          </div>

          <p className="text-[11px] text-gray-400 mt-6">
            Don&apos;t see your platform? Any donation page URL works as a redirect destination.
          </p>
        </div>
      </section>

      {/* ━━ FAQ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="py-24 md:py-32 px-6">
        <div className="max-w-3xl mx-auto">
          <div className="border-l-2 border-generosity-gold pl-3 mb-6">
            <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
              Common questions
            </p>
          </div>
          <h2 className="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">
            Questions we hear at every charity dinner
          </h2>
          <p className="text-3xl md:text-4xl font-black text-gray-400 tracking-tight mt-1">
            Honest answers.
          </p>
          <div className="mt-14">
          <div className="divide-y divide-gray-200">
            {FAQS.map((faq, i) => (
              <details key={i} className="group py-6">
                <summary className="flex items-start justify-between cursor-pointer list-none">
                  <h3 className="text-base font-bold text-gray-900 pr-4">{faq.q}</h3>
                  <span className="text-promise-blue group-open:rotate-45 transition-transform duration-200 mt-0.5 flex-shrink-0 text-xl leading-none">+</span>
                </summary>
                <p className="text-sm text-gray-500 leading-relaxed mt-4 max-w-2xl">
                  {faq.a}
                </p>
              </details>
            ))}
          </div>
          </div>
        </div>
      </section>

      {/* ━━ FINAL CTA ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
          Same image-panel + dark-panel language as the hero and
          integrations header. Ends the page the way it started.
      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */}
      <section className="px-6 py-24 md:py-32">
        <div className="max-w-5xl mx-auto">
          <div className="grid md:grid-cols-5 gap-0">
            {/* Image — the energy of a live fundraising moment */}
            <div className="md:col-span-3 relative min-h-[280px] md:min-h-[420px] overflow-hidden">
              <Image
                src="/images/brand/event-02-hands-raised.jpg"
                alt="Audience at a charity fundraising dinner with hands raised during a pledge appeal — the moment of collective generosity"
                fill
                className="object-cover"
                sizes="(max-width: 768px) 100vw, 60vw"
                quality={85}
              />
              <div className="absolute inset-0 bg-gradient-to-r from-gray-950/20 to-transparent" />
            </div>

            {/* Dark copy panel */}
            <div className="md:col-span-2 bg-gray-950 p-8 md:p-10 lg:p-12 flex flex-col justify-center">
              <div className="border-l-2 border-generosity-gold pl-3 mb-6">
                <p className="text-[11px] font-semibold tracking-[0.15em] uppercase text-gray-500">
                  Get started
                </p>
              </div>
              <h2 className="text-3xl md:text-4xl font-black text-white tracking-tight">
                Every day without this, you&apos;re losing&nbsp;pledges.
              </h2>
              <p className="text-sm text-gray-400 leading-relaxed mt-4 max-w-sm">
                People pledged because they meant it. Give them the system to follow through.
              </p>

              <div className="flex gap-3 mt-8">
                <Link
                  href="/signup"
                  className="inline-flex items-center justify-center bg-white px-6 py-3.5 text-sm font-bold text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
                >
                  Create free account
                </Link>
                <Link
                  href="/login?demo=1"
                  className="inline-flex items-center justify-center border border-gray-600 px-6 py-3.5 text-sm font-bold text-gray-300 hover:text-white hover:border-white transition-colors whitespace-nowrap"
                >
                  Live demo
                </Link>
              </div>

              <div className="flex items-center gap-4 mt-6 text-[11px] text-gray-500">
                <span>Free forever</span>
                <span className="w-px h-3 bg-gray-700" />
                <span>2-min setup</span>
                <span className="w-px h-3 bg-gray-700" />
                <span>Works tonight</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  )
}