'use client'

import * as React from 'react'
import { ArrowRight, Leaf, Sun, Recycle, Droplet, Shield, TrendingDown, TreePine } from 'lucide-react'
import { useRouter } from '@/lib/router'
import { PageShell, PageHero, Section, SectionHeading, Reveal, Eyebrow, Card, DefRow, LabeledDivider, LinkButton, Pill, StatBlock, NumberedStep } from '@/components/site/ui'

const PILLARS = [
  { icon: Leaf, t: 'Green chemistry', d: 'Atom-economic synthesis routes, biocatalysis, solvent substitution, and process mass intensity (PMI) reduction — guided by the 12 Principles of Green Chemistry (Anastas and Warner).' },
  { icon: Sun, t: 'Renewable energy', d: 'On-site solar at three manufacturing sites, renewable power purchase agreements (PPAs) for remaining load, and energy efficiency retrofits across HVAC, compressed air and cleanroom systems.' },
  { icon: TrendingDown, t: 'Carbon reduction', d: 'Science-aligned targets for Scope 1, 2 and 3 emissions, validated externally. Annual carbon disclosure through CDP. Net-zero Scope 1 and 2 by 2035, with Scope 3 pathway under continuous development.' },
  { icon: Recycle, t: 'Waste management', d: 'Solvent recovery and recycling, catalyst recovery, plastic and packaging recycling, and waste-to-energy for non-recoverable streams. Zero waste to landfill at two of our sites.' },
  { icon: Droplet, t: 'Water recycling', d: 'Closed-loop cooling water, purified water recovery, rainwater harvesting, and zero-liquid-discharge (ZLD) at our largest API facility. Water risk assessments using WRI Aqueduct.' },
  { icon: Shield, t: 'Responsible sourcing', d: 'Supplier sustainability assessments, conflict-mineral due diligence, deforestation-free sourcing, and human-rights audits for high-risk geographies.' },
  { icon: TreePine, t: 'Biodiversity', d: 'Site biodiversity assessments, native-species landscaping, pollinator-friendly site design, and partnerships with local conservation organizations.' },
  { icon: Leaf, t: 'Green manufacturing', d: 'Continuous manufacturing (reducing solvent and energy use), single-use technology (reducing cleaning chemicals and water), and PAT-enabled real-time release (reducing waste).' },
]

export function SustainabilityPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Sustainability"
        title="Healthier people."
        highlight="Healthier planet."
        lead="Pharmaceutical manufacturing is resource-intensive. We take seriously our responsibility to reduce that footprint — through green chemistry, renewable energy, solvent recovery, water stewardship and science-aligned carbon targets."
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Our approach"
          title="Sustainability is"
          highlight="a quality issue."
          lead="The same disciplined, science-driven approach that ensures product quality applies to environmental responsibility. We measure, set targets, act and verify — and we report transparently."
        />
        <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>
                The pharmaceutical industry has a larger environmental
                footprint than is sometimes recognized. API synthesis is
                solvent-intensive; sterile manufacturing is
                energy-intensive; global cold-chain distribution carries
                its own emissions. The widely cited 2019 study by Belkhourib
                and colleagues estimated the pharmaceutical industry&apos;s
                emissions intensity at significantly higher than the
                automotive industry per unit of revenue.
              </p>
              <p>
                Espandiar accepts that responsibility. Our sustainability
                strategy is built on three foundations: green chemistry
                and process design (reducing impact at source); renewable
                energy and resource recovery (reducing operational impact);
                and transparent reporting (allowing external scrutiny).
              </p>
              <p>
                We publish an annual sustainability report aligned with the
                Global Reporting Initiative (GRI) Standards, the
                Sustainability Accounting Standards Board (SASB)
                pharmaceuticals framework, and the Task Force on
                Climate-related Financial Disclosures (TCFD). Our
                greenhouse gas inventory is verified externally and
                reported through CDP.
              </p>
              <p>
                Below, we describe each pillar of our sustainability
                program. The descriptions reflect established
                environmental science and recognized frameworks (GRI,
                SASB, TCFD, RE100, SBTi); the specific targets and
                performance data are summarized in our annual report.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>Frameworks & standards</Eyebrow>
              <dl className="mt-6">
                <DefRow term="GRI Standards">Global Reporting Initiative — sustainability reporting standards.</DefRow>
                <DefRow term="SASB">Sustainability Accounting Standards Board — pharmaceuticals sector framework.</DefRow>
                <DefRow term="TCFD">Task Force on Climate-related Financial Disclosures — climate risk reporting.</DefRow>
                <DefRow term="SBTi">Science Based Targets initiative — emissions targets aligned with climate science.</DefRow>
                <DefRow term="RE100">Renewable electricity commitment.</DefRow>
                <DefRow term="CDP">Annual carbon disclosure through CDP (formerly Carbon Disclosure Project).</DefRow>
                <DefRow term="UN SDGs">United Nations Sustainable Development Goals — corporate alignment.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Stats */}
      <Section tone="emerald">
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Performance highlights"
          title="Progress measured,"
          highlight="transparently reported."
          lead="Representative performance highlights from our most recent sustainability report. Complete data — including methodology, boundaries and assurance — is provided in the full report."
        />
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          <Reveal>
            <Card tone="dark" className="text-center">
              <StatBlock tone="dark" value="−42" suffix="%" label="Operational carbon emissions vs. 2019 baseline" />
            </Card>
          </Reveal>
          <Reveal delay={0.1}>
            <Card tone="dark" className="text-center">
              <StatBlock tone="dark" value="76" suffix="%" label="Renewable electricity globally" />
            </Card>
          </Reveal>
          <Reveal delay={0.2}>
            <Card tone="dark" className="text-center">
              <StatBlock tone="dark" value="−28" suffix="%" label="Water withdrawal vs. baseline" />
            </Card>
          </Reveal>
          <Reveal delay={0.3}>
            <Card tone="dark" className="text-center">
              <StatBlock tone="dark" value="92" suffix="%" label="Waste diverted from landfill" />
            </Card>
          </Reveal>
        </div>
        <Reveal className="mt-10">
          <p className="text-xs text-white/55">
            Figures are illustrative of typical pharmaceutical industry
            sustainability metrics and reporting frameworks. Specific
            verified performance data is published in our annual
            sustainability report.
          </p>
        </Reveal>
      </Section>

      {/* Pillars */}
      <Section tone="light">
        <SectionHeading
          index="04"
          eyebrow="Sustainability pillars"
          title="Eight pillars."
          highlight="One program."
          lead="Our sustainability program is organized around eight pillars — each with defined targets, KPIs and reporting."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {PILLARS.map((p, i) => {
            const Icon = p.icon
            return (
              <Reveal key={p.t} delay={(i % 4) * 0.07}>
                <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-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>
      </Section>

      {/* ESG */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="05"
          eyebrow="ESG principles"
          title="Environmental, social &"
          highlight="governance."
          lead="Sustainability is broader than climate. Our ESG framework integrates environmental stewardship, social responsibility and governance integrity."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-3">
          {[
            {
              t: 'Environmental',
              points: [
                'Climate — science-aligned emission reduction targets.',
                'Water — withdrawal reduction, recycling and ZLD.',
                'Waste — solvent recovery, recycling and diversion.',
                'Biodiversity — site assessments and native-species landscaping.',
              ],
            },
            {
              t: 'Social',
              points: [
                'Access — tiered pricing, voluntary licensing, patient assistance programs.',
                'Patient safety — pharmacovigilance, benefit-risk monitoring.',
                'Employee wellbeing — health, safety, diversity, inclusion.',
                'Communities — STEM education, public health partnerships.',
              ],
            },
            {
              t: 'Governance',
              points: [
                'Board oversight — sustainability committee at board level.',
                'Ethics — code of conduct, anti-bribery, transparency reporting.',
                'Risk management — climate risk in enterprise risk framework.',
                'Reporting — GRI, SASB, TCFD, CDP, SBTi-aligned.',
              ],
            },
          ].map((pillar, i) => (
            <Reveal key={pillar.t} delay={i * 0.1}>
              <Card tone="dark" className="h-full">
                <Pill tone="dark">{`0${i + 1}`}</Pill>
                <h3 className="mt-5 text-xl font-semibold tracking-[-0.02em]">{pillar.t}</h3>
                <ul className="mt-5 space-y-3">
                  {pillar.points.map((p) => (
                    <li key={p} className="flex gap-3 text-sm leading-6 text-white/65">
                      <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-[#83aa9f]" />
                      {p}
                    </li>
                  ))}
                </ul>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Roadmap */}
      <Section tone="pearl">
        <SectionHeading
          index="06"
          eyebrow="Roadmap to net zero"
          title="A science-aligned"
          highlight="pathway."
          lead="Our decarbonization roadmap follows the Science Based Targets initiative (SBTi) framework, with milestones across near-term (2030), mid-term (2035) and long-term (2050) horizons."
        />
        <div className="mt-12 space-y-7">
          {[
            { n: '01', t: 'Near-term (by 2030)', d: '50% reduction in Scope 1 and 2 emissions from 2019 baseline. 90% renewable electricity globally. Scope 3 engagement covering 80% of upstream emissions by spend.' },
            { n: '02', t: 'Mid-term (by 2035)', d: 'Net-zero Scope 1 and 2 emissions through further reduction and high-quality removals. 40% reduction in Scope 3 emissions. Zero waste to landfill across all sites.' },
            { n: '03', t: 'Long-term (by 2050)', d: 'Net-zero across Scopes 1, 2 and 3, in alignment with SBTi net-zero standard. Climate-resilient supply chain, with adaptation plans for high-risk sites and suppliers.' },
          ].map((s) => (
            <Reveal key={s.n}>
              <NumberedStep n={s.n} title={s.t}>
                {s.d}
              </NumberedStep>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* CTA */}
      <Section tone="light">
        <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
          <Reveal>
            <Eyebrow>Sustainability partnerships</Eyebrow>
            <h2 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-5xl">
              Sustainability is a shared effort.
            </h2>
            <p className="mt-5 max-w-xl text-sm leading-6 text-muted-foreground">
              We work with suppliers, customers, regulators, NGOs and
              communities to accelerate progress. If your organization is
              working on green chemistry, renewable energy, sustainable
              packaging, or access programs, we welcome dialogue.
            </p>
          </Reveal>
          <Reveal delay={0.1} className="flex flex-wrap gap-3 lg:justify-end">
            <LinkButton variant="primary" onClick={() => navigate('contact')}>
              Contact sustainability team
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="ghost" className="border border-border" onClick={() => navigate('investors')}>
              Investor ESG overview
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </Reveal>
        </div>
        <Reveal className="mt-10">
          <LabeledDivider label="Note" />
          <p className="mt-4 text-sm leading-6 text-muted-foreground">
            Performance figures cited on this page are illustrative of
            metrics reported by research-led pharmaceutical companies
            aligned with GRI, SASB, TCFD and SBTi frameworks. Verified
            Espandiar-specific data, with full methodology and assurance,
            is published in our annual sustainability report.
          </p>
        </Reveal>
      </Section>
    </PageShell>
  )
}