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

export default function ForVolunteersPage() {
  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-warm-amber tracking-wide uppercase">For volunteers</p>
            <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
              You collected 20&nbsp;pledges. See exactly how much came&nbsp;in.
            </h1>
            <p className="text-lg text-gray-500 leading-relaxed">
              Every volunteer gets their own pledge link. Share it at your table, in your WhatsApp group, or one-on-one. See your live stats — pledges, amounts, conversion&nbsp;rate.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 pt-2">
              <Link href="/for/charities" 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">
                Share with your charity manager
              </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 the volunteer view
              </Link>
            </div>
          </div>
          <ImagePlaceholder aspect="square" label="Volunteer at event table with QR code stand" />
        </div>
      </section>

      {/* ── What you get ── */}
      <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">Your own pledge dashboard</h2>
          <div className="grid md:grid-cols-3 gap-px bg-gray-200">
            {[
              { title: "Your personal link", desc: "A unique pledge URL with your name. Share via QR code, WhatsApp, or in person. Every pledge tracked back to you." },
              { title: "Live stats", desc: "How many pledges, total amount, conversion rate. Updates in real time on your phone. No login needed." },
              { title: "Leaderboard", desc: "Friendly competition across all volunteers. Top collectors get bragging rights. See your rank update live." },
            ].map((f) => (
              <div key={f.title} className="bg-white p-8">
                <h3 className="text-sm font-bold text-gray-900">{f.title}</h3>
                <p className="text-sm text-gray-500 mt-2 leading-relaxed">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Event night ── */}
      <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">Event night, simplified</h2>
            <div className="space-y-8">
              {[
                { n: "01", title: "Your charity creates your link", desc: "They set up a campaign and generate a link labelled with your name and table number." },
                { n: "02", title: "Share it at your table", desc: "Show the QR code or tap to share via WhatsApp. Donors scan and pledge in 60 seconds." },
                { n: "03", title: "Watch pledges roll in", desc: "Open your volunteer page on your phone. Every new pledge appears with a name and amount." },
                { n: "04", title: "WhatsApp handles the rest", desc: "You don't chase anyone. Automated reminders go out. Donors reply PAID when they transfer." },
              ].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">
            <ImagePlaceholder aspect="square" label="Volunteer stats — live pledge counter on mobile" />
            <ImagePlaceholder aspect="video" label="Leaderboard — top collectors" />
          </div>
        </div>
      </section>

      {/* ── Share anywhere ── */}
      <section className="py-20 bg-gray-50 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl font-black text-gray-900 tracking-tight mb-8">Share your link anywhere</h2>
          <div className="grid grid-cols-3 md:grid-cols-6 gap-px bg-gray-200">
            {["WhatsApp", "QR Code", "Email", "Instagram", "In person", "Copy link"].map((c) => (
              <div key={c} className="bg-white p-4 text-center">
                <p className="text-xs font-medium text-gray-700">{c}</p>
              </div>
            ))}
          </div>
          <p className="text-xs text-gray-400 mt-4">Every link is unique to you. See exactly how many pledges came from your sharing.</p>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-24 bg-gray-950 px-6">
        <div className="max-w-2xl mx-auto text-center space-y-8">
          <h2 className="text-3xl font-black text-white tracking-tight">Ready to see your impact?</h2>
          <p className="text-gray-500 max-w-md mx-auto">
            Ask your charity manager to set up Pledge Now, Pay Later. They create your link in 30 seconds.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/for/charities" className="inline-flex items-center justify-center bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-colors">
              Share with your charity
            </Link>
            <Link href="/login?demo=1" className="inline-flex items-center justify-center border border-gray-700 px-8 py-4 text-base font-bold text-white hover:bg-white/5 transition-colors">
              See the volunteer view
            </Link>
          </div>
        </div>
      </section>

      <Footer active="volunteers" />
    </div>
  )
}