import Link from "next/link"
import { Button } from "@/components/ui/button"
import { CreditCard, Landmark, Building2, Globe, QrCode, BarChart3, Bell, Download } from "lucide-react"

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5">
      {/* Hero */}
      <div className="flex flex-col items-center justify-center px-4 pt-20 pb-16">
        <div className="text-center max-w-2xl mx-auto space-y-8">
          <div className="space-y-4">
            <div className="inline-flex items-center gap-2 rounded-full bg-trust-blue/10 px-4 py-2 text-sm font-medium text-trust-blue">
              ✨ Free forever for UK charities
            </div>
            <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-gray-900">
              Pledge Now,{" "}
              <span className="text-trust-blue">Pay Later</span>
            </h1>
            <p className="text-xl text-muted-foreground max-w-lg mx-auto">
              Turn &quot;I&apos;ll donate later&quot; into tracked pledges with automatic payment follow-up. Zero fees on bank transfers.
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/dashboard">
              <Button size="xl">Open Dashboard →</Button>
            </Link>
            <Link href="/p/demo">
              <Button size="xl" variant="outline">Try Donor Flow →</Button>
            </Link>
          </div>
          <div className="grid grid-cols-3 gap-6 pt-8 border-t max-w-md mx-auto">
            <div className="text-center">
              <div className="text-2xl font-bold text-trust-blue">0%</div>
              <div className="text-xs text-muted-foreground">Bank transfer fees</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-success-green">15s</div>
              <div className="text-xs text-muted-foreground">Pledge time</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-warm-amber">85%+</div>
              <div className="text-xs text-muted-foreground">Collection rate</div>
            </div>
          </div>
        </div>
      </div>

      {/* Payment Methods */}
      <div className="max-w-4xl mx-auto px-4 pb-16">
        <h2 className="text-2xl font-bold text-center mb-8">4 Payment Rails, One Platform</h2>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            { icon: Building2, title: "Bank Transfer", desc: "Zero fees — 100% to charity", color: "text-success-green" },
            { icon: Landmark, title: "Direct Debit", desc: "GoCardless auto-collection", color: "text-trust-blue" },
            { icon: CreditCard, title: "Card via Stripe", desc: "Visa, Mastercard, Amex", color: "text-purple-600" },
            { icon: Globe, title: "FPX Banking", desc: "Malaysian online banking", color: "text-amber-600" },
          ].map((m, i) => (
            <div key={i} className="rounded-2xl border bg-white p-5 text-center space-y-2 hover:shadow-md transition-shadow">
              <m.icon className={`h-8 w-8 mx-auto ${m.color}`} />
              <h3 className="font-bold">{m.title}</h3>
              <p className="text-xs text-muted-foreground">{m.desc}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Features */}
      <div className="bg-white border-y py-16">
        <div className="max-w-4xl mx-auto px-4">
          <h2 className="text-2xl font-bold text-center mb-8">Everything You Need</h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { icon: QrCode, title: "QR Codes", desc: "Per-table, per-volunteer attribution tracking" },
              { icon: BarChart3, title: "Live Dashboard", desc: "Real-time pledge pipeline with auto-refresh" },
              { icon: Bell, title: "Smart Reminders", desc: "4-step follow-up sequence via email/SMS" },
              { icon: Download, title: "Bank Reconciliation", desc: "CSV import, auto-match by reference" },
            ].map((f, i) => (
              <div key={i} className="space-y-2">
                <f.icon className="h-6 w-6 text-trust-blue" />
                <h3 className="font-bold text-sm">{f.title}</h3>
                <p className="text-xs text-muted-foreground">{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="py-8 px-4 text-center text-xs text-muted-foreground">
        <p>Pledge Now, Pay Later — Built for UK charities.</p>
      </footer>
    </div>
  )
}
