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-education-2.jpg";
import { Megaphone, BookOpen, Activity, ShieldCheck, Users, Handshake, Mic } from "lucide-react";
import initAwareness from "@/assets/gallery-awareness-3.jpg";
import initEducation from "@/assets/gallery-education-3.jpg";
import initTherapy from "@/assets/gallery-therapy-2.jpg";
import initAdvocacy from "@/assets/gallery-advocacy-3.jpg";
import initFamily from "@/assets/gallery-families-4.jpg";
import initPartners from "@/assets/gallery-launch-3.jpg";
import advocateRawanImg from "@/assets/advocate-rawan.jpg.asset.json";

export const Route = createFileRoute("/initiatives")({
  head: () => ({
    meta: [
      { title: "Our Initiatives — DSAG" },
      { name: "description", content: "Awareness campaigns, inclusive education advocacy, early intervention, policy work, family support and partnerships across Ghana." },
      { property: "og:title", content: "DSAG Initiatives" },
    ],
  }),
  component: InitiativesPage,
});

const initiatives = [
  { icon: Megaphone, img: initAwareness, t: "Awareness Campaigns", d: "We educate the public, reduce stigma and promote understanding of Down syndrome through seminars, workshops, school outreach, and nationwide media campaigns across TV, radio, podcasts, print and social media — reaching millions of Ghanaians." },
  { icon: BookOpen, img: initEducation, t: "Inclusive Education Advocacy", d: "We advocate for schools where children with Down syndrome are supported and given equal opportunities. In collaboration with policymakers we aim to provide teacher training, resources and awareness programmes across all 16 regions." },
  { icon: Activity, img: initTherapy, t: "Therapies & Early Intervention", d: "We help children access essential therapies — speech, physical and occupational — through partnerships with qualified professionals, along with developmental assessments, parent education and hospital-based screening." },
  { icon: Mic, img: advocateRawanImg.url, t: "Self-Advocacy", d: "Nothing about us, without us. We are raising a generation of self-advocates — persons with Down syndrome like Rawan and Levan who speak, lead and represent themselves in classrooms, on stage and in policy rooms across Ghana." },
  { icon: ShieldCheck, img: initAdvocacy, t: "Advocacy & Policy", d: "Our Executive Director serves on the Board of the National Council on Persons with Disabilities. We engage the Ministry of Gender, Children and Social Protection to influence inclusive education, healthcare access and social protection policies." },
  { icon: Users, img: initFamily, t: "Family Support Network", d: "Our active WhatsApp support groups and area groups provide a safe space for caregivers to connect, share and seek advice. Over 1000 families across Ghana have benefited from our programmes, resources and guidance." },
  { icon: Handshake, img: initPartners, t: "Partnerships & Collaborations", d: "Collaboration drives everything we do. DSAG proudly works with local and international partners across health, education, policy and advocacy to expand our reach and strengthen inclusion." },
];

const partners = [
  "Love Without Boundaries Foundation (LWB)",
  "Down Syndrome International (DSi)",
  "Inclusion Ghana",
  "Paediatric Society of Ghana",
  "Ghana Education Service (GES)",
  "Sena Paediatric Therapy Centre",
  "Rare Disease Ghana Initiative",
  "Ghana Federation of Disability Organisations (GFD)",
  "Ministry of Gender, Children and Social Protection",
  "National Council on Persons with Disabilities (NCPD)",
  "Ghana Health Service (GHS)",
  "Mission Pediatrics",
  "Ibrahim Mahama Global Foundation",
  "Petra Trust",
  "Galaxy International School",
];

function InitiativesPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Our Initiatives" title="Spearheading impactful change." subtitle="Programmes that foster awareness, inclusion, healthcare and family support for individuals with Down syndrome across Ghana." bgImage={heroBg} />
        <section className="max-w-7xl mx-auto px-6 py-20 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {initiatives.map((i) => (
            <div key={i.t} className="bg-card rounded-2xl border border-border shadow-soft hover:shadow-card transition overflow-hidden flex flex-col">
              <div className="aspect-[16/10] overflow-hidden bg-muted">
                <img src={i.img} alt={i.t} loading="lazy" className={`w-full h-full object-cover ${i.t === "Self-Advocacy" ? "object-top" : ""}`} />
              </div>
              <div className="p-7">
                <div className="h-12 w-12 rounded-xl bg-accent text-accent-foreground flex items-center justify-center mb-4">
                  <i.icon className="h-6 w-6" />
                </div>
                <h3 className="font-display font-bold text-lg">{i.t}</h3>
                <p className="text-muted-foreground text-sm mt-3 leading-relaxed">{i.d}</p>
              </div>
            </div>
          ))}
        </section>

        <section className="bg-surface border-y border-border">
          <div className="max-w-7xl mx-auto px-6 py-20">
            <div className="text-center max-w-2xl mx-auto mb-10">
              <span className="text-sm font-semibold text-primary uppercase tracking-widest">Partners</span>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-3">Walking together</h2>
              <p className="mt-4 text-muted-foreground">Through these partnerships we share resources, exchange expertise and deliver programmes that expand our reach across Ghana.</p>
            </div>
            <div className="flex flex-wrap justify-center gap-3">
              {partners.map((p) => (
                <span key={p} className="bg-card border border-border rounded-full px-5 py-2.5 text-sm font-medium">{p}</span>
              ))}
            </div>
          </div>
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
