'use client'

import * as React from 'react'
import { ArrowRight, Leaf, Shield, Beaker, Compass, Heart, Scale } 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'

const VALUES = [
  { icon: Beaker, title: 'Scientific rigor', body: 'We design every program around measurable biological evidence and reproducible analytical data — never assumption.' },
  { icon: Shield, title: 'Patient safety first', body: 'Pharmacovigilance, benefit–risk assessment and transparent communication guide every decision we make.' },
  { icon: Scale, title: 'Ethical conduct', body: 'We comply with FCPA, UK Bribery Act and global anti-kickback statutes, and operate a 24/7 confidential ethics hotline.' },
  { icon: Heart, title: 'Humanity in practice', body: 'Access programs, tiered pricing for low- and middle-income markets and patient-support partnerships are core to our model.' },
  { icon: Leaf, title: 'Environmental responsibility', body: 'From solvent recovery to renewable-powered cleanrooms, sustainability is designed into our processes.' },
  { icon: Compass, title: 'Long-term perspective', body: 'We invest across decades, not quarters — building capability platforms that compound over time.' },
]

export function AboutPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="About Espandiar"
        title="A research-led pharmaceutical"
        highlight="company built for precision health."
        lead="Espandiar Pharmaceuticals is a global biopharmaceutical company dedicated to translating complex science into medicines, nutraceuticals and raw materials that improve human health — manufactured to internationally recognized quality standards."
        image="/images/biotech-leader.png"
      />

      {/* Corporate profile */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Corporate profile"
          title="Who we are."
          highlight="What we stand for."
          lead="Espandiar Pharmaceuticals operates across the full pharmaceutical value chain — from early discovery and API synthesis through formulation, commercial manufacturing and global distribution. Our work spans small molecules, biologics, advanced nutraceuticals and pharmaceutical raw materials, supported by integrated R&D and a global CDMO platform."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-muted-foreground">
              <p>
                Espandiar was founded on a simple conviction: that the next era
                of medicine will be defined less by incremental chemistry and
                more by the intelligent integration of biology, data and
                manufacturing science. Our research portfolio is built around
                that conviction — combining target identification, AI-assisted
                lead optimization, predictive formulation and adaptive clinical
                design.
              </p>
              <p>
                We operate eleven R&D centers and eight manufacturing sites,
                producing oral solids, sterile injectables, biologics and
                lyophilized products to current Good Manufacturing Practice
                (cGMP) as defined by WHO, FDA, EMA and ICH guidelines. Our
                quality systems are designed around ICH Q8 (pharmaceutical
                development), Q9 (quality risk management), Q10 (pharmaceutical
                quality system) and Q12 (lifecycle management).
              </p>
              <p>
                Beyond our own portfolio, we provide contract development and
                manufacturing (CDMO) services to pharmaceutical and
                biotechnology partners worldwide — from pre-clinical formulation
                through commercial supply. Our commitment to responsible
                manufacturing extends to environmental stewardship, with
                science-aligned targets for carbon reduction, water reuse and
                solvent recovery.
              </p>
              <p>
                This page provides a structured overview of our philosophy,
                vision, mission, values, ethics, compliance framework and
                future direction. It is intended for patients, healthcare
                professionals, partners, regulators, investors and prospective
                colleagues who want to understand how Espandiar operates.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>At a glance</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Founded">Research-led pharmaceutical company operating globally.</DefRow>
                <DefRow term="Therapeutic focus">Oncology, neurology, rare diseases, immunology, cardiometabolic and infectious disease.</DefRow>
                <DefRow term="Platforms">Small molecules, biologics, advanced nutraceuticals, APIs, CDMO.</DefRow>
                <DefRow term="Quality system">cGMP, GLP, GDP — aligned with WHO, FDA, EMA, ICH, USP, Ph. Eur.</DefRow>
                <DefRow term="Reach">52 countries, 11 R&D centers, 8 manufacturing sites.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Philosophy */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Company philosophy"
          title="Science should serve"
          highlight="the people it was built for."
          lead="Our philosophy is grounded in three commitments: to scientific integrity, to human dignity, and to the long view. We believe that durable medical progress is built slowly, transparently and in partnership with the communities we serve."
        />
        <div className="mt-14 grid gap-5 md:grid-cols-3">
          {[
            { t: 'Integrity over speed', d: 'We will not compromise data integrity, patient safety or regulatory honesty for the sake of a faster timeline. Reproducibility is non-negotiable.' },
            { t: 'Evidence over assertion', d: 'We distinguish clearly between established science, emerging evidence and hypothesis — and we communicate each accordingly to clinicians, regulators and the public.' },
            { t: 'Stewardship over ownership', d: 'The molecules we develop, the resources we consume and the communities we touch are held in trust. We measure ourselves against that responsibility.' },
          ].map((p, i) => (
            <Reveal key={p.t} delay={i * 0.1}>
              <Card tone="dark" className="h-full">
                <span className="text-xs font-bold text-[#83aa9f]">{`0${i + 1}`}</span>
                <h3 className="mt-6 text-2xl font-semibold tracking-[-0.02em]">{p.t}</h3>
                <p className="mt-4 text-sm leading-6 text-white/60">{p.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Vision, mission, values */}
      <Section tone="light">
        <div className="grid gap-12 lg:grid-cols-2">
          <Reveal>
            <Eyebrow>Vision</Eyebrow>
            <h3 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-4xl">
              A world where precision medicine is the standard — accessible,
              reliable and humane.
            </h3>
            <p className="mt-5 text-sm leading-6 text-muted-foreground">
              We envision a future in which diagnosis, treatment and monitoring
              are tightly integrated; in which biologics and advanced
              therapeutics are manufactured sustainably at scale; and in which
              the benefits of pharmaceutical innovation reach patients in every
              health system, not only the wealthiest ones.
            </p>
          </Reveal>
          <Reveal delay={0.1}>
            <Eyebrow>Mission</Eyebrow>
            <h3 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-4xl">
              Translate complex science into medicines that meaningfully improve
              health.
            </h3>
            <p className="mt-5 text-sm leading-6 text-muted-foreground">
              We pursue this mission through integrated R&D, responsible
              manufacturing, transparent partnerships and a relentless focus on
              the patient experience — from the design of clinical protocols to
              the accessibility of finished products.
            </p>
          </Reveal>
        </div>

        <LabeledDivider label="Core values" className="mt-16" />

        <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {VALUES.map((v, i) => {
            const Icon = v.icon
            return (
              <Reveal key={v.title} 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>
                  <h4 className="mt-6 text-lg font-semibold tracking-[-0.02em]">{v.title}</h4>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">{v.body}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Culture */}
      <Section tone="pearl">
        <SectionHeading
          index="04"
          eyebrow="Corporate culture"
          title="How we work."
          highlight="How we treat each other."
          lead="Our culture is built on intellectual honesty, structured collaboration and a deep respect for the craft of pharmaceutical science. We invest in our people because the quality of our science depends on them."
        />
        <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>
                Espandiar operates as a connected, cross-functional network
                rather than a hierarchy of silos. Discovery chemists work
                alongside formulation scientists, manufacturing engineers,
                clinical operations and regulatory specialists from the earliest
                stages of a program — because the decisions that determine a
                medicine&apos;s success are made long before it reaches the
                clinic.
              </p>
              <p>
                We expect our scientists and engineers to challenge assumptions
                openly, to document their reasoning, and to disagree
                constructively. Weekly translational reviews, monthly quality
                reviews and quarterly science days create structured
                opportunities for cross-disciplinary dialogue.
              </p>
              <p>
                We are equally intentional about inclusion. Diverse teams
                produce better hypotheses, more robust trial designs and more
                equitable access strategies. Our hiring, promotion and
                development practices are designed to support that conviction.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <div className="space-y-5">
              {[
                { t: 'Open science', d: 'Internal pre-prints, transparent data sharing and a culture of pre-registered analysis.' },
                { t: 'Mentorship by default', d: 'Every scientist and engineer is paired with both a technical mentor and a career mentor.' },
                { t: 'Continuous learning', d: 'Sponsored continuing education, conference attendance and protected time for publication.' },
                { t: 'Wellbeing', d: 'Flexible work arrangements, mental health support and sabbatical eligibility for long-tenured staff.' },
              ].map((item) => (
                <div key={item.t} className="rounded-2xl border border-border bg-card p-5">
                  <b className="text-sm font-semibold tracking-[-0.01em]">{item.t}</b>
                  <p className="mt-1.5 text-sm text-muted-foreground">{item.d}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Ethics & compliance */}
      <Section tone="light">
        <SectionHeading
          index="05"
          eyebrow="Ethics & compliance"
          title="Integrity is not a policy."
          highlight="It is the operating system."
          lead="We hold ourselves to the legal and ethical standards expected of a global pharmaceutical company — and to the higher standard our patients deserve."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1fr_1.1fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-muted-foreground">
              <p>
                Our compliance framework covers anti-bribery and corruption
                (FCPA, UK Bribery Act), transparency reporting (Sunshine Act
                and European EFPIA equivalents), data privacy (GDPR, HIPAA),
                competition law, pharmacovigilance obligations, export controls
                and ethical interactions with healthcare professionals.
              </p>
              <p>
                Every employee completes annual training on the Espandiar Code
                of Conduct, with role-specific modules for sales, medical
                affairs, clinical operations and procurement. A confidential,
                24/7 ethics hotline — operated by an independent third party —
                allows anyone to raise concerns without fear of retaliation.
              </p>
              <p>
                Our interactions with healthcare professionals are governed by
                clear guidelines: no inducements, transparent transfer-of-value
                reporting, and a strict separation between medical education
                and commercial promotion. We do not make unsupported efficacy
                claims, and we disclose both positive and negative clinical
                results in line with ICH E3 and the principles of
                alltrials.net.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card>
              <Eyebrow>Compliance framework</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Code of conduct">Annual training, certification and reinforcement across all markets.</DefRow>
                <DefRow term="Anti-bribery">FCPA, UK Bribery Act, local anti-corruption laws; due diligence on all third parties.</DefRow>
                <DefRow term="Transparency">Sunshine Act, EFPIA Disclosure Code, IFPMA Code of Practice.</DefRow>
                <DefRow term="Data privacy">GDPR, HIPAA, China PIPL — privacy-by-design in all clinical and digital systems.</DefRow>
                <DefRow term="Clinical transparency">Trial registration (ClinicalTrials.gov, EU CTR), results posting, ICH E3 reports.</DefRow>
                <DefRow term="Pharmacovigilance">24/7 safety reporting, ICH E2D post-marketing surveillance, signal management.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Quality commitment */}
      <Section tone="emerald">
        <SectionHeading
          tone="dark"
          index="06"
          eyebrow="Quality commitment"
          title="Quality is designed in,"
          highlight="not inspected in."
          lead="Our pharmaceutical quality system implements ICH Q10 across the product lifecycle, integrating quality risk management (ICH Q9), pharmaceutical development (ICH Q8) and lifecycle management (ICH Q12)."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { t: 'cGMP', d: 'Current Good Manufacturing Practice across all facilities, aligned with FDA 21 CFR 210/211 and EU GMP Annex 1.' },
            { t: 'GLP', d: 'Good Laboratory Practice for non-clinical safety studies, consistent with OECD principles and 21 CFR 58.' },
            { t: 'GDP', d: 'Good Distribution Practice for storage and transport, including controlled cold-chain management.' },
            { t: 'Data integrity', d: 'ALCOA+ principles enforced across paper and electronic records; validated computerized systems (21 CFR Part 11, Annex 11).' },
          ].map((q, i) => (
            <Reveal key={q.t} delay={i * 0.08}>
              <div className="rounded-2xl border border-white/15 bg-white/[0.06] p-6 backdrop-blur-sm">
                <b className="text-xl font-semibold tracking-[-0.02em]">{q.t}</b>
                <p className="mt-3 text-sm leading-6 text-white/65">{q.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal className="mt-10">
          <button
            onClick={() => navigate('quality')}
            className="inline-flex items-center gap-2 rounded-full bg-white px-6 py-4 text-sm font-bold text-[#0b3b34] transition hover:bg-[#dcebe6]"
          >
            Explore quality assurance
            <ArrowRight className="h-4 w-4" />
          </button>
        </Reveal>
      </Section>

      {/* Environmental responsibility */}
      <Section tone="light">
        <SectionHeading
          index="07"
          eyebrow="Environmental responsibility"
          title="Healthier people."
          highlight="Healthier planet."
          lead="Pharmaceutical manufacturing is resource-intensive. We take seriously our responsibility to reduce that footprint — through green chemistry, solvent recovery, renewable energy and water stewardship."
        />
        <div className="mt-12 grid gap-4 lg:grid-cols-3">
          {[
            { t: 'Green chemistry', d: 'Atom-economic synthesis routes, biocatalysis and solvent substitution guided by the 12 Principles of Green Chemistry.' },
            { t: 'Energy', d: '76% renewable electricity globally; on-site solar at three manufacturing sites; targeted efficiency retrofits across HVAC and cleanroom systems.' },
            { t: 'Water & waste', d: 'Closed-loop water recovery, solvent recycling and zero-liquid-discharge at our largest API facility.' },
          ].map((e, i) => (
            <Reveal key={e.t} delay={i * 0.1}>
              <Card className="h-full">
                <Pill tone="emerald">0{i + 1}</Pill>
                <h3 className="mt-5 text-xl font-semibold tracking-[-0.02em]">{e.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{e.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
        <Reveal className="mt-8">
          <LinkButton variant="ghost" className="border border-border" onClick={() => navigate('sustainability')}>
            Explore sustainability
            <ArrowRight className="h-4 w-4" />
          </LinkButton>
        </Reveal>
      </Section>

      {/* Roadmap */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="08"
          eyebrow="Future roadmap"
          title="Where we are going."
          highlight="What we will build next."
          lead="Our roadmap balances disciplined execution of today&apos;s portfolio with the deliberate construction of capability platforms for the next decade."
        />
        <div className="mt-14 space-y-7">
          {[
            { n: '01', t: 'Near-term (1–3 years)', d: 'Advance late-stage clinical programs in oncology and immunology; expand sterile injectable capacity; complete digital quality system rollout across all sites.' },
            { n: '02', t: 'Mid-term (3–5 years)', d: 'Launch first commercial biologics from our recombinant platform; expand CDMO capabilities in cell and gene therapy; reach 90% renewable electricity globally.' },
            { n: '03', t: 'Long-term (5–10 years)', d: 'Establish integrated precision-medicine platform combining therapeutics, diagnostics and digital monitoring; achieve net-zero Scope 1 and 2 emissions; broaden access programs across 70+ markets.' },
          ].map((r) => (
            <Reveal key={r.n}>
              <NumberedStep tone="dark" n={r.n} title={r.t}>
                {r.d}
              </NumberedStep>
            </Reveal>
          ))}
        </div>
      </Section>
    </PageShell>
  )
}