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" },
]

/* ── Persona cards ── */
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: "/images/landing/persona-charity-manager.jpg",
  },
  {
    slug: "organisations",
    title: "Programme Manager",
    oneLiner: "You coordinate campaigns across teams. We give you the full pipeline view.",
    tags: ["Multi-campaign", "Team oversight", "Pipeline view", "Instalments", "Reporting"],
    image: "/images/landing/persona-programme-manager.jpg",
  },
  {
    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: "/images/landing/persona-fundraiser.jpg",
  },
  {
    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: "/images/landing/persona-volunteer.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>

      {/* ━━ WHO IT'S FOR — gap-px grid (signature pattern 2) ━━━━ */}
      <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">
              Who it&apos;s for
            </p>
          </div>
          <h2 className="text-4xl md:text-5xl font-black text-gray-900 tracking-tight">
            Built for how you actually work
          </h2>
          <p className="text-lg text-gray-500 mt-3 max-w-xl">
            Four roles. One platform. Every pledge tracked.
          </p>

          {/* 2×2 gap-px grid */}
          <div className="grid md:grid-cols-2 gap-px bg-gray-200 mt-14">
            {PERSONAS.map((p, i) => (
              <Link
                key={p.slug}
                href={`/for/${p.slug}`}
                className="group bg-white overflow-hidden"
              >
                {/* Image */}
                <div className="aspect-[3/2] relative overflow-hidden">
                  <Image
                    src={p.image}
                    alt={p.title}
                    fill
                    className="object-cover transition-opacity duration-300 group-hover:opacity-90"
                    sizes="(max-width: 768px) 100vw, 50vw"
                  />
                </div>

                {/* Text — numbered + border-l accent */}
                <div className="p-6 md:p-8">
                  <div className="flex items-start gap-5">
                    <span className="text-4xl font-black text-gray-100 leading-none select-none shrink-0">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <div className="flex-1 min-w-0 border-l-2 border-gray-900 pl-4">
                      <h3 className="text-lg font-black text-gray-900 group-hover:text-promise-blue transition-colors">
                        {p.title}
                      </h3>
                      <p className="text-sm text-gray-500 mt-1.5 leading-relaxed">{p.oneLiner}</p>
                      <div className="flex flex-wrap gap-1.5 mt-3">
                        {p.tags.map((t) => (
                          <span key={t} className="text-[10px] font-medium text-gray-400 bg-gray-50 px-2 py-0.5">
                            {t}
                          </span>
                        ))}
                      </div>
                      <p className="text-xs font-semibold text-promise-blue mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
                        Learn more &rarr;
                      </p>
                    </div>
                  </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>
  )
}