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

export default function ForOrganisationsPage() {
  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-success-green tracking-wide uppercase">For programme managers</p>
            <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
              5 campaigns running. 20&nbsp;volunteers active. Who&apos;s actually&nbsp;collecting?
            </h1>
            <p className="text-lg text-gray-500 leading-relaxed">
              Coordinating pledge collection across multiple campaigns, teams, or events? Get the full pipeline view — every pledge, every volunteer, every instalment — in&nbsp;one&nbsp;place.
            </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/17-orgs-hero-boardroom.jpg" alt="Three people in charity office meeting room discussing pledge pipeline" aspect="square" />
        </div>
      </section>

      {/* ── Use cases ── */}
      <section className="py-24 bg-gray-50 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-black text-gray-900 tracking-tight mb-12">When you&apos;re coordinating the bigger picture</h2>
          <div className="grid md:grid-cols-2 gap-px bg-gray-200">
            {[
              { title: "Multi-charity projects", desc: "Building a school? 5 charities each pledged £100k. Track each commitment, send reminders before due dates, see the full pipeline." },
              { title: "Umbrella fundraising", desc: "A federation collects pledges from member mosques for a joint project. Each mosque sees their own pledge status." },
              { title: "Institutional partnerships", desc: "Corporate sponsors pledge annual donations. Track instalments, send invoices, reconcile against bank statements." },
              { title: "Departmental budgets", desc: "Internal teams commit funds to shared initiatives. Track who delivered, who's behind, and what's outstanding." },
            ].map((c) => (
              <div key={c.title} className="bg-white p-8">
                <h3 className="text-sm font-bold text-gray-900">{c.title}</h3>
                <p className="text-sm text-gray-500 mt-2 leading-relaxed">{c.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── How it works ── */}
      <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 programme managers</h2>
            <div className="space-y-8">
              {[
                { n: "01", title: "Create a campaign for the project", desc: "\"New School Build 2026\", \"Joint Emergency Appeal\". Set total goal." },
                { n: "02", title: "Send pledge links to each org", desc: "One link per organisation. They open it, commit an amount, and choose a payment schedule." },
                { n: "03", title: "Track commitments", desc: "Live dashboard: who pledged, how much, payment schedule, current status. Filter by org." },
                { n: "04", title: "Automated reminders", desc: "WhatsApp or email reminders before each due date. Contacts reply PAID when funds are transferred." },
                { n: "05", title: "Reconcile and report", desc: "Export CSV of all commitments, payment dates, and outstanding amounts. Share with your board." },
              ].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/18-orgs-pipeline.jpg" alt="Laptop showing Kanban-style pledge pipeline view by organisation" aspect="square" />
            <LandingImage src="/images/landing/19-orgs-instalment-schedule.jpg" alt="Laptop showing instalment schedule with monthly progress bars" aspect="video" />
          </div>
        </div>
      </section>

      {/* ── Why this works ── */}
      <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">
          <LandingImage src="/images/landing/20-orgs-laptop-desk.jpg" alt="Laptop on charity office desk showing commitment tracking dashboard" aspect="square" />
          <div>
            <h2 className="text-3xl font-black text-gray-900 tracking-tight mb-8">Spreadsheets don&apos;t send reminders</h2>
            <div className="space-y-5">
              {[
                { title: "One source of truth", desc: "No more email threads asking who's paid. Everyone sees the same dashboard." },
                { title: "Instalment plans", desc: "Large commitments split into monthly or quarterly payments. Each tracked separately." },
                { title: "Automated follow-up", desc: "WhatsApp or email reminders before each due date. No awkward calls between partner orgs." },
                { title: "Audit-ready exports", desc: "CSV with every commitment, payment date, and status. Ready for board reports and audits." },
              ].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">{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <BottomCta
        headline="Stop chasing spreadsheets across campaigns."
        sub="Full pipeline view. Every pledge tracked. Free forever."
      />
      <Footer active="organisations" />
    </div>
  )
}