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-advocacy-2.jpg";

export const Route = createFileRoute("/impact")({
  head: () => ({
    meta: [
      { title: "Our Impact — DSAG" },
      { name: "description", content: "Measuring the change we've created together: families supported, lives saved, awareness expanded across Ghana." },
      { property: "og:title", content: "Our Impact — DSAG" },
    ],
  }),
  component: ImpactPage,
});

const stats = [
  { n: "1M+", l: "Ghanaians Educated", d: "Through nationwide awareness campaigns, seminars, school outreach and media initiatives, we have reached over a million people across every region in Ghana." },
  { n: "500+", l: "Families Supported", d: "Our WhatsApp support groups, counselling networks and community programmes connect hundreds of families with guidance, emotional support and practical resources." },
  { n: "4", l: "Life-Saving Heart Surgeries", d: "In collaboration with Love Without Boundaries Foundation, we have facilitated heart surgeries for children with Down syndrome in India." },
  { n: "16", l: "Regions Engaged", d: "Inclusive education awareness programmes conducted in multiple regions to promote understanding and inclusion in classrooms." },
  { n: "10+", l: "Hospital Programmes", d: "Partnering with public hospitals and institutions, we have provided early intervention, therapy and medical referrals." },
  { n: "1", l: "Seat at the National Table", d: "Our leadership engages directly with the National Council on Persons with Disabilities, advocating for inclusive education, healthcare and rights." },
];

function ImpactPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Our Impact" title="Real change. Measurable progress." subtitle="Numbers tell only part of the story — every figure represents a family, a child, a future being rewritten." bgImage={heroBg} />
        <section className="max-w-7xl mx-auto px-6 py-20 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {stats.map((s) => (
            <div key={s.l} className="bg-card p-7 rounded-2xl border border-border shadow-soft">
              <div className="font-display text-4xl md:text-5xl font-extrabold text-primary">{s.n}</div>
              <div className="font-display font-bold mt-2">{s.l}</div>
              <p className="text-sm text-muted-foreground mt-3 leading-relaxed">{s.d}</p>
            </div>
          ))}
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
