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-launch-4.jpg";
import { Calendar, ArrowRight } from "lucide-react";
import newsPolicy from "@/assets/gallery-advocacy-2.jpg";
import newsAwareness from "@/assets/event-walk.jpg";
import newsIsolation from "@/assets/gallery-families-3.jpg";
import newsHeart from "@/assets/gallery-heartcare-2.jpg";
import newsSupport from "@/assets/gallery-launch-2.jpg";
import newsParents from "@/assets/gallery-parents-1.jpg";
import newsQueen from "@/assets/news-queen-mother.jpg";

export const Route = createFileRoute("/news")({
  head: () => ({
    meta: [
      { title: "News & Stories — DSAG" },
      { name: "description", content: "Read the latest news, stories and updates from the Down Syndrome Association of Ghana." },
      { property: "og:title", content: "DSAG News & Stories" },
    ],
  }),
  component: NewsPage,
});

const posts = [
  { t: "Gender Minister Supports Down Syndrome Awareness Walk", e: "The Gender Minister intervened in the Bulemi family case and joined efforts to promote awareness, inclusion and support for persons with Down syndrome.", d: "24 March 2026", img: newsPolicy, link: "https://www.myjoyonline.com/gender-minister-intervenes-in-bulemi-family-case-supports-down-syndrome-awareness-walk/" },
  { t: "Ghana's Children with Down Syndrome Need More Than Awareness", e: "DSAG called for practical support including healthcare, education and social protection beyond awareness campaigns.", d: "18 March 2026", img: newsAwareness, link: "https://www.ghanabusinessnews.com/2026/03/18/ghanas-children-with-down-syndrome-need-more-than-awareness/" },
  { t: "Ghana Marks World Down Syndrome Day Amid Rising Concerns Over Isolation", e: "DSAG highlighted the growing challenges faced by persons with Down syndrome and their families, calling for stronger support systems and inclusion.", d: "21 March 2026", img: newsIsolation, link: "https://currentissuesonline.com/ghana-marks-world-down-syndrome-day-amid-rising-concerns-over-isolation-and-inadequate-support/" },
  { t: "Four Ghanaian Children Receive Life-Saving Heart Surgery in India", e: "Through a partnership with Love Without Boundaries, four children from Ghana, including children with Down syndrome, received critical heart surgery unavailable locally.", d: "7 August 2025", img: newsHeart, link: "https://www.lwbkids.org/heart-surgery-for-4-children-from-ghana/" },
  { t: "DSAG Promotes Awareness and Support for Families", e: "The association continues to advocate for inclusion while supporting families through education, outreach and community engagement.", d: "2025", img: newsSupport, link: "https://www.gbcghanaonline.com/general/down-syndrome-association-of-ghana-promotes-awareness-and-support-for-families/2025/" },
  { t: "Don't Hide Your Children with Down Syndrome – Parents Advised", e: "Families were encouraged to embrace inclusion and seek support rather than isolating children with Down syndrome.", d: "March 2022", img: newsParents, link: "https://gna.org.gh/2022/03/dont-hide-your-children-with-down-syndromeparents-advised/" },
  { t: "Queen Mother Pushes for More Down Syndrome Awareness", e: "Traditional leaders joined the call for increased public education and acceptance of persons with Down syndrome.", d: "16 November 2022", img: newsQueen, link: "https://thebftonline.com/2022/11/16/queen-mother-pushes-for-more-awareness-creation-of-down-syndrome/" },
];

function NewsPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Latest News" title="Voices from the DSAG community." subtitle="Updates, reflections and stories of hope from our work across Ghana." bgImage={heroBg} />
        <section className="max-w-7xl mx-auto px-6 py-20 grid md:grid-cols-2 gap-8">
          {posts.map((p) => (
            <article key={p.t} className="group bg-card rounded-2xl overflow-hidden shadow-soft hover:shadow-card transition border border-border">
              <div className="aspect-[16/9] overflow-hidden">
                <img src={p.img} alt={p.t} loading="lazy" className="w-full h-full object-cover group-hover:scale-105 transition duration-500" />
              </div>
              <div className="p-6">
                <div className="text-xs text-muted-foreground inline-flex items-center gap-1.5"><Calendar className="h-3.5 w-3.5" />{p.d}</div>
                <h3 className="font-display font-bold text-xl mt-2 leading-snug">{p.t}</h3>
                <p className="text-sm text-muted-foreground mt-3 leading-relaxed">{p.e}</p>
                <a href={p.link} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 mt-4 text-sm font-semibold text-primary">Read more <ArrowRight className="h-4 w-4" /></a>
              </div>
            </article>
          ))}
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
