'use client'

import * as React from 'react'
import { ArrowRight, FlaskConical, Microscope, GitBranch, TrendingUp, Package, FileCheck, Truck } 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'

const SERVICES = [
  { icon: FlaskConical, t: 'Formulation development', d: 'Pre-formulation characterization, QbD-based formulation design, prototype development, and Phase I–III clinical-trial supply manufacturing. Platforms include oral solids, modified release, sterile injectables, lyophilized products and biologics.' },
  { icon: Microscope, t: 'Analytical testing', d: 'Method development, validation and transfer per ICH Q2(R2). Release testing, stability (ICH Q1A), impurity profiling (Q3A/B/C/D), bioanalytical (LC-MS/MS, ligand binding), and characterization of biologics (peptide mapping, glycan, charge variants, aggregation).' },
  { icon: GitBranch, t: 'Technology transfer', d: 'Transfer of processes from client sites, R&D or between Espandiar sites. Documented transfer protocols (URS, gap analysis, transfer plan, execution, report), risk-based approach per ICH Q9, comparability studies per ICH Q5E for biologics.' },
  { icon: TrendingUp, t: 'Scale-up', d: 'Scale-up from lab to pilot to commercial — applying engineering principles (mixing, heat transfer, mass transfer, geometric similarity) and statistical scale-down models. Process Performance Qualification (PPQ) under FDA Process Validation Guidance.' },
  { icon: Package, t: 'Commercial manufacturing', d: 'GMP commercial production across oral solids, sterile injectables, biologics and lyophilized products. Capacity for both large-volume commercial supply and smaller-volume specialty medicines. Serialisation and aggregation per regional requirements.' },
  { icon: Package, t: 'Packaging', d: 'Primary, secondary and tertiary packaging — blister, bottle, pouch, carton, leaflet. Serialization, aggregation and tamper-evidence per EU FMD, US DSCSA and other regional track-and-trace frameworks. Cold-chain packaging for biologics.' },
  { icon: FileCheck, t: 'Regulatory support', d: 'CTD Module 3 authoring, IND/CTA and NDA/BLA/MAA support, responses to deficiencies, post-approval change management (ICH Q12), and lifecycle management. Direct regulatory interactions in FDA, EMA and emerging markets.' },
  { icon: Truck, t: 'Supply chain', d: 'Global logistics under GDP, cold chain, vendor-managed inventory, demand planning, and business continuity. Multi-site supply agreements and dual sourcing for critical materials.' },
]

export function CdmoPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="CDMO services"
        title="Your molecule."
        highlight="Our capability."
        lead="Espandiar&apos;s Contract Development and Manufacturing Organization (CDMO) services provide end-to-end support — from pre-clinical formulation through commercial supply — across oral solids, sterile injectables, biologics and lyophilized products."
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="CDMO overview"
          title="One partner."
          highlight="The full lifecycle."
          lead="Bringing a pharmaceutical product to market requires many specialized capabilities — formulation, analytical, scale-up, GMP manufacturing, packaging, regulatory submission and supply. Espandiar CDMO brings them together under one quality system."
        />
        <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 development is long, expensive and complex.
                Sponsors — from biotech start-ups to established
                pharmaceutical companies — frequently choose to outsource
                some or all of their development and manufacturing
                activities to a CDMO in order to access specialized
                capability, manage fixed-cost exposure, or accelerate
                timelines.
              </p>
              <p>
                Espandiar CDMO offers integrated services across the
                product lifecycle. Our development teams work in close
                partnership with clients&apos; scientific and regulatory
                leads, with single points of accountability, transparent
                project governance, and quality agreements that define
                responsibilities at the outset.
              </p>
              <p>
                We operate under the same cGMP, ICH Q7, ICH Q10, EU GMP
                and FDA regulatory frameworks as our own branded
                manufacturing, with a documented technology transfer
                process, validated facilities, and audit-ready quality
                systems. Our CDMO clients benefit from the regulatory
                credibility that comes with that infrastructure.
              </p>
              <p>
                Below, we describe each of our service areas. For
                project-specific discussions — including capability
                fit, capacity availability, and budgeting — please
                contact our business development team through the
                Contact page.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>Why partner with Espandiar CDMO</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Integrated capability">Discovery support through commercial supply under one quality system.</DefRow>
                <DefRow term="Multiple modalities">Small molecules, biologics, oral solids, sterile, lyophilized.</DefRow>
                <DefRow term="Regulatory depth">FDA, EMA, WHO-PQ and emerging-market experience; CTD Module 3 authoring.</DefRow>
                <DefRow term="Project governance">Single point of contact, transparent milestones, shared project dashboard.</DefRow>
                <DefRow term="Quality agreements">Defined responsibilities, change control, deviation and CAPA communication.</DefRow>
                <DefRow term="IP protection">Documented IP safeguards, segregated projects, confidentiality agreements.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Services grid */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Service portfolio"
          title="Eight service areas."
          highlight="One partnership."
          lead="Our CDMO services cover the full development and commercialization lifecycle. Each is described in terms of capability, regulatory framework and deliverables."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {SERVICES.map((s, i) => {
            const Icon = s.icon
            return (
              <Reveal key={s.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]">{s.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-white/60">{s.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Process */}
      <Section tone="pearl">
        <SectionHeading
          index="04"
          eyebrow="Engagement model"
          title="How a CDMO project"
          highlight="unfolds."
          lead="Our engagement model emphasizes transparency, structured governance and clear deliverables. Below is the typical flow of a CDMO partnership — adapted to each project&apos;s scope."
        />
        <div className="mt-12 space-y-7">
          {[
            { n: '01', t: 'Discovery & scope', d: 'Initial scientific and commercial discussions — capability fit, capacity availability, high-level scope and budget range. Mutual NDA in place to support technical disclosure.' },
            { n: '02', t: 'Proposal & contract', d: 'Detailed proposal with work breakdown, timeline, deliverables, milestones and pricing. Quality agreement, IP terms and change-control procedures documented.' },
            { n: '03', t: 'Technology transfer', d: 'Transfer of process, methods and specifications. Gap analysis, transfer protocols, execution and report. Comparability assessment where required (ICH Q5E for biologics).' },
            { n: '04', t: 'Process validation', d: 'PPQ batches per FDA Process Validation Guidance (2011) and EU GMP Annex 15. Continued Process Verification (Stage 3) established for ongoing commercial supply.' },
            { n: '05', t: 'Commercial supply', d: 'Routine GMP manufacturing with rolling demand forecast, batch release, serialization, and GDP-compliant distribution. Periodic product quality reviews and continuous improvement.' },
            { n: '06', t: 'Lifecycle management', d: 'Post-approval changes managed through ICH Q12 framework — established conditions, post-approval change management protocols (PACMPs) and regulatory notifications/approvals.' },
          ].map((s) => (
            <Reveal key={s.n}>
              <NumberedStep n={s.n} title={s.t}>
                {s.d}
              </NumberedStep>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Quality & IP */}
      <Section tone="light">
        <div className="grid gap-8 lg:grid-cols-2">
          <Reveal>
            <Card>
              <Eyebrow>Quality agreements</Eyebrow>
              <h3 className="mt-4 text-2xl font-semibold tracking-[-0.03em]">Quality defined, in writing.</h3>
              <p className="mt-4 text-sm leading-6 text-muted-foreground">
                Every CDMO engagement is governed by a quality agreement that
                defines responsibilities for batch release, deviation
                management, change control, stability, CAPA, complaints and
                recalls. The quality agreement is a living document, reviewed
                at defined intervals and updated as scope evolves.
              </p>
              <p className="mt-3 text-sm leading-6 text-muted-foreground">
                Our quality systems operate under the same ICH Q10 PQS as
                our branded manufacturing — providing clients with the
                assurance that their products are made under the same
                rigorous standards, regardless of brand or origin.
              </p>
            </Card>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#dce8e2] dark:bg-[#1c2926]">
              <Eyebrow>Intellectual property</Eyebrow>
              <h3 className="mt-4 text-2xl font-semibold tracking-[-0.03em]">Your IP, fully protected.</h3>
              <p className="mt-4 text-sm leading-6 text-muted-foreground">
                Intellectual property is the most valuable asset of any
                pharmaceutical innovator. We operate under strict IP
                safeguards: documented confidentiality agreements, project
                segregation in labs and manufacturing, restricted data
                access, and clear contractual ownership of client-derived
                IP.
              </p>
              <p className="mt-3 text-sm leading-6 text-muted-foreground">
                We will not engage in activities that conflict with a
                client&apos;s IP position. Background IP remains with the
                client; foreground IP is governed by the contract —
                typically client-owned for project-specific inventions,
                Espandiar-owned for pre-existing platform technology.
              </p>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* CTA */}
      <Section tone="emerald">
        <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
          <Reveal>
            <Eyebrow tone="sage">Start a conversation</Eyebrow>
            <h2 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-5xl">
              Have a project in mind?
            </h2>
            <p className="mt-5 max-w-xl text-sm leading-6 text-white/75">
              Our business development team responds to most inquiries within
              two business days. We welcome early-stage discussions — even
              before a formal RFP — to help assess capability fit and
              capacity availability.
            </p>
          </Reveal>
          <Reveal delay={0.1} className="flex flex-wrap gap-3 lg:justify-end">
            <LinkButton variant="light" onClick={() => navigate('contact')}>
              Contact CDMO
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="outline" className="text-white" onClick={() => navigate('manufacturing')}>
              Manufacturing capabilities
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </Reveal>
        </div>
      </Section>
    </PageShell>
  )
}