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-therapy-2.jpg";
import { FileText, Link as LinkIcon, ExternalLink } from "lucide-react";

export const Route = createFileRoute("/resources")({
  head: () => ({
    meta: [
      { title: "Resources — DSAG" },
      { name: "description", content: "Educational materials, articles, brochures, videos and external links related to Down syndrome advocacy and support." },
      { property: "og:title", content: "Resources — DSAG" },
    ],
  }),
  component: ResourcesPage,
});

const externalLinks = [
  { t: "Down Syndrome International (DSi)", url: "https://www.ds-int.org/" },
  { t: "Inclusion Ghana", url: "https://www.inclusion-ghana.org/" },
  { t: "Love Without Boundaries Foundation", url: "https://www.lovewithoutboundaries.com/" },
  { t: "Rare Disease Ghana Initiative", url: "https://rarediseaseghana.org/" },
];

function ResourcesPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <PageHero eyebrow="Resources" title="Learn, share, support." subtitle="A growing library of educational materials and trusted partners for families, educators, healthcare workers and advocates." bgImage={heroBg} />
        <section className="max-w-5xl mx-auto px-6 py-20 grid md:grid-cols-2 gap-8">
          <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"><FileText className="h-6 w-6" /></div>
            <h2 className="font-display font-bold text-xl">Educational Materials</h2>
            <p className="text-muted-foreground text-sm mt-3 leading-relaxed">
              Articles, brochures and videos about Down syndrome are being curated for families,
              educators and healthcare professionals. Check back soon, or contact us to request a
              resource.
            </p>
            <Link to="/contact" className="inline-flex items-center gap-2 mt-5 text-primary font-semibold text-sm">
              Request a resource →
            </Link>
          </div>
          <div 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"><LinkIcon className="h-6 w-6" /></div>
            <h2 className="font-display font-bold text-xl">External Resources</h2>
            <p className="text-muted-foreground text-sm mt-3 leading-relaxed">Trusted organisations and partners advancing Down syndrome advocacy and support.</p>
            <ul className="mt-5 space-y-2">
              {externalLinks.map((l) => (
                <li key={l.t}>
                  <a href={l.url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline">
                    {l.t} <ExternalLink className="h-3.5 w-3.5" />
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </section>
      </main>
      <SiteFooter />
    </div>
  );
}
