// ---------- Careers ----------
function CareersPage() {
  const openings = [
    { t: 'Senior Product Engineer', team: 'Product', loc: 'Sydney / Remote AU', type: 'Full-time' },
    { t: 'Customer Success Lead', team: 'Customer', loc: 'Sydney', type: 'Full-time' },
    { t: 'Field Implementation Specialist', team: 'Onboarding', loc: 'Melbourne', type: 'Full-time' },
    { t: 'Staff Backend Engineer', team: 'Platform', loc: 'Remote AU', type: 'Full-time' },
    { t: 'Product Designer', team: 'Product', loc: 'Sydney / Remote AU', type: 'Full-time' },
  ];
  return (
    <SideRailLayout current="/careers">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Careers" title="Build the tool you wish existed." subtitle="We\'re a small team with a big footprint across Australian construction. Remote-first, pragmatic, curious." align="left" />
      </Block>
      <Block pad="0 56px 32px">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 32 }} className="career-stats">
          {[['18', 'Team'], ['Remote', 'First'], ['4.9★', 'Glassdoor'], ['25%', 'Ex-trades']].map(([n, l]) => (
            <div key={l} style={{ padding: 20, borderRadius: 10, background: 'var(--paper-2)', border: '1px solid var(--rule)' }}>
              <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 4, fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent-ink)' }}>{n}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
      </Block>
      <Block pad="0 56px 72px">
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>Open roles · {openings.length}</div>
        {openings.map((o, i) => (
          <a key={o.t} href="#/careers" style={{
            display: 'grid', gridTemplateColumns: '1fr 160px 160px 100px', gap: 16,
            padding: '20px 16px', borderTop: '1px solid var(--rule)',
            borderBottom: i === openings.length - 1 ? '1px solid var(--rule)' : 'none',
            alignItems: 'center', color: 'inherit',
            transition: 'padding-left .15s',
          }} className="job-row"
          onMouseEnter={e => { e.currentTarget.style.paddingLeft = '24px'; e.currentTarget.style.background = 'var(--paper-2)'; }}
          onMouseLeave={e => { e.currentTarget.style.paddingLeft = '16px'; e.currentTarget.style.background = 'transparent'; }}
          >
            <div style={{ fontSize: 16, fontWeight: 500 }}>{o.t}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)' }}>{o.team}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)' }}>{o.loc}</div>
            <div style={{ color: 'var(--accent)', fontSize: 14, textAlign: 'right' }}>Apply →</div>
          </a>
        ))}
      </Block>
      <style>{`@media(max-width:720px){.career-stats{grid-template-columns:1fr 1fr !important;}.job-row{grid-template-columns:1fr !important;gap:4px !important;}}`}</style>
    </SideRailLayout>
  );
}

window.CareersPage = CareersPage;