// Careers — open roles, with culture preamble.

const ROLES = [
  { id: '01', title: 'Software Development Engineer', kind: 'Full-time · India or remote', desc: 'You ship across stack — backend, frontend, the awkward middle. You\'ve seen production. You write before you build.' },
  { id: '02', title: 'Quality Assurance Engineer', kind: 'Full-time · India or remote', desc: 'You break things on purpose, and write down what broke. You think in test plans, edge cases, and quiet regressions. Manual rigor first; automation where it earns its keep.' },
  { id: '03', title: 'Product Manager', kind: 'Full-time · India-preferred', desc: 'You partner with the founder on AutoCraft, MarkSmith, and what comes next. You hold the brief, the spec, and the why. Comfortable shipping in six-week cycles.' },
];

function Careers() {
  const wrap = { padding: '96px clamp(20px,4vw,48px)', maxWidth: 1280, margin: '0 auto' };
  const eb = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', fontWeight: 500, marginBottom: 32 };
  const top = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 64 };
  const h = { fontFamily: 'var(--bc-font-display)', fontWeight: 300, fontSize: 'clamp(40px,5.5vw,80px)', lineHeight: 1.0, letterSpacing: '-0.03em', textWrap: 'balance' };
  const sub = { fontFamily: 'var(--bc-font-sans)', fontSize: 17, lineHeight: 1.55, color: 'var(--bc-fg-secondary)', maxWidth: 520 };

  // Operating principles strip
  const opGrid = { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 0, padding: '40px 0', borderTop: '1px solid var(--bc-border-default)', borderBottom: '1px solid var(--bc-border-default)', marginBottom: 80 };
  const opCell = (i) => ({ padding: '0 32px', borderRight: i < 2 ? '1px solid var(--bc-border-subtle)' : 'none' });
  const opNum = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-selvedge)', marginBottom: 12, fontWeight: 500 };
  const opT = { fontFamily: 'var(--bc-font-display)', fontSize: 22, fontWeight: 400, letterSpacing: '-0.015em', marginBottom: 8 };
  const opD = { fontFamily: 'var(--bc-font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--bc-fg-secondary)' };

  const ops = [
    ['I',  'Output, not hours',         'No fixed schedule. We hire people who don\'t need supervision, only direction.'],
    ['II', 'Fair pay, honest with reality', 'We pay fairly, aligned to the company\'s actual realities. No theatre.'],
    ['III', 'Culture is protected, not repaired', 'We remove toxic behaviour early. Care personally; work professionally.'],
  ];

  // Roles
  const rolesHead = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--bc-fg-secondary)', marginBottom: 24, fontWeight: 500 };
  const role = { display: 'grid', gridTemplateColumns: '60px 1fr 1fr 160px', gap: 32, padding: '32px 0', borderTop: '1px solid var(--bc-border-subtle)', alignItems: 'start' };
  const rNum = { fontFamily: 'var(--bc-font-mono)', fontSize: 12, color: 'var(--bc-fg-tertiary)', paddingTop: 6 };
  const rTitle = { fontFamily: 'var(--bc-font-display)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginBottom: 6, lineHeight: 1.1 };
  const rKind = { fontFamily: 'var(--bc-font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--bc-selvedge)', fontWeight: 500 };
  const rDesc = { fontFamily: 'var(--bc-font-sans)', fontSize: 15, lineHeight: 1.6, color: 'var(--bc-fg-secondary)', paddingTop: 4 };
  const apply = { fontFamily: 'var(--bc-font-mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', padding: '12px 16px', background: 'transparent', color: 'var(--bc-fg-primary)', border: '1px solid var(--bc-border-default)', cursor: 'pointer', whiteSpace: 'nowrap' };

  return (
    <section style={wrap} data-screen-label="08 Careers">
      <div style={eb}>§ 06 — Careers</div>
      <div style={top}>
        <h2 style={h}>We hire slowly,<br/>and well.</h2>
        <p style={sub}>
          Three open roles. We expect you to push back, document your work, and care about the seams.
          We pay fairly. We don't have unlimited PTO theatre — we have output.
        </p>
      </div>
      <div style={opGrid}>
        {ops.map(([n,t,d], i) => (
          <div key={n} style={opCell(i)}>
            <div style={opNum}>{n} · How we work</div>
            <h4 style={opT}>{t}</h4>
            <p style={opD}>{d}</p>
          </div>
        ))}
      </div>

      <div style={rolesHead}>§ 06.1 — Open roles · 3</div>
      <div style={{ borderBottom: '1px solid var(--bc-border-default)' }}>
        {ROLES.map(r => (
          <div key={r.id} style={role}>
            <div style={rNum}>— {r.id}</div>
            <div>
              <h4 style={rTitle}>{r.title}</h4>
              <span style={rKind}>{r.kind}</span>
            </div>
            <p style={rDesc}>{r.desc}</p>
            <div><button style={apply}
              onMouseOver={e => { e.currentTarget.style.background = 'var(--bc-ink)'; e.currentTarget.style.color = 'var(--bc-paper)'; e.currentTarget.style.borderColor = 'var(--bc-ink)'; }}
              onMouseOut={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--bc-fg-primary)'; e.currentTarget.style.borderColor = 'var(--bc-border-default)'; }}>
              Apply →
            </button></div>
          </div>
        ))}
      </div>

      <p style={{ marginTop: 32, fontFamily: 'var(--bc-font-sans)', fontSize: 14, color: 'var(--bc-fg-tertiary)' }}>
        Don't see a fit? Write to <a href="mailto:work@buildcraft.town" style={{ color: 'var(--bc-selvedge)', textDecoration: 'none', borderBottom: '1px solid currentColor' }}>work@buildcraft.town</a> with a portfolio and one paragraph about a thing you shipped.
      </p>
    </section>
  );
}

window.Careers = Careers;