import { createFileRoute } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { PageHero } from "@/components/PageHero";
import heroBg from "@/assets/gallery-donation-2.jpg";
import { Phone, Mail, Heart, Building2 } from "lucide-react";

export const Route = createFileRoute("/donate")({
  head: () => ({
    meta: [
      { title: "Donate to DSAG" },
      { name: "description", content: "Your gift powers advocacy, family support, early intervention and healthcare for individuals with Down syndrome in Ghana." },
      { property: "og:title", content: "Donate to DSAG" },
    ],
  }),
  component: DonatePage,
});

const amounts = [50, 100, 250, 500];

function DonatePage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Donate" title="Your gift transforms lives." subtitle="Every cedi powers advocacy, family support, early intervention and healthcare access for individuals with Down syndrome." bgImage={heroBg} />

        <section className="max-w-5xl mx-auto px-6 py-20">
          <div className="bg-card border border-border rounded-2xl p-8 md:p-10 shadow-card">
            <h2 className="font-display font-bold text-2xl md:text-3xl text-center">Choose an amount</h2>
            <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
              {amounts.map((a) => (
                <button key={a} className="rounded-xl border-2 border-border hover:border-primary hover:bg-secondary p-5 font-display font-bold text-xl transition">
                  GH₵ {a}
                </button>
              ))}
            </div>
            <button className="mt-6 w-full rounded-full bg-accent text-accent-foreground font-semibold py-4 inline-flex items-center justify-center gap-2 hover:scale-[1.01] transition">
              <Heart className="h-5 w-5" /> Donate now
            </button>
            <p className="text-xs text-muted-foreground text-center mt-3">Online donation processing coming soon. Use the options below to donate today.</p>
          </div>

          <div className="mt-10 grid md:grid-cols-2 gap-6">
            <div className="bg-surface border border-border rounded-2xl p-6">
              <div className="h-11 w-11 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-3"><Phone className="h-5 w-5" /></div>
              <h3 className="font-display font-bold">Call to donate</h3>
              <p className="text-sm text-muted-foreground mt-2">+233 (0) 20 740 5343</p>
            </div>
            <div className="bg-surface border border-border rounded-2xl p-6">
              <div className="h-11 w-11 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-3"><Mail className="h-5 w-5" /></div>
              <h3 className="font-display font-bold">Email us</h3>
              <p className="text-sm text-muted-foreground mt-2">info@downsyndromeghana.org</p>
            </div>
            <div className="bg-surface border border-border rounded-2xl p-6 md:col-span-2">
              <div className="h-11 w-11 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-3"><Building2 className="h-5 w-5" /></div>
              <h3 className="font-display font-bold">Corporate partnerships</h3>
              <p className="text-sm text-muted-foreground mt-2">Interested in partnering with DSAG for CSR initiatives, sponsorships or in-kind donations? We'd love to chat.</p>
            </div>
          </div>
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
