'use client'

import * as React from 'react'
import { ArrowRight, Beaker, Microscope, Cpu, Pill as PillIcon, ShieldCheck, GraduationCap, Heart, Users, Brain, Sparkles } 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 ROLES = [
  { icon: Beaker, t: 'Scientists', d: 'Medicinal chemists, biologists, computational scientists and structural biologists driving target identification, hit-to-lead and lead optimization.' },
  { icon: Microscope, t: 'Researchers', d: 'Preclinical scientists, pharmacologists, ADME/PK experts and translational researchers bridging discovery and clinical development.' },
  { icon: Cpu, t: 'Engineers', d: 'Chemical, mechanical, automation, software and data engineers designing, building and operating our manufacturing and digital infrastructure.' },
  { icon: PillIcon, t: 'Pharmacists', d: 'Formulation scientists, clinical pharmacologists, medical affairs and regulatory professionals ensuring our products are developed, approved and used appropriately.' },
  { icon: ShieldCheck, t: 'Manufacturing specialists', d: 'Production, process engineering, validation, technology transfer and supply chain professionals operating our global manufacturing network.' },
  { icon: ShieldCheck, t: 'Quality specialists', d: 'QA, QC, analytical development, microbiology and data integrity professionals ensuring every product meets specification.' },
]

export function CareersPage() {
  const { navigate } = useRouter()
  return (
    <PageShell>
      <PageHero
        index="01"
        eyebrow="Careers"
        title="Build a career"
        highlight="that compounds."
        lead="Espandiar is built by scientists, engineers, pharmacists and quality professionals who care about their craft. We offer careers that develop over time, supported by mentorship, training and meaningful work."
      />

      {/* Overview */}
      <Section tone="light">
        <SectionHeading
          index="02"
          eyebrow="Why Espandiar"
          title="A career with"
          highlight="purpose and craft."
          lead="Pharmaceutical careers are careers with consequence. The work we do — discovery, development, manufacturing, quality — directly affects the health of patients around the world."
        />
        <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>
                We are looking for people who care about the craft of
                pharmaceutical science — who take pride in a well-designed
                experiment, a robust formulation, a validated method, a
                reliable process. We want colleagues who ask questions, who
                challenge assumptions, and who collaborate across disciplines.
              </p>
              <p>
                Espandiar operates as a connected network rather than a
                hierarchy of silos. Discovery chemists work alongside
                formulation scientists, manufacturing engineers and clinical
                operations from the earliest stages of a program. This
                cross-functional model creates rich learning opportunities
                — and meaningful ownership.
              </p>
              <p>
                We invest deliberately in development: every scientist and
                engineer is paired with both a technical mentor and a career
                mentor; sponsored continuing education is available;
                conference attendance is supported; and we maintain
                protected time for publication.
              </p>
              <p>
                Below, we describe the roles we hire for, our benefits
                framework, training and development, and corporate culture.
                For specific open positions and application instructions,
                please contact our talent acquisition team through the
                Contact page.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <Card className="bg-[#eef1ec] dark:bg-[#17231f]">
              <Eyebrow>What we offer</Eyebrow>
              <dl className="mt-6">
                <DefRow term="Mentorship">Technical and career mentorship for every scientist and engineer.</DefRow>
                <DefRow term="Learning">Sponsored continuing education, conference attendance and publication time.</DefRow>
                <DefRow term="Compensation">Competitive salary, performance bonus, equity participation (where eligible).</DefRow>
                <DefRow term="Wellbeing">Flexible work arrangements, mental health support, sabbatical eligibility.</DefRow>
                <DefRow term="Inclusion">Diverse, multidisciplinary teams in a culture of intellectual honesty.</DefRow>
                <DefRow term="Purpose">Work that directly improves human health, globally.</DefRow>
              </dl>
            </Card>
          </Reveal>
        </div>
      </Section>

      {/* Roles */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="03"
          eyebrow="Roles we hire"
          title="Find your"
          highlight="discipline."
          lead="We hire across scientific, engineering, quality and operational disciplines. Each role contributes to the mission of bringing better medicines to patients."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {ROLES.map((r, i) => {
            const Icon = r.icon
            return (
              <Reveal key={r.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]">{r.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-white/60">{r.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Internships */}
      <Section tone="pearl">
        <SectionHeading
          index="04"
          eyebrow="Internships & early careers"
          title="Start your career"
          highlight="at Espandiar."
          lead="Our internship and early-career programs are designed to give students and recent graduates meaningful scientific and engineering experience — not busywork."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { icon: GraduationCap, t: 'PhD internships', d: '6–12 month industrial placements for doctoral candidates in chemistry, biology, pharmacology, biotechnology or pharmaceutical sciences.' },
            { icon: GraduationCap, t: 'Postdoc fellowships', d: '2-year postdoctoral fellowships in partnership with leading academic medical centers — with mentored publication and career development.' },
            { icon: GraduationCap, t: 'Master\'s placements', d: '3–6 month thesis placements for master\'s students in chemistry, formulation, analytical or biotechnology.' },
            { icon: GraduationCap, t: 'Undergraduate internships', d: 'Summer internships across R&D, manufacturing, quality and corporate functions — open to penultimate-year undergraduates.' },
          ].map((p, i) => {
            const Icon = p.icon
            return (
              <Reveal key={p.t} delay={(i % 4) * 0.08}>
                <Card className="h-full">
                  <div className="grid h-11 w-11 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>

      {/* Benefits */}
      <Section tone="light">
        <SectionHeading
          index="05"
          eyebrow="Benefits & wellbeing"
          title="Care for the"
          highlight="whole person."
          lead="Pharmaceutical work is demanding. Our benefits framework is designed to support health, family, learning and financial security across every life stage."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[
            { icon: Heart, t: 'Health', d: 'Comprehensive medical, dental and vision coverage; mental health support; on-site wellness facilities at major sites.' },
            { icon: Users, t: 'Family', d: 'Paid parental leave for all parents; childcare support; eldercare resources; adoption and fertility support.' },
            { icon: Brain, t: 'Learning', d: 'Tuition reimbursement; sponsored continuing education; access to internal and external courses; conference attendance.' },
            { icon: Sparkles, t: 'Time off', d: 'Generous vacation; paid sick leave; sabbatical eligibility for long-tenured staff; volunteer time off.' },
            { icon: Heart, t: 'Financial', d: 'Competitive salary; performance bonus; equity participation (where eligible); retirement savings plan with company match.' },
            { icon: Users, t: 'Inclusion', d: 'Employee resource groups; diversity, equity and inclusion training; accessibility accommodations; transparent promotion criteria.' },
          ].map((b, i) => {
            const Icon = b.icon
            return (
              <Reveal key={b.t} delay={(i % 3) * 0.08}>
                <Card className="h-full">
                  <div className="grid h-11 w-11 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]">{b.t}</h3>
                  <p className="mt-3 text-sm leading-6 text-muted-foreground">{b.d}</p>
                </Card>
              </Reveal>
            )
          })}
        </div>
      </Section>

      {/* Training */}
      <Section tone="dark">
        <SectionHeading
          tone="dark"
          index="06"
          eyebrow="Training & development"
          title="Learning never"
          highlight="stops."
          lead="Pharmaceutical science evolves continuously. Our training and development programs ensure our people stay at the leading edge of their disciplines."
        />
        <div className="mt-12 grid gap-8 lg:grid-cols-[1fr_1fr]">
          <Reveal>
            <div className="space-y-5 text-[15px] leading-7 text-white/70">
              <p>
                Every new hire completes a structured onboarding program
                covering our quality system, code of conduct, GMP
                fundamentals and the relevant scientific or operational
                context for their role. Onboarding is followed by
                role-specific training that combines classroom, e-learning
                and on-the-job mentoring.
              </p>
              <p>
                For GMP-critical roles, training and qualification are
                formally documented. Operators are qualified on specific
                equipment; analysts on specific methods; quality reviewers
                on specific workflows. Re-qualification is triggered by
                changes, intervals or performance issues.
              </p>
              <p>
                Beyond role-specific training, we invest in continuous
                professional development. Internal seminar series bring
                external speakers — academic scientists, regulators,
                clinicians — to share their work. Cross-functional
                rotations give scientists exposure to manufacturing,
                quality and regulatory practice.
              </p>
              <p>
                Leadership development is treated as a discipline in its
                own right. Our emerging-leaders and senior-leaders programs
                combine external coaching, internal mentoring, action
                learning projects and structured feedback.
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <div className="space-y-4">
              {[
                { t: 'Onboarding', d: 'Structured 4–8 week onboarding covering quality, ethics, GMP and role-specific context.' },
                { t: 'GMP qualification', d: 'Formal qualification on equipment, methods and workflows — documented and re-qualified on schedule.' },
                { t: 'Seminar series', d: 'Weekly internal science seminars with external speakers from academia, regulators and industry.' },
                { t: 'Cross-functional rotation', d: '6–12 month rotations giving scientists exposure to manufacturing, quality or regulatory practice.' },
                { t: 'Leadership development', d: 'Emerging-leaders and senior-leaders programs combining coaching, mentoring and action learning.' },
              ].map((t, i) => (
                <div key={t.t} className="rounded-2xl border border-white/15 bg-white/[0.06] p-5 backdrop-blur-sm">
                  <b className="text-sm font-semibold text-white">{`0${i + 1}`} — {t.t}</b>
                  <p className="mt-1.5 text-sm text-white/60">{t.d}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </Section>

      {/* Culture */}
      <Section tone="light">
        <SectionHeading
          index="07"
          eyebrow="Corporate culture"
          title="How we treat"
          highlight="each other."
          lead="Culture is what we do, not what we say. We hold ourselves to specific behavioral standards — and we expect our leaders to model them."
        />
        <div className="mt-12 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {[
            { t: 'Intellectual honesty', d: 'We say what we know, what we don\'t know, and what we believe — and we update our views when the evidence changes.' },
            { t: 'Constructive disagreement', d: 'We challenge each other\'s ideas openly. Disagreement is welcomed; disrespect is not.' },
            { t: 'Documentation', d: 'If it isn\'t documented, it didn\'t happen. We write things down — for our colleagues, our successors and our regulators.' },
            { t: 'Mentorship', d: 'Every scientist and engineer is paired with a technical mentor and a career mentor. Mentorship is a job expectation, not a favor.' },
            { t: 'Inclusion', d: 'Diverse teams produce better science. We hire, develop and promote with that conviction.' },
            { t: 'Patient focus', d: 'We make decisions with patients in mind — not only our shareholders, regulators or managers.' },
          ].map((c, i) => (
            <Reveal key={c.t} delay={(i % 3) * 0.08}>
              <Card className="h-full">
                <Pill tone="emerald">{`0${i + 1}`}</Pill>
                <h3 className="mt-5 text-lg font-semibold tracking-[-0.02em]">{c.t}</h3>
                <p className="mt-3 text-sm leading-6 text-muted-foreground">{c.d}</p>
              </Card>
            </Reveal>
          ))}
        </div>
        <Reveal className="mt-10">
          <LabeledDivider label="Apply" />
          <div className="mt-6 flex flex-wrap gap-3">
            <LinkButton variant="primary" onClick={() => navigate('contact')}>
              View open positions
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
            <LinkButton variant="ghost" className="border border-border" onClick={() => navigate('about')}>
              About Espandiar
              <ArrowRight className="h-4 w-4" />
            </LinkButton>
          </div>
        </Reveal>
      </Section>
    </PageShell>
  )
}