// careers.jsx — Careers page for Enginuity
// Mirrors the structure of the live engn.co.za/careers: hero, open positions,
// "why Enginuity" reasons, and an application form with CV upload.
// Uses the shared UI primitives (PageHero, Section, Eyebrow, Headline, Button,
// Field) and matches the calm, photographic corporate-engineering style.

const { useState: useState_c } = React;

const OPEN_ROLES = [
  {
    id: 'civil',
    discipline: 'Design · Civil & Structural',
    title: 'Civil / Structural Engineer — Intermediate',
    meta: ['Centurion', 'Office-based', 'Full-time'],
    blurb: 'Deliver structural and civil designs for mining and industrial projects, from analysis and detailing through to construction support. ECSA / SACPCMP registration advantageous.',
  },
  {
    id: 'mech',
    discipline: 'Design · Mechanical',
    title: 'Mechanical Engineer — Intermediate',
    meta: ['Centurion', 'Office-based', 'Full-time'],
    blurb: 'Design mechanical systems and equipment across mining and process plants, supporting projects from concept through to commissioning. Exposure to Ansys simulation a plus.',
  },
  {
    id: 'draught',
    discipline: 'Design · Drawing Office',
    title: 'Draughtsman',
    meta: ['Centurion', 'Office-based', 'Full-time'],
    blurb: 'Produce detailed 2D and 3D drawings across disciplines using AutoCAD, Inventor and Revit, working closely with our multi-disciplinary engineering teams.',
  },
];

const WHY_ENGINUITY = [
  {
    n: '01', title: 'Real projects, real impact',
    body: 'Contribute to EPCM and technology projects for leading mining houses including Anglo American, Black Chrome Mine and Sibanye-Stillwater.',
  },
  {
    n: '02', title: 'Multi-disciplinary by design',
    body: 'Work alongside civil, mechanical, electrical, process and mining specialists under one roof — the same project room, every discipline.',
  },
  {
    n: '03', title: 'Room to grow',
    body: 'Mentorship from senior engineers and a clear path toward professional registration with ECSA and SACPCMP.',
  },
  {
    n: '04', title: 'A team that sees you',
    body: 'An office-based team in Centurion where your work is visible, valued and built upon — not lost in a queue.',
  },
];

function RoleCard({ role, onApply }) {
  const [hover, setHover] = useState_c(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) auto', gap: 32,
        alignItems: 'center', padding: '34px 0', borderTop: '1px solid var(--hair)',
      }}
      className="enq-role-card"
    >
      <div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, alignItems: 'baseline', marginBottom: 12 }}>
          <span style={{
            fontFamily: '"Source Sans 3", sans-serif', fontSize: 12, fontWeight: 700,
            letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--accent)',
          }}>{role.discipline}</span>
          <span style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {role.meta.map((m) => (
              <span key={m} style={{ fontSize: 12.5, color: 'var(--mid)' }}>{m}</span>
            ))}
          </span>
        </div>
        <Headline size="sm" as="h3" style={{ maxWidth: '26ch' }}>{role.title}</Headline>
        <p style={{ margin: '12px 0 0', fontSize: 15, lineHeight: 1.6, color: 'var(--fg2)', maxWidth: '64ch' }}>
          {role.blurb}
        </p>
      </div>
      <div className="enq-role-apply" style={{ justifySelf: 'end' }}>
        <Button onClick={() => onApply(role.title)} variant={hover ? 'solid' : 'outline'} size="md">Apply now</Button>
      </div>
    </article>
  );
}

function CareersPage({ onNav }) {
  const applyTo = (title) => {
    const subject = title ? `Application — ${title}` : 'Application — Enginuity';
    const body = `Please attach your CV and a short cover letter.\n\nPosition: ${title || '(open application)'}\nName:\nPhone:\n`;
    window.location.href = `mailto:careers@engn.co.za?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  };

  return (
    <>
      <PageHero
        eyebrow="Careers at Enginuity"
        title="Engineer a better tomorrow."
        sub="We're a multi-disciplinary engineering and EPCM partner working on the projects that move industry forward. Explore our open roles in Centurion — or simply introduce yourself and send us your CV."
        tone="industrial"
        img="assets/careers-hero.jpeg"
        shift
      >
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 32 }}>
          <Button onClick={() => { const el = document.getElementById('careers-roles'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' }); }} variant="solid" size="lg">View open positions</Button>
          <Button onClick={() => applyTo('')} variant="light" size="lg">Send us your CV</Button>
        </div>
      </PageHero>

      {/* Open positions */}
      <Section id="careers-roles">
        <div style={{ maxWidth: '64ch' }}>
          <Eyebrow>Open positions</Eyebrow>
          <Headline size="lg" as="h2" style={{ marginTop: 20, maxWidth: '18ch' }}>Current opportunities.</Headline>
          <p style={{ margin: '20px 0 0', fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', maxWidth: '58ch' }}>
            All roles are full-time and office-based at our Centurion office. Not seeing your discipline?
            We still want to hear from you.
          </p>
        </div>

        <div style={{ marginTop: 40, borderBottom: '1px solid var(--hair)' }}>
          {OPEN_ROLES.map((role) => (
            <RoleCard key={role.id} role={role} onApply={applyTo} />
          ))}
        </div>
      </Section>

      {/* Why Enginuity */}
      <section style={{ background: 'var(--bg2)' }}>
        <Section>
          <div style={{ maxWidth: '64ch' }}>
            <Eyebrow>Why Enginuity</Eyebrow>
            <Headline size="lg" as="h2" style={{ marginTop: 20, maxWidth: '24ch' }}>
              Work that bridges real-world experience and cutting-edge innovation.
            </Headline>
          </div>
          <div style={{
            marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
            gap: 'clamp(28px, 3vw, 48px)',
          }} className="enq-why-grid">
            {WHY_ENGINUITY.map((r) => (
              <div key={r.n} style={{ display: 'flex', gap: 22, alignItems: 'flex-start' }}>
                <span style={{
                  fontFamily: 'var(--ff-display)', fontWeight: 'var(--display-w)',
                  letterSpacing: 'var(--display-track)', fontSize: 34, lineHeight: 1,
                  color: 'var(--accent)', flex: '0 0 auto',
                }}>{r.n}</span>
                <div>
                  <Headline size="sm" as="h3">{r.title}</Headline>
                  <p style={{ margin: '10px 0 0', fontSize: 15, lineHeight: 1.6, color: 'var(--fg2)', maxWidth: '40ch' }}>{r.body}</p>
                </div>
              </div>
            ))}
          </div>
        </Section>
      </section>

      {/* Apply */}
      <Section id="careers-apply">
        <div style={{ maxWidth: '60ch', margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow style={{ display: 'inline-flex' }}>Apply</Eyebrow>
          <Headline size="lg" as="h2" style={{ marginTop: 18 }}>Apply by email.</Headline>
          <p style={{ margin: '18px auto 0', fontSize: 17, lineHeight: 1.65, color: 'var(--fg2)', maxWidth: '52ch' }}>
            Applying for a listed role or making an open application — email your CV and a short
            cover letter to our team. We review every application and reach out if there's a fit.
          </p>
          <div style={{ marginTop: 30, display: 'flex', justifyContent: 'center' }}>
            <Button onClick={() => applyTo('')} variant="solid" size="lg">Email your application</Button>
          </div>
          <a href="mailto:careers@engn.co.za" style={{
            display: 'inline-block', marginTop: 22, fontSize: 18, fontWeight: 600,
            color: 'var(--fg)', textDecoration: 'none', borderBottom: '1px solid var(--accent)', paddingBottom: 2,
          }}>careers@engn.co.za</a>
          <p style={{ margin: '18px auto 0', fontSize: 13.5, lineHeight: 1.55, color: 'var(--mid)', maxWidth: '44ch' }}>
            PDF or Word, please. Include the role title in your subject line.
          </p>
        </div>
      </Section>

      <ContactCTA onNav={onNav} />
    </>
  );
}

Object.assign(window, { CareersPage });