import { createFileRoute, Link } from "@tanstack/react-router";
import {
  Activity,
  ArrowRight,
  Baby,
  BookOpen,
  Clock,
  Heart,
  MapPin,
  Microscope,
  Phone,
  Shield,
  Stethoscope,
} from "lucide-react";
import { SectionHeading } from "@/components/site/PageHero";
import { news, services, site } from "@/lib/site-data";
import jinnahMedical from "@/assets/jinnah-medical.jpg.asset.json";


export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Ward 8 — Gynaecology & Obstetrics, JPMC Karachi" },
      {
        name: "description",
        content:
          "Department of Gynaecology & Obstetrics, Ward 8, Jinnah Postgraduate Medical Centre, Karachi — free and subsidised maternal and women's healthcare, with 24/7 emergency obstetric care.",
      },
      { property: "og:title", content: "Ward 8 — Gynaecology & Obstetrics, JPMC Karachi" },
      {
        property: "og:description",
        content:
          "Compassionate, expert care for women and mothers at Jinnah Postgraduate Medical Centre, Karachi.",
      },
    ],
  }),
  component: Index,
});

const icons: Record<string, typeof Baby> = {
  baby: Baby,
  heart: Heart,
  shield: Shield,
  stethoscope: Stethoscope,
  activity: Activity,
  microscope: Microscope,
  book: BookOpen,
};

const stats = [
  { value: "24/7", label: "Emergency obstetric care" },
  { value: "7", label: "Core clinical services" },
  { value: "Free", label: "Public hospital care" },
  { value: "JPMC", label: "Teaching hospital ward" },
];

function Index() {
  return (
    <main id="main-content">
      <section className="relative overflow-hidden bg-navy py-20 sm:py-24 lg:py-32">
        <img
          src={jinnahMedical.url}
          alt="Jinnah Postgraduate Medical Centre — Department of Obstetrics and Gynaecology"
          className="absolute inset-0 h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-navy/80" aria-hidden="true" />
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6">
          <p className="eyebrow text-gold">{site.tagline}</p>
          <h1 className="mt-5 max-w-4xl text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
            Compassionate, expert care for women and mothers
          </h1>
          <div className="mt-7 h-1 w-12 rounded-full bg-gold" />
          <p className="mt-7 max-w-2xl text-base leading-relaxed text-white/70 sm:text-lg">
            The Department of Gynaecology &amp; Obstetrics at Jinnah Postgraduate Medical Centre
            provides safe, dignified and evidence-based care to thousands of women across Karachi —
            free of charge, around the clock.
          </p>
          <div className="mt-10 flex flex-wrap gap-4">
            <Link
              to="/services"
              className="inline-flex items-center gap-2 rounded-lg bg-gold px-6 py-3 text-sm font-semibold text-navy-deep transition-colors hover:bg-gold/90"
            >
              Explore Our Services
              <ArrowRight className="size-4" aria-hidden />
            </Link>
            <Link
              to="/patient-info"
              className="inline-flex items-center gap-2 rounded-lg border border-white/25 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-white/10"
            >
              Patient Information
            </Link>
          </div>
        </div>
      </section>

      <section className="border-b border-border bg-card">
        <div className="mx-auto grid max-w-7xl gap-px px-4 sm:grid-cols-2 sm:px-6 lg:grid-cols-4">
          {stats.map((s) => (
            <div key={s.label} className="py-8 sm:py-10">
              <p className="font-display text-3xl font-bold text-navy sm:text-4xl">{s.value}</p>
              <p className="mt-2 text-sm text-muted-foreground">{s.label}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="py-16 sm:py-20 lg:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <SectionHeading
            eyebrow="What We Offer"
            title="Our Clinical Services"
            intro="A full range of obstetric and gynaecological care, delivered by consultants, trainees and nursing staff within a government teaching hospital."
          />
          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {services.map((s) => {
              const Icon = icons[s.icon] ?? Heart;
              return (
                <article
                  key={s.title}
                  className="rounded-xl border border-border bg-card p-7 transition-shadow hover:shadow-md"
                >
                  <span className="grid size-11 place-items-center rounded-lg bg-teal-soft text-teal">
                    <Icon className="size-5" aria-hidden />
                  </span>
                  <h3 className="mt-5 font-display text-lg font-bold text-navy">{s.title}</h3>
                  <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
                    {s.homeBlurb}
                  </p>
                </article>
              );
            })}
          </div>
          <div className="mt-10">
            <Link
              to="/services"
              className="inline-flex items-center gap-2 text-sm font-semibold text-teal hover:text-navy"
            >
              View all services in detail
              <ArrowRight className="size-4" aria-hidden />
            </Link>
          </div>
        </div>
      </section>

      <section className="bg-cream-deep py-16 sm:py-20">
        <div className="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-3">
          {[
            { icon: MapPin, title: "Where to Find Us", body: site.address },
            { icon: Clock, title: "OPD Timings", body: `${site.opd} · ${site.emergency}` },
            { icon: Phone, title: "Telephone", body: site.phone },
          ].map((c) => (
            <div key={c.title} className="grid grid-cols-[auto_minmax(0,1fr)] gap-4">
              <span className="grid size-10 shrink-0 place-items-center rounded-lg bg-navy text-white">
                <c.icon className="size-5" aria-hidden />
              </span>
              <div className="min-w-0">
                <h3 className="font-display font-bold text-navy">{c.title}</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="py-16 sm:py-20 lg:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6">
          <SectionHeading eyebrow="Latest Updates" title="News from the Ward" rule="gold" />
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {news.map((n) => (
              <article key={n.title} className="rounded-xl border border-border bg-card p-7">
                <p className="eyebrow text-teal">{n.date}</p>
                <h3 className="mt-3 font-display text-lg font-bold leading-snug text-navy">
                  {n.title}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{n.body}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-navy py-16 sm:py-20">
        <div className="mx-auto grid max-w-7xl items-center gap-8 px-4 sm:px-6 lg:grid-cols-[minmax(0,1fr)_auto]">
          <div className="min-w-0">
            <p className="eyebrow text-gold">Support Our Ward</p>
            <h2 className="mt-4 font-display text-3xl font-bold text-white sm:text-4xl">
              Help us care for more women and mothers
            </h2>
            <p className="mt-5 max-w-2xl text-base leading-relaxed text-white/70">
              Charitable support funds equipment, training, patient amenities and health education
              that benefit thousands of women each year.
            </p>
          </div>
          <Link
            to="/donate"
            className="inline-flex items-center gap-2 rounded-lg bg-gold px-6 py-3 text-sm font-semibold text-navy-deep transition-colors hover:bg-gold/90"
          >
            Register Your Interest
            <ArrowRight className="size-4" aria-hidden />
          </Link>
        </div>
      </section>
    </main>
  );
}