'use client'

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

const TIMELINE = [
  { year: 'Foundation', title: 'Research-led origins', body: 'Espandiar was founded on a conviction that pharmaceutical progress depends on the intelligent integration of biology, data and manufacturing science.' },
  { year: 'Early pipeline', title: 'First clinical programs', body: 'Initial clinical candidates in oncology and immunology — built on small-molecule and biologic platforms — entered first-in-human studies.' },
  { year: 'Capability expansion', title: 'Manufacturing network', body: 'Acquisition and qualification of oral solid, sterile and lyophilized manufacturing capacity, supported by integrated analytical and stability laboratories.' },
  { year: 'Platform era', title: 'Biotechnology platform', body: 'Cell line development, bioreactor scale-up and downstream purification capabilities brought in-house, supporting mAb and recombinant protein programs.' },
  { year: 'Digital integration', title: 'AI-assisted discovery', body: 'Computational chemistry, machine learning for ADMET prediction and digital biomarker platforms integrated across the discovery and clinical pipeline.' },
  { year: 'Today', title: 'Connected precision health', body: 'A global network of 11 R&D centers and 8 manufacturing sites, with active programs in oncology, neurology, rare disease and cardiometabolic medicine.' },
  { year: 'Next', title: 'Emerging modalities', body: 'mRNA therapeutics, gene editing, cell therapy and AI-designed proteins — the next decade of biotechnology, already in our labs.' },
]

const INNOVATION_AREAS = [
  { icon: Cpu, t: 'AI-assisted drug discovery', d: 'Generative chemistry, structure-based design, ADMET prediction, and active learning loops that accelerate the discovery-to-candidate journey.' },
  { icon: Atom, t: 'Nanotechnology & drug delivery', d: 'Lipid nanoparticles, liposomes, polymeric systems and targeted carriers — engineering the journey from dose to site of action.' },
  { icon: Dna, t: 'Gene therapy & editing', d: 'AAV-based gene addition, CRISPR-Cas gene editing, base and prime editing — moving from symptom management to causal treatment of monogenic disease.' },
  { icon: Microscope, t: 'Cell therapy', d: 'CAR-T, TCR-T and iPSC-derived therapies — engineering living cells to recognize and eliminate disease.' },
  { icon: Brain, t: 'Digital biomarkers', d: 'Smartphone-based gait, voice and cognition assessments; wearable-derived physiological signals; decentralized trial infrastructure.' },
  { icon: Layers, t: 'Multi-specific biologics', d: 'Bispecific and multispecific antibodies, ADCs and protein fusions that engage multiple biological pathways simultaneously.' },
  { icon: Beaker, t: 'RNA therapeutics', d: 'mRNA, siRNA, antisense and circular RNA — a single platform supporting vaccines, oncology, rare disease and protein replacement.' },
  { icon: Zap, t: 'Continuous manufacturing', d: 'Continuous oral solid and API manufacturing, with real-time release (RTRT) — reducing cycle time and inventory while improving consistency.' },
]

export function InnovationPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Innovation"
        title="The future of medicine"
        highlight="is being written now."
        lead="Espandiar invests in the technologies, platforms and scientific disciplines that will define the next decade of pharmaceutical research — from AI-assisted discovery to gene editing, cell therapy and continuous manufacturing."
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Innovation strategy"
          title="We build platforms,"
          highlight="not just products."
          lead="Pharmaceutical innovation is too often measured in individual molecules. We measure it in capabilities — the platforms, technologies and scientific disciplines that produce many molecules over time."
        />
        <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 research is fundamentally uncertain. No
                company can predict which individual molecules will succeed
                in clinical development — most do not. What a company can
                control is the quality of the platforms it builds and the
                talent it assembles.
              </p>
              <p>
                Espandiar&apos;s innovation strategy is built on three
                commitments: invest in capabilities that compound over time
                (computational chemistry, bioprocessing, advanced
                analytics); build partnerships that expand our scientific
                reach (academic medical centers, biotech collaborators,
                patient communities); and accept that some programs will
                fail — and that the learning from those failures is itself
                an asset.
              </p>
              <p>
                Our innovation portfolio spans both near-term enhancements
                to existing platforms (continuous manufacturing, PAT,
                model-informed drug development) and longer-term bets on
                emerging modalities (mRNA, gene editing, cell therapy,
                AI-designed proteins).
              </p>
              <p>
                Below, we describe our innovation areas and a timeline of
                our capability evolution. The descriptions reflect
                established and emerging science in each field; they do
                not constitute claims about the efficacy of any specific
                product or program.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="relative overflow-hidden bg-[#101715] text-white">
              <MoleculeBackground className="opacity-50" />
              <div className="relative">
                <Eyebrow tone="sage">Innovation thesis</Eyebrow>
                <h3 className="mt-4 text-2xl font-semibold tracking-[-0.03em]">
                  Three convictions guide our research.
                </h3>
                <div className="mt-6 space-y-5 text-sm leading-6 text-white/70">
                  <p>
                    <b className="text-white">1. Biology is becoming computational.</b> The most
                    important therapeutic advances of the next decade will
                    come from integrating wet-lab science with computation.
                  </p>
                  <p>
                    <b className="text-white">2. Manufacturing is a strategic capability.</b> The
                    quality, cost and resilience of our supply chain is a
                    competitive advantage — not a back-office function.
                  </p>
                  <p>
                    <b className="text-white">3. Patients are partners.</b> Patient-reported
                    outcomes, decentralized trials and access programs are
                    central to clinical development — not afterthoughts.
                  </p>
                </div>
              </div>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Innovation areas */}
      <Section tone="dark">
        <div className="absolute right-0 top-0 hidden opacity-20 lg:block">
          <DNAHelix className="h-[500px] w-[140px]" />
        </div>
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Innovation areas"
          title="Where we are"
          highlight="investing."
          lead="Our innovation portfolio spans computational, biological and manufacturing sciences — each with the potential to reshape how medicines are discovered, developed and produced."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {INNOVATION_AREAS.map((a, i) => {
            const Icon = a.icon
            return (
              <Reveal key={a.t} delay={(i % 4) * 0.07}>
                <Card tone="dark" className="h-full">
                  <div className="grid h-12 w-12 place-items-center rounded-2xl bg-white/10 text-white">
                    <Icon className="h-5 w-5" />
                  </div>
                  <h3 className="mt-5 text-lg font-semibold tracking-[-0.02em]">{a.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-white/60">{a.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Timeline */}
      <Section tone="light">
        <SectionHeading
          index="04"
          eyebrow="Innovation timeline"
          title="Capability built"
          highlight="over time."
          lead="Innovation is cumulative. The capabilities we build today become the platform for tomorrow&apos;s medicines."
        />
        <div className="mt-12">
          <div className="relative">
            <div className="absolute left-[7px] top-0 h-full w-px bg-border sm:left-1/2" />
            <div className="space-y-8">
              {TIMELINE.map((item, i) => (
                <Reveal key={item.year}>
                  <div className={`relative pl-10 sm:w-1/2 sm:pl-0 ${i % 2 === 0 ? 'sm:ml-0 sm:pr-12 sm:text-right' : 'sm:ml-auto sm:pl-12'}`}>
                    <div className={`absolute left-0 top-2 h-4 w-4 rounded-full border-2 border-[#0d5d50] bg-background sm:left-auto ${i % 2 === 0 ? 'sm:right-[-8px]' : 'sm:left-[-8px]'}`} />
                    <div className="rounded-2xl border border-border bg-card p-6">
                      <Pill tone="emerald">{item.year}</Pill>
                      <h3 className="mt-3 text-xl font-semibold tracking-[-0.02em]">{item.title}</h3>
                      <p className="mt-3 text-sm leading-6 text-muted-foreground">{item.body}</p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </Section>

      {/* Open innovation */}
      <Section tone="pearl">
        <SectionHeading
          index="05"
          eyebrow="Open innovation"
          title="We collaborate with"
          highlight="the global scientific community."
          lead="Open innovation is central to our model. We actively partner with academic medical centers, biotech companies, patient advocacy groups and technology providers."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-3">
          {[
            { t: 'Academic collaborations', d: 'Sponsored research, joint post-doctoral programs and translational research partnerships with leading academic medical centers.' },
            { t: 'Biotech partnerships', d: 'Co-development, option and license agreements with biotech companies pursuing complementary science and technology.' },
            { t: 'Patient communities', d: 'Patient advisory boards, natural history studies and patient-reported outcome development with advocacy organizations.' },
            { t: 'Technology alliances', d: 'AI, automation, digital biomarker and analytics partnerships with technology leaders.' },
            { t: 'Public-private consortia', d: 'Membership in pre-competitive consortia addressing shared scientific and regulatory challenges.' },
            { t: 'CRO networks', d: 'Preferred clinical research organization (CRO) networks for global clinical trial execution.' },
          ].map((c, i) => (
            <Reveal key={c.t} delay={(i % 3) * 0.08}>
              <Card className="h-full">
                <Pill tone="emerald">0{i + 1}</Pill>
                <h3 className="mt-5 text-base font-semibold tracking-[-0.02em]">{c.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{c.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
        <Reveal className="mt-10">
          <LabeledDivider label="Connect with our innovation team" />
          <div className="mt-6 flex flex-wrap gap-3">
            <LinkButton variant="primary" onClick={() => navigate('contact')}>
              Scientific collaborations
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="ghost" className="border border-border" onClick={() => navigate('research')}>
              Research & development
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </div>
        </Reveal>
      </Section>
    </PageShell>
  )
}