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

export default function ForCharitiesPage() {
  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-trust-blue tracking-wide uppercase">For charities &amp; mosques</p>
            <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
              You raised £50k in&nbsp;pledges. How much actually came&nbsp;in?
            </h1>
            <p className="text-lg text-gray-500 leading-relaxed">
              Capture every promise at your gala, Ramadan appeal, or Jumuah collection. WhatsApp chases the money so you don&apos;t have&nbsp;to.
            </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/08-charities-hero.jpg" alt="Charity manager reviewing dashboard on laptop at mosque fundraising event" aspect="square" />
        </div>
      </section>

      {/* ── Pain ── */}
      <section className="py-20 bg-gray-50 px-6">
        <div className="max-w-4xl mx-auto">
          <p className="text-sm font-semibold text-gray-400 tracking-wide uppercase mb-8">Sound familiar?</p>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              { title: "Pledges on napkins", desc: "Someone raises their hand at the gala. You scribble it down. A week later — who was that again?" },
              { title: "Awkward chasing", desc: "You don't want to be the person who calls donors asking for money. So you don't. And the pledge dies." },
              { title: "No visibility", desc: "Your committee asks how much you've actually collected. You don't know. Nobody knows." },
            ].map((p) => (
              <div key={p.title}>
                <h3 className="text-base font-bold text-gray-900">{p.title}</h3>
                <p className="text-sm text-gray-500 mt-2 leading-relaxed">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── How it works — with images ── */}
      <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 your charity</h2>
            <div className="space-y-8">
              {[
                { n: "01", title: "Create a campaign", desc: "\"Ramadan 2026\", \"Mosque Extension Fund\". Set a goal, toggle Zakat eligibility. 30 seconds." },
                { n: "02", title: "Generate pledge links", desc: "One per table, volunteer, or WhatsApp group. Each tracks its own conversions." },
                { n: "03", title: "Donors pledge in 60 seconds", desc: "Amount, Gift Aid (+25% from HMRC), pay now or later. No app download." },
                { n: "04", title: "WhatsApp does the chasing", desc: "Automated reminders with your bank details. They reply PAID when done." },
                { n: "05", title: "You see every penny", desc: "Pipeline by status, top sources, needs-attention list. Export for Gift Aid claims." },
              ].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/09-charities-amount-selection.jpg" alt="Hand holding phone at charity dinner table showing pledge amount selection" aspect="square" />
            <LandingImage src="/images/landing/10-charities-whatsapp.jpg" alt="Woman on sofa viewing WhatsApp pledge reminder conversation" aspect="video" />
          </div>
        </div>
      </section>

      {/* ── Features ── */}
      <section className="py-24 bg-gray-50 px-6">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">Built for charity compliance</h2>
          <div className="grid md:grid-cols-2 gap-x-16 gap-y-8">
            {[
              { title: "Gift Aid with HMRC declaration", desc: "Name, home address, postcode, exact HMRC model wording. One-click CSV for claiming." },
              { title: "Zakat tracking", desc: "Per-campaign toggle. Donors flag their pledge. Zakat money never mixes with general funds." },
              { title: "WhatsApp reminders", desc: "4-step automated sequence. Donors reply PAID, STATUS, or HELP. No awkward phone calls." },
              { title: "Flexible payment scheduling", desc: "Pay now, pick a date, or 2–12 monthly instalments. Each tracked and reminded separately." },
              { title: "GDPR-compliant consent", desc: "Separate opt-ins for email and WhatsApp. Audit trail with timestamps, IP, exact text shown." },
              { title: "CRM and HMRC export", desc: "CSV with donor details, Gift Aid declarations, consent records, payment status, Zakat flags." },
            ].map((f) => (
              <div key={f.title} className="border-l-2 border-gray-900 pl-5">
                <h3 className="text-sm font-bold text-gray-900">{f.title}</h3>
                <p className="text-sm text-gray-500 mt-1 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <BottomCta
        headline="Your next event is coming."
        sub="Set up in 2 minutes. Free forever. Start collecting pledges that actually convert."
      />
      <Footer active="charities" />
    </div>
  )
}