'use client'

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

export function BiotechnologyPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Biotechnology"
        title="Where biology becomes"
        highlight="medicine."
        lead="Espandiar&apos;s biotechnology platform develops and manufactures monoclonal antibodies, recombinant proteins, and emerging modalities in cell and gene therapy. Our work is grounded in molecular biology, bioprocess engineering and analytical biochemistry."
        image="/images/biotech-leader.png"
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Overview"
          title="From gene to"
          highlight="biologic drug."
          lead="Biologics are medicinal products manufactured by or extracted from biological sources. They include recombinant proteins, monoclonal antibodies, vaccines, blood products, cell therapies and gene therapies — governed by ICH Q5A–Q6B, Q5E and FDA 21 CFR 600."
        />
        <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>
                Unlike small-molecule drugs, which are synthesized
                chemically and have well-defined molecular structures,
                biologics are large, complex molecules produced by living
                cells. This complexity means that the manufacturing process
                itself defines the product — a principle captured in the
                regulatory concept that &quot;the process is the product.&quot;
              </p>
              <p>
                Biologics development begins with cell line development —
                engineering a host cell (typically CHO for monoclonal
                antibodies, E. coli or yeast for simpler proteins) to
                express the target molecule. The cell line is then scaled
                through seed train, fermentation or cell culture, and the
                product is purified through a sequence of chromatography,
                viral inactivation and filtration steps.
              </p>
              <p>
                Analytical characterization of biologics is far more
                extensive than for small molecules. In addition to identity,
                potency and purity, biologics require analysis of
                post-translational modifications (glycosylation, deamidation,
                oxidation), aggregation, charge variants and
                immunogenicity-related attributes.
              </p>
              <p>
                The following sections describe each major modality in our
                biotechnology portfolio, the underlying science, our
                bioprocessing capabilities and the future directions of
                biotechnology research.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>Biologics regulatory framework</Eyebrow>
              <dl className="mt-6">
                <DefRow term="ICH Q5A">Viral safety of biotech products from cell lines of human or animal origin.</DefRow>
                <DefRow term="ICH Q5B">Genetic stability of expression constructs.</DefRow>
                <DefRow term="ICH Q5C">Stability testing of biotech products.</DefRow>
                <DefRow term="ICH Q5D">Cell substrate characterization.</DefRow>
                <DefRow term="ICH Q5E">Comparability of biotech products.</DefRow>
                <DefRow term="ICH Q6B">Specifications for biotech products.</DefRow>
                <DefRow term="FDA 21 CFR 600">Biological products regulations.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Modalities */}
      <Section tone="dark">
        <div className="absolute right-0 top-0 hidden opacity-25 lg:block">
          <DNAHelix className="h-[500px] w-[140px]" />
        </div>
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Therapeutic modalities"
          title="Four modalities."
          highlight="One platform."
          lead="Our biotechnology work spans established and emerging modalities — from monoclonal antibodies to cell and gene therapy."
        />
        <div className="mt-12 space-y-12">
          {[
            {
              icon: Beaker,
              t: 'Monoclonal antibodies (mAbs)',
              d: 'Monoclonal antibodies are laboratory-produced molecules engineered to serve as substitute antibodies that can restore, enhance or mimic the immune system&apos;s attack on cells. Since the first therapeutic mAb approval in 1986, the class has become one of the most commercially and clinically important in medicine, with applications in oncology, immunology, infectious disease and ophthalmology. Modern mAbs are typically humanized or fully human, produced in mammalian cell culture (predominantly CHO cells), and purified through Protein A chromatography followed by polishing steps. Characterization includes glycan profiling (HILIC), charge variants (icIEF, IEX), aggregation (SEC, MFI), and potency (cell-based bioassay).',
            },
            {
              icon: FlaskConical,
              t: 'Recombinant proteins',
              d: 'Recombinant proteins are produced by expressing a gene of interest in a host cell — bacterial (E. coli), yeast (P. pastoris, S. cerevisiae), insect or mammalian. Recombinant technology underlies insulin, erythropoietin, growth hormone, follicle-stimulating hormone, enzyme replacement therapies (e.g., for lysosomal storage disorders) and many other biologics. Host selection balances expression level, post-translational modification requirements and regulatory familiarity. Downstream purification typically includes cell lysis (for intracellular expression), capture chromatography, polishing steps and — for proteins from mammalian cell culture — viral clearance.',
            },
            {
              icon: Syringe,
              t: 'Cell therapy',
              d: 'Cell therapy involves the administration of living cells to treat disease. The best-established example is hematopoietic stem cell transplantation, practiced for decades. Newer modalities include CAR-T cell therapy — in which a patient&apos;s T cells are genetically engineered to express a chimeric antigen receptor targeting tumor cells — and mesenchymal stromal cell therapy. Manufacturing is inherently complex: cells must be isolated, modified, expanded and characterized within tight time constraints, often in a patient-specific autologous workflow. Quality release includes viability, identity, sterility, endotoxin and potency assays.',
            },
            {
              icon: Dna,
              t: 'Gene therapy overview',
              d: 'Gene therapy aims to treat disease by modifying the genetic content of cells. Current approaches include in vivo gene therapy (direct administration of a vector — typically adeno-associated virus, AAV — carrying a therapeutic gene) and ex vivo gene therapy (genetic modification of patient cells outside the body, followed by re-infusion). Gene editing with CRISPR-Cas has expanded the field to include not only gene addition but gene correction. Manufacturing of viral vectors for gene therapy is a specialized activity, with scale-up of suspension cell culture and chromatography-based purification.',
            },
          ].map((m, i) => {
            const Icon = m.icon
            return (
              <Reveal key={m.t}>
                <div className="grid gap-6 lg:grid-cols-[0.3fr_1.7fr]">
                  <div className="flex items-center gap-4 lg:flex-col lg:items-start">
                    <div className="grid h-14 w-14 place-items-center rounded-2xl bg-white/10 text-white">
                      <Icon className="h-6 w-6" />
                    </div>
                    <span className="text-3xl font-light text-white/30 lg:mt-3">{`0${i + 1}`}</span>
                  </div>
                  <div>
                    <h3 className="text-2xl font-semibold tracking-[-0.03em] sm:text-3xl">{m.t}</h3>
                    <p className="mt-4 text-[15px] leading-7 text-white/65">{m.d}</p>
                  </div>
                </div>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Bioprocessing */}
      <Section tone="light">
        <SectionHeading
          index="04"
          eyebrow="Bioprocessing"
          title="Engineering biology"
          highlight="at scale."
          lead="Bioprocessing is the engineering discipline that turns biological insights into manufactured medicines. It spans upstream (cell culture/fermentation), downstream (purification) and formulation/fill — each with its own control strategy and validation requirements."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[
            { icon: Microscope, t: 'Cell line development', d: 'Host cell selection, transfection, single-cell cloning, selection and cell banking (MSB, WCB). ICH Q5D cell substrate characterization includes identity, sterility, mycoplasma, viral testing and genetic stability.' },
            { icon: Atom, t: 'Upstream processing', d: 'Seed train expansion, bioreactor operation (fed-batch, perfusion), process control (pH, DO, temperature, feeding). Single-use and stainless-steel bioreactors from bench to commercial scale.' },
            { icon: Beaker, t: 'Downstream processing', d: 'Harvest clarification, capture chromatography (Protein A for mAbs), viral inactivation (low pH hold), polishing chromatography (IEX, HIC), viral filtration (parvovirus-retentive), ultrafiltration/diafiltration (UF/DF).' },
            { icon: Activity, t: 'Formulation & fill', d: 'Buffer exchange, concentration, excipient addition, sterile filtration and aseptic filling. Lyophilization for unstable molecules. Container closure options include vials, pre-filled syringes and cartridges.' },
            { icon: FlaskConical, t: 'Analytical release', d: 'Identity (peptide mapping), purity (SEC, CE-SDS), charge (icIEF), potency (cell-based bioassay), glycan profiling (HILIC), aggregation (MFI, HIAC), endotoxin, bioburden, mycoplasma.' },
            { icon: Microscope, t: 'Comparability', d: 'ICH Q5E comparability studies for process changes — analytical, biological and — where necessary — clinical comparability. Demonstrates that pre- and post-change products are comparable in quality, safety and efficacy.' },
          ].map((b, i) => {
            const Icon = b.icon
            return (
              <Reveal key={b.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]">{b.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">{b.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Fermentation & cell culture */}
      <Section tone="pearl">
        <SectionHeading
          index="05"
          eyebrow="Fermentation & cell culture"
          title="Two platforms,"
          highlight="one engineering mindset."
          lead="Microbial fermentation and mammalian cell culture are the two dominant production platforms for biologics. Each has distinct advantages, challenges and process control considerations."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1fr_1fr]">
          <Reveal>
            <Card>
              <Eyebrow>Microbial fermentation</Eyebrow>
              <h3 className="mt-4 text-2xl font-semibold tracking-[-0.03em]">E. coli, yeast and beyond</h3>
              <p className="mt-4 text-[15px] leading-7 text-muted-foreground">
                Microbial fermentation is fast, scalable and cost-effective
                for proteins that do not require complex post-translational
                modifications. E. coli is the workhorse for insulin, growth
                hormone and many antibody fragments. Yeast (P. pastoris,
                S. cerevisiae) supports limited glycosylation and is used
                for vaccines and some enzymes.
              </p>
              <p className="mt-3 text-[15px] leading-7 text-muted-foreground">
                Process considerations include induction strategy, oxygen
                transfer, by-product formation, inclusion body refolding
                (E. coli), and scale-down/scale-up using kLa and tip-speed
                matched bioreactors.
              </p>
            </Card>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#dce8e2] dark:bg-[#1c2926]">
              <Eyebrow>Mammalian cell culture</Eyebrow>
              <h3 className="mt-4 text-2xl font-semibold tracking-[-0.03em]">CHO and human cell lines</h3>
              <p className="mt-4 text-[15px] leading-7 text-muted-foreground">
                Mammalian cell culture is the platform of choice for
                monoclonal antibodies and complex proteins requiring
                human-compatible glycosylation. CHO cells dominate, with
                human (HEK293) and mouse (NS0, Sp2/0) lines used in
                specific contexts.
              </p>
              <p className="mt-3 text-[15px] leading-7 text-muted-foreground">
                Process considerations include chemically defined media,
                fed-batch and perfusion modes, glucose/lactate metabolism,
                osmolality control, and glycan engineering. Process
                intensification and perfusion are increasingly used to
                improve volumetric productivity.
              </p>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Future biotech */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="06"
          eyebrow="Future biotechnology"
          title="What biology will"
          highlight="become next."
          lead="The next decade of biotechnology will be defined by modalities that today are still emerging — mRNA therapeutics, gene editing, regenerative medicine and the integration of biology with computation."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { t: 'mRNA therapeutics', d: 'Beyond vaccines, mRNA is being developed for cancer immunotherapy, protein replacement and in vivo gene editing delivery.' },
            { t: 'Gene editing', d: 'CRISPR-Cas9, base editors and prime editors enabling precise genome modification for monogenic disease and beyond.' },
            { t: 'Regenerative medicine', d: 'iPSC-derived cell therapies, tissue engineering and organoid-based approaches for degenerative disease.' },
            { t: 'Multispecific biologics', d: 'Bispecific and multispecific antibodies, ADCs and protein fusions that engage multiple biological pathways simultaneously.' },
            { t: 'Conjugate therapies', d: 'Antibody–drug, antibody–oligonucleotide and antibody–radionuclide conjugates for targeted payload delivery.' },
            { t: 'AI-designed proteins', d: 'De novo protein design using machine learning opens entirely new therapeutic modalities not found in nature.' },
            { t: 'Microbiome therapies', d: 'Live biotherapeutic products and microbiome-derived metabolites for gastrointestinal and systemic indications.' },
            { t: 'Synthetic biology', d: 'Engineered cell circuits, smart therapies that respond to disease signals, and programmable biomanufacturing.' },
          ].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-base 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('research')}>
              Research & development
              <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('cdmo')}>
              CDMO biologics services
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </div>
        </Reveal>
      </Section>
    </PageShell>
  )
}
