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-about-2.jpg";
import about from "@/assets/about-hero.jpg";
import { Target, Eye, Megaphone, Stethoscope, GraduationCap, Users, Radio, ArrowRight } from "lucide-react";

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About DSAG — Our Story, Mission & Board" },
      { name: "description", content: "Learn the story, mission, vision and leadership of the Down Syndrome Association of Ghana." },
      { property: "og:title", content: "About the Down Syndrome Association of Ghana" },
      { property: "og:image", content: about },
    ],
  }),
  component: AboutPage,
});

const whatWeDo = [
  { icon: Megaphone, t: "Advocacy & Policy", d: "We champion the rights and inclusion of persons with Down syndrome in Ghana. Through collaboration with government bodies, policymakers, and disability networks, we advocate for improved laws, resources, and opportunities." },
  { icon: Stethoscope, t: "Healthcare & Family Support", d: "We connect families to essential healthcare services and support systems, helping children access critical medical interventions and organising health awareness and screening programmes." },
  { icon: GraduationCap, t: "Education & Inclusion", d: "We partner with schools and education authorities to promote inclusive learning environments, helping teachers, students and communities better understand Down syndrome." },
  { icon: Users, t: "Community Engagement", d: "Through family-centred events and interactive sessions, we bring families, professionals and advocates together to share knowledge, celebrate inclusion and strengthen community bonds." },
  { icon: Radio, t: "Media & Awareness", d: "We use the power of media — campaigns, storytelling, radio, TV, podcasts, blogs and online engagement — to inform, inspire and change perceptions." },
];

import directorAgnes from "@/assets/director-agnes.jpg";
import directorFafa from "@/assets/director-fafa.jpg";
import directorJinan from "@/assets/director-jinan.jpg";
import directorJude from "@/assets/director-jude.jpg";
import directorYvonne from "@/assets/director-yvonne.jpg";
import directorProfNana from "@/assets/director-prof-nana.jpg";

const board = [
  { name: "Nana-Akyaa Yao", role: "President", photo: directorProfNana },
  { name: "Agnes Teiko Nyemi-Tei", role: "Executive Director", photo: directorAgnes },
  { name: "Jinan El Madjoub", role: "Organising Secretary", photo: directorJinan },
  { name: "Irene Fafa Awuku", role: "Treasurer", photo: directorFafa },
  { name: "Henrietta Denanyoh", role: "Executive Advisor", photo: null },
  { name: "Debbie Mangortey", role: "Executive Advisor", photo: null },
  { name: "Jude Mensah Bonsu", role: "Board Member", photo: directorJude },
  { name: "Yvonne Brew", role: "Board Member", photo: directorYvonne },
];

function AboutPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="About Us" title="A movement born of love and resilience." subtitle="DSAG exists to ensure every individual with Down syndrome in Ghana is valued, supported and empowered to reach their fullest potential." bgImage={heroBg} />

        <section className="max-w-7xl mx-auto px-6 py-20 grid md:grid-cols-2 gap-6">
          <div className="bg-card p-7 rounded-2xl border border-border shadow-soft">
            <div className="h-12 w-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-4"><Target className="h-6 w-6" /></div>
            <h3 className="font-display font-bold text-xl">Our Mission</h3>
            <p className="text-muted-foreground text-sm mt-3 leading-relaxed">The Down Syndrome Association of Ghana exists to:</p>
            <ul className="mt-3 space-y-2 text-sm text-muted-foreground list-disc pl-5">
              <li>Raise awareness and improve understanding of Down syndrome.</li>
              <li>Advocate for inclusion, access to quality education, healthcare, and equal opportunities.</li>
              <li>Support families through education, resources, and community engagement.</li>
            </ul>
          </div>
          <div className="bg-card p-7 rounded-2xl border border-border shadow-soft">
            <div className="h-12 w-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-4"><Eye className="h-6 w-6" /></div>
            <h3 className="font-display font-bold text-xl">Our Vision</h3>
            <p className="text-muted-foreground text-sm mt-3 leading-relaxed">
              A Ghana where every person with Down syndrome is valued, supported, and empowered to
              reach their fullest potential.
            </p>
          </div>
        </section>

        <section className="bg-surface border-y border-border">
          <div className="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-12 items-center">
            <img src={about} alt="A mother and her child" loading="lazy" className="rounded-2xl shadow-card w-full object-cover" />
            <div>
              <h2 className="font-display font-bold text-3xl md:text-4xl">Our Story</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. This shared vision sparked the birth of the Down Syndrome Ghana
                Foundation, which later evolved into the Down Syndrome Association of Ghana (DSAG).
              </p>
              <p className="mt-4 text-muted-foreground leading-relaxed">
                Over the years, our circle has expanded to include persons with disabilities, families,
                health workers, therapists, educators, policymakers, community partners and
                organisations — all united by one purpose: to ensure that individuals with Down
                syndrome in Ghana are given every opportunity to thrive.
              </p>
              <p className="mt-4 text-muted-foreground leading-relaxed">
                Today, DSAG stands as a voice for acceptance and change, reminding everyone that when
                families, professionals, institutions and communities collaborate, every person with
                Down syndrome can realize their full potential.
              </p>
            </div>
          </div>
        </section>

        <section className="max-w-7xl mx-auto px-6 py-20">
          <div className="text-center max-w-2xl mx-auto mb-12">
            <span className="text-sm font-semibold text-primary uppercase tracking-widest">What We Do</span>
            <h2 className="font-display font-bold text-3xl md:text-4xl mt-3">Five ways we drive change.</h2>
            <p className="mt-4 text-muted-foreground">Together, we promote awareness, inclusion and healthcare access for individuals with Down syndrome across Ghana.</p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {whatWeDo.map((b) => (
              <div key={b.t} className="bg-card p-7 rounded-2xl border border-border shadow-soft">
                <div className="h-12 w-12 rounded-xl bg-accent text-accent-foreground flex items-center justify-center mb-4"><b.icon className="h-6 w-6" /></div>
                <h3 className="font-display font-bold text-lg">{b.t}</h3>
                <p className="text-muted-foreground text-sm mt-3 leading-relaxed">{b.d}</p>
              </div>
            ))}
          </div>
        </section>

        <section id="board" className="bg-surface border-y border-border scroll-mt-32">
          <div className="max-w-7xl mx-auto px-6 py-20">
            <div className="text-center max-w-2xl mx-auto mb-12">
              <span className="text-sm font-semibold text-primary uppercase tracking-widest">Leadership</span>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-3">Meet Our Board of Directors</h2>
            </div>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
              {board.map((m) => (
                <div key={m.name} className="bg-card p-6 rounded-2xl border border-border text-center">
                  {m.photo ? (
                    <img src={m.photo} alt={m.name} className="h-48 w-48 md:h-56 md:w-56 mx-auto rounded-full object-cover object-top border-4 border-primary/20 shadow-md" />
                  ) : (
                    <div className="h-48 w-48 md:h-56 md:w-56 mx-auto rounded-full bg-gradient-to-br from-primary to-primary-dark text-primary-foreground flex items-center justify-center font-display font-bold text-5xl">
                      {m.name.split(" ").map((n: string) => n[0]).slice(0, 2).join("")}
                    </div>
                  )}
                  <div className="mt-5 font-display font-bold text-lg text-foreground">{m.name}</div>
                  <div className="text-sm text-muted-foreground mt-1">{m.role}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="max-w-7xl mx-auto px-6 py-20 text-center">
          <h2 className="font-display font-bold text-3xl md:text-4xl">Walk this journey with us</h2>
          <p className="mt-4 text-muted-foreground max-w-xl mx-auto">Whether you donate, volunteer, or simply share our work — every action helps build a more inclusive Ghana.</p>
          <Link to="/volunteer" className="inline-flex items-center gap-2 mt-7 rounded-full bg-primary text-primary-foreground font-semibold px-7 py-3.5 hover:scale-[1.03] transition">
            Get Involved <ArrowRight className="h-5 w-5" />
          </Link>
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
