import Link from "next/link"

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

      {/* ── Hero ── */}
      <section className="py-20 md:py-28 px-4 bg-gradient-to-b from-emerald-50 to-white">
        <div className="max-w-3xl mx-auto text-center space-y-7">
          <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-to-br from-success-green to-emerald-500 text-4xl shadow-xl shadow-emerald-500/20">
            🤲
          </div>
          <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-[1.08] tracking-tight">
            You pledged to give.<br />
            <span className="text-success-green">We make it easy to follow through.</span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-xl mx-auto leading-relaxed">
            Someone shared a pledge link with you — at an event, on WhatsApp, or in person. Here&apos;s how the process works, what data we collect, and why your information is safe.
          </p>
        </div>
      </section>

      {/* ── How it works for you ── */}
      <section className="py-16 px-4">
        <div className="max-w-3xl mx-auto space-y-10">
          <div className="text-center">
            <h2 className="text-3xl font-black text-gray-900">What happens when you pledge</h2>
          </div>
          <div className="space-y-6">
            {[
              { n: "1", icon: "💷", title: "Choose an amount", desc: "Pick how much you'd like to pledge. Suggested amounts help, but you can enter any number." },
              { n: "2", icon: "📅", title: "Choose when to pay", desc: "Pay now via bank transfer, pick a future date (like payday), or split into monthly instalments." },
              { n: "3", icon: "🎁", title: "Add Gift Aid (optional)", desc: "If you're a UK taxpayer, tick Gift Aid and the charity gets an extra 25% from HMRC — at no cost to you. We'll ask for your home address (HMRC requires it)." },
              { n: "4", icon: "🌙", title: "Mark as Zakat (optional)", desc: "If the campaign is Zakat-eligible, you can flag your pledge as Zakat. It'll be tracked separately so funds don't mix." },
              { n: "5", icon: "✅", title: "Choose your communication preferences", desc: "You decide if you want email or WhatsApp reminders. No pre-ticked boxes. No messages without your permission." },
              { n: "6", icon: "💬", title: "Get a reminder when it's time", desc: "If you opted in, we send a friendly WhatsApp message with payment details before your due date. Reply PAID when done, or STOP to opt out." },
            ].map((s) => (
              <div key={s.n} className="flex gap-5 items-start">
                <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-white border-2 border-gray-100 flex items-center justify-center text-xl shadow-sm">{s.icon}</div>
                <div>
                  <div className="flex items-center gap-2">
                    <span className="w-6 h-6 rounded-full bg-success-green text-white text-xs font-black flex items-center justify-center">{s.n}</span>
                    <h3 className="font-bold">{s.title}</h3>
                  </div>
                  <p className="text-sm text-muted-foreground mt-1">{s.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Your data ── */}
      <section className="py-16 bg-gray-50 px-4">
        <div className="max-w-3xl mx-auto space-y-8">
          <div className="text-center">
            <h2 className="text-3xl font-black text-gray-900">Your data is protected</h2>
            <p className="text-muted-foreground mt-2">Here&apos;s exactly what we collect and why.</p>
          </div>

          <div className="space-y-3">
            {[
              { what: "Name", why: "So the charity knows who pledged. Required for Gift Aid.", icon: "👤" },
              { what: "Email", why: "To send pledge receipts and payment reminders — only if you opt in.", icon: "📧" },
              { what: "Phone number", why: "For WhatsApp reminders — only if you opt in. Reply STOP anytime.", icon: "📱" },
              { what: "Home address", why: "Only if you add Gift Aid. HMRC requires it to process the +25% claim.", icon: "🏠" },
              { what: "Gift Aid declaration", why: "The exact HMRC declaration text, timestamped, so the charity can claim. You can withdraw anytime.", icon: "🎁" },
              { what: "Consent records", why: "We store what you agreed to, when, and the exact wording — so there's never a dispute about what you opted into.", icon: "🔐" },
            ].map((d) => (
              <div key={d.what} className="flex gap-4 items-start bg-white rounded-2xl border p-5">
                <span className="text-xl flex-shrink-0">{d.icon}</span>
                <div>
                  <h3 className="font-bold text-sm">{d.what}</h3>
                  <p className="text-xs text-muted-foreground mt-0.5">{d.why}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="rounded-2xl bg-trust-blue/5 border border-trust-blue/10 p-5 text-center space-y-2">
            <p className="text-sm font-bold text-gray-900">We never share your data with third parties.</p>
            <p className="text-xs text-muted-foreground">
              Your information is only shared with the charity you&apos;re pledging to. We don&apos;t sell data, send marketing from other organisations, or use your details for anything beyond this pledge.
            </p>
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section className="py-16 px-4">
        <div className="max-w-3xl mx-auto space-y-8">
          <div className="text-center">
            <h2 className="text-2xl font-black text-gray-900">Common questions</h2>
          </div>
          <div className="space-y-4">
            {[
              { q: "What if I can't pay right now?", a: "No problem. Choose \"Pick a date\" or \"Monthly instalments\" during the pledge. You'll get a reminder when it's time." },
              { q: "Can I cancel my pledge?", a: "Yes. Reply CANCEL to any WhatsApp reminder, or contact the charity directly. Pledges are commitments, not legally binding contracts." },
              { q: "How do I know my money goes to the right place?", a: "You transfer directly to the charity's bank account (or donate on their fundraising page). We never hold your money." },
              { q: "What if I already paid?", a: "Reply PAID to the WhatsApp reminder, or tap \"I've Donated\" on the pledge page. The charity will confirm." },
              { q: "I didn't opt in to WhatsApp but I'm getting messages?", a: "That shouldn't happen — our system only sends messages if you explicitly opted in. Contact the charity to investigate." },
            ].map((faq) => (
              <div key={faq.q} className="rounded-2xl border p-5">
                <h3 className="font-bold text-sm">{faq.q}</h3>
                <p className="text-sm text-muted-foreground mt-1">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="py-16 bg-gradient-to-br from-gray-950 to-gray-900 px-4">
        <div className="max-w-2xl mx-auto text-center space-y-6">
          <h2 className="text-3xl font-black text-white">Already received a pledge link?</h2>
          <p className="text-gray-400 max-w-md mx-auto">
            Open the link you were sent — it works on any phone, no app needed. If you have questions, contact the charity that shared it with you.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/for/charities" className="rounded-2xl bg-white px-8 py-4 text-base font-bold text-gray-900 hover:bg-gray-100 transition-all shadow-xl hover:-translate-y-0.5">
              Are you a charity? →
            </Link>
            <Link href="/" className="rounded-2xl border-2 border-white/20 px-8 py-4 text-base font-bold text-white hover:bg-white/10 transition-all hover:-translate-y-0.5">
              Back to home
            </Link>
          </div>
        </div>
      </section>

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

function Nav() {
  return (
    <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
      <div className="max-w-5xl mx-auto flex h-14 items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-2.5">
          <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center"><span className="text-white text-base">🤲</span></div>
          <span className="font-black text-sm">Pledge Now, Pay Later</span>
        </Link>
        <div className="flex items-center gap-3">
          <Link href="/login" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Sign In</Link>
          <Link href="/signup" className="rounded-lg bg-trust-blue px-4 py-2 text-sm font-semibold text-white hover:bg-trust-blue/90 transition-colors">Get Started Free</Link>
        </div>
      </div>
    </header>
  )
}

function Footer({ active }: { active?: string }) {
  const links = [
    { href: "/for/charities", label: "For Charities" },
    { href: "/for/fundraisers", label: "For Fundraisers" },
    { href: "/for/volunteers", label: "For Volunteers" },
    { href: "/for/donors", label: "For Donors" },
  ]
  return (
    <footer className="py-8 px-4 border-t">
      <div className="max-w-5xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6 text-xs text-muted-foreground">
        <Link href="/" className="flex items-center gap-2">
          <div className="h-6 w-6 rounded-lg bg-trust-blue flex items-center justify-center"><span className="text-white text-[10px]">🤲</span></div>
          <span>Pledge Now, Pay Later</span>
        </Link>
        <div className="flex flex-wrap justify-center gap-x-5 gap-y-1">
          {links.map((l) => (
            <Link key={l.href} href={l.href} className={`hover:text-foreground ${active && l.href.includes(active) ? "font-medium text-foreground" : ""}`}>{l.label}</Link>
          ))}
        </div>
        <span>© {new Date().getFullYear()} QuikCue Ltd</span>
      </div>
    </footer>
  )
}
