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-hospital-3.jpg";
import { Hospital, School, HeartPulse, Radio, Gift, CalendarDays, ClipboardList, Users, Stethoscope } from "lucide-react";
import projectHospital from "@/assets/project-hospital-outreach.jpg";
import projectSchoolEngagement from "@/assets/project-school-engagement.jpg";
import projectMedicalSupport from "@/assets/project-medical-support.jpg";
import projectMedia from "@/assets/awareness-hero.jpg";
import projectCommunity from "@/assets/project-community-outreach.jpg";
import projectAwareness from "@/assets/cause-advocacy.jpg";
import projectFamilyDayOut from "@/assets/project-fun-day-2.jpg.asset.json";
import projectHealthScreening from "@/assets/project-health-screening-3.jpg.asset.json";
import projectDataCollection from "@/assets/project-data-collection-2.jpg.asset.json";

export const Route = createFileRoute("/projects")({
  head: () => ({
    meta: [
      { title: "Our Projects — DSAG" },
      { name: "description", content: "DSAG's flagship projects: Hospital Visibility, School Engagement, Life-Saving Medical Support, Media campaigns, Community Outreach and 31 Days of Awareness." },
      { property: "og:title", content: "DSAG Projects" },
    ],
  }),
  component: ProjectsPage,
});

const projects = [
  { icon: Hospital, img: projectHospital, t: "Hospital Visibility Project", d: "Improving awareness and early support for children with Down syndrome within healthcare settings. Through hospital visits we share accurate information, address misconceptions and promote early intervention." },
  { icon: School, img: projectSchoolEngagement, t: "School Engagement Project", d: "Educating students and teachers about Down syndrome and inclusion through interactive sessions in schools across Ghana — shaping a more inclusive future generation." },
  { icon: HeartPulse, img: projectMedicalSupport, pos: "object-top", t: "Little Hearts Project", d: "In partnership with international organisations, DSAG facilitates access to life-saving medical care for children with Down syndrome, particularly those with congenital heart conditions." },
  { icon: Stethoscope, img: projectHealthScreening.url, t: "Annual Health Screening Project", d: "Our annual free screening programme — vision, hearing, dental and cardiac checks — delivered in partnership with health professionals to safeguard the wellbeing of persons with Down syndrome across Ghana." },
  { icon: Users, img: projectFamilyDayOut.url, t: "Family Day Out Project", d: "An annual celebration that brings together families of persons with Down syndrome for a day of play, music, connection and joy — reminding every family they are not alone." },
  { icon: Radio, img: projectMedia, t: "Ghana Connect Project", d: "Continuous media and digital campaigns through documentaries, social media and traditional media engagements that amplify real stories and challenge stigma across Ghana." },
  { icon: Gift, img: projectCommunity, t: "Hope Alive Community Project", d: "Donation drives and outreach providing essential items such as clothing and mobility aids to underserved communities while raising awareness about disability inclusion." },
  { icon: CalendarDays, img: projectAwareness, t: "31 Days of Awareness Project", d: "Daily stories of individuals and families living with Down syndrome — humanising disability, encouraging empathy and helping break deeply rooted societal stigma." },
  { icon: ClipboardList, img: projectDataCollection.url, t: "Data Collection of Persons with Down Syndrome Project", d: "A nationwide data collection project documenting persons with Down syndrome across Ghana — building the evidence base needed to advocate for better policies, services and inclusion at scale." },
] as { icon: typeof Hospital; img: string; pos?: string; t: string; d: string }[];

function ProjectsPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Projects" title="Flagship projects driving lasting change." subtitle="From hospital visits to media campaigns — programmes built around the families and individuals we serve." bgImage={heroBg} />
        <section className="max-w-7xl mx-auto px-6 py-20 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {projects.map((p) => (
            <article key={p.t} className="bg-card rounded-2xl border border-border shadow-soft overflow-hidden flex flex-col">
              <div className="aspect-[16/10] overflow-hidden">
                <img src={p.img} alt={p.t} loading="lazy" className={`w-full h-full object-cover ${p.pos ?? "object-center"}`} />
              </div>
              <div className="p-7">
                <div className="h-12 w-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-4">
                  <p.icon className="h-6 w-6" />
                </div>
                <h3 className="font-display font-bold text-lg">{p.t}</h3>
                <p className="text-muted-foreground text-sm mt-3 leading-relaxed">{p.d}</p>
              </div>
            </article>
          ))}
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
