'use client'

import * as React from 'react'
import { motion } from 'framer-motion'
import { ArrowRight, ArrowUpRight } from 'lucide-react'
import { useRouter, type RouteKey } from '@/lib/router'
import { Reveal, Eyebrow, Section, SectionHeading, Card, StatBlock, Pill, LinkButton, LabeledDivider } from '@/components/site/ui'
import { ContentModal } from '@/components/site/content-modal'
import { SCIENCE_CARDS, NEWS_ARTICLES, type ArticleData } from '@/lib/articles'
import { MoleculeBackground, DNAHelix, OrbitalRings } from '@/components/site/molecules'

const STATS: { value: string; label: string }[] = [
  { value: '52', label: 'Countries served' },
  { value: '6,800', label: 'People globally' },
  { value: '11', label: 'R&D centers' },
  { value: '147', label: 'Active patents' },
  { value: '84', label: 'Commercialized products' },
  { value: '29', label: 'Clinical programs' },
  { value: '8', label: 'Manufacturing sites' },
  { value: '12M+', label: 'Patients reached / yr' },
]

const DIVISIONS: { code: string; title: string; body: string; route: RouteKey }[] = [
  {
    code: 'A',
    title: 'Specialty Medicines',
    body: 'Therapeutic platforms in oncology, neurology, rare diseases, immunology and cardiometabolic care.',
    route: 'specialty',
  },
  {
    code: 'B',
    title: 'Advanced Nutraceuticals',
    body: 'Liposomal vitamins, clinical nutrition and condition-specific formulations built on pharmaceutical science.',
    route: 'vitamins',
  },
  {
    code: 'C',
    title: 'Pharmaceutical Raw Materials',
    body: 'APIs, excipients, intermediates and high-purity chemicals manufactured to international pharmacopeia standards.',
    route: 'api',
  },
  {
    code: 'D',
    title: 'Biotechnology',
    body: 'Monoclonal antibodies, recombinant proteins and emerging modalities in cell and gene therapy.',
    route: 'biotechnology',
  },
  {
    code: 'E',
    title: 'CDMO Services',
    body: 'End-to-end contract development and manufacturing, from formulation through commercial supply.',
    route: 'cdmo',
  },
  {
    code: 'F',
    title: 'Research & Development',
    body: 'AI-assisted discovery, predictive formulation and translational science across modalities.',
    route: 'research',
  },
]

const THERAPY_AREAS: { n: string; title: string; route: RouteKey }[] = [
  { n: '01', title: 'Oncology', route: 'specialty' },
  { n: '02', title: 'Neuroscience', route: 'specialty' },
  { n: '03', title: 'Immunology', route: 'specialty' },
  { n: '04', title: 'Rare disease', route: 'specialty' },
  { n: '05', title: 'Cardiometabolic', route: 'specialty' },
  { n: '06', title: 'Infectious disease', route: 'specialty' },
]

const NEWS_ITEMS: { tag: string; date: string; title: string; route: RouteKey; articleId?: string }[] = [
  {
    tag: 'Research',
    date: 'August 22, 2026',
    title: 'ESP-7021 demonstrates significant intracranial activity in Phase II NSCLC study.',
    route: 'research',
    articleId: 'news-37',
  },
  {
    tag: 'CDMO',
    date: 'July 10, 2026',
    title: 'AI-powered predictive manufacturing system deployed across all sites.',
    route: 'cdmo',
    articleId: 'news-36',
  },
  {
    tag: 'Corporate',
    date: 'May 18, 2026',
    title: 'Strategic collaboration with leading global pharmaceutical company announced.',
    route: 'about',
    articleId: 'news-35',
  },
]

export function HomePage() {
  const { navigate } = useRouter()
  const [modalOpen, setModalOpen] = React.useState(false)
  const [activeArticle, setActiveArticle] = React.useState<ArticleData | null>(null)

  const openArticle = React.useCallback((article: ArticleData) => {
    setActiveArticle(article)
    setModalOpen(true)
  }, [])

  return (
    <>
      <Hero onOpenArticle={openArticle} />
      <StatsBar />
      <CompanyIntro />
      <ScienceSection onOpenArticle={openArticle} />
      <TherapiesSection />
      <ManufacturingBand />
      <SustainabilityBand />
      <GlobalNetwork />
      <NewsSection onOpenArticle={openArticle} />
      <PortalsBand />
      <ContentModal open={modalOpen} onClose={() => setModalOpen(false)} article={activeArticle} />
    </>
  )
}

/* ============== Hero ============== */
function Hero({ onOpenArticle }: { onOpenArticle: (a: ArticleData) => void }) {
  const { navigate } = useRouter()
  return (
    <section className="relative flex min-h-[760px] items-end overflow-hidden bg-[#101715] pt-32 text-white lg:min-h-screen">
      {/* Background image with gradient */}
      <div className="absolute inset-0">
        <img
          src="/images/hero-lab.png"
          alt="Scientific laboratory with researchers working at advanced instrumentation"
          className="h-full w-full object-cover"
          loading="eager"
        />
        <div className="absolute inset-0 hero-gradient" />
      </div>
      <div className="mesh absolute inset-0 opacity-20" />
      <MoleculeBackground className="opacity-70" />

      {/* Floating decorative orb */}
      <div className="absolute -right-24 top-32 h-80 w-80 rounded-full border border-white/20 opacity-60" />
      <div className="animate-float absolute right-[12%] top-[25%] hidden h-32 w-32 rounded-full border border-white/25 bg-white/5 backdrop-blur-md lg:block">
        <div className="absolute left-8 top-8 h-4 w-4 rounded-full bg-[#8fb9ad]" />
        <div className="absolute bottom-7 right-8 h-2.5 w-2.5 rounded-full bg-white/60" />
        <div className="absolute left-10 top-10 h-px w-14 rotate-45 bg-white/35" />
      </div>

      {/* DNA strand decoration */}
      <div className="absolute right-20 top-1/2 hidden -translate-y-1/2 opacity-50 lg:block">
        <DNAHelix className="h-[400px] w-[120px]" />
      </div>

      <div className="relative mx-auto grid w-full max-w-[1440px] gap-12 px-5 pb-16 sm:px-8 lg:grid-cols-[1fr_0.58fr] lg:px-12 lg:pb-20">
        <div className="max-w-4xl">
          <Reveal>
            <div className="mb-7 flex items-center gap-3 text-xs font-bold uppercase tracking-[0.23em] text-[#b7d0c9]">
              <span className="h-px w-10 bg-[#8fb9ad]" />
              Research-led. Human-centered.
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <h1 className="max-w-4xl text-[clamp(3.2rem,7.7vw,7.3rem)] font-semibold leading-[0.89] tracking-[-0.065em]">
              Science,
              <br />
              <span className="font-normal text-[#bdd4cd]">precisely human.</span>
            </h1>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="mt-8 max-w-xl text-base leading-7 text-white/75 sm:text-lg">
              We unite advanced biology, intelligent technology and human insight
              to create therapies that change what is possible — from discovery
              through global manufacturing.
            </p>
          </Reveal>
          <Reveal delay={0.3}>
            <div className="mt-9 flex flex-wrap gap-3">
              <button
                onClick={() => navigate('research')}
                className="group flex items-center gap-3 rounded-full bg-[#f2f5f1] px-6 py-4 text-sm font-bold text-[#103e36] transition hover:bg-[#cfe1dc]"
              >
                Explore our science
                <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
              </button>
              <button
                onClick={() => navigate('specialty')}
                className="flex items-center gap-3 rounded-full border border-white/30 bg-white/5 px-6 py-4 text-sm font-bold backdrop-blur-md transition hover:bg-white/10"
              >
                Our medicines
              </button>
            </div>
          </Reveal>
        </div>

        <Reveal delay={0.4} className="flex items-end lg:justify-end">
          <div className="glass w-full max-w-sm rounded-[26px] border border-white/20 p-5 text-[#10201d] soft-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#55716a]">
                Latest milestone
              </span>
              <span className="pulse-dot h-2 w-2 rounded-full bg-[#4c8d7b]" />
            </div>
            <p className="mt-7 text-xl font-semibold leading-snug tracking-[-0.03em]">
              A new precision oncology program advances toward late-stage
              clinical development.
            </p>
            <button
              onClick={() => {
                const article = NEWS_ARTICLES['latest-milestone']
                if (article) onOpenArticle(article)
              }}
              className="mt-7 inline-flex items-center gap-2 text-xs font-bold text-[#0d5d50]"
            >
              Read announcement
              <ArrowUpRight className="h-3.5 w-3.5" />
            </button>
          </div>
        </Reveal>
      </div>
      <div className="absolute bottom-0 left-0 h-px w-full bg-white/15" />
    </section>
  )
}

/* ============== Stats bar ============== */
function StatsBar() {
  return (
    <section aria-label="At a glance" className="border-b border-border bg-background">
      <div className="mx-auto grid max-w-[1440px] grid-cols-2 border-x border-border sm:grid-cols-4 lg:grid-cols-8">
        {STATS.map((s, i) => (
          <div
            key={s.label}
            className="border-b border-r border-border p-5 lg:p-7 [&:nth-child(-n+2)]:border-t-0 [&:nth-child(2)]:border-r-0 sm:[&:nth-child(2)]:border-r"
            style={{ borderTopWidth: i < 2 ? 0 : undefined }}
          >
            <b className="block text-2xl font-semibold tracking-[-0.04em]">
              {s.value}
            </b>
            <span className="mt-1 block text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
              {s.label}
            </span>
          </div>
        ))}
      </div>
    </section>
  )
}

/* ============== Company intro ============== */
function CompanyIntro() {
  const { navigate } = useRouter()
  return (
    <Section tone="light">
      <SectionHeading
        index="01"
        eyebrow="Who we are"
        title="A global biopharmaceutical company built for the"
        highlight="next era of care."
      />

      <div className="mt-16 grid gap-8 lg:grid-cols-[1.35fr_0.65fr]">
        <Reveal className="overflow-hidden rounded-[32px]">
          <img
            src="/images/scientist-microscope.png"
            alt="Scientist operating a precision microscope in a modern pharmaceutical laboratory"
            className="h-[420px] w-full object-cover transition duration-700 hover:scale-[1.025] sm:h-[580px]"
            loading="lazy"
          />
        </Reveal>
        <div className="grid gap-4">
          <Card>
            <span className="text-xs font-bold text-[#0d5d50] dark:text-[#8fb9ad]">
              01 — Mission
            </span>
            <h3 className="mt-10 text-2xl font-semibold tracking-[-0.03em]">
              Turn complex science into meaningful health outcomes.
            </h3>
            <p className="mt-4 text-sm leading-6 text-muted-foreground">
              From molecule to medicine, our work begins and ends with the
              patient. Every discovery program, formulation and quality decision
              is anchored in measurable health impact.
            </p>
          </Card>
          <Card className="bg-[#e7eeea] dark:bg-[#1c2926]">
            <span className="text-xs font-bold text-[#0d5d50] dark:text-[#8fb9ad]">
              02 — Principle
            </span>
            <h3 className="mt-10 text-2xl font-semibold tracking-[-0.03em]">
              Precision in every decision. Humanity in every action.
            </h3>
            <p className="mt-4 text-sm leading-6 text-muted-foreground">
              We combine scientific rigor with ethical responsibility — guided
              by ICH, WHO, FDA, EMA, USP and Ph. Eur. standards across our
              global network.
            </p>
          </Card>
        </div>
      </div>

      <div className="mt-10 flex flex-wrap items-center gap-4">
        <LinkButton onClick={() => navigate('about')} variant="primary">
          Read our story
          <ArrowRight className="h-4 w-4" />
        </LinkButton>
        <LinkButton onClick={() => navigate('investors')} variant="ghost" className="border border-border">
          Investor overview
        </LinkButton>
      </div>
    </Section>
  )
}

/* ============== Science section ============== */
function ScienceSection({ onOpenArticle }: { onOpenArticle: (a: ArticleData) => void }) {
  const { navigate } = useRouter()
  return (
    <Section tone="dark">
      <div className="absolute -right-20 top-10 hidden h-96 w-96 rounded-full bg-[#15584e]/30 blur-3xl lg:block" />
      <SectionHeading
        tone="dark"
        index="02"
        eyebrow="Research & innovation"
        title="Where deep biology meets"
        highlight="intelligent systems."
        lead="Our development engine combines multi-modal biology, computational chemistry and patient-centered evidence to design medicines that are more precise, more predictable and more personal."
      />

      <div className="mt-12 grid gap-4 lg:grid-cols-3">
        {[
          { code: 'A', label: 'Discovery', title: 'AI-guided drug discovery', body: 'Integrating multi-modal data — genomics, chemistry and real-world evidence — to identify stronger therapeutic hypotheses, sooner.', articleId: 'ai-drug-discovery' },
          { code: 'B', label: 'Development', title: 'Predictive clinical design', body: 'Digital biomarkers, adaptive protocols and model-informed development designed around real patient journeys.', articleId: 'predictive-clinical-design' },
          { code: 'C', label: 'Care', title: 'Connected therapeutics', body: 'Combining medicine with digital care and monitoring for more responsive, individualized treatment.', articleId: 'connected-therapeutics' },
        ].map((item, i) => {
          const article = SCIENCE_CARDS.find(s => s.id === item.articleId)
          return (
            <Reveal key={item.code} delay={i * 0.1}>
              <button
                onClick={() => { if (article) onOpenArticle(article) }}
                className="group block h-full w-full text-left"
              >
                <Card tone="dark" className="h-full">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold text-[#83aa9f]">
                      {item.code} / {item.label}
                    </span>
                    <span className="text-2xl text-white/30 transition group-hover:rotate-45">
                      <ArrowUpRight className="h-6 w-6" />
                    </span>
                  </div>
                  <h3 className="mt-24 text-3xl font-semibold tracking-[-0.04em]">
                    {item.title}
                  </h3>
                  <p className="mt-4 text-sm leading-6 text-white/55">{item.body}</p>
                </Card>
              </button>
            </Reveal>
          )
        })}
      </div>

      <div className="mt-20 grid gap-10 lg:grid-cols-2 lg:items-center">
        <Reveal className="relative">
          <img
            src="/images/biotech-leader.png"
            alt="Espandiar research leader in a biotechnology laboratory"
            className="h-[520px] w-full rounded-[32px] object-cover object-center"
            loading="lazy"
          />
          <div className="absolute bottom-5 left-5 right-5 rounded-2xl border border-white/15 bg-[#0d211d]/75 p-5 backdrop-blur-md">
            <p className="text-xs uppercase tracking-[0.14em] text-white/50">
              Perspective
            </p>
            <p className="mt-2 font-semibold">
              “The best science begins with the right human question.”
            </p>
          </div>
        </Reveal>
        <div className="lg:pl-16">
          <Eyebrow tone="sage">Our development engine</Eyebrow>
          <div className="mt-8 space-y-8">
            {[
              { n: '01', t: 'Understand', d: 'Map disease biology through genomics, multi-omics and real-world evidence to identify the most relevant targets.' },
              { n: '02', t: 'Design', d: 'Build targeted molecules with computational precision, supported by AI-assisted lead optimization.' },
              { n: '03', t: 'Validate', d: 'Develop patient-centered evidence across connected, adaptive clinical trials.' },
              { n: '04', t: 'Deliver', d: 'Manufacture to global GMP standards and supply reliably through a connected cold chain.' },
            ].map((s) => (
              <div key={s.n} className="border-l border-[#4e776d] pl-6">
                <b className="text-2xl">
                  {s.n}. {s.t}
                </b>
                <p className="mt-2 text-sm text-white/55">{s.d}</p>
              </div>
            ))}
          </div>
          <button
            onClick={() => navigate('research')}
            className="mt-10 inline-flex items-center gap-2 rounded-full border border-white/25 px-6 py-4 text-sm font-bold transition hover:bg-white/10"
          >
            Enter innovation hub
            <ArrowUpRight className="h-4 w-4" />
          </button>
        </div>
      </div>
    </Section>
  )
}

/* ============== Therapies section ============== */
function TherapiesSection() {
  const { navigate } = useRouter()
  return (
    <Section tone="light">
      <SectionHeading
        index="03"
        eyebrow="Therapeutic focus"
        title="Focused expertise."
        highlight="Broader impact."
        lead="We prioritize therapeutic areas where our platforms, partnerships and clinical expertise can deliver distinctive value for patients."
      />
      <div className="mt-14 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {THERAPY_AREAS.map((t, i) => (
          <Reveal key={t.n} delay={i * 0.06}>
            <button
              onClick={() => navigate(t.route)}
              className="group block w-full rounded-[26px] border border-border bg-card p-7 text-left card-hover min-h-64"
            >
              <span className="text-5xl font-light text-[#87a69d] dark:text-[#5d7770]">
                {t.n}
              </span>
              <h3 className="mt-20 text-2xl font-semibold">{t.title}</h3>
              <span className="mt-3 inline-block text-sm text-[#0d5d50] opacity-0 transition group-hover:opacity-100 dark:text-[#8fb9ad]">
                Explore area →
              </span>
            </button>
          </Reveal>
        ))}
      </div>

      <Reveal className="mt-5 flex flex-wrap gap-x-7 gap-y-3 rounded-2xl bg-[#e8ece8] p-5 text-xs font-bold uppercase tracking-[0.12em] text-[#4c5c57] dark:bg-[#1c2926] dark:text-[#a5b3ae]">
        {['Biologics', 'Vaccines', 'Prescription', 'Diagnostics', "Women's health", 'Cardiometabolic', 'Specialty care', 'Rare disease'].map((s) => (
          <span key={s}>{s}</span>
        ))}
      </Reveal>
    </Section>
  )
}

/* ============== Manufacturing band ============== */
function ManufacturingBand() {
  const { navigate } = useRouter()
  return (
    <section className="bg-[#0b3b34] text-white">
      <div className="mx-auto grid max-w-[1600px] lg:grid-cols-2">
        <div className="min-h-[500px] lg:min-h-[690px]">
          <img
            src="/images/cleanroom.png"
            alt="Automated pharmaceutical manufacturing cleanroom with personnel in sterile garments"
            className="h-full w-full object-cover"
            loading="lazy"
          />
        </div>
        <div className="flex flex-col justify-center p-8 sm:p-14 lg:p-20">
          <Eyebrow tone="sage">Manufacturing excellence / 04</Eyebrow>
          <h2 className="mt-6 text-4xl font-semibold tracking-[-0.045em] sm:text-6xl">
            Quality is not a checkpoint. It is the system.
          </h2>
          <p className="mt-7 max-w-xl leading-7 text-white/65">
            Our intelligent production network combines advanced automation,
            continuous verification and responsible resource use to deliver
            reliably, at global scale — across oral solids, sterile injectables,
            biologics and lyophilized products.
          </p>
          <div className="mt-10 grid grid-cols-3 gap-3 border-t border-white/20 pt-7">
            <StatBlock tone="dark" value="99.8" suffix="%" label="Right-first-time" />
            <StatBlock tone="dark" value="24/7" label="Quality monitoring" />
            <StatBlock tone="dark" value="8" label="Smart facilities" />
          </div>
          <button
            onClick={() => navigate('manufacturing')}
            className="mt-10 w-fit rounded-full bg-white px-6 py-4 text-sm font-bold text-[#0b3b34] transition hover:bg-[#dcebe6]"
          >
            Explore manufacturing →
          </button>
        </div>
      </div>
    </section>
  )
}

/* ============== Sustainability band ============== */
function SustainabilityBand() {
  const { navigate } = useRouter()
  return (
    <Section tone="pearl">
      <div className="grid gap-12 lg:grid-cols-[0.8fr_1.2fr]">
        <Reveal>
          <Eyebrow>Sustainable health / 05</Eyebrow>
          <h2 className="mt-5 text-5xl font-semibold tracking-[-0.05em] sm:text-7xl">
            Healthier people.
            <br />
            <span className="text-[#71827c]">Healthier planet.</span>
          </h2>
          <p className="mt-6 max-w-md text-sm leading-6 text-muted-foreground">
            We design environmental responsibility into every stage — from
            solvent recovery in API synthesis to renewable-powered cleanrooms
            and a science-aligned path to net zero.
          </p>
        </Reveal>
        <div className="grid grid-cols-2 gap-4">
          <Card>
            <b className="text-4xl text-[#0d5d50] dark:text-[#8fb9ad]">−42%</b>
            <p className="mt-4 text-sm text-muted-foreground">
              Operational carbon emissions since our 2019 baseline.
            </p>
          </Card>
          <Card>
            <b className="text-4xl text-[#0d5d50] dark:text-[#8fb9ad]">76%</b>
            <p className="mt-4 text-sm text-muted-foreground">
              Electricity sourced from renewable energy globally.
            </p>
          </Card>
          <Card className="col-span-2 bg-[#dce8e2] dark:bg-[#1c2926]">
            <div className="flex flex-wrap items-end justify-between gap-4">
              <div>
                <b className="text-2xl">Road to net zero</b>
                <p className="mt-2 text-sm text-[#53655f] dark:text-white/70">
                  Science-aligned targets across our complete value chain.
                </p>
              </div>
              <button
                onClick={() => navigate('sustainability')}
                className="text-sm font-bold transition hover:opacity-70"
              >
                View 2035 roadmap ↗
              </button>
            </div>
          </Card>
        </div>
      </div>
    </Section>
  )
}

/* ============== Global network ============== */
function GlobalNetwork() {
  const { navigate } = useRouter()
  return (
    <Section tone="light" id="global">
      <Reveal className="text-center">
        <Eyebrow>Global presence / 06</Eyebrow>
        <h2 className="mt-5 text-5xl font-semibold tracking-[-0.05em] sm:text-7xl">
          Connected by purpose.
        </h2>
        <p className="mx-auto mt-5 max-w-2xl text-muted-foreground">
          Research, production and partnerships working as one network across
          52 countries — from discovery hubs in Europe and North America to
          manufacturing centers across Asia and the Middle East.
        </p>
      </Reveal>

      <Reveal className="relative mx-auto mt-12 aspect-[1.9/1] max-w-6xl overflow-hidden rounded-[36px] bg-[#102d28] p-8 soft-shadow">
        <svg
          viewBox="0 0 1000 500"
          className="relative h-full w-full"
          role="img"
          aria-label="World map showing Espandiar offices across 11 global locations"
        >
          <defs>
            <filter id="marker-glow">
              <feGaussianBlur stdDeviation="4" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
            <filter id="line-glow">
              <feGaussianBlur stdDeviation="1.5" result="blur" />
              <feMerge>
                <feMergeNode in="blur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
            <radialGradient id="pulse-ring">
              <stop offset="0%" stopColor="#4cda8f" stopOpacity="0.5" />
              <stop offset="100%" stopColor="#4cda8f" stopOpacity="0" />
            </radialGradient>
          </defs>

          {/* ── Grid lines ── */}
          <g stroke="#1a4038" strokeWidth="0.4" opacity="0.5">
            {[0,1,2,3,4,5,6,7,8,9,10].map(i => (
              <line key={`h${i}`} x1="0" y1={i*50} x2="1000" y2={i*50} />
            ))}
            {[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map(i => (
              <line key={`v${i}`} x1={i*50} y1="0" x2={i*50} y2="500" />
            ))}
          </g>

          {/* ── Continents ── */}
          <g fill="#2a5248" stroke="#1e3e35" strokeWidth="0.5" strokeLinejoin="round">
            {/* North America */}
            <path d="M 33,69 C 40,74 52,82 65,88 C 82,96 105,106 128,112 C 136,116 142,122 147,131 C 151,138 155,147 159,156 C 163,164 170,173 180,181 C 192,190 208,200 228,210 C 245,218 260,225 272,228 L 278,227 C 272,220 264,210 259,200 C 255,192 254,184 256,177 C 260,178 268,180 276,181 C 278,176 280,170 282,165 C 286,157 291,150 297,145 C 305,137 315,130 327,124 C 337,119 347,117 355,116 C 349,108 340,99 332,94 C 320,88 305,87 293,87 C 284,88 276,92 270,96 C 266,92 263,86 260,82 C 263,78 269,76 277,75 C 288,72 295,66 296,58 C 278,52 253,48 228,47 C 198,48 162,51 128,54 C 92,57 58,56 44,55 Z" />
            {/* Greenland */}
            <path d="M 325,26 C 332,20 345,16 362,18 C 376,20 387,28 390,40 C 391,50 385,58 375,62 C 362,65 347,62 337,55 C 329,48 323,38 325,26 Z" />
            {/* South America */}
            <path d="M 278,226 C 286,230 296,236 306,242 C 316,248 324,254 330,261 C 336,270 340,282 342,294 C 343,306 341,320 337,334 C 332,350 324,364 314,375 C 304,384 293,392 282,397 C 272,400 262,398 254,392 C 248,386 244,376 241,364 C 238,350 238,334 240,320 C 242,306 246,292 250,280 C 254,268 260,256 266,246 C 270,240 274,234 278,226 Z" />
            {/* Europe - main continent */}
            <path d="M 475,136 C 478,142 484,148 492,150 C 498,149 502,144 506,136 C 509,130 514,127 520,127 C 528,130 536,134 544,137 C 548,140 550,142 549,144 C 546,146 543,148 542,147 C 544,150 548,148 554,146 C 560,148 564,152 567,150 C 570,146 574,140 578,136 C 584,130 590,124 594,120 C 600,115 606,112 610,110 C 608,106 602,102 594,100 C 586,98 580,96 578,92 C 578,86 577,78 575,70 C 572,62 568,56 562,50 C 554,48 544,50 534,54 C 526,58 518,64 512,70 C 508,74 506,80 506,86 C 508,90 512,94 516,97 C 520,100 522,102 520,104 C 516,106 510,108 504,110 C 498,114 492,118 488,120 C 484,124 480,130 478,133 Z" />
            {/* Iberian Peninsula */}
            <path d="M 475,133 C 476,138 478,144 482,148 C 486,152 490,154 494,152 C 498,150 500,145 499,140 C 498,136 495,132 490,130 C 485,128 480,130 476,132 Z" />
            {/* Scandinavia */}
            <path d="M 510,38 C 514,34 520,30 528,28 C 536,28 542,34 544,42 C 545,50 542,58 538,64 C 534,68 530,70 526,68 C 522,64 518,58 515,52 C 512,46 510,42 510,38 Z" />
            {/* UK */}
            <path d="M 478,78 C 480,74 484,72 488,74 C 491,76 493,80 493,86 C 492,90 490,94 487,96 C 484,96 481,94 479,90 C 478,86 477,82 478,78 Z" />
            {/* Ireland */}
            <path d="M 471,80 C 473,77 476,76 478,78 C 479,80 478,84 476,87 C 474,89 472,88 471,85 Z" />
            {/* Italy */}
            <path d="M 524,120 C 526,116 530,114 534,116 C 538,118 540,124 539,130 C 537,136 534,140 530,142 C 526,140 524,136 523,130 C 523,126 523,122 524,120 Z" />
            {/* Africa */}
            <path d="M 488,152 C 496,146 508,142 522,140 C 536,138 550,140 562,146 C 572,150 580,158 584,168 C 588,180 586,194 582,208 C 576,224 568,238 558,252 C 548,264 536,276 524,286 C 512,296 502,304 494,310 C 488,314 484,318 482,322 C 480,326 480,330 482,334 C 484,338 482,342 478,344 C 472,342 468,336 466,328 C 464,320 464,310 466,300 C 468,288 470,278 472,268 C 472,256 470,246 468,238 C 466,228 464,218 464,208 C 464,198 466,188 470,178 C 474,168 480,160 488,152 Z" />
            {/* Madagascar */}
            <path d="M 590,296 C 592,292 596,290 598,294 C 600,300 598,310 596,318 C 594,324 590,326 588,322 C 586,316 588,304 590,296 Z" />
            {/* Asia - mainland */}
            <path d="M 610,110 C 618,104 630,98 646,94 C 668,88 698,82 728,78 C 758,74 786,72 810,76 C 830,80 846,88 856,100 C 862,108 864,118 862,128 C 860,136 854,142 846,148 C 838,152 828,154 818,152 C 808,150 798,146 790,142 C 782,140 774,140 766,142 C 758,144 750,148 742,150 C 734,152 726,152 718,150 C 710,148 702,144 696,140 C 690,136 686,132 684,128 C 680,132 676,136 672,140 C 666,144 660,148 654,150 C 648,150 644,148 642,144 C 640,140 642,134 646,128 C 648,124 650,120 650,116 C 648,110 644,106 638,102 C 632,98 624,96 618,96 C 614,100 612,106 610,110 Z" />
            {/* Middle East / Arabian Peninsula */}
            <path d="M 610,110 C 612,116 614,122 618,128 C 622,134 628,140 636,146 C 642,150 648,154 654,156 C 658,158 660,162 658,168 C 654,174 648,180 642,184 C 636,188 630,190 624,188 C 620,186 618,182 618,178 C 616,172 612,168 608,166 C 602,164 596,166 590,170 C 586,172 584,170 584,166 C 586,160 590,154 594,148 C 598,142 604,136 610,130 Z" />
            {/* India */}
            <path d="M 718,128 C 722,138 726,150 728,164 C 730,178 728,192 724,204 C 720,214 714,222 706,226 C 698,228 690,224 684,216 C 680,208 678,198 680,188 C 682,178 688,168 694,158 C 700,148 706,140 710,134 C 714,130 716,128 718,128 Z" />
            {/* SE Asia Peninsula */}
            <path d="M 766,142 C 770,148 774,156 776,164 C 778,172 776,180 772,186 C 768,190 764,188 762,182 C 760,176 760,168 762,160 C 764,152 766,146 766,142 Z" />
            {/* Indonesia / Malay Archipelago */}
            <path d="M 780,192 C 788,188 798,186 808,188 C 816,190 822,194 824,200 C 824,206 820,210 814,212 C 806,214 798,212 790,208 C 784,204 780,198 780,192 Z" />
            <path d="M 830,198 C 836,194 844,194 850,198 C 854,202 854,208 850,212 C 846,214 840,214 834,212 C 830,208 828,204 830,198 Z" />
            {/* Japan */}
            <path d="M 876,118 C 880,112 886,108 892,110 C 896,114 898,122 896,132 C 894,140 890,146 886,148 C 882,146 880,140 878,132 C 876,126 876,122 876,118 Z" />
            {/* Korea */}
            <path d="M 850,128 C 854,124 858,124 860,128 C 862,134 860,142 858,146 C 856,148 852,148 850,144 C 848,140 848,134 850,128 Z" />
            {/* Australia */}
            <path d="M 840,300 C 850,290 864,284 880,282 C 898,280 916,284 930,292 C 942,300 950,312 952,326 C 952,340 946,354 936,364 C 924,374 910,380 894,382 C 878,382 862,378 850,370 C 840,362 834,350 832,336 C 830,322 832,310 840,300 Z" />
            {/* New Zealand */}
            <path d="M 958,370 C 960,366 964,366 966,370 C 967,376 966,384 964,390 C 962,394 958,394 957,390 C 956,386 956,376 958,370 Z" />
          </g>

          {/* ── Connection lines from Berlin (HQ) ── */}
          <g stroke="#8fb9ad" strokeWidth="0.8" strokeDasharray="5,5" opacity="0.4" fill="none" filter="url(#line-glow)">
            <line x1="537" y1="104" x2="521" y2="118" />
            <line x1="537" y1="104" x2="303" y2="132" />
            <line x1="537" y1="104" x2="702" y2="197" />
            <line x1="537" y1="104" x2="837" y2="163" />
            <line x1="537" y1="104" x2="371" y2="315" />
            <line x1="537" y1="104" x2="888" y2="151" />
            <line x1="537" y1="104" x2="654" y2="180" />
            <line x1="537" y1="104" x2="509" y2="232" />
            <line x1="537" y1="104" x2="500" y2="107" />
            <line x1="537" y1="104" x2="853" y2="146" />
          </g>

          {/* ── City markers ── */}
          <g>
            {/* Berlin (HQ) - pulsing */}
            <circle cx="537" cy="104" r="14" fill="url(#pulse-ring)">
              <animate attributeName="r" values="6;20;6" dur="2.5s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.6;0;0.6" dur="2.5s" repeatCount="indefinite" />
            </circle>
            <circle cx="537" cy="104" r="5" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="537" y="96" textAnchor="middle" fill="#e0f2eb" fontSize="8" fontWeight="600" fontFamily="Manrope, sans-serif">Berlin <tspan fill="#4cda8f" fontSize="6.5">HQ</tspan></text>

            {/* Basel */}
            <circle cx="521" cy="118" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="521" y="132" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Basel</text>

            {/* Boston */}
            <circle cx="303" cy="132" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="303" y="146" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Boston</text>

            {/* Mumbai */}
            <circle cx="702" cy="197" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="702" y="211" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Mumbai</text>

            {/* Shanghai */}
            <circle cx="837" cy="163" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="837" y="177" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Shanghai</text>

            {/* São Paulo */}
            <circle cx="371" cy="315" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="371" y="329" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">São Paulo</text>

            {/* Tokyo */}
            <circle cx="888" cy="151" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="888" y="145" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Tokyo</text>

            {/* Dubai */}
            <circle cx="654" cy="180" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="654" y="194" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Dubai</text>

            {/* Lagos */}
            <circle cx="509" cy="232" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="509" y="246" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Lagos</text>

            {/* London */}
            <circle cx="500" cy="107" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="490" y="100" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">London</text>

            {/* Seoul */}
            <circle cx="853" cy="146" r="3" fill="#4cda8f" filter="url(#marker-glow)" />
            <text x="853" y="162" textAnchor="middle" fill="#8fb9ad" fontSize="6.5" fontFamily="Manrope, sans-serif">Seoul</text>
          </g>

          {/* ── Role labels (small, subtle) ── */}
          <g fill="#5a8a7c" fontSize="5" fontFamily="Manrope, sans-serif" opacity="0.7">
            <text x="521" y="140" textAnchor="middle">R&D</text>
            <text x="303" y="154" textAnchor="middle">R&D</text>
            <text x="702" y="219" textAnchor="middle">Manufacturing</text>
            <text x="837" y="185" textAnchor="middle">Manufacturing</text>
            <text x="371" y="337" textAnchor="middle">Regional office</text>
            <text x="888" y="139" textAnchor="middle">Regional office</text>
            <text x="654" y="202" textAnchor="middle">Regional office</text>
            <text x="509" y="254" textAnchor="middle">Regional office</text>
            <text x="490" y="108" textAnchor="middle">Regulatory</text>
            <text x="853" y="170" textAnchor="middle">CDMO</text>
          </g>
        </svg>
        <div className="absolute bottom-6 left-6 right-6 flex flex-wrap justify-between gap-3 rounded-2xl border border-white/10 bg-white/10 p-4 text-xs text-white backdrop-blur-md">
          <span>
            <b>11</b> research hubs
          </span>
          <span>
            <b>8</b> manufacturing sites
          </span>
          <span>
            <b>52</b> country teams
          </span>
          <button
            onClick={() => navigate('contact')}
            className="font-bold text-[#b7d3cb] transition hover:text-white"
          >
            Find an office →
          </button>
        </div>
      </Reveal>
    </Section>
  )
}

/* ============== News section ============== */
function NewsSection({ onOpenArticle }: { onOpenArticle: (a: ArticleData) => void }) {
  const { navigate } = useRouter()
  return (
    <Section tone="light" className="bg-card">
      <div className="flex items-end justify-between">
        <div>
          <Eyebrow>Signals / 07</Eyebrow>
          <h2 className="mt-5 text-5xl font-semibold tracking-[-0.05em] sm:text-7xl">
            Latest from Espandiar.
          </h2>
        </div>
        <button
          onClick={() => navigate('news')}
          className="hidden text-sm font-bold text-[#0d5d50] transition hover:opacity-70 md:block dark:text-[#8fb9ad]"
        >
          View media center →
        </button>
      </div>
      <div className="mt-12 grid gap-4 lg:grid-cols-3">
        {NEWS_ITEMS.map((n, i) => (
          <Reveal key={n.title} delay={i * 0.1}>
            <button
              onClick={() => {
                if (n.articleId && NEWS_ARTICLES[n.articleId]) {
                  onOpenArticle(NEWS_ARTICLES[n.articleId])
                } else {
                  navigate(n.route)
                }
              }}
              className="block h-full w-full rounded-[26px] border border-border bg-[#f6f7f3] p-7 text-left card-hover dark:bg-[#17231f]"
            >
              <span className="text-[10px] font-bold uppercase tracking-[0.17em] text-muted-foreground">
                {n.tag} · {n.date}
              </span>
              <h3 className="mt-16 text-2xl font-semibold tracking-[-0.03em]">
                {n.title}
              </h3>
              <span className="mt-7 inline-block text-sm font-bold text-[#0d5d50] dark:text-[#8fb9ad]">
                Read story →
              </span>
            </button>
          </Reveal>
        ))}
      </div>
    </Section>
  )
}

/* ============== Portals band ============== */
function PortalsBand() {
  const { navigate } = useRouter()
  const portals: { label: string; route: RouteKey }[] = [
    { label: 'Patients & caregivers', route: 'specialty' },
    { label: 'Healthcare professionals', route: 'knowledge' },
    { label: 'Partners & suppliers', route: 'cdmo' },
    { label: 'Investors', route: 'investors' },
  ]
  return (
    <section className="bg-[#dfe9e4] py-20 dark:bg-[#0f1715]">
      <div className="mx-auto max-w-[1440px] px-5 sm:px-8 lg:px-12">
        <div className="grid gap-8 lg:grid-cols-[0.6fr_1.4fr] lg:items-center">
          <div>
            <Eyebrow>Dedicated access</Eyebrow>
            <h2 className="mt-3 text-3xl font-semibold tracking-[-0.04em]">
              Choose your portal.
            </h2>
          </div>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
            {portals.map((p) => (
              <button
                key={p.label}
                onClick={() => navigate(p.route)}
                className="rounded-2xl bg-card p-5 text-sm font-bold transition hover:bg-background"
              >
                {p.label}
                <span className="float-right">
                  <ArrowUpRight className="h-4 w-4" />
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}