'use client'

import * as React from 'react'
import { ArrowRight, Cpu, Dna, Microscope, FlaskConical, Activity, Layers, Atom, Brain, Zap } from 'lucide-react'
import { useRouter } from '@/lib/router'
import { PageShell, PageHero, Section, SectionHeading, Reveal, Eyebrow, Card, DefRow, NumberedStep, LabeledDivider, LinkButton, Pill } from '@/components/site/ui'
import { DNAHelix } from '@/components/site/molecules'

export function ResearchPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Research & development"
        title="Where deep biology meets"
        highlight="intelligent systems."
        lead="Espandiar&apos;s R&D engine spans the full pharmaceutical development lifecycle — from target identification and AI-assisted drug discovery through preclinical development, formulation science, analytical chemistry and clinical translation."
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Overview"
          title="A connected pipeline,"
          highlight="not a sequence of handoffs."
          lead="Our development model integrates discovery, translational science, CMC, clinical operations and regulatory strategy from day one — so that decisions are made with the full context of the patient, the molecule and the manufacturing process."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1.1fr_0.9fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-muted-foreground">
              <p>
                Pharmaceutical R&D is a long, expensive and uncertain process.
                Industry estimates place the average cost of bringing a new
                molecular entity to market at well over USD 1 billion, with
                development timelines frequently exceeding ten years. Most
                candidates that enter clinical development do not reach approval.
                Our R&D strategy is built to improve those odds.
              </p>
              <p>
                We focus on three levers: better target selection (so we begin
                with biologically plausible hypotheses), predictive
                formulation and CMC (so the molecule we test is the molecule we
                scale), and adaptive clinical design (so we learn faster from
                each patient). Each lever is supported by computational and
                analytical platforms that we have built internally.
              </p>
              <p>
                Below, we describe each stage of our development pipeline in
                detail. The descriptions reflect established pharmaceutical
                science as documented by the FDA, EMA, ICH, USP and Ph. Eur.,
                and academic literature in medicinal chemistry, biopharmaceutics
                and clinical pharmacology.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>Development framework</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Discovery">Target identification, hit identification, lead optimization (ICH M3(R2)).</DefRow>
                <DefRow term="Preclinical">Pharmacology, toxicology, ADME, safety pharmacology (ICH S7A/S7B, S9).</DefRow>
                <DefRow term="CMC">Formulation, analytical development, stability (ICH Q1A, Q2, Q3, Q6A).</DefRow>
                <DefRow term="Clinical">Phase I–III, adaptive design, PK/PD (ICH E6, E8, E9).</DefRow>
                <DefRow term="Regulatory">IND/CTA, NDA/BLA/MAA, lifecycle (ICH M4, M8, Q12).</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Discovery pipeline */}
      <Section tone="dark">
        <div className="absolute right-0 top-0 hidden opacity-30 lg:block">
          <DNAHelix className="h-[500px] w-[140px]" />
        </div>
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Drug discovery"
          title="From target biology"
          highlight="to clinical candidate."
          lead="Modern drug discovery begins with a deep understanding of disease biology. We use human genetics, functional genomics and multi-omics to identify targets with a credible causal link to disease."
        />
        <div className="mt-14 space-y-8">
          {[
            { n: '01', t: 'Target identification', d: 'We prioritize targets supported by human genetic evidence (e.g., Mendelian randomization, genome-wide association studies), validated functional genomics (CRISPR screens, RNAi) and mechanistic disease biology. Targets are triaged through a target-product-profile (TPP) framework before committing to chemistry.' },
            { n: '02', t: 'Hit identification', d: 'We screen chemically diverse libraries — including DNA-encoded libraries (DEL), fragment-based libraries and virtual libraries — using both biochemical and biophysical readouts (SPR, ITC, thermal shift). High-throughput screening is complemented by structure-based design where target structures are available.' },
            { n: '03', t: 'Hit-to-lead', d: 'Promising hits are expanded into small focused series and profiled for potency, selectivity, aqueous solubility, metabolic stability and permeability. Compounds are evaluated in cellular target-engagement assays to confirm on-mechanism activity.' },
            { n: '04', t: 'Lead optimization', d: 'Lead series are iteratively optimized against a multi-parameter optimization (MPO) score that balances potency, ADME properties, safety margins and synthetic tractability. Physiologically based pharmacokinetic (PBPK) modeling informs dose prediction.' },
          ].map((s) => (
            <Reveal key={s.n}>
              <NumberedStep tone="dark" n={s.n} title={s.t}>
                {s.d}
              </NumberedStep>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Preclinical development */}
      <Section tone="light">
        <SectionHeading
          index="04"
          eyebrow="Preclinical development"
          title="Building the safety"
          highlight="and ADME foundation."
          lead="Preclinical development generates the evidence required to support first-in-human dosing. Our programs are designed in line with ICH M3(R2), ICH S7A/S7B, ICH S9 and the principles of the 3Rs (replacement, reduction, refinement)."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2">
          {[
            { icon: Activity, t: 'Pharmacokinetics (ADME)', d: 'Absorption, distribution, metabolism and excretion characterized in vitro (microsomal stability, plasma protein binding, CYP inhibition/induction) and in vivo. Mass balance studies use radiolabeled compound to trace fate and metabolite exposure.' },
            { icon: Microscope, t: 'Safety pharmacology', d: 'Core battery per ICH S7A: cardiovascular (in vitro hERG, in vivo telemetry), respiratory and central nervous system. Supplementary ICH S7B studies assess proarrhythmic risk through integrated electrophysiology.' },
            { icon: FlaskConical, t: 'Toxicology', d: 'Repeat-dose toxicity in rodent and non-rodent species, genotoxicity (Ames, in vitro micronucleus, in vivo), safety margins for therapeutic indications. Studies follow OECD test guidelines and GLP.' },
            { icon: Brain, t: 'Pharmacodynamics', d: 'In vivo PD biomarkers establish dose–exposure–response relationships and bridge to clinically measurable biomarkers. PD readouts inform translational modeling and clinical dose selection.' },
          ].map((p, i) => {
            const Icon = p.icon
            return (
              <Reveal key={p.t} delay={(i % 2) * 0.1}>
                <Card className="h-full">
                  <div className="grid h-12 w-12 place-items-center rounded-2xl bg-[#0d5d50]/10 text-[#0d5d50] dark:bg-[#8fb9ad]/10 dark:text-[#8fb9ad]">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h3 className="mt-6 text-xl font-semibold tracking-[-0.02em]">{p.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">{p.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Clinical development overview */}
      <Section tone="pearl">
        <SectionHeading
          index="05"
          eyebrow="Clinical development"
          title="Patient-centered evidence,"
          highlight="by design."
          lead="Clinical development at Espandiar emphasizes adaptive design, meaningful endpoints and recruitment that reflects the populations who will use our medicines. Our protocols follow ICH E6(R3) (GCP), ICH E8(R1) and ICH E9 (statistical principles)."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1fr_1fr]">
          <Reveal>
            <div className="space-y-6 text-[15px] leading-7 text-muted-foreground">
              <p>
                Phase I studies establish the safety, tolerability and
                pharmacokinetics of an investigational compound in a small
                group of healthy volunteers or patients. For oncology and
                certain advanced therapies, Phase I is conducted in patients
                with the target indication. Dose escalation follows
                model-informed designs (e.g., Bayesian optimal interval,
                accelerated titration) to balance safety and dose-finding
                efficiency.
              </p>
              <p>
                Phase II studies evaluate proof-of-concept and refine the dose.
                We favor adaptive designs — including seamless Phase II/III
                designs and master protocols (basket, umbrella and platform
                trials) where scientifically appropriate — to accelerate
                learning without compromising statistical rigor.
              </p>
              <p>
                Phase III studies confirm efficacy and safety in larger,
                randomized, often blinded, controlled populations. Endpoints
                are selected in consultation with regulators and patient
                communities to reflect clinically meaningful benefit, not
                merely statistical separation from control.
              </p>
              <p>
                Across all phases, we register trials on ClinicalTrials.gov and
                the EU Clinical Trials Information System (CTIS), post summary
                results within the timeframes required by regulators, and
                publish results in peer-reviewed journals regardless of
                outcome.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card>
              <Eyebrow>Key ICH efficacy guidelines</Eyebrow>
              <dl className="mt-6">
                <DefRow term="ICH E6(R3)">Good Clinical Practice — ethical and scientific quality standards for trials.</DefRow>
                <DefRow term="ICH E8(R1)">General considerations for clinical studies — quality by design.</DefRow>
                <DefRow term="ICH E9(R1)">Statistical principles and estimands — defining the treatment effect precisely.</DefRow>
                <DefRow term="ICH E10">Choice of control group — placebo, active, no-treatment designs.</DefRow>
                <DefRow term="ICH E18">Genomic sampling — pharmacogenomic data collection in trials.</DefRow>
                <DefRow term="ICH E20">Adaptive clinical trials — design principles for flexibility.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Analytical chemistry */}
      <Section tone="light">
        <SectionHeading
          index="06"
          eyebrow="Analytical chemistry"
          title="If you cannot measure it,"
          highlight="you cannot control it."
          lead="Our analytical development groups develop, validate and transfer methods that quantify identity, purity, potency and stability of APIs and drug products. Method validation follows ICH Q2(R2); impurity control follows ICH Q3A/B/C/D."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[
            { t: 'Chromatography', d: 'HPLC, UPLC, GC and IC for assay, related substances, chiral purity and residual solvents (ICH Q3C).' },
            { t: 'Spectroscopy', d: 'UV-Vis, FT-IR, NMR and mass spectrometry (LC-MS, GC-MS, HRMS) for structural confirmation and trace analysis.' },
            { t: 'Elemental analysis', d: 'ICP-MS and ICP-OES for elemental impurities per ICH Q3D, including Class 1, 2A, 2B and 3 metals.' },
            { t: 'Particle characterization', d: 'Laser diffraction, BET surface area, XRPD, DSC and TGA for polymorph, particle size and crystallinity.' },
            { t: 'Bioanalytical', d: 'Validated LC-MS/MS and ligand-binding assays for PK/PD sample analysis per FDA and EMA bioanalytical guidance and ICH M10.' },
            { t: 'Stability', d: 'ICH Q1A long-term, intermediate and accelerated conditions; in-use stability and photostability (ICH Q1B).' },
          ].map((a, i) => (
            <Reveal key={a.t} delay={(i % 3) * 0.08}>
              <Card className="h-full">
                <Pill tone="emerald">{`0${i + 1}`}</Pill>
                <h3 className="mt-5 text-lg font-semibold tracking-[-0.02em]">{a.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{a.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Formulation development */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="07"
          eyebrow="Formulation development"
          title="The molecule is only"
          highlight="half the medicine."
          lead="Formulation determines whether a molecule reaches its site of action at the right concentration, for the right duration, in the right patient. Our formulation scientists work across oral, parenteral, topical, inhaled and modified-release platforms."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2">
          {[
            { t: 'Oral solid dosage', d: 'Immediate-release tablets and capsules, modified-release (matrix, osmotic, coated), fixed-dose combinations. Biopharmaceutics modeled per FDA BCS and ICH M9.' },
            { t: 'Sterile injectables', d: 'Solution, suspension and lyophilized presentations. Endotoxin and particulate control per USP <85>, USP <788>; container closure integrity per USP <1207>.' },
            { t: 'Modified release', d: 'Matrix systems, reservoir systems and osmotic pumps. In vitro release tested in compendial apparatus (USP <711>, <724>) with IVIVC where possible.' },
            { t: 'Topical & transdermal', d: 'Creams, gels, patches and micro-needle systems. In vitro permeation testing (IVPT) and rheology guide development.' },
            { t: 'Inhaled & nasal', d: 'Metered-dose inhalers, dry-powder inhalers and nasal sprays. Aerodynamic particle size distribution by Andersen cascade impactor.' },
            { t: 'Biologics formulation', d: 'Protein stabilization, surfactant and buffer optimization, lyophilization cycle development. Sub-visible particle control per USP <787>, <788>, <789>.' },
          ].map((f, i) => (
            <Reveal key={f.t} delay={(i % 2) * 0.1}>
              <Card tone="dark" className="h-full">
                <h3 className="text-xl font-semibold tracking-[-0.02em]">{f.t}</h3>
                <p className="mt-3 text-sm leading-6 text-white/60">{f.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Pharmacokinetics */}
      <Section tone="light">
        <SectionHeading
          index="08"
          eyebrow="Pharmacokinetics"
          title="Understanding what the body"
          highlight="does to the drug."
          lead="Pharmacokinetics (PK) quantifies absorption, distribution, metabolism and excretion. Our clinical pharmacology group uses both empirical and model-informed approaches to inform dose selection and labeling."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1fr_1fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-muted-foreground">
              <p>
                Non-compartmental analysis (NCA) provides model-independent PK
                parameters — Cmax, Tmax, AUC, half-life, clearance, volume of
                distribution. These metrics form the basis of bioequivalence
                assessment (FDA, EMA; ICH M13A in development) and support
                initial dose justification.
              </p>
              <p>
                Population PK (PopPK) modeling characterizes how
                covariates — age, body weight, organ function, concomitant
                medications — influence drug exposure. Models are developed in
                NONMEM, Phoenix NLME or Monolix, with covariate selection
                guided by both statistical and clinical reasoning.
              </p>
              <p>
                Physiologically based pharmacokinetic (PBPK) modeling simulates
                drug absorption, distribution and clearance using
                physiology-based equations. PBPK is widely accepted by FDA and
                EMA for predicting drug–drug interactions, food effects,
                pediatric dosing and formulation bridging.
              </p>
              <p>
                Pharmacokinetic–pharmacodynamic (PK/PD) modeling links exposure
                to biomarker response, supporting dose selection for
                late-phase trials and informing the label. Exposure–response
                analyses are also central to special-population assessment
                (renal, hepatic, pediatric, geriatric).
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card>
              <Eyebrow>PK parameters we model</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Cmax / Tmax">Peak concentration and time to peak — direct indicators of rate and extent of absorption.</DefRow>
                <DefRow term="AUC">Area under the concentration–time curve — total exposure, used for bioequivalence.</DefRow>
                <DefRow term="t½">Terminal half-life — determines dosing frequency.</DefRow>
                <DefRow term="CL">Clearance — drives maintenance dose.</DefRow>
                <DefRow term="Vd">Volume of distribution — drives loading dose.</DefRow>
                <DefRow term="F">Bioavailability — fraction of dose reaching systemic circulation.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Drug delivery systems */}
      <Section tone="pearl">
        <SectionHeading
          index="09"
          eyebrow="Drug delivery systems"
          title="Engineering the journey"
          highlight="from dose to target."
          lead="Advanced drug delivery systems improve therapeutic index, adherence and patient experience. We work across lipid, polymeric, inhaled and implantable platforms."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[
            { icon: Layers, t: 'Liposomal & lipid nanoparticle', d: 'Liposomes and LNPs encapsulate APIs to modify biodistribution, reduce toxicity and enable nucleic-acid delivery. Characterized by DLS, cryo-TEM and encapsulation efficiency.' },
            { icon: Atom, t: 'Polymeric nanoparticles', d: 'PLGA and other biodegradable polymers sustain release over days to months. Used for depot formulations and targeted delivery.' },
            { icon: Microscope, t: 'Modified release oral', d: 'Osmotic pumps, hydrophilic matrices and coated pellets provide controlled release profiles, reducing dosing frequency and smoothing peaks.' },
            { icon: Zap, t: 'Inhaled delivery', d: 'MDIs, DPIs and nebulized formulations target the lung directly, reducing systemic exposure for respiratory indications.' },
            { icon: Cpu, t: 'Implantable & device-combination', d: 'Long-acting implants and drug-device combinations (e.g., auto-injectors) improve adherence for chronic conditions.' },
            { icon: Dna, t: 'Targeted biologics', d: 'Antibody–drug conjugates (ADCs) and engineered scaffolds deliver potent payloads to specific cell populations, sparing healthy tissue.' },
          ].map((d, i) => {
            const Icon = d.icon
            return (
              <Reveal key={d.t} delay={(i % 3) * 0.08}>
                <Card className="h-full">
                  <div className="grid h-12 w-12 place-items-center rounded-2xl bg-[#0d5d50]/10 text-[#0d5d50] dark:bg-[#8fb9ad]/10 dark:text-[#8fb9ad]">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h3 className="mt-5 text-lg font-semibold tracking-[-0.02em]">{d.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">{d.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* AI drug discovery */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="10"
          eyebrow="AI-assisted drug discovery"
          title="Computation is now"
          highlight="part of the wet lab."
          lead="We integrate machine learning throughout discovery — from target prioritization and molecular generation to property prediction and clinical dose forecasting."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1fr_1fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-white/70">
              <p>
                Generative chemistry models explore virtual chemical spaces far
                larger than any physical library. We use graph-based and
                fragment-based generative architectures, conditioned on
                target structure and desired properties, to propose novel
                scaffolds. Each proposal is filtered by synthetic accessibility
                and prioritized by multi-parameter optimization.
              </p>
              <p>
                Predictive models for ADMET — absorption, distribution,
                metabolism, excretion, toxicity — let us triage compounds
                before synthesis. Active learning loops ensure that every new
                experimental measurement improves the model.
              </p>
              <p>
                Structure-based methods, including AlphaFold-derived models and
                cryo-EM structures, support virtual screening and lead
                optimization. Free-energy perturbation (FEP) calculations
                quantify predicted binding affinity for closely related
                analogs.
              </p>
              <p>
                We treat models as hypotheses. Every computational prediction
                is paired with an experimental measurement plan, and model
                performance is monitored on held-out test sets to detect drift
                and avoid overconfidence.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <div className="space-y-4">
              {[
                { t: 'Target prioritization', d: 'Genetic evidence + pathway analysis + tractability scoring.' },
                { t: 'Generative chemistry', d: 'Graph neural networks proposing novel, synthesizable scaffolds.' },
                { t: 'ADMET prediction', d: 'Property prediction with calibrated uncertainty.' },
                { t: 'Structure-based design', d: 'Docking, FEP, molecular dynamics for lead optimization.' },
                { t: 'Clinical translation', d: 'PBPK and exposure–response modeling for dose selection.' },
              ].map((a, i) => (
                <div key={a.t} className="rounded-2xl border border-white/15 bg-white/[0.06] p-5 backdrop-blur-sm">
                  <b className="text-sm font-semibold text-white">{`0${i + 1}`} — {a.t}</b>
                  <p className="mt-1.5 text-sm text-white/60">{a.d}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Nanotechnology */}
      <Section tone="light">
        <SectionHeading
          index="11"
          eyebrow="Nanotechnology"
          title="Small scale."
          highlight="Large consequence."
          lead="Nanotechnology enables therapeutic approaches that would be impossible with conventional formulations — from tumor-targeted delivery to nucleic acid therapeutics."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2">
          {[
            { t: 'Lipid nanoparticles (LNPs)', d: 'Ionizable lipids encapsulate mRNA, siRNA and saRNA. LNPs enabled the rapid clinical deployment of mRNA vaccines and remain the leading platform for in vivo nucleic acid delivery.' },
            { t: 'Liposomes', d: 'Phospholipid bilayer vesicles encapsulate hydrophilic and lipophilic APIs. PEGylated liposomes extend circulation time; ligand-targeted liposomes direct payload to specific receptors.' },
            { t: 'Polymeric nanoparticles', d: 'PLGA, PCL and natural polymers (chitosan, alginate) provide tunable release profiles. Widely used for depot and oral bioavailability enhancement.' },
            { t: 'Nanocrystals', d: 'Sub-micron drug crystals increase dissolution rate for poorly soluble APIs. Used in oral, injectable and inhaled products.' },
            { t: 'Inorganic nanocarriers', d: 'Mesoporous silica, iron oxide and gold nanoparticles explored for imaging, hyperthermia and triggered release applications.' },
            { t: 'Characterization', d: 'DLS for size and polydispersity; zeta potential for surface charge; cryo-TEM for morphology; SEC for aggregation; ICP-MS for elemental composition.' },
          ].map((n, i) => (
            <Reveal key={n.t} delay={(i % 2) * 0.1}>
              <Card className="h-full">
                <h3 className="text-xl font-semibold tracking-[-0.02em]">{n.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{n.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Future research areas */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="12"
          eyebrow="Future research areas"
          title="Where biology is heading,"
          highlight="we are building."
          lead="Our forward research agenda targets modalities and disease biology where current treatment options are inadequate."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { t: 'RNA therapeutics', d: 'mRNA, siRNA, antisense and circular RNA platforms for indications ranging from rare genetic disease to oncology.' },
            { t: 'Cell therapy', d: 'Autologous and allogeneic cell therapies, including CAR-T and induced pluripotent stem cell (iPSC) derived effectors.' },
            { t: 'Gene editing', d: 'CRISPR-Cas and base/prime editing platforms for monogenic disease, with delivery focused on LNP and AAV vectors.' },
            { t: 'Microbiome', d: 'Live biotherapeutic products and microbiome-derived metabolites for gastrointestinal and systemic indications.' },
          ].map((f, i) => (
            <Reveal key={f.t} delay={(i % 4) * 0.08}>
              <Card tone="dark" className="h-full">
                <Pill tone="dark">0{i + 1}</Pill>
                <h3 className="mt-5 text-lg font-semibold tracking-[-0.02em]">{f.t}</h3>
                <p className="mt-3 text-sm leading-6 text-white/60">{f.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
        <Reveal className="mt-12">
          <LabeledDivider label="Explore further" tone="dark" />
          <div className="mt-6 flex flex-wrap gap-3">
            <LinkButton variant="light" onClick={() => navigate('biotechnology')}>
              Biotechnology platforms
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="outline" className="text-white" onClick={() => navigate('innovation')}>
              Innovation roadmap
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="ghost" className="text-white" onClick={() => navigate('contact')}>
              Scientific collaboration
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </div>
        </Reveal>
      </Section>
    </PageShell>
  )
}