import { createFileRoute, Link } from "@tanstack/react-router";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { PageHero } from "@/components/PageHero";
import heroBg from "@/assets/gallery-families-2.jpg";
import { Heart, Users, ShieldCheck, GraduationCap, Stethoscope, BookOpen, Megaphone } from "lucide-react";
import causeFamily from "@/assets/cause-families.jpg";
import causePolicy from "@/assets/cause-advocacy.jpg";
import causeEarly from "@/assets/cause-education.jpg";
import causeEarlyIntervention from "@/assets/cause-early-intervention.jpg";
import causeHealth from "@/assets/cause-health.jpg";
import advocateLevanImg from "@/assets/advocate-levan.jpg.asset.json";

export const Route = createFileRoute("/causes")({
  head: () => ({
    meta: [
      { title: "Our Causes — DSAG" },
      { name: "description", content: "The causes we champion: inclusive education, healthcare access, early intervention, policy and awareness, and family empowerment." },
      { property: "og:title", content: "Our Causes — DSAG" },
    ],
  }),
  component: CausesPage,
});

const causes = [
  { title: "Inclusive Education", img: causeEarly, icon: BookOpen, desc: "Championing classrooms where children with Down syndrome are welcomed and supported, ensuring equal opportunities to learn and thrive." },
  { title: "Comprehensive Healthcare Access", img: causeHealth, icon: Stethoscope, desc: "Securing timely medical care, therapies, and life-saving interventions so individuals with Down syndrome can live healthy, fulfilling lives." },
  { title: "Early Intervention", img: causeEarlyIntervention, icon: GraduationCap, desc: "Promoting developmental support from infancy, with therapies that help children reach their full potential." },
  { title: "Self-Advocacy", img: advocateLevanImg.url, icon: Megaphone, desc: "Nothing about us, without us. We are committed to raising a generation of self-advocates — persons with Down syndrome like Rawan and Levan who speak, lead and represent themselves on every stage that matters." },
  { title: "Policy & Awareness", img: causePolicy, icon: ShieldCheck, desc: "Driving national advocacy and public education to influence policies, protect rights and challenge stigma across Ghana and Africa." },
  { title: "Family & Community Empowerment", img: causeFamily, icon: Users, desc: "Strengthening families with counselling, peer networks and resources, while fostering social inclusion and life skills for individuals with Down syndrome." },
];

function CausesPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Our Causes" title="Five pillars. One inclusive Ghana." subtitle="Each of our causes is designed to transform lives — from infancy through adulthood." bgImage={heroBg} />
        <section className="max-w-7xl mx-auto px-6 py-20 space-y-16">
          {causes.map((c, i) => (
            <article key={c.title} className={`grid lg:grid-cols-2 gap-10 items-center ${i % 2 === 1 ? "lg:[&>img]:order-2" : ""}`}>
              <img src={c.img} alt={c.title} loading="lazy" className="rounded-2xl shadow-card w-full object-cover aspect-[4/3]" />
              <div>
                <div className="h-12 w-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-4">
                  <c.icon className="h-6 w-6" />
                </div>
                <h2 className="font-display font-bold text-2xl md:text-3xl">{c.title}</h2>
                <p className="mt-4 text-muted-foreground leading-relaxed">{c.desc}</p>
                <Link to="/donate" className="inline-flex items-center gap-2 mt-6 rounded-full bg-accent text-accent-foreground font-semibold px-6 py-3 hover:scale-[1.03] transition">
                  <Heart className="h-4 w-4" /> Donate to this cause
                </Link>
              </div>
            </article>
          ))}
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
