'use client'

import * as React from 'react'
import { ArrowRight, FlaskConical, Atom, Beaker, Leaf, Shield } from 'lucide-react'
import { useRouter } from '@/lib/router'
import { PageShell, PageHero, Section, SectionHeading, Reveal, Eyebrow, Card, DefRow, LabeledDivider, LinkButton, Pill } from '@/components/site/ui'

const API_CATEGORIES = [
  { icon: FlaskConical, t: 'Active Pharmaceutical Ingredients (APIs)', d: 'The biologically active component of a drug product — synthesized by chemical synthesis, fermentation, semi-synthesis, extraction or biotechnology. APIs are characterized for identity, assay, impurities, particle size and polymorph, and supplied with a complete API dossier (CTD Module 3).', standards: 'ICH Q7, Q11, Q6A; USP; Ph. Eur.; JP' },
  { icon: Beaker, t: 'Excipients', d: 'Inactive ingredients that confer desired physical, stability or release properties to the drug product — including binders, fillers, disintegrants, lubricants, preservatives, colorants and coatings. Excipients are screened for safety and compatibility, and tested for functionality.', standards: 'USP–NF, Ph. Eur., FDA Inactive Ingredients Database, IPEC guidelines' },
  { icon: Atom, t: 'Intermediates', d: 'Chemical building blocks produced at various stages of API synthesis. Intermediates are characterized for identity and purity, with defined specifications and impurity profiles that support the overall control strategy for the API.', standards: 'ICH Q7, Q11; internal monographs' },
  { icon: Shield, t: 'Biopharmaceutical materials', d: 'Recombinant proteins, monoclonal antibodies, enzyme conjugates and other biologics-derived materials used as APIs or as reagents in downstream processing. Characterized by an extensive panel of physicochemical and biological assays.', standards: 'ICH Q5A–Q6B, Q5E; USP <1046>, <1047>' },
  { icon: Leaf, t: 'Herbal extracts', d: 'Standardized botanical extracts with documented marker-compound content and contaminant control. Used in both pharmaceutical and nutraceutical applications, with full traceability from cultivation to finished extract.', standards: 'Ph. Eur. herbal drug monographs; WHO guidelines on herbal quality; USP herbal monographs' },
  { icon: FlaskConical, t: 'High-purity chemicals', d: 'Reagent- and pharmaceutical-grade chemicals used in synthesis, analytical testing and process validation. Manufactured to defined specifications with full certificate of analysis, including trace-metal and residual-solvent data.', standards: 'ACS, USP, Ph. Eur., ISO 17025 analytical labs' },
]

export function ApiPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Pharmaceutical raw materials"
        title="The foundation of"
        highlight="every medicine."
        lead="Espandiar&apos;s pharmaceutical raw materials portfolio spans APIs, excipients, intermediates, biopharmaceutical materials, herbal extracts and high-purity chemicals — manufactured to international pharmacopeia standards and supplied with complete documentation."
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Overview"
          title="Materials that meet"
          highlight="pharmacopeia standards."
          lead="A pharmaceutical raw material is only as good as the documentation that accompanies it. Our materials are supplied with certificates of analysis (CoA), certificates of origin (where applicable), statements of compliance, and full impurity and stability data — assembled to support our customers&apos; regulatory filings."
        />
        <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>
                Active pharmaceutical ingredients (APIs) are the central
                therapeutic component of any drug product. The quality,
                purity and consistency of an API directly determine the
                safety and efficacy of the finished medicine. For this
                reason, API manufacture is among the most heavily regulated
                activities in the pharmaceutical industry.
              </p>
              <p>
                Espandiar manufactures APIs under ICH Q7 — the international
                Good Manufacturing Practice guideline for active
                pharmaceutical ingredients. We apply ICH Q11 to define the
                control strategy for each API, identifying critical quality
                attributes (CQAs) and critical process parameters (CPPs), and
                building quality into the process rather than relying on
                end-product testing alone.
              </p>
              <p>
                Our materials are tested against the relevant pharmacopeia
                — United States Pharmacopeia (USP–NF), European Pharmacopoeia
                (Ph. Eur.), Japanese Pharmacopoeia (JP), British
                Pharmacopoeia (BP) — and we provide monograph-specific
                certificates of analysis. Where a material is not yet
                compendial, we develop an internal monograph based on ICH
                Q2(R2)-validated methods.
              </p>
              <p>
                Below, we describe each material category, the manufacturing
                considerations, purity and quality control framework, storage
                requirements and the international pharmacopeia standards
                that apply. This page is informational; product-specific
                specifications are provided through our commercial
                documentation.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>Regulatory & quality framework</Eyebrow>
              <dl className="mt-6">
                <DefRow term="GMP for APIs">ICH Q7 — full GMP for active pharmaceutical ingredients.</DefRow>
                <DefRow term="Development & manufacture">ICH Q8, Q11 — quality by design, development and manufacture of drug substances.</DefRow>
                <DefRow term="Specifications">ICH Q6A (chemical) and Q6B (biological) — test procedures and acceptance criteria.</DefRow>
                <DefRow term="Impurities">ICH Q3A (API), Q3C (residual solvents), Q3D (elemental impurities), M7 (mutagenic).</DefRow>
                <DefRow term="Stability">ICH Q1A–Q1F — long-term, accelerated, in-use, photostability.</DefRow>
                <DefRow term="Pharmacopeia">USP–NF, Ph. Eur., JP, BP — compendial monographs and methods.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Material categories */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Material categories"
          title="Six families of"
          highlight="pharmaceutical materials."
          lead="Our portfolio covers the major categories of pharmaceutical raw materials — each with its own manufacturing considerations, quality framework and pharmacopeia standards."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {API_CATEGORIES.map((c, i) => {
            const Icon = c.icon
            return (
              <Reveal key={c.t} delay={(i % 3) * 0.08}>
                <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]">{c.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-white/60">{c.d}</p>
                  <div className="mt-5">
                    <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-[#83aa9f]">
                      Standards
                    </span>
                    <p className="mt-1.5 text-xs text-white/55">{c.standards}</p>
                  </div>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Manufacturing */}
      <Section tone="light">
        <SectionHeading
          index="04"
          eyebrow="Manufacturing"
          title="Built to scale,"
          highlight="engineered to repeat."
          lead="API manufacturing spans chemical synthesis, biotechnology and botanical extraction. Each route is designed, validated and continuously monitored to ensure consistent quality."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2">
          {[
            { t: 'Chemical synthesis', d: 'Multi-step organic synthesis in glass-lined and stainless-steel reactors, with reaction monitoring by in-process controls (IPC). Synthetic routes are designed using green-chemistry principles, with attention to atom economy, solvent selection and waste minimization.' },
            { t: 'Fermentation', d: 'Microbial fermentation for APIs and intermediates — including antibiotics, immunosuppressants and statins. Fermenters range from pilot to commercial scale, with downstream processing incorporating cell removal, extraction, chromatography and crystallization.' },
            { t: 'Biotechnology', d: 'Recombinant protein and monoclonal antibody production in mammalian cell culture (CHO) and microbial hosts. Upstream, downstream and formulation activities operate under ICH Q5A–Q6B.' },
            { t: 'Botanical extraction', d: 'Standardized extraction of plant material using solvent, supercritical CO₂ or aqueous methods. Marker compounds are quantified by HPLC; contaminants including pesticides, heavy metals and aflatoxins are controlled.' },
            { t: 'Crystallization & purification', d: 'Controlled crystallization to define polymorph, particle size and purity. Subsequent purification — by recrystallization, chromatography or membrane separation — achieves the target specification.' },
            { t: 'Drying & packaging', d: 'Vacuum, tray or fluid-bed drying to specified residual-solvent and moisture levels. Packaging in qualified materials under controlled humidity, with full traceability and tamper evidence.' },
          ].map((m, i) => (
            <Reveal key={m.t} delay={(i % 2) * 0.1}>
              <Card className="h-full">
                <Pill tone="emerald">{`0${i + 1}`}</Pill>
                <h3 className="mt-5 text-xl font-semibold tracking-[-0.02em]">{m.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{m.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Purity & QC */}
      <Section tone="pearl">
        <SectionHeading
          index="05"
          eyebrow="Purity & quality control"
          title="Specifications that"
          highlight="exceed the monograph."
          lead="Every material we supply is tested against a specification that includes identity, assay, impurities, physicochemical properties and — where relevant — microbiological quality. Our specifications meet or exceed the applicable pharmacopeia monograph."
        />
        <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>
                Identity testing confirms that the material is what we say it
                is. We use a combination of spectroscopic methods (FT-IR, UV,
                NMR, MS) and chromatographic retention time, with results
                compared against reference standards.
              </p>
              <p>
                Assay quantifies the potency of the API, typically by HPLC,
                UPLC, GC or titration. Acceptance ranges are typically 98.0%
                to 102.0% for APIs and 90.0% to 110.0% for formulated
                materials, although exact ranges are monograph-dependent.
              </p>
              <p>
                Impurity control is central to API quality. We characterize
                organic impurities (process-related and degradation products),
                inorganic impurities (residual metals, reagents), and residual
                solvents, applying ICH Q3A, Q3B, Q3C, Q3D and M7 thresholds
                for qualification, reporting and control.
              </p>
              <p>
                For biopharmaceutical materials, additional characterization
                includes aggregation (SEC), charge variants (icIEF, IEX),
                glycan profiling (HILIC), sub-visible particles (MFI, HIAC)
                and bioassay (cell-based potency). These tests follow ICH
                Q6B and the relevant USP general chapters.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card>
              <Eyebrow>Test categories</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Identity">FT-IR, UV, NMR, MS, HPLC retention.</DefRow>
                <DefRow term="Assay / potency">HPLC, UPLC, GC, titration, bioassay.</DefRow>
                <DefRow term="Organic impurities">Related substances by HPLC/UPLC/GC; specified and unspecified.</DefRow>
                <DefRow term="Residual solvents">GC headspace per ICH Q3C.</DefRow>
                <DefRow term="Elemental impurities">ICP-MS per ICH Q3D.</DefRow>
                <DefRow term="Particle & polymorph">XRPD, DSC, TGA, particle size (laser diffraction).</DefRow>
                <DefRow term="Microbiology">Bioburden, specified microorganisms, endotoxin (LAL).</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Storage & distribution */}
      <Section tone="light">
        <SectionHeading
          index="06"
          eyebrow="Storage & distribution"
          title="Quality does not stop"
          highlight="at the warehouse gate."
          lead="Many APIs and biopharmaceutical materials are temperature-sensitive or moisture-sensitive. Our storage and distribution systems are designed to maintain material quality from our facility to our customer&apos;s dock."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { t: 'Temperature control', d: 'Controlled-room-temperature (15–25°C), refrigerated (2–8°C) and frozen (−20°C, −80°C) storage. Continuous temperature monitoring with calibrated probes and alarm escalation.' },
            { t: 'GDP distribution', d: 'Good Distribution Practice per WHO and EU GDP guidelines. Qualified shipping containers, temperature loggers, and validated lanes for international transport.' },
            { t: 'Cold chain', d: 'Active and passive cold-chain solutions for biologics and temperature-sensitive APIs. Lane validation, excursion response protocols and continuous monitoring.' },
            { t: 'Traceability', d: 'Full batch traceability from raw material source to delivered API. Electronic batch records, serial number tracking and tamper-evident packaging.' },
          ].map((s, i) => (
            <Reveal key={s.t} delay={(i % 4) * 0.08}>
              <Card className="h-full">
                <Pill tone="emerald">0{i + 1}</Pill>
                <h3 className="mt-5 text-base font-semibold tracking-[-0.02em]">{s.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{s.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Applications */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="07"
          eyebrow="Applications"
          title="Where our materials"
          highlight="are used."
          lead="Espandiar raw materials are used across the pharmaceutical, biotechnology and nutraceutical industries — by innovator companies, generics manufacturers, CDMO clients and academic research institutions."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-3">
          {[
            { t: 'Pharmaceutical manufacturing', d: 'APIs and excipients for solid oral, sterile, modified-release and biologic drug products, supplied with full regulatory documentation.' },
            { t: 'Biotechnology', d: 'Recombinant proteins, monoclonal antibodies and cell-culture reagents for biopharmaceutical development and production.' },
            { t: 'Nutraceuticals', d: 'Pharmaceutical-grade vitamins, minerals, botanical extracts and specialty ingredients for nutritional formulations.' },
            { t: 'Research & academia', d: 'High-purity reference standards, intermediates and analytical reagents for pharmaceutical research and education.' },
            { t: 'Contract manufacturing', d: 'APIs and intermediates for CDMO clients, with flexible batch sizes from clinical-trial supply to commercial scale.' },
            { t: 'Veterinary medicine', d: 'Materials for veterinary pharmaceutical products, manufactured under equivalent quality systems.' },
          ].map((a, i) => (
            <Reveal key={a.t} delay={(i % 3) * 0.08}>
              <Card tone="dark" className="h-full">
                <h3 className="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>

      {/* Pharmacopeia standards */}
      <Section tone="light">
        <SectionHeading
          index="08"
          eyebrow="International pharmacopeia"
          title="Aligned with the standards"
          highlight="that regulators trust."
          lead="Our materials are tested against the major international pharmacopeia, and we provide the compendial documentation required for regulatory submissions."
        />
        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {[
            { t: 'United States Pharmacopeia (USP–NF)', d: 'Compendial monographs and general chapters for APIs, excipients and dietary supplements. USP <1046> (cell therapy), <1047> (gene therapy), <85> (bacterial endotoxins), <788> (particulate matter).' },
            { t: 'European Pharmacopoeia (Ph. Eur.)', d: 'Monographs published by the EDQM, used across EU member states. Includes herbal drug monographs, methods for biological assays and reference standards.' },
            { t: 'Japanese Pharmacopoeia (JP)', d: 'Japanese compendial standards recognized by PMDA and used widely across Asia-Pacific regulatory submissions.' },
            { t: 'British Pharmacopeia (BP)', d: 'UK compendial standards, used in Commonwealth markets and as a reference in many regulatory frameworks.' },
            { t: 'WHO guidelines', d: 'WHO Technical Report Series (TRS) for APIs, including WHO-PQ (prequalification) for materials destined for low- and middle-income markets.' },
            { t: 'ICH guidelines', d: 'Q-series guidelines on quality, safety and efficacy applied throughout material development and manufacture.' },
          ].map((p, i) => (
            <Reveal key={p.t} delay={(i % 3) * 0.08}>
              <Card className="h-full">
                <h3 className="text-base 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>
        <Reveal className="mt-10">
          <LabeledDivider label="Connect with our API team" />
          <div className="mt-6 flex flex-wrap gap-3">
            <LinkButton variant="primary" onClick={() => navigate('contact')}>
              Request API documentation
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="ghost" className="border border-border" onClick={() => navigate('manufacturing')}>
              Manufacturing capabilities
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </div>
        </Reveal>
      </Section>
    </PageShell>
  )
}