'use client'

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

export function InvestorsPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Investors"
        title="Built for the"
        highlight="long term."
        lead="Espandiar is a research-led pharmaceutical company built for durable growth. Our investor proposition is grounded in scientific discipline, manufacturing capability, regulatory credibility and a long-term perspective."
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Investor proposition"
          title="A platform for"
          highlight="durable growth."
          lead="Pharmaceutical investment is inherently long-cycle. Capital deployed today produces returns over decades. We structure our investment, R&D and manufacturing decisions around that horizon."
        />
        <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 is one of the most research-intensive
                sectors of the global economy, with R&D investment frequently
                exceeding 15% of revenue for research-led companies. Capital
                intensity is high; timelines are long; regulatory risk is
                significant. Investors in pharmaceutical companies must
                evaluate them on a multi-year horizon, not a quarterly one.
              </p>
              <p>
                Espandiar&apos;s strategy is to invest in capabilities that
                compound over time — bioprocessing, analytical science,
                digital manufacturing and AI-assisted discovery — and to
                allocate capital across a diversified therapeutic and
                modality portfolio that balances risk.
              </p>
              <p>
                We operate with financial discipline: rigorous project
                governance, transparent reporting, conservative balance
                sheet management, and a commitment to sustainable dividend
                policy. We do not pursue growth for its own sake; we pursue
                growth where it is supported by science and capability.
              </p>
              <p>
                Below, we summarize our governance framework, business
                strategy, innovation investments, long-term vision, ESG
                approach and risk management. Detailed financial
                information is provided in our annual report and quarterly
                disclosures.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>Investment framework</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Horizon">Multi-year capital allocation across R&D, manufacturing and access.</DefRow>
                <DefRow term="Diversification">Balanced portfolio across modalities, therapeutic areas and stages.</DefRow>
                <DefRow term="Discipline">Stage-gated R&D funding with rigorous go/no-go decisions.</DefRow>
                <DefRow term="Capital structure">Conservative leverage, strong liquidity, sustainable dividend.</DefRow>
                <DefRow term="Transparency">GRI, SASB, TCFD-aligned reporting; CDP disclosure.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Governance */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Corporate governance"
          title="Governance that"
          highlight="earns trust."
          lead="Our governance structure separates oversight from management, ensures independent scrutiny, and aligns executive compensation with long-term performance."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[
            { icon: Users, t: 'Board of directors', d: 'A board with majority independent directors, including a separate Chair and CEO. Committees: Audit, Compensation, Nominating & Governance, Science & Technology, Sustainability.' },
            { icon: Scale, t: 'Audit committee', d: 'Independent oversight of financial reporting, internal audit, external audit, and compliance with accounting standards and regulatory requirements.' },
            { icon: TrendingUp, t: 'Compensation committee', d: 'Executive compensation linked to long-term performance — R&D progress, quality metrics, ESG performance and shareholder return.' },
            { icon: Shield, t: 'Compliance & ethics', d: 'Chief Compliance Officer reporting independently to the Audit Committee. 24/7 ethics hotline, anti-bribery program, transparency reporting.' },
            { icon: Compass, t: 'Science & technology', d: 'A board committee providing scientific oversight — pipeline review, technology investment, and R&D risk management.' },
            { icon: Leaf, t: 'Sustainability', d: 'A board committee overseeing ESG strategy, climate risk, and stakeholder engagement — including access, ethics and environmental performance.' },
          ].map((g, i) => {
            const Icon = g.icon
            return (
              <Reveal key={g.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]">{g.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-white/60">{g.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Business strategy */}
      <Section tone="pearl">
        <SectionHeading
          index="04"
          eyebrow="Business strategy"
          title="Three priorities."
          highlight="One strategy."
          lead="Our strategy is organized around three priorities — innovate, manufacture and partner — each with clear investment and performance objectives."
        />
        <div className="mt-12 space-y-7">
          {[
            { n: '01', t: 'Innovate', d: 'Build a pipeline of differentiated medicines in oncology, neurology, rare disease and cardiometabolic medicine, supported by AI-assisted discovery, biotechnology platforms and emerging modalities (mRNA, gene therapy, cell therapy).' },
            { n: '02', t: 'Manufacture', d: 'Operate a global, GMP-compliant manufacturing network across oral solids, sterile injectables, biologics and lyophilized products — with continuous investment in digital manufacturing, PAT and supply chain resilience.' },
            { n: '03', t: 'Partner', d: 'Provide CDMO services to pharmaceutical and biotechnology clients; pursue targeted business development (in-licensing, acquisitions, co-development); and engage openly with academic, patient and regulatory communities.' },
          ].map((s) => (
            <Reveal key={s.n}>
              <NumberedStep n={s.n} title={s.t}>
                {s.d}
              </NumberedStep>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Innovation investments */}
      <Section tone="light">
        <SectionHeading
          index="05"
          eyebrow="Innovation investments"
          title="Where we"
          highlight="allocate R&D."
          lead="R&D allocation balances near-term commercial potential with longer-term platform investment. We report pipeline progress and R&D investment transparently each quarter."
        />
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          <Reveal>
            <Card className="text-center">
              <StatBlock value="~15" suffix="%" label="R&D as % of revenue (industry-typical, research-led)" />
            </Card>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="text-center">
              <StatBlock value="29" label="Active clinical programs" />
            </Card>
          </Reveal>
          <Reveal delay={0.2}>
            <Card className="text-center">
              <StatBlock value="147" label="Active patents" />
            </Card>
          </Reveal>
          <Reveal delay={0.3}>
            <Card className="text-center">
              <StatBlock value="11" label="R&D centers globally" />
            </Card>
          </Reveal>
        </div>
        <Reveal className="mt-6">
          <p className="text-xs text-muted-foreground">
            Figures are illustrative of metrics reported by research-led
            pharmaceutical companies. Verified Espandiar-specific financial
            and pipeline data is published in our annual report and
            quarterly disclosures.
          </p>
        </Reveal>
      </Section>

      {/* Long-term vision */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="06"
          eyebrow="Long-term vision"
          title="Built for the"
          highlight="next decade."
          lead="Our long-term vision is to be a global leader in precision medicine — combining therapeutic, diagnostic and digital capabilities to deliver more individualized care."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { t: 'Therapeutic leadership', d: 'Sustained investment in oncology, neurology, rare disease and cardiometabolic medicine — building leadership in selected therapeutic areas.' },
            { t: 'Modality breadth', d: 'Small molecules, biologics, mRNA, cell therapy, gene editing — addressing disease through whichever modality is scientifically most appropriate.' },
            { t: 'Diagnostic integration', d: 'Companion diagnostics, liquid biopsy and molecular profiling — enabling the right treatment for the right patient at the right time.' },
            { t: 'Digital therapeutics', d: 'Software-based interventions, digital biomarkers and connected drug–device combinations — extending the therapeutic toolbox.' },
          ].map((v, i) => (
            <Reveal key={v.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]">{v.t}</h3>
                <p className="mt-3 text-sm leading-6 text-white/60">{v.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* ESG overview */}
      <Section tone="light">
        <SectionHeading
          index="07"
          eyebrow="ESG overview"
          title="Sustainable value"
          highlight="for all stakeholders."
          lead="Environmental, social and governance performance is integrated into our strategy and our investor reporting. We publish an annual sustainability report aligned with GRI, SASB and TCFD."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-3">
          {[
            { t: 'Environmental', d: 'Science-aligned emission reduction targets (SBTi), renewable electricity commitment (RE100), zero-liquid-discharge at our largest API facility, and continuous investment in green chemistry.' },
            { t: 'Social', d: 'Access programs including tiered pricing for low- and middle-income markets, patient assistance programs, voluntary licensing for essential medicines, and STEM education partnerships.' },
            { t: 'Governance', d: 'Board-level sustainability oversight, ethics and compliance framework, transparent political engagement, and aligned executive compensation.' },
          ].map((e, i) => (
            <Reveal key={e.t} delay={i * 0.1}>
              <Card className="h-full">
                <h3 className="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-6">
          <LinkButton variant="ghost" className="border border-border" onClick={() => navigate('sustainability')}>
            Read full sustainability report
            <ArrowRight className="h-4 w-4" />
          </LinkButton>
        </Reveal>
      </Section>

      {/* Risk management */}
      <Section tone="pearl">
        <SectionHeading
          index="08"
          eyebrow="Risk management"
          title="Risks identified,"
          highlight="managed, disclosed."
          lead="Pharmaceutical companies face a distinctive risk profile — clinical, regulatory, manufacturing, legal, commercial and reputational. We identify, prioritize and manage these risks through a structured enterprise risk management framework."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2">
          {[
            { t: 'Clinical & regulatory risk', d: 'Failure of clinical programs; regulatory rejection or delay; post-approval safety findings. Managed through portfolio diversification, stage-gated funding, and rigorous pharmacovigilance.' },
            { t: 'Manufacturing & supply risk', d: 'Supply disruption; quality deviation; capacity constraints. Managed through multi-site manufacturing, dual sourcing, business continuity planning, and ICH Q10 PQS.' },
            { t: 'IP & legal risk', d: 'Patent challenges; product liability; anti-bribery; data privacy. Managed through IP strategy, litigation readiness, compliance program, and cybersecurity framework.' },
            { t: 'Commercial & market risk', d: 'Generic competition; pricing pressure; access limitations. Managed through lifecycle management, geographic diversification, and access programs.' },
            { t: 'Cyber & technology risk', d: 'Cyberattack; data breach; technology obsolescence. Managed through defense-in-depth, validated systems, and continuous monitoring.' },
            { t: 'Climate & ESG risk', d: 'Physical climate risk to sites and supply; transition risk from decarbonization. Managed through TCFD-aligned assessment, adaptation planning, and SBTi-aligned targets.' },
          ].map((r, i) => (
            <Reveal key={r.t} delay={(i % 2) * 0.1}>
              <Card className="h-full">
                <Pill tone="emerald">{`0${i + 1}`}</Pill>
                <h3 className="mt-5 text-lg font-semibold tracking-[-0.02em]">{r.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{r.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Leadership philosophy */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="09"
          eyebrow="Leadership philosophy"
          title="Leadership is"
          highlight="service."
          lead="Our leadership philosophy is grounded in stewardship — the conviction that we lead not for personal reward but on behalf of patients, employees, partners and shareholders."
        />
        <Reveal className="mt-10">
          <Card tone="dark" className="bg-white/[0.06]">
            <div className="space-y-5 text-[15px] leading-7 text-white/70">
              <p>
                We expect our leaders to set direction with clarity, to make
                evidence-based decisions, to communicate transparently, and
                to be accountable for both successes and failures. We expect
                them to develop the next generation of leaders — and to
                recognize that their own success is measured by the
                institution they leave behind, not the quarter they just
                reported.
              </p>
              <p>
                We hold ourselves to the standards expected of a global
                pharmaceutical company: scientific integrity, regulatory
                honesty, patient safety, environmental responsibility and
                ethical conduct. When we fall short — as we sometimes will
                — we acknowledge it, investigate the root cause, and improve
                our systems.
              </p>
            </div>
          </Card>
        </Reveal>
        <Reveal className="mt-10">
          <LabeledDivider label="Investor relations" tone="dark" />
          <div className="mt-6 flex flex-wrap gap-3">
            <LinkButton variant="light" onClick={() => navigate('contact')}>
              Contact investor relations
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="outline" className="text-white" onClick={() => navigate('news')}>
              Latest news
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </div>
        </Reveal>
      </Section>
    </PageShell>
  )
}