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-awareness-2.jpg";
import { Dna, AlertCircle, Activity, MapPin, Sparkles } from "lucide-react";
import { useState } from "react";

export const Route = createFileRoute("/about-down-syndrome")({
  head: () => ({
    meta: [
      { title: "About Down Syndrome — Facts & FAQs | DSAG" },
      { name: "description", content: "Learn the facts about Down syndrome — causes, types, risk factors, and key statistics in Ghana, plus answers to common questions." },
      { property: "og:title", content: "About Down Syndrome — Facts & FAQs" },
    ],
  }),
  component: AboutDsPage,
});

const types = [
  { t: "Trisomy 21", p: "About 95%", d: "The most common type. Every cell in the body has an extra chromosome 21." },
  { t: "Translocation", p: "3–4%", d: "Extra chromosome 21 material attaches to another chromosome. Can sometimes be inherited." },
  { t: "Mosaic", p: "1–2%", d: "Some cells have three copies of chromosome 21, others the usual two. Often milder features." },
];

const ghanaFacts = [
  { t: "Prevalence", d: "More than 35,000 individuals in Ghana live with Down syndrome (about 1 in every 1,000 people)." },
  { t: "Healthcare Challenges", d: "Many children experience congenital heart defects and immune issues; access to specialised therapies remains limited." },
  { t: "Education", d: "Teachers often lack training to support learners with Down syndrome, and implementation of inclusive education policies remains weak." },
  { t: "Stigma & Social Barriers", d: "Cultural misconceptions still isolate families. Awareness and advocacy remain critical to changing attitudes." },
  { t: "Laws & Policies", d: "Ghana has progressive disability rights frameworks, but enforcement and everyday implementation lag behind." },
  { t: "Urban-Rural Gap", d: "Most specialised institutions are concentrated in Accra, Kumasi and other cities, leaving rural families with limited access." },
];

const whyInclusion = [
  { t: "Inclusion is Justice", d: "Inclusion recognizes the inherent dignity of every person — it ensures individuals with Down syndrome are active participants in society. True inclusion is not charity; it is justice." },
  { t: "Stronger Communities", d: "Communities thrive when everyone is valued. Inclusion fosters empathy, acceptance and unity." },
  { t: "Unlocking Potential", d: "Every person with Down syndrome has unique talents. Inclusion allows those abilities to be discovered, nurtured and celebrated." },
  { t: "Breaking Stigma", d: "Inclusion challenges harmful stereotypes and shifts the narrative from limitation to possibility." },
  { t: "Driving Change", d: "Inclusion inspires innovation in education, healthcare and policy — when one sector adapts, others follow." },
  { t: "A Shared Responsibility", d: "Inclusion requires families, schools, healthcare providers, policymakers and communities to act together." },
];

const faqs = [
  ["What is Down syndrome?", "Down syndrome is a genetic condition caused by an extra copy of chromosome 21. It affects physical growth, cognitive development, and sometimes health. With early intervention, therapy, and inclusive education, individuals can thrive and lead fulfilling lives."],
  ["How common is Down syndrome in Ghana?", "Globally, Down syndrome occurs in about 1 in 700–1,000 births. In Ghana, estimates suggest 1 in 800–1,000 births, meaning over 30,000 Ghanaians live with the condition. Limited data collection means the true number may be higher."],
  ["Can Down syndrome be detected before birth in Ghana?", "Yes. Prenatal screening and diagnostic tests are available in some hospitals and clinics. DSAG provides guidance and resources for families considering prenatal testing."],
  ["What support is available for families in Ghana?", "Families can access safe peer-support spaces, practical guidance, connections to healthcare professionals, family networks, training, awareness programmes, school support, speech, physical and occupational therapy referrals, and reliable resources."],
  ["Are children with Down syndrome included in schools in Ghana?", "Inclusive education is growing, but challenges remain. Families can request school support plans to help children succeed academically and socially. DSAG advocates for teacher retraining and awareness programmes."],
  ["What medical care is available in Ghana?", "Healthcare services include regular checkups, therapy, and specialized care for conditions common in Down syndrome (e.g., congenital heart defects, vision or hearing problems). DSAG collaborates with hospitals to improve access to care."],
  ["Can individuals with Down syndrome live independently in Ghana?", "Yes. With proper education, therapy, and social support, many individuals can live independently or semi-independently. Community inclusion and skill-building programmes help them thrive."],
  ["Why is there stigma around Down syndrome in Ghana and Africa?", "Stigma often arises from lack of awareness, cultural misconceptions, and superstitious beliefs. Awareness campaigns and school programmes are helping to challenge these myths."],
  ["How can families cope with stigma and discrimination?", "Joining peer support groups, seeking counselling, and educating relatives and communities helps. Advocacy and celebrating children's achievements shifts attitudes. DSAG provides workshops and awareness programmes that empower families."],
  ["Are there superstitious beliefs about Down syndrome in Ghana?", "Some communities wrongly link Down syndrome to curses, witchcraft or spiritual causes. These misconceptions are harmful, and education is essential to challenge them."],
  ["Can prayer cure Down syndrome?", "No. Down syndrome is genetic, not spiritual. Prayer can provide emotional support and hope, but it cannot change the genetic cause."],
  ["If I have a child with Down syndrome, can it happen again?", "For most families, the chance of having another child with Down syndrome is very low — usually less than 1%. Rare hereditary factors (translocation) may slightly increase the risk. Genetic counselling can help."],
  ["How can Ghanaians learn more or get involved?", "Join family support groups, participate in community programmes and awareness campaigns, follow educational resources on social media, and support advocacy initiatives."],
  ["Why is early intervention important?", "Early intervention services — speech, occupational, and physical therapy — help children develop communication, motor, and social skills from a young age, improving independence and long-term outcomes."],
  ["What health screenings should children with Down syndrome receive?", "Regular checkups for heart conditions, thyroid function, hearing, vision, and growth help detect and manage common health issues early."],
  ["What is the life expectancy for people with Down syndrome in Ghana?", "With access to healthcare and social support, individuals can live into adulthood and enjoy meaningful lives. Life expectancy has improved globally due to better medical care and inclusion."],
  ["Can people with Down syndrome work in Ghana?", "Yes. With vocational training and inclusive employment opportunities, many individuals work, earn income, and contribute to society."],
  ["What rights protect people with Down syndrome in Ghana?", "Ghana is a signatory to the UN Convention on the Rights of Persons with Disabilities (CRPD), and national policies guarantee rights to education, healthcare and social inclusion."],
  ["Are there financial or social protection programmes for families?", "Families may benefit from initiatives such as the Livelihood Empowerment Against Poverty (LEAP) programme. DSAG helps families connect to these resources."],
  ["How can siblings and extended family help?", "Siblings and relatives play a key role in inclusion. Family counselling and awareness programmes strengthen relationships and build supportive home environments."],
  ["What happens when children grow into adulthood?", "Transition planning is important — education beyond school, vocational training, independent living and long-term care. Community inclusion programmes help adults thrive."],
  ["Why is research on Down syndrome important in Ghana?", "Reliable data helps improve healthcare, education, and policy. More research is needed to understand prevalence, needs, and outcomes for individuals and families."],
];

function AboutDsPage() {
  const [open, setOpen] = useState<number | null>(0);
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="About Down Syndrome" title="Know the facts. Challenge the myths." subtitle="Down syndrome is a genetic condition. With awareness, healthcare and inclusion, individuals living with it lead full and meaningful lives." bgImage={heroBg} />

        <section className="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-10 items-start">
          <div>
            <div className="h-12 w-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-4"><Dna className="h-6 w-6" /></div>
            <h2 className="font-display font-bold text-3xl">The Facts</h2>
            <p className="mt-4 text-muted-foreground leading-relaxed">
              Down syndrome is a genetic condition caused by the presence of an extra copy of
              chromosome 21. Normally every person inherits 46 chromosomes; individuals with Down
              syndrome have 47. This additional genetic material changes the way the body and brain
              develop, leading to differences in physical features, health, and learning.
            </p>
          </div>
          <div>
            <div className="h-12 w-12 rounded-xl bg-accent text-accent-foreground flex items-center justify-center mb-4"><AlertCircle className="h-6 w-6" /></div>
            <h2 className="font-display font-bold text-3xl">The Causes</h2>
            <p className="mt-4 text-muted-foreground leading-relaxed">
              Down syndrome occurs when a baby is born with an extra chromosome 21. This happens
              randomly during cell division and is not caused by anything parents did or did not do.
              In most cases it is not inherited — only certain forms (translocation) can be passed
              down in families.
            </p>
          </div>
        </section>

        <section className="bg-surface border-y border-border">
          <div className="max-w-7xl mx-auto px-6 py-20">
            <h2 className="font-display font-bold text-3xl text-center">Types of Down Syndrome</h2>
            <div className="mt-10 grid md:grid-cols-3 gap-6">
              {types.map((tp) => (
                <div key={tp.t} className="bg-card p-7 rounded-2xl border border-border shadow-soft">
                  <div className="text-xs font-bold text-accent uppercase tracking-widest">{tp.p}</div>
                  <h3 className="font-display font-bold text-xl mt-2">{tp.t}</h3>
                  <p className="text-muted-foreground text-sm mt-3 leading-relaxed">{tp.d}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="max-w-7xl mx-auto px-6 py-20 grid lg:grid-cols-2 gap-10">
          <div className="bg-card border border-border rounded-2xl p-7 shadow-soft">
            <div className="h-12 w-12 rounded-xl bg-primary text-primary-foreground flex items-center justify-center mb-4"><Activity className="h-6 w-6" /></div>
            <h2 className="font-display font-bold text-2xl">Risk Factors & Detection</h2>
            <ul className="mt-4 space-y-3 text-sm text-muted-foreground">
              <li><strong className="text-foreground">Parental age:</strong> The chance rises with age — about 1 in 940 at 30, increasing to 1 in 85 by age 40.</li>
              <li><strong className="text-foreground">Genetic translocation:</strong> Families with a history of translocation have a slightly higher risk.</li>
              <li><strong className="text-foreground">No lifestyle cause:</strong> Down syndrome is not caused by diet, behaviour or environment.</li>
              <li><strong className="text-foreground">Screening tests:</strong> Blood tests and ultrasound (nuchal translucency) estimate risk during pregnancy.</li>
              <li><strong className="text-foreground">Diagnostic tests:</strong> Amniocentesis and chorionic villus sampling provide accurate diagnoses.</li>
              <li><strong className="text-foreground">In Ghana:</strong> Prenatal screening services are limited, so many families learn of the condition after birth.</li>
            </ul>
          </div>
          <div className="bg-card border border-border rounded-2xl p-7 shadow-soft">
            <div className="h-12 w-12 rounded-xl bg-accent text-accent-foreground flex items-center justify-center mb-4"><Sparkles className="h-6 w-6" /></div>
            <h2 className="font-display font-bold text-2xl">Life Expectancy</h2>
            <p className="mt-4 text-muted-foreground leading-relaxed">
              Improved medical care has increased average lifespan from 10 years in the 1960s to
              47 years by the 2010s. With timely healthcare, therapy and family support, many
              individuals with Down syndrome live long, meaningful lives.
            </p>
          </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-12">
              <div className="inline-flex h-12 w-12 rounded-xl bg-primary text-primary-foreground items-center justify-center mb-4"><MapPin className="h-6 w-6" /></div>
              <h2 className="font-display font-bold text-3xl md:text-4xl">Key Facts in Ghana</h2>
              <p className="mt-4 text-muted-foreground">The realities families face — and the gaps DSAG is working to close.</p>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {ghanaFacts.map((f) => (
                <div key={f.t} className="bg-card p-6 rounded-2xl border border-border">
                  <h3 className="font-display font-bold">{f.t}</h3>
                  <p className="text-muted-foreground text-sm mt-2 leading-relaxed">{f.d}</p>
                </div>
              ))}
            </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">
            <h2 className="font-display font-bold text-3xl md:text-4xl">Why Inclusion Matters</h2>
            <p className="mt-4 text-muted-foreground">When persons with Down syndrome are given equal opportunities, they thrive in schools, workplaces and communities. Inclusion benefits everyone.</p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {whyInclusion.map((b) => (
              <div key={b.t} className="bg-card p-6 rounded-2xl border border-border">
                <h3 className="font-display font-bold text-primary">{b.t}</h3>
                <p className="text-muted-foreground text-sm mt-2 leading-relaxed">{b.d}</p>
              </div>
            ))}
          </div>
        </section>

        <section id="faqs" className="bg-surface border-y border-border">
          <div className="max-w-4xl mx-auto px-6 py-20">
            <div className="text-center mb-12">
              <span className="text-sm font-semibold text-primary uppercase tracking-widest">FAQs</span>
              <h2 className="font-display font-bold text-3xl md:text-4xl mt-3">Common questions</h2>
            </div>
            <div className="space-y-3">
              {faqs.map(([q, a], idx) => (
                <div key={idx} className="bg-card border border-border rounded-xl overflow-hidden">
                  <button onClick={() => setOpen(open === idx ? null : idx)} className="w-full text-left px-5 py-4 flex justify-between items-center gap-4">
                    <span className="font-display font-semibold">{`${idx + 1}. ${q}`}</span>
                    <span className="text-primary text-2xl leading-none shrink-0">{open === idx ? "−" : "+"}</span>
                  </button>
                  {open === idx && <div className="px-5 pb-5 text-sm text-muted-foreground leading-relaxed">{a}</div>}
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
