import Link from "next/link"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Nav */}
      <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">
          <div 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>
          </div>
          <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>

      {/* Hero */}
      <section className="py-16 md:py-24 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-6">
          <div className="inline-flex items-center gap-2 bg-trust-blue/5 border border-trust-blue/20 rounded-full px-4 py-1.5 text-xs font-medium text-trust-blue">
            🇬🇧 Built for UK charities · Free to start
          </div>
          <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-tight">
            Turn promises into
            <span className="text-trust-blue"> payments</span>
          </h1>
          <p className="text-lg text-muted-foreground max-w-xl mx-auto">
            At your next event, donors pledge what they want to give — then pay on their own terms.
            You get QR codes, WhatsApp reminders, and a dashboard to track every penny.
          </p>
          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/signup" className="rounded-xl bg-trust-blue px-6 py-3.5 text-base font-semibold text-white hover:bg-trust-blue/90 transition-all shadow-lg shadow-trust-blue/20">
              Start Collecting Pledges →
            </Link>
            <a href="#how" className="rounded-xl border-2 border-gray-200 px-6 py-3.5 text-base font-semibold text-gray-700 hover:border-gray-300 transition-all">
              See How It Works
            </a>
          </div>
          <p className="text-xs text-muted-foreground">Free forever · No card needed · 2 minute setup</p>
        </div>
      </section>

      {/* Problem */}
      <section className="py-12 bg-gray-50 px-4">
        <div className="max-w-4xl mx-auto">
          <div className="grid md:grid-cols-3 gap-6">
            <div className="bg-white rounded-2xl p-6 border">
              <div className="text-3xl mb-3">😤</div>
              <h3 className="font-bold mb-1">Pledges go cold</h3>
              <p className="text-sm text-muted-foreground">Donors say &quot;I&apos;ll pay £500&quot; at the gala, then forget. You have no way to follow up.</p>
            </div>
            <div className="bg-white rounded-2xl p-6 border">
              <div className="text-3xl mb-3">📝</div>
              <h3 className="font-bold mb-1">Paper tracking</h3>
              <p className="text-sm text-muted-foreground">Spreadsheets, napkin notes, WhatsApp groups. No system, no references, no proof.</p>
            </div>
            <div className="bg-white rounded-2xl p-6 border">
              <div className="text-3xl mb-3">💸</div>
              <h3 className="font-bold mb-1">Money left on the table</h3>
              <p className="text-sm text-muted-foreground">UK charities lose 30-50% of pledged amounts because there&apos;s no follow-up system.</p>
            </div>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section id="how" className="py-16 px-4">
        <div className="max-w-4xl mx-auto space-y-10">
          <div className="text-center">
            <h2 className="text-3xl font-black text-gray-900">How it works</h2>
            <p className="text-muted-foreground mt-2">From pledge to payment in 4 steps</p>
          </div>
          <div className="grid md:grid-cols-4 gap-6">
            {[
              { step: "1", icon: "📱", title: "Donor scans QR", desc: "At your event, each table/volunteer has a unique QR code." },
              { step: "2", icon: "🤲", title: "Pledges amount", desc: "Pick an amount. Choose to pay now, on a date, or monthly instalments." },
              { step: "3", icon: "💬", title: "Gets reminders", desc: "WhatsApp messages with bank details before each due date. They reply PAID when done." },
              { step: "4", icon: "✅", title: "You reconcile", desc: "Dashboard shows who pledged, who paid, who needs a nudge. Upload bank statements to auto-match." },
            ].map((s) => (
              <div key={s.step} className="text-center space-y-2">
                <div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-trust-blue/5 text-2xl">
                  {s.icon}
                </div>
                <div className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-trust-blue text-white text-xs font-bold">
                  {s.step}
                </div>
                <h3 className="font-bold text-sm">{s.title}</h3>
                <p className="text-xs text-muted-foreground">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-16 bg-gray-50 px-4">
        <div className="max-w-4xl mx-auto space-y-10">
          <div className="text-center">
            <h2 className="text-3xl font-black text-gray-900">Everything you need</h2>
          </div>
          <div className="grid md:grid-cols-2 gap-4">
            {[
              { icon: "📱", title: "QR Code Generator", desc: "Unique codes per volunteer/table. Track who brings in the most." },
              { icon: "📅", title: "Flexible Scheduling", desc: "Pay now, pick a date, or split into 2-12 monthly instalments." },
              { icon: "💬", title: "WhatsApp Reminders", desc: "Auto-send bank details and reminders. Donors reply PAID, HELP, or CANCEL." },
              { icon: "🎁", title: "Gift Aid", desc: "Collect declarations inline. Export HMRC-ready CSV with one click." },
              { icon: "🏦", title: "UK Bank Transfers", desc: "Unique reference per pledge for easy reconciliation. Tap-to-copy details." },
              { icon: "📊", title: "Live Dashboard", desc: "See pledges come in real-time. Pipeline view: pending → initiated → paid." },
              { icon: "🏆", title: "Volunteer Leaderboard", desc: "Real-time scoreboard. Motivate your team with friendly competition." },
              { icon: "📤", title: "CRM Export", desc: "Download all pledge data as CSV. Gift Aid pack for HMRC." },
            ].map((f) => (
              <div key={f.title} className="bg-white rounded-xl p-4 border flex gap-3 items-start">
                <span className="text-xl">{f.icon}</span>
                <div>
                  <h3 className="font-bold text-sm">{f.title}</h3>
                  <p className="text-xs text-muted-foreground mt-0.5">{f.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Donor schedule */}
      <section className="py-16 px-4">
        <div className="max-w-3xl mx-auto text-center space-y-8">
          <h2 className="text-3xl font-black text-gray-900">Donors choose when to pay</h2>
          <div className="grid grid-cols-3 gap-4">
            <div className="rounded-2xl border-2 border-trust-blue/20 p-5 space-y-2">
              <div className="text-3xl">⚡</div>
              <h3 className="font-bold">Pay Now</h3>
              <p className="text-xs text-muted-foreground">Card, bank transfer, or Direct Debit right away</p>
            </div>
            <div className="rounded-2xl border-2 border-warm-amber/20 p-5 space-y-2">
              <div className="text-3xl">📅</div>
              <h3 className="font-bold">Pick a Date</h3>
              <p className="text-xs text-muted-foreground">&quot;I&apos;ll pay on payday&quot; — reminders sent automatically</p>
            </div>
            <div className="rounded-2xl border-2 border-success-green/20 p-5 space-y-2">
              <div className="text-3xl">📆</div>
              <h3 className="font-bold">Monthly</h3>
              <p className="text-xs text-muted-foreground">Split into 2-12 instalments. Each one tracked separately</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-gradient-to-br from-trust-blue to-blue-600 px-4">
        <div className="max-w-2xl mx-auto text-center space-y-6">
          <h2 className="text-3xl font-black text-white">Start collecting pledges today</h2>
          <p className="text-blue-100">
            Free to use. Set up in 2 minutes. No technical knowledge needed.
          </p>
          <Link href="/signup" className="inline-block rounded-xl bg-white px-8 py-4 text-base font-bold text-trust-blue hover:bg-blue-50 transition-all shadow-xl">
            Create Your Free Account →
          </Link>
          <p className="text-xs text-blue-200">Used by mosques, churches, schools and charities across the UK</p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 border-t">
        <div className="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-muted-foreground">
          <div 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>
          </div>
          <div className="flex gap-4">
            <Link href="/login" className="hover:text-foreground">Sign In</Link>
            <Link href="/signup" className="hover:text-foreground">Get Started</Link>
          </div>
          <span>© {new Date().getFullYear()} QuikCue Ltd</span>
        </div>
      </footer>
    </div>
  )
}