import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Heart, Quote, MapPin, Clock, ChevronLeft, ChevronRight, X, ZoomIn, Play, Mic } from "lucide-react";
import { useEffect, useState, useCallback } from "react";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";

// ── Slider ──
import slider1 from "@/assets/slider-1.jpg";
import slider2 from "@/assets/slider-2.jpg";
import slider3 from "@/assets/slider-3.jpg";
import sliderEmmanuella from "@/assets/slider-emmanuella.jpg";
import projectFrederickMedical from "@/assets/project-frederick-medical.jpg";
import projectRockSocks from "@/assets/project-rock-socks.jpg";
import projectFamilyDayOut from "@/assets/project-family-day-out.jpg.asset.json";
import projectHealthScreening2 from "@/assets/project-health-screening-2.jpg.asset.json";
import projectDataCollection1 from "@/assets/project-data-collection-1.jpg.asset.json";

// ── About / Hero ──
import aboutHero from "@/assets/about-hero.jpg";
import aboutMother from "@/assets/about-mother.jpg";
import volunteerImg from "@/assets/volunteer-cta.jpg";
import volunteerSlide1 from "@/assets/volunteer-slide-1.jpg";
import volunteerSlide2 from "@/assets/volunteer-slide-2.jpg";
import volunteerSlide3 from "@/assets/volunteer-slide-3.jpg";

// ── Causes ──
import causeEducation from "@/assets/cause-education.jpg";
import causeFamilies from "@/assets/cause-families.jpg";
import causeHealth from "@/assets/cause-health.jpg";
import causeAdvocacy from "@/assets/cause-advocacy.jpg";
import causeTherapy from "@/assets/cause-therapy.jpg";
import causeEarly from "@/assets/cause-early.jpg";
import projectMedicalSupport from "@/assets/project-medical-support.jpg";
import projectSchoolEngagement from "@/assets/project-school-engagement.jpg";

// ── Events ──
import eventHospital from "@/assets/event-hospital.jpg";
import eventWalk from "@/assets/event-walk.jpg";
import eventParentsForum from "@/assets/event-parents-forum.jpg";

// ── Partner Logos ──
import logoGhs from "@/assets/logo-ghs.png";
import logoSena from "@/assets/logo-sena.png";
import logoGes from "@/assets/logo-ges.png";
import logoGender from "@/assets/logo-gender.png";
import logoDsi from "@/assets/logo-dsi.jpg";
import logoLwb from "@/assets/logo-lwb.png";
import logoAdsn from "@/assets/logo-adsn.png";
import logoMorainbow from "@/assets/logo-morainbow.png";
import logoInclusionGhana from "@/assets/logo-inclusion-ghana.jpg";
import logoGfd from "@/assets/logo-gfd.jpg";
import logoDzata from "@/assets/logo-dzata.png";
import logoGalaxy from "@/assets/logo-galaxy.png";
import logoPetra from "@/assets/logo-petra.png";
import logoImgFoundation from "@/assets/logo-img-foundation.jpg";
import logoInstallation from "@/assets/logo-installation.png";
import logoMissionPediatrics from "@/assets/logo-mission-pediatrics.jpg";
import logoLittleHearts from "@/assets/logo-little-hearts.png";
import logoPaediatricSociety from "@/assets/logo-paediatric-society.jpg";
import logoRareDisease from "@/assets/logo-rare-disease.png";

// ── Gallery ──
import galleryAbout1 from "@/assets/gallery-about-1.jpg";
import galleryAbout2 from "@/assets/gallery-about-2.jpg";
import galleryAbout3 from "@/assets/gallery-about-3.jpg";
import galleryAwareness1 from "@/assets/gallery-awareness-1.jpg";
import galleryAwareness2 from "@/assets/gallery-awareness-2.jpg";
import galleryAwareness3 from "@/assets/gallery-awareness-3.jpg";
import galleryAwareness4 from "@/assets/gallery-awareness-4.jpg";
import galleryFamilies1 from "@/assets/gallery-families-1.jpg";
import galleryFamilies2 from "@/assets/gallery-families-2.jpg";
import galleryFamilies3 from "@/assets/gallery-families-3.jpg";
import galleryFamilies4 from "@/assets/gallery-families-4.jpg";
import galleryTherapy1 from "@/assets/gallery-therapy-1.jpg";
import galleryTherapy2 from "@/assets/gallery-therapy-2.jpg";
import galleryTherapy3 from "@/assets/gallery-therapy-3.jpg";
import galleryEducation1 from "@/assets/gallery-education-1.jpg";
import galleryEducation2 from "@/assets/gallery-education-2.jpg";
import galleryEducation3 from "@/assets/gallery-education-3.jpg";
import galleryHospital1 from "@/assets/gallery-hospital-1.jpg";
import galleryHospital2 from "@/assets/gallery-hospital-2.jpg";
import galleryHospital3 from "@/assets/gallery-hospital-3.jpg";
import galleryHospital4 from "@/assets/gallery-hospital-4.jpg";
import galleryLaunch1 from "@/assets/gallery-launch-1.jpg";
import galleryLaunch2 from "@/assets/gallery-launch-2.jpg";
import galleryLaunch3 from "@/assets/gallery-launch-3.jpg";
import galleryLaunch4 from "@/assets/gallery-launch-4.jpg";
import galleryHealth1 from "@/assets/gallery-health-1.jpg";
import galleryHealth2 from "@/assets/gallery-health-2.jpg";
import galleryHealth3 from "@/assets/gallery-health-3.jpg";
import galleryHealth4 from "@/assets/gallery-health-4.jpg";
import galleryHealth5 from "@/assets/gallery-health-5.jpg";
import advocacyProf from "@/assets/advocacy-prof.jpg.asset.json";
const galleryAdvocacy1 = advocacyProf.url;
import galleryAdvocacy2 from "@/assets/gallery-advocacy-2.jpg";
import galleryAdvocacy3 from "@/assets/gallery-advocacy-3.jpg";
import galleryAdvocacy4 from "@/assets/gallery-advocacy-4.jpg";
import galleryVolunteers1 from "@/assets/gallery-volunteers-1.jpg";
import galleryVolunteers2 from "@/assets/gallery-volunteers-2.jpg";
import galleryVolunteers3 from "@/assets/gallery-volunteers-3.jpg";
import galleryHeartcare1 from "@/assets/gallery-heartcare-1.jpg";
import galleryHeartcare2 from "@/assets/gallery-heartcare-2.jpg";
import galleryHeartcare3 from "@/assets/gallery-heartcare-3.jpg";
import galleryCommunity1 from "@/assets/gallery-community-1.jpg";
import galleryCommunity2 from "@/assets/gallery-community-2.jpg";
import galleryDonation1 from "@/assets/gallery-donation-1.jpg";
import galleryParents1 from "@/assets/gallery-parents-1.jpg";
import galleryParents2 from "@/assets/gallery-parents-2.jpg";
import galleryRawan from "@/assets/gallery-rawan.jpg";
import galleryLevan from "@/assets/gallery-levan.jpg";

// ── Testimonials ──
import testDoreen from "@/assets/test-doreen.jpg.asset.json";
import testVera from "@/assets/test-vera.jpg.asset.json";
import testAkua from "@/assets/test-akua.jpg.asset.json";
import testFamily from "@/assets/test-family.jpg.asset.json";
import testTodah from "@/assets/test-todah.jpg.asset.json";
import testCayden from "@/assets/test-cayden.jpg.asset.json";
import testLester from "@/assets/test-lester.jpg.asset.json";
import testSylvester from "@/assets/test-sylvester.jpg.asset.json";
import testJinan from "@/assets/test-jinan.jpg.asset.json";
import bbcDavid from "@/assets/bbc-david.jpg.asset.json";

// ── Self-Advocates ──
import advocateRawanImg from "@/assets/advocate-rawan.jpg.asset.json";
import advocateLevanImg from "@/assets/advocate-levan.jpg.asset.json";
import advocateRawanVideo from "@/assets/rawan-self-advocate.mp4.asset.json";
import advocateLevanVideo from "@/assets/levan-self-advocate.mp4.asset.json";

// ── Latest event ──
import eventHeartStill from "@/assets/event-heart-screening.jpg.asset.json";

// ── Extra volunteer slide ──
import volunteerSlide4 from "@/assets/volunteer-slide-4.jpg.asset.json";

// ── Homepage swaps ──
import homepageSelfAdv1 from "@/assets/homepage-self-advocacy-1.jpg.asset.json";
import homepageSelfAdv2 from "@/assets/homepage-self-advocacy-2.jpg.asset.json";
import homepageHospitalAlt from "@/assets/homepage-hospital-alt.jpg.asset.json";
import podcastSecondImg from "@/assets/podcast-second.jpg.asset.json";
import dsagQrCode from "@/assets/dsag-qr-code.jpg.asset.json";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Down Syndrome Association of Ghana (DSAG) - Support & Advocacy in Africa" },
      { name: "description", content: "The leading Down Syndrome Association in Ghana and Africa. We empower individuals with Down syndrome through awareness, advocacy, and comprehensive family support programs." },
      { name: "keywords", content: "Down Syndrome, Down Syndrome Ghana, disability, disability in Ghana, intellectual disability, intellectual disability in Ghana, inclusion, inclusion in Ghana, Downs in Ghana, Down Syndrome Ghana, Mental Health in Ghana, Trisomy 21 in Ghana, Down Syndrome Association of Ghana, Trisomy in Ghana, 47 chromosomes Ghana, Down Syndrome Africa, DSAG, Down Syndrome Association, support, families, special needs, Ghana, Africa" },
      { property: "og:title", content: "Down Syndrome Association of Ghana (DSAG) - Support & Advocacy in Africa" },
      { property: "og:description", content: "The leading Down Syndrome Association in Ghana and Africa. We empower individuals with Down syndrome through awareness, advocacy, and comprehensive family support programs." },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "https://www.downsyndromeghana.org" },
      { property: "og:image", content: "https://www.downsyndromeghana.org/dsag-logo.jpg" },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:title", content: "Down Syndrome Association of Ghana (DSAG) - Support & Advocacy in Africa" },
      { name: "twitter:description", content: "The leading Down Syndrome Association in Ghana and Africa. We empower individuals with Down syndrome through awareness, advocacy, and comprehensive family support programs." },
      { name: "twitter:image", content: "https://www.downsyndromeghana.org/dsag-logo.jpg" }
    ],
  }),
  component: HomePage,
});

// ── Data ──────────────────────────────────────────────────────────────────────
const slides: {
  word: string;
  title: string;
  desc: string;
  image: string;
  align?: "left" | "right";
  primary: { to: string; label: string };
  secondary: { to: string; label: string };
}[] = [
  {
    word: "LEARN",
    title: "Over 35,000 Ghanaians live with Down syndrome.",
    desc: "Yet reliable data, services and inclusion remain scarce. Learn the facts behind the figures and why awareness matters.",
    image: slider1,
    align: "left",
    primary: { to: "/about-down-syndrome", label: "Learn More" },
    secondary: { to: "/impact", label: "Key Facts" },
  },
  {
    word: "CARE",
    title: "Every life deserves to shine.",
    desc: "Through our initiatives and causes, we champion acceptance, inclusion and empowerment in every community.",
    image: slider3,
    align: "left",
    primary: { to: "/initiatives", label: "Our Initiatives" },
    secondary: { to: "/causes", label: "Our Causes" },
  },
  {
    word: "EMPOWER",
    title: "Creating opportunities. Unlocking potential.",
    desc: "We walk with persons with Down syndrome and their families — opening doors to healthcare, education and a life of dignity.",
    image: sliderEmmanuella,
    align: "right",
    primary: { to: "/projects", label: "Our Projects" },
    secondary: { to: "/about-down-syndrome", label: "About Down Syndrome" },
  },
  {
    word: "ACT",
    title: "Drive change with us.",
    desc: "Volunteer your time, voice or resources — partner with DSAG to build a more inclusive Ghana.",
    image: slider2,
    align: "right",
    primary: { to: "/volunteer", label: "Volunteer" },
    secondary: { to: "/donate", label: "Donate / Partner" },
  },
];

const featuredProjects = [
  { img: causeEarly, kicker: "Early Intervention", title: "Hospital Visibility Project", desc: "Equipping maternity wards across Ghana with up-to-date Down syndrome guidance for new parents." },
  { img: projectFrederickMedical, pos: "object-top", kicker: "Healthcare", title: "Little Hearts Project", desc: "Facilitating access to life-saving care for children with congenital heart conditions." },
  { img: projectSchoolEngagement, kicker: "Education", title: "School Engagement Project", desc: "Interactive sessions in schools building a more inclusive future generation." },
  { img: projectHealthScreening2.url, kicker: "Healthcare", title: "Annual Health Screening Project", desc: "Free annual screenings — vision, hearing, dental and cardiac — for persons with Down syndrome across Ghana." },
  { img: projectFamilyDayOut.url, kicker: "Community", title: "Family Day Out Project", desc: "Our annual celebration bringing families of persons with Down syndrome together for play, connection and joy." },
  { img: projectRockSocks, pos: "object-top", kicker: "Awareness", title: "Rock Your Socks Campaign", desc: "Our signature WDSD campaign — mismatched socks worldwide to celebrate the extra chromosome and spark conversations on inclusion." },
  { img: causeAdvocacy, kicker: "Advocacy", title: "31 Days of Awareness Project", desc: "Daily stories that humanise disability and break deeply rooted stigma across Ghana." },
  { img: projectDataCollection1.url, kicker: "Research", title: "Data Collection of Persons with Down Syndrome Project", desc: "Documenting persons with Down syndrome across Ghana to build the evidence base for stronger policy and services." },
] as { img: string; pos?: string; kicker: string; title: string; desc: string }[];

const events = [
  { d: "06", m: "JUN", title: "Heart Health Screening Outreach", time: "June 6, 2026", place: "Little Hearts Medical Practice, Accra", img: eventHeartStill.url },
  { d: "21", m: "MAR", title: "Buddy Walk for Inclusion", time: "March 21, 2026", place: "Accra — World Down Syndrome Day", img: eventWalk },
  { d: "16", m: "MAR", title: "Hospital Visibility Programme", time: "March 16 — 18, 2026", place: "Selected hospitals, Accra", img: eventHospital },
  { d: "21", m: "OCT", title: "Parents' Forum", time: "October 21, 2024", place: "Accra", img: eventParentsForum },
];

const volunteerSlides: { src: string; pos?: string }[] = [
  { src: volunteerSlide1 },
  { src: volunteerSlide2 },
  { src: volunteerSlide3 },
  { src: volunteerSlide4.url },
  { src: volunteerImg, pos: "object-top" },
];


const galleryItems = [
  // Hero tiles
  { id: 1,  src: galleryHealth1,     caption: "Health Screening & Family Day Out",               category: "Events",       span: "col-span-2 row-span-2" },
  { id: 2,  src: galleryLaunch1,     caption: "Official Launch of DSAG — Accra",                 category: "Events",       span: "" },
  { id: 101, src: homepageSelfAdv1.url, caption: "DSAG families together at our community event",       category: "Families",     span: "" },
  { id: 102, src: homepageSelfAdv2.url, caption: "Joyful moment — a child supported by DSAG",            category: "Families",     span: "" },
  { id: 3,  src: galleryAdvocacy1,   caption: "Prof. Nana Nimo Appiah-Agyekum leading DSAG community advocacy",                    category: "Advocacy",     span: "", pos: "object-top" },
  { id: 4,  src: galleryAwareness1,  caption: "Awareness campaign in the community",             category: "Awareness",    span: "" },
  { id: 5,  src: galleryFamilies1,   caption: "Parents, children and DSAG executives together", category: "Families",     span: "" },
  { id: 6,  src: galleryAbout1,      caption: "DSAG team in the field",                         category: "About Us",     span: "col-span-2" },
  { id: 7,  src: homepageHospitalAlt.url, caption: "Young self-advocate at DSAG community day",  category: "Healthcare",   span: "" },
  { id: 8,  src: galleryTherapy1,    caption: "Therapy assistance session",                      category: "Therapy",      span: "" },
  { id: 9,  src: galleryEducation1,  caption: "Inclusive education school visit",                category: "Education",    span: "" },
  { id: 10, src: galleryVolunteers1, caption: "Volunteers at a DSAG event",                      category: "Volunteers",   span: "" },
  { id: 11, src: galleryHeartcare1,  caption: "Heart care families programme",                   category: "Healthcare",   span: "col-span-2" },
  { id: 12, src: galleryCommunity1,  caption: "Community outreach — hospital visit",             category: "Community",    span: "" },
  { id: 13, src: galleryLaunch2,     caption: "DSAG launch ceremony",                            category: "Events",       span: "" },
  { id: 14, src: galleryAwareness2,  caption: "31 Days of Awareness campaign",                  category: "Awareness",    span: "" },
  { id: 15, src: galleryFamilies2,   caption: "Family support programme gathering",              category: "Families",     span: "" },
  { id: 16, src: galleryAdvocacy2,   caption: "Policy meeting with stakeholders",                category: "Advocacy",     span: "" },
  { id: 17, src: galleryHealth2,     caption: "Children enjoying Family Day activities",         category: "Events",       span: "col-span-2" },
  { id: 18, src: galleryAbout2,      caption: "DSAG field team",                                 category: "About Us",     span: "" },
  { id: 19, src: galleryHospital2,   caption: "Hospital outreach engagement",                    category: "Healthcare",   span: "" },
  { id: 20, src: galleryTherapy2,    caption: "One-on-one therapy assistance",                   category: "Therapy",      span: "" },
  { id: 21, src: galleryEducation2,  caption: "School inclusion programme",                      category: "Education",    span: "" },
  { id: 22, src: galleryVolunteers2, caption: "DSAG volunteers in action",                       category: "Volunteers",   span: "" },
  { id: 23, src: galleryParents1,    caption: "Parents forum — sharing experiences",             category: "Community",    span: "col-span-2" },
  { id: 24, src: galleryHeartcare2,  caption: "Heart care family story",                         category: "Healthcare",   span: "" },
  { id: 25, src: galleryFamilies3,   caption: "Families at a DSAG community event",             category: "Families",     span: "" },
  { id: 26, src: galleryAwareness3,  caption: "Awareness walk across Accra",                    category: "Awareness",    span: "" },
  { id: 27, src: galleryLaunch3,     caption: "Launch event gathering",                          category: "Events",       span: "" },
  { id: 28, src: galleryAdvocacy3,   caption: "Advocacy session with officials",                 category: "Advocacy",     span: "col-span-2" },
  { id: 29, src: galleryHospital3,   caption: "Maternity ward hospital outreach",                category: "Healthcare",   span: "" },
  { id: 30, src: galleryEducation3,  caption: "Children in inclusive classroom",                 category: "Education",    span: "" },
  { id: 31, src: galleryTherapy3,    caption: "Group therapy activity",                          category: "Therapy",      span: "" },
  { id: 32, src: galleryVolunteers3, caption: "Volunteer group photo",                           category: "Volunteers",   span: "" },
  { id: 33, src: galleryCommunity2,  caption: "Community day activities",                        category: "Community",    span: "" },
  { id: 34, src: galleryHealth3,     caption: "Health screening in action",                      category: "Events",       span: "col-span-2" },
  { id: 35, src: galleryDonation1,   caption: "Donor partnership moment",                        category: "Community",    span: "" },
  { id: 36, src: galleryParents2,    caption: "Parent sharing at a DSAG forum",                 category: "Community",    span: "" },
  { id: 37, src: galleryAwareness4,  caption: "Awareness outreach event",                       category: "Awareness",    span: "" },
  { id: 38, src: galleryFamilies4,   caption: "Family day celebration",                          category: "Families",     span: "" },
  { id: 39, src: galleryAbout3,      caption: "DSAG community gathering",                        category: "About Us",     span: "col-span-2" },
  { id: 40, src: galleryLaunch4,     caption: "Launch event — DSAG founders",                   category: "Events",       span: "" },
  { id: 41, src: galleryHeartcare3,  caption: "Heart care child portrait",                       category: "Healthcare",   span: "" },
  { id: 42, src: galleryHospital4,   caption: "Hospital programme in session",                   category: "Healthcare",   span: "" },
  { id: 43, src: galleryAdvocacy4,   caption: "Advocacy stand at public event",                  category: "Advocacy",     span: "" },
  { id: 44, src: galleryHealth4,     caption: "Family day health activities",                    category: "Events",       span: "col-span-2" },
  { id: 45, src: galleryHealth5,     caption: "Health screening participants",                   category: "Events",       span: "" },
  { id: 46, src: galleryRawan,       caption: "Rawan — embracing every smile",                  category: "Families",     span: "", pos: "object-top" },
  { id: 47, src: galleryLevan,       caption: "Levan — capturing every moment",                 category: "Families",     span: "", pos: "object-top" },
  { id: 48, src: galleryHospital1,   caption: "Hospital Visibility Programme visit",             category: "Healthcare",   span: "" },
];

const galleryCategories = ["All", ...Array.from(new Set(galleryItems.map((g) => g.category)))];

const partners = [
  { src: logoGhs,           name: "Ghana Health Service" },
  { src: logoSena,          name: "Sena Pediatrics" },
  { src: logoGes,           name: "Ghana Education Service" },
  { src: logoGender,        name: "Ministry of Gender, Children & Social Protection" },
  { src: logoDsi,           name: "Down Syndrome International" },
  { src: logoLwb,           name: "Lumos World Builders" },
  { src: logoAdsn,          name: "ADSN" },
  { src: logoMorainbow,     name: "Morainbow" },
  { src: logoInclusionGhana, name: "Inclusion Ghana" },
  { src: logoGfd,           name: "GFD" },
  { src: logoDzata,         name: "Dzata" },
  { src: logoGalaxy,        name: "Galaxy" },
  { src: logoPetra,         name: "Petra" },
  { src: logoImgFoundation, name: "Ibrahim Mahama Global Foundation" },
  { src: logoInstallation,  name: "Installation Specialists Ltd." },
  { src: logoMissionPediatrics, name: "Mission Pediatrics" },
  { src: logoLittleHearts,  name: "Little Hearts Medical Practice" },
  { src: logoPaediatricSociety, name: "Paediatric Society of Ghana" },
  { src: logoRareDisease,   name: "Rare Disease Ghana Initiative" },
];

const testimonials: { img: string; pos?: string; quote: string; name: string; role: string }[] = [
  {
    img: testDoreen.url,
    quote: "Walking with DSAG, I have found a family that sees Doreen for who she truly is. The community gives us strength on the hard days and joy on the good ones — we are no longer doing this alone.",
    name: "Suzzana Addo",
    role: "Mother of Doreen · Accra",
  },
  {
    img: testTodah.url,
    quote: "Todah is pure light. Growing up with her has taught me patience, joy and what it really means to love someone for exactly who they are. DSAG gave us a community that celebrates her every milestone alongside us.",
    name: "David",
    role: "Brother of Todah",
    pos: "object-top",
  },
  {
    img: testVera.url,
    pos: "object-top",
    quote: "Vera is my sister and my hero. Walking beside her at the Buddy Walk, I see how much she loves being seen. DSAG has built a space where she is celebrated, not pitied — and that has changed our whole family.",
    name: "Blessing",
    role: "Sister of Vera",
  },
  {
    img: testCayden.url,
    pos: "object-top",
    quote: "Cayden is my whole heart. Every smile, every breakthrough is a reminder that he is exactly who he is meant to be. With DSAG behind us, I know we are never walking this journey alone.",
    name: "Cayden's Mum",
    role: "DSAG Mother · Accra",
  },
  {
    img: testLester.url,
    pos: "object-top",
    quote: "Lester has taught me what it really means to be a father. DSAG has given him friends, confidence and a stage to shine on — and given me a brotherhood of fathers walking the same path.",
    name: "Mr Armstrong",
    role: "Father of Lester",
  },
  {
    img: testSylvester.url,
    pos: "object-top",
    quote: "Working with Squishy and every child who walks through our doors is the greatest honour of my life. Volunteering with DSAG has shown me that real change is built in the small, faithful moments of showing up for one another.",
    name: "Sylvester",
    role: "Chief Volunteer Officer · DSAG",
  },
  {
    img: testJinan.url,
    pos: "object-top",
    quote: "As both a mother and an organiser, I have watched DSAG grow from a small circle of families into a national movement. Every programme we run is a promise — that no parent in Ghana will walk this journey alone, and every child will be seen, heard and celebrated.",
    name: "Jinan",
    role: "Chief Operating Officer · DSAG",
  },
  {
    img: testAkua.url,
    pos: "object-top",
    quote: "Akua reminds me every day that ability comes in many forms. Through DSAG she has found her voice, her friends and her confidence. We are proud of her — and proud to walk with this community.",
    name: "Akua's Dad",
    role: "DSAG Parent · Accra",
  },
  {
    img: testFamily.url,
    pos: "object-top",
    quote: "Holding our daughter's hand at the WDSD walk, surrounded by other families who understand, was a moment we will never forget. DSAG turns isolation into belonging.",
    name: "A DSAG Family",
    role: "Parents · Accra",
  },
];



// ── Component ─────────────────────────────────────────────────────────────────
function HomePage() {
  const [slideIdx, setSlideIdx] = useState(0);
  const [projectIdx, setProjectIdx] = useState(0);
  const [volunteerIdx, setVolunteerIdx] = useState(0);
  const [testimonialIdx, setTestimonialIdx] = useState(0);
  const [activeCategory, setActiveCategory] = useState("All");
  const [lightboxIdx, setLightboxIdx] = useState<number | null>(null);
  const [showAllGallery, setShowAllGallery] = useState(false);

  useEffect(() => {
    const t = window.setInterval(() => setSlideIdx((x) => (x + 1) % slides.length), 4000);
    return () => window.clearInterval(t);
  }, []);

  useEffect(() => {
    const t = window.setInterval(() => setVolunteerIdx((x) => (x + 1) % volunteerSlides.length), 3500);
    return () => window.clearInterval(t);
  }, []);

  useEffect(() => {
    const t = window.setInterval(() => setTestimonialIdx((x) => (x + 1) % testimonials.length), 7000);
    return () => window.clearInterval(t);
  }, []);

  const s = slides[slideIdx];
  const prevProject = () => setProjectIdx((x) => (x - 1 + featuredProjects.length) % featuredProjects.length);
  const nextProject = () => setProjectIdx((x) => (x + 1) % featuredProjects.length);

  const filteredGallery = activeCategory === "All"
    ? galleryItems
    : galleryItems.filter((g) => g.category === activeCategory);

  const visibleGallery = showAllGallery ? filteredGallery : filteredGallery.slice(0, 12);

  const lightboxNext = useCallback(() => {
    if (lightboxIdx === null) return;
    setLightboxIdx((lightboxIdx + 1) % filteredGallery.length);
  }, [lightboxIdx, filteredGallery.length]);

  const lightboxPrev = useCallback(() => {
    if (lightboxIdx === null) return;
    setLightboxIdx((lightboxIdx - 1 + filteredGallery.length) % filteredGallery.length);
  }, [lightboxIdx, filteredGallery.length]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setLightboxIdx(null);
      if (e.key === "ArrowRight") lightboxNext();
      if (e.key === "ArrowLeft") lightboxPrev();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [lightboxNext, lightboxPrev]);

  // Reset showAll when category changes
  useEffect(() => { setShowAllGallery(false); setLightboxIdx(null); }, [activeCategory]);

  return (
    <div className="min-h-screen flex flex-col bg-background overflow-x-hidden">
      <SiteHeader />
      <main className="flex-1">

        {/* ── HERO SLIDER ── */}
        <section className="relative overflow-hidden bg-foreground">
          {slides.map((sl, idx) => (
            <img
              key={idx}
              src={sl.image}
              alt=""
              className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${idx === slideIdx ? "opacity-90" : "opacity-0"}`}
            />
          ))}
          {/* Lighter overlay to make pictures more visible — direction follows slide alignment */}
          <div className={`absolute inset-0 ${s.align === "right" ? "bg-gradient-to-l" : "bg-gradient-to-r"} from-black/55 via-black/20 to-transparent`} />
          <div className="relative max-w-7xl mx-auto px-6 py-28 lg:py-44 text-white">
            <div className={`${s.align === "right" ? "ml-auto text-right items-end" : "items-start"} flex flex-col max-w-3xl`}>
              <div className="text-xs font-bold tracking-[0.3em] uppercase text-accent mb-4 drop-shadow-md">— DSAG · Since 2020</div>
              <div className="font-display font-black text-accent leading-none text-7xl md:text-9xl lg:text-[11rem] drop-shadow-2xl">
                {s.word}
              </div>
              <h1 className="font-display font-bold text-3xl md:text-5xl mt-6 leading-tight drop-shadow-lg">{s.title}</h1>
              <p className={`mt-5 text-base md:text-lg max-w-xl font-medium drop-shadow-md ${s.align === "right" ? "ml-auto" : ""}`}>{s.desc}</p>
              <div className={`mt-8 flex flex-wrap gap-3 ${s.align === "right" ? "justify-end" : ""}`}>
                <Link to={s.primary.to} className="inline-flex items-center gap-2 bg-accent text-accent-foreground font-bold uppercase tracking-wide px-7 py-4 text-sm hover:opacity-90 transition shadow-xl">
                  {s.primary.label} <ArrowRight className="h-4 w-4" />
                </Link>
                <Link to={s.secondary.to} className="inline-flex items-center gap-2 border-2 border-white text-white font-bold uppercase tracking-wide px-7 py-4 text-sm hover:bg-white hover:text-foreground transition shadow-xl">
                  {s.secondary.label} <ArrowRight className="h-4 w-4" />
                </Link>
              </div>
            </div>
            <div className={`mt-10 flex gap-3 ${s.align === "right" ? "justify-end" : ""}`}>
              {slides.map((_, idx) => (
                <button key={idx} aria-label={`Slide ${idx + 1}`} onClick={() => setSlideIdx(idx)}
                  className={`h-2 transition-all cursor-pointer hover:bg-accent/80 rounded-full ${idx === slideIdx ? "w-16 bg-accent" : "w-8 bg-white/40"}`} />
              ))}
            </div>
          </div>
        </section>

        {/* ── THREE-COLUMN ── */}
        <section className="bg-surface border-b border-border">
          <div className="max-w-7xl mx-auto px-6 py-16 grid lg:grid-cols-2 gap-10">
            {/* Featured Projects */}
            <div>
              <div className="flex items-center justify-between">
                <SectionTitle>Featured Projects</SectionTitle>
                <div className="flex gap-1">
                  <button onClick={prevProject} aria-label="Previous" className="h-9 w-9 bg-card border border-border flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition rounded-lg">
                    <ChevronLeft className="h-4 w-4" />
                  </button>
                  <button onClick={nextProject} aria-label="Next" className="h-9 w-9 bg-card border border-border flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition rounded-lg">
                    <ChevronRight className="h-4 w-4" />
                  </button>
                </div>
              </div>
              <div className="mt-6 border border-border bg-card shadow-soft rounded-2xl" style={{ overflow: "hidden" }}>
                <div style={{ display: "flex", width: `${featuredProjects.length * 100}%`, transform: `translateX(-${(projectIdx * 100) / featuredProjects.length}%)`, transition: "transform 500ms cubic-bezier(0.4,0,0.2,1)" }}>
                  {featuredProjects.map((pr) => {
                    const fit = pr.pos === "object-top" ? "object-contain" : "object-cover";
                    return (
                    <div key={pr.title} style={{ width: `${100 / featuredProjects.length}%`, flexShrink: 0 }}>
                      <div className="w-full h-56 bg-muted rounded-t-2xl overflow-hidden flex items-center justify-center">
                        <img src={pr.img} alt={pr.title} className={`w-full h-full ${fit} ${pr.pos ?? "object-center"}`} />
                      </div>
                      <div className="p-5">
                        <div className="text-xs uppercase tracking-widest text-primary font-bold">{pr.kicker}</div>
                        <h3 className="font-display font-bold text-lg mt-2 text-foreground">{pr.title}</h3>
                        <p className="text-sm text-muted-foreground mt-2 leading-relaxed">{pr.desc}</p>
                        <Link to="/projects" className="inline-flex items-center gap-1 mt-4 text-primary font-bold text-sm uppercase tracking-wide hover:gap-2 transition-all">
                          Read More <ArrowRight className="h-4 w-4" />
                        </Link>
                      </div>
                    </div>
                    );
                  })}
                </div>
              </div>
              <div className="mt-4 flex gap-1.5">
                {featuredProjects.map((_, idx) => (
                  <button key={idx} onClick={() => setProjectIdx(idx)}
                    className={`h-1.5 transition-all rounded-full ${idx === projectIdx ? "w-8 bg-primary" : "w-4 bg-border"}`} />
                ))}
              </div>
            </div>




            {/* Events */}
            <div>
              <SectionTitle>Upcoming Events</SectionTitle>
              <div className="mt-4 mb-8 p-4 rounded-xl border border-dashed border-border bg-background/60 text-sm text-muted-foreground">
                None scheduled at the moment — check back soon.
              </div>
              <SectionTitle>Previously Held Events</SectionTitle>
              <ul className="mt-6 space-y-5">
                {events.map((ev) => (
                  <li key={ev.title} className="flex gap-4 pb-5 border-b border-border last:border-0 last:pb-0">
                    <img src={ev.img} alt="" className="h-20 w-20 object-cover shrink-0 rounded-lg" />
                    <div className="flex-1 min-w-0">
                      <h4 className="font-display font-bold text-foreground leading-snug">{ev.title}</h4>
                      <div className="mt-1.5 text-xs text-muted-foreground flex items-center gap-1.5"><Clock className="h-3 w-3 shrink-0" />{ev.time}</div>
                      <div className="mt-1 text-xs text-muted-foreground flex items-center gap-1.5"><MapPin className="h-3 w-3 shrink-0" />{ev.place}</div>
                    </div>
                    <div className="text-center shrink-0">
                      <div className="font-display font-black text-3xl text-primary leading-none">{ev.d}</div>
                      <div className="text-[10px] font-bold tracking-widest text-muted-foreground mt-1">{ev.m}</div>
                    </div>
                  </li>
                ))}
              </ul>

              <Link to="/events" className="inline-flex items-center gap-1 mt-5 text-primary font-bold text-sm uppercase tracking-wide hover:gap-2 transition-all">
                All Events <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </section>

        {/* ── WHO WE ARE ── */}
        <section className="max-w-7xl mx-auto px-6 py-20 lg:py-24 grid lg:grid-cols-2 gap-12 items-center">
          <div className="relative">
            <img src={aboutHero} alt="DSAG team" className="w-full object-cover shadow-card rounded-2xl" />
            <div className="hidden md:block absolute -bottom-6 -right-6 bg-primary text-primary-foreground p-6 max-w-[240px] shadow-card rounded-xl">
              <div className="font-display font-black text-4xl leading-none">2020</div>
              <div className="text-xs uppercase tracking-widest mt-2 opacity-90">Founded with love</div>
            </div>
          </div>
          <div>
            <SectionTitle>Who We Are</SectionTitle>
            <h2 className="font-display font-bold text-3xl md:text-4xl mt-5 text-foreground leading-tight">
              A history of love, resilience and shared vision.
            </h2>
            <p className="mt-5 text-muted-foreground leading-relaxed">
              On April 15, 2020, three mothers and a father gathered at the Alliance Française Accra cafeteria.
              United by their shared experience of raising children with Down syndrome, they envisioned a future
              where individuals with Down syndrome would be accepted and empowered. That vision sparked the
              birth of DSAG — today our work reaches families in all 16 regions of Ghana.
            </p>
            <div className="mt-6 grid grid-cols-2 gap-4">
              {[
                { n: "16",     l: "Regions of Ghana reached" },
                { n: "35,000+", l: "Ghanaians with Down syndrome" },
                { n: "1M+",    l: "Educated through campaigns" },
                { n: "1000+",  l: "Families supported" },
              ].map((st) => (
                <div key={st.l} className="border-l-4 border-accent pl-4">
                  <div className="font-display font-black text-2xl text-foreground">{st.n}</div>
                  <div className="text-xs text-muted-foreground">{st.l}</div>
                </div>
              ))}
            </div>
            <div className="mt-7 flex flex-wrap gap-3">
              <Link to="/about" className="inline-flex items-center gap-2 bg-primary text-primary-foreground font-bold uppercase tracking-wide px-6 py-3 text-sm hover:bg-primary-dark transition">
                About DSAG <ArrowRight className="h-4 w-4" />
              </Link>
              <Link to="/about" className="inline-flex items-center gap-2 border-2 border-primary text-primary font-bold uppercase tracking-wide px-6 py-3 text-sm hover:bg-primary hover:text-primary-foreground transition">
                Meet Our Board
              </Link>
            </div>
          </div>
        </section>

        {/* ── WDSD MINI DOCUMENTARY ── */}
        <section id="documentary" className="bg-foreground text-background scroll-mt-32">
          <div className="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-5 gap-10 items-center">
            <div className="lg:col-span-2">
              <div className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.3em] text-accent">
                <Play className="h-3.5 w-3.5" /> Mini Documentary
              </div>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-4 leading-tight">
                "Inclusion Means…" — our WDSD story.
              </h2>
              <p className="mt-5 text-background/80 leading-relaxed">
                Filmed for World Down Syndrome Day, this short film shares real voices from individuals,
                families and professionals across Ghana — and the everyday meaning of inclusion. A few minutes
                that capture years of community, courage and hope.
              </p>
              <a
                href="https://youtu.be/Z493aGi34EQ"
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 mt-7 bg-accent text-accent-foreground font-bold uppercase tracking-wide px-7 py-4 text-sm hover:opacity-90 transition"
              >
                Watch on YouTube <ArrowRight className="h-4 w-4" />
              </a>
            </div>
            <div className="lg:col-span-3">
              <div className="relative w-full aspect-video rounded-2xl overflow-hidden shadow-2xl ring-1 ring-white/10">
                <iframe
                  src="https://www.youtube.com/embed/Z493aGi34EQ?rel=0"
                  title="DSAG WDSD Mini Documentary — Inclusion Means…"
                  loading="lazy"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowFullScreen
                  className="absolute inset-0 w-full h-full border-0"
                />
              </div>
            </div>
          </div>
        </section>

        {/* ── PODCASTS ── */}
        <section id="podcasts" className="bg-background border-b border-border scroll-mt-32">
          <div className="max-w-6xl mx-auto px-6 py-16">
            <div className="text-center max-w-2xl mx-auto mb-10">
              <div className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.3em] text-primary">
                <Mic className="h-3.5 w-3.5" /> Podcasts
              </div>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-3 leading-tight text-foreground">
                DSAG on the airwaves.
              </h2>
              <p className="mt-3 text-sm text-muted-foreground leading-relaxed">
                Listen to conversations carrying Ghana's Down syndrome community onto international platforms.
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-6">
              {/* BBC Podcast */}
              <div id="bbc" className="bg-card border border-border rounded-2xl shadow-soft overflow-hidden flex flex-col sm:flex-row items-stretch scroll-mt-32">
                <div className="sm:w-44 shrink-0 bg-muted">
                  <img src={bbcDavid.url} alt="David and his sister Todah — featured in DSAG's BBC podcast" className="w-full h-48 sm:h-full object-cover object-top img-enhance" />
                </div>
                <div className="flex-1 p-6">
                  <div className="text-[11px] font-bold uppercase tracking-[0.25em] text-primary">BBC Podcast</div>
                  <h3 className="font-display font-bold text-lg mt-2 leading-tight">DSAG on BBC Sounds</h3>
                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
                    Our Project Manager joined BBC Sounds to share the realities, joys and advocacy of families raising children with Down syndrome in Ghana.
                  </p>
                  <a
                    href="https://www.bbc.co.uk/sounds/play/p0k7nh4f?partner=uk.co.bbc&origin=share-mobile"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 mt-4 bg-primary text-primary-foreground font-bold uppercase tracking-wide px-4 py-2 text-xs hover:bg-primary-dark transition rounded-full"
                  >
                    Listen on BBC Sounds <ArrowRight className="h-3.5 w-3.5" />
                  </a>
                </div>
              </div>

              {/* Conversations in the Dark Podcast */}
              <div className="bg-card border border-border rounded-2xl shadow-soft overflow-hidden flex flex-col sm:flex-row items-stretch">
                <div className="sm:w-44 shrink-0 bg-muted">
                  <img src={podcastSecondImg.url} alt="DSAG community at Conversations in the Dark podcast recording" className="w-full h-48 sm:h-full object-cover img-enhance" />
                </div>
                <div className="flex-1 p-6">
                  <div className="text-[11px] font-bold uppercase tracking-[0.25em] text-primary">Conversations in the Dark</div>
                  <h3 className="font-display font-bold text-lg mt-2 leading-tight">Living with Down Syndrome — Season Finale</h3>
                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
                    DSAG featured on Episode 7 of "Conversations in the Dark" — a candid conversation on lived experience, family and inclusion in Ghana.
                  </p>
                  <a
                    href="https://podcasts.apple.com/gh/podcast/episode-7-season-finale-living-with-down-syndrome/id1534273836?i=1000498696934"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 mt-4 bg-primary text-primary-foreground font-bold uppercase tracking-wide px-4 py-2 text-xs hover:bg-primary-dark transition rounded-full"
                  >
                    Listen on Apple Podcasts <ArrowRight className="h-3.5 w-3.5" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>


        {/* ── SELF-ADVOCACY ── */}
        <section id="self-advocacy" className="bg-surface border-b border-border scroll-mt-32">
          <div className="max-w-7xl mx-auto px-6 py-20">
            <div className="text-center max-w-3xl mx-auto mb-12">
              <SectionTitle center>Self-Advocacy</SectionTitle>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-4 leading-tight text-foreground">
                Nothing about us, without us.
              </h2>
              <p className="mt-4 text-muted-foreground leading-relaxed">
                DSAG is committed to raising a generation of self-advocates — persons with Down syndrome who
                speak, lead and represent themselves on every stage that matters. Meet two of the young
                voices we are walking alongside.
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              {/* Rawan */}
              <div className="bg-card border border-border rounded-2xl shadow-soft overflow-hidden flex flex-col">
                <div className="grid grid-cols-5">
                  <div className="col-span-2 bg-muted aspect-[3/4]">
                    <img src={advocateRawanImg.url} alt="Rawan — DSAG self-advocate in training" className="w-full h-full object-cover object-top img-enhance" />
                  </div>
                  <div className="col-span-3 bg-black">
                    <video
                      src={advocateRawanVideo.url}
                      controls
                      playsInline
                      preload="metadata"
                      className="w-full h-full aspect-[3/4] object-cover bg-black"
                    />
                  </div>
                </div>
                <div className="p-6">
                  <div className="text-xs font-bold uppercase tracking-[0.3em] text-primary">Self-Advocate in Training</div>
                  <h3 className="font-display font-bold text-xl mt-2 text-foreground">Rawan</h3>
                  <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
                    Daughter of our Chief Operating Officer, Jinan — we are walking with Rawan as she grows
                    into one of Ghana's next leading self-advocates for Down syndrome.
                  </p>
                </div>
              </div>

              {/* Levan */}
              <div className="bg-card border border-border rounded-2xl shadow-soft overflow-hidden flex flex-col">
                <div className="grid grid-cols-5">
                  <div className="col-span-2 bg-muted aspect-[3/4]">
                    <img src={advocateLevanImg.url} alt="Levan — DSAG self-advocate and poet" className="w-full h-full object-cover object-top img-enhance" />
                  </div>
                  <div className="col-span-3 bg-black">
                    <video
                      src={advocateLevanVideo.url}
                      controls
                      playsInline
                      preload="metadata"
                      className="w-full h-full aspect-[3/4] object-cover bg-black"
                    />
                  </div>
                </div>
                <div className="p-6">
                  <div className="text-xs font-bold uppercase tracking-[0.3em] text-primary">Self-Advocate · Poet</div>
                  <h3 className="font-display font-bold text-xl mt-2 text-foreground">Levan</h3>
                  <p className="text-sm text-muted-foreground mt-2 leading-relaxed">
                    A self-advocate who writes and performs his own poetry — using his voice to challenge
                    stigma and show the world what people with Down syndrome can achieve.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* ── WHATSAPP COMMUNITY ── */}
        <section id="whatsapp-community" className="bg-background border-b border-border scroll-mt-32">
          <div className="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-5 gap-10 items-center">
            <div className="lg:col-span-3">
              <div className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.3em] text-primary">
                <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.71.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/></svg>
                WhatsApp Community
              </div>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-4 leading-tight text-foreground">
                Join our vibrant DSAG WhatsApp support group.
              </h2>
              <p className="mt-5 text-muted-foreground leading-relaxed">
                Our WhatsApp community brings together parents, caregivers, health professionals, therapists,
                educators and friends from all <strong>16 regions of Ghana</strong>. Every question can be
                asked, every story shared, every issue addressed — and no family ever has to walk this
                journey alone.
              </p>
              <p className="mt-3 text-muted-foreground leading-relaxed">
                Scan the QR code, or chat with us directly on WhatsApp at{" "}
                <a href="https://wa.me/233207405343" target="_blank" rel="noopener noreferrer" className="text-primary font-semibold hover:underline">
                  +233 (0) 20 740 5343
                </a>.
              </p>
              <div className="mt-7 flex flex-wrap gap-3">
                <a
                  href="https://wa.me/233207405343"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 bg-primary text-primary-foreground font-bold uppercase tracking-wide px-7 py-4 text-sm hover:bg-primary-dark transition shadow-sm"
                >
                  <svg viewBox="0 0 24 24" className="h-4 w-4" fill="currentColor"><path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.817 11.817 0 0 1 8.413 3.488 11.824 11.824 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24z"/></svg>
                  Message us on WhatsApp
                </a>
                <Link to="/contact" className="inline-flex items-center gap-2 border-2 border-primary text-primary font-bold uppercase tracking-wide px-7 py-4 text-sm hover:bg-primary hover:text-primary-foreground transition">
                  Other ways to reach us
                </Link>
              </div>
            </div>
            <div className="lg:col-span-2 flex justify-center">
              <div className="bg-white rounded-2xl shadow-card border border-border p-5 max-w-xs">
                <img src={dsagQrCode.url} alt="QR code linking to DSAG WhatsApp and resources" className="w-full h-auto" />
                <p className="mt-3 text-center text-xs uppercase tracking-widest text-muted-foreground font-bold">Scan to connect</p>
              </div>
            </div>
          </div>
        </section>


        {/* ── PHOTO GALLERY ── */}
        <section className="bg-surface border-t border-b border-border py-20">
          <div className="max-w-7xl mx-auto px-6">
            <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
              <div>
                <SectionTitle>Our Gallery</SectionTitle>
                <p className="mt-3 text-muted-foreground max-w-lg leading-relaxed">
                  Real moments of joy, resilience and community from across Ghana.
                </p>
              </div>
              {/* Category filter */}
              <div className="flex flex-wrap gap-2">
                {galleryCategories.map((cat) => (
                  <button key={cat} onClick={() => setActiveCategory(cat)}
                    className={`px-4 py-1.5 text-xs font-bold uppercase tracking-widest border transition-all rounded-lg ${
                      activeCategory === cat
                        ? "bg-primary text-primary-foreground border-primary"
                        : "bg-card text-muted-foreground border-border hover:border-primary hover:text-primary"
                    }`}>
                    {cat}
                  </button>
                ))}
              </div>
            </div>

            {/* Masonry grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 auto-rows-[200px] gap-3">
              {visibleGallery.map((item, idx) => (
                <button key={item.id} onClick={() => setLightboxIdx(idx)}
                  className={`group relative overflow-hidden bg-muted focus:outline-none focus:ring-2 focus:ring-primary rounded-xl ${
                    activeCategory === "All" ? item.span : ""
                  }`}
                  aria-label={`Open photo: ${item.caption}`}>
                  <img src={item.src} alt={item.caption}
                    className={`absolute inset-0 w-full h-full object-cover ${(item as { pos?: string }).pos ?? "object-center"} transition-transform duration-500 group-hover:scale-105 rounded-xl`} />
                  <div className="absolute inset-0 bg-foreground/0 group-hover:bg-foreground/50 transition-all duration-300 flex flex-col items-center justify-center">
                    <ZoomIn className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-all duration-300 drop-shadow-lg" />
                    <div className="absolute bottom-0 left-0 right-0 p-3 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                      <span className="text-[10px] font-bold uppercase tracking-widest text-accent">{item.category}</span>
                      <p className="text-white text-xs leading-snug mt-0.5 line-clamp-2">{item.caption}</p>
                    </div>
                  </div>
                </button>
              ))}
            </div>

            <div className="mt-8 text-center flex flex-wrap gap-3 justify-center">
              {!showAllGallery && filteredGallery.length > 12 && (
                <button onClick={() => setShowAllGallery(true)}
                  className="inline-flex items-center gap-2 bg-primary text-primary-foreground font-bold uppercase tracking-wide px-7 py-3 text-sm hover:bg-primary-dark transition">
                  Load More Photos <ArrowRight className="h-4 w-4" />
                </button>
              )}
              <Link to="/news" className="inline-flex items-center gap-2 border-2 border-primary text-primary font-bold uppercase tracking-wide px-7 py-3 text-sm hover:bg-primary hover:text-primary-foreground transition">
                View All Media <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </section>

        {/* ── LIGHTBOX ── */}
        {lightboxIdx !== null && filteredGallery[lightboxIdx] && (
          <div className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center p-4"
            onClick={() => setLightboxIdx(null)} role="dialog" aria-modal="true">
            <button onClick={() => setLightboxIdx(null)} aria-label="Close"
              className="absolute top-5 right-5 h-10 w-10 bg-white/10 hover:bg-white/25 text-white flex items-center justify-center transition">
              <X className="h-5 w-5" />
            </button>
            <button onClick={(e) => { e.stopPropagation(); lightboxPrev(); }} aria-label="Previous"
              className="absolute left-4 top-1/2 -translate-y-1/2 h-12 w-12 bg-white/10 hover:bg-white/25 text-white flex items-center justify-center transition">
              <ChevronLeft className="h-6 w-6" />
            </button>
            <div className="relative max-w-5xl w-full flex flex-col items-center" onClick={(e) => e.stopPropagation()}>
              <img src={filteredGallery[lightboxIdx].src} alt={filteredGallery[lightboxIdx].caption}
                className="max-h-[75vh] w-auto max-w-full object-contain shadow-2xl" />
              <div className="mt-4 text-center">
                <span className="text-xs font-bold uppercase tracking-widest text-accent">{filteredGallery[lightboxIdx].category}</span>
                <p className="text-white/80 text-sm mt-1">{filteredGallery[lightboxIdx].caption}</p>
                <p className="text-white/40 text-xs mt-2">{lightboxIdx + 1} / {filteredGallery.length}</p>
              </div>
            </div>
            <button onClick={(e) => { e.stopPropagation(); lightboxNext(); }} aria-label="Next"
              className="absolute right-4 top-1/2 -translate-y-1/2 h-12 w-12 bg-white/10 hover:bg-white/25 text-white flex items-center justify-center transition">
              <ChevronRight className="h-6 w-6" />
            </button>
          </div>
        )}

        {/* ── CALLOUT ── */}
        <section className="bg-primary text-primary-foreground">
          <div className="max-w-7xl mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between gap-6 text-center md:text-left">
            <h3 className="font-display text-2xl md:text-3xl font-bold">Contact us to donate or partner with us.</h3>
            <div className="flex flex-wrap gap-3 justify-center">
              <Link to="/contact" className="inline-flex items-center gap-2 bg-accent text-accent-foreground font-bold uppercase tracking-wide px-7 py-4 text-sm hover:opacity-90 transition shrink-0">
                Contact Us <ArrowRight className="h-4 w-4" />
              </Link>
              <Link to="/donate" className="inline-flex items-center gap-2 bg-background text-foreground font-bold uppercase tracking-wide px-7 py-4 text-sm hover:bg-accent hover:text-accent-foreground transition shrink-0">
                <Heart className="h-4 w-4" /> Donate
              </Link>
            </div>
          </div>
        </section>

        {/* ── BECOME A VOLUNTEER (full-width) ── */}
        <section className="bg-surface border-y border-border">
          <div className="max-w-7xl mx-auto px-6 py-16 grid lg:grid-cols-2 gap-12 items-center">
            <div className="relative group rounded-2xl overflow-hidden h-[26rem] bg-muted">
              {volunteerSlides.map((sl, idx) => (
                <img
                  key={idx}
                  src={sl.src}
                  alt="DSAG volunteers"
                  className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${idx === volunteerIdx ? "opacity-100" : "opacity-0"}`}
                />
              ))}
              <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-foreground/70 to-transparent pointer-events-none" />
              <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5">
                {volunteerSlides.map((_, idx) => (
                  <button
                    key={idx}
                    aria-label={`Volunteer slide ${idx + 1}`}
                    onClick={() => setVolunteerIdx(idx)}
                    className={`h-1.5 rounded-full transition-all ${idx === volunteerIdx ? "w-8 bg-accent" : "w-3 bg-white/60"}`}
                  />
                ))}
              </div>
            </div>
            <div>
              <SectionTitle>Become a Volunteer</SectionTitle>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-5 text-foreground leading-tight">
                Lend your time. Lift a life.
              </h2>
              <p className="mt-5 text-muted-foreground leading-relaxed">
                Behind every DSAG programme is a volunteer who chose to show up. From hospital outreach and
                family days to advocacy walks and school engagement, our community is built by people who
                give their hours, skills and heart. Join us — there is a place for you.
              </p>
              <div className="mt-7 flex flex-wrap gap-3">
                <Link to="/volunteer" className="inline-flex items-center gap-2 bg-primary text-primary-foreground font-bold uppercase tracking-wide px-7 py-4 text-sm hover:bg-primary-dark transition shadow-sm">
                  Join Us Today <ArrowRight className="h-4 w-4" />
                </Link>
                <Link to="/contact" className="inline-flex items-center gap-2 border-2 border-primary text-primary font-bold uppercase tracking-wide px-7 py-4 text-sm hover:bg-primary hover:text-primary-foreground transition">
                  Get In Touch
                </Link>
              </div>
            </div>
          </div>
        </section>



        {/* ── PARTNER LOGOS ── */}
        <section className="border-b border-border py-14 bg-surface/30">
          <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-10">
              <SectionTitle center>Our Partners &amp; Collaborators</SectionTitle>
              <p className="mt-3 text-sm text-muted-foreground">
                Working alongside leading organisations to build a more inclusive Ghana.
              </p>
            </div>
            
            <div className="relative group">
              <div id="partners-container" className="flex gap-8 items-center overflow-x-auto scrollbar-hide scroll-smooth px-4 py-6">
                {partners.map((p, i) => (
                  <div
                    key={i}
                    className="flex-shrink-0 h-24 w-44 flex items-center justify-center bg-white rounded-xl shadow-sm border border-border/50 hover:shadow-md hover:scale-105 transition-all duration-300 p-4"
                    title={p.name}
                  >
                    <img
                      src={p.src}
                      alt={p.name}
                      className="max-h-16 max-w-full w-auto object-contain"
                    />
                  </div>
                ))}
              </div>
              
              {/* Arrows for sliding through partners */}
              <button 
                onClick={() => {
                  const container = document.getElementById('partners-container');
                  if (container) container.scrollLeft -= 300;
                }}
                className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 bg-white shadow-lg rounded-full p-3 text-primary hover:bg-primary hover:text-white transition-all opacity-0 group-hover:opacity-100 hidden md:block"
                aria-label="Previous partners"
              >
                <ChevronLeft className="h-6 w-6" />
              </button>
              <button 
                onClick={() => {
                  const container = document.getElementById('partners-container');
                  if (container) container.scrollLeft += 300;
                }}
                className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 bg-white shadow-lg rounded-full p-3 text-primary hover:bg-primary hover:text-white transition-all opacity-0 group-hover:opacity-100 hidden md:block"
                aria-label="Next partners"
              >
                <ChevronRight className="h-6 w-6" />
              </button>
            </div>
          </div>
        </section>

        {/* ── TESTIMONIALS ── */}
        <section className="bg-background py-24">
          <div className="max-w-6xl mx-auto px-6">
            <div className="text-center mb-12">
              <SectionTitle center>Voices of DSAG</SectionTitle>
              <p className="mt-3 text-muted-foreground max-w-2xl mx-auto">
                Stories from the families, siblings and caregivers walking with us.
              </p>
            </div>
            <div className="relative grid md:grid-cols-5 gap-10 items-center bg-card border border-border rounded-3xl shadow-soft p-6 md:p-10">
              <div className="md:col-span-2 relative aspect-[3/4] md:aspect-[4/5] rounded-2xl overflow-hidden bg-gradient-to-br from-primary/10 to-accent/10">
                {testimonials.map((t, idx) => (
                  <img
                    key={idx}
                    src={t.img}
                    alt={t.name}
                    loading="lazy"
                    decoding="async"
                    className={`absolute inset-0 w-full h-full object-contain testimonial-sharp transition-opacity duration-700 ${idx === testimonialIdx ? "opacity-100" : "opacity-0"}`}
                  />
                ))}
              </div>
              <div className="md:col-span-3 relative">
                <Quote className="h-10 w-10 text-primary/20 mb-3" />
                <p className="font-display text-xl md:text-2xl font-semibold text-foreground leading-snug italic min-h-[8rem]">
                  &ldquo;{testimonials[testimonialIdx].quote}&rdquo;
                </p>
                <div className="mt-6 flex items-center gap-4">
                  <div className="h-1 w-10 bg-accent" />
                  <div>
                    <div className="font-display font-bold text-foreground">{testimonials[testimonialIdx].name}</div>
                    <div className="text-xs uppercase tracking-widest text-muted-foreground mt-0.5">{testimonials[testimonialIdx].role}</div>
                  </div>
                </div>
                <div className="mt-8 flex items-center gap-4">
                  <button
                    onClick={() => setTestimonialIdx((x) => (x - 1 + testimonials.length) % testimonials.length)}
                    aria-label="Previous testimonial"
                    className="h-10 w-10 rounded-full border border-border flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition"
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </button>
                  <button
                    onClick={() => setTestimonialIdx((x) => (x + 1) % testimonials.length)}
                    aria-label="Next testimonial"
                    className="h-10 w-10 rounded-full border border-border flex items-center justify-center hover:bg-primary hover:text-primary-foreground transition"
                  >
                    <ChevronRight className="h-4 w-4" />
                  </button>
                  <div className="flex gap-1.5 ml-2">
                    {testimonials.map((_, idx) => (
                      <button
                        key={idx}
                        aria-label={`Testimonial ${idx + 1}`}
                        onClick={() => setTestimonialIdx(idx)}
                        className={`h-1.5 rounded-full transition-all ${idx === testimonialIdx ? "w-8 bg-primary" : "w-3 bg-border"}`}
                      />
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>


      </main>
      <SiteFooter />
    </div>
  );
}

function SectionTitle({ children, center }: { children: React.ReactNode; center?: boolean }) {
  return (
    <div className={center ? "flex flex-col items-center" : ""}>
      <h2 className="font-display font-black text-xl uppercase tracking-wider text-foreground">{children}</h2>
      <div className={`h-1 bg-accent mt-2 ${center ? "w-14" : "w-14"}`} />
    </div>
  );
}
