const { Link: Link_c } = ReactRouterDOM;

function Careers() {
  useSEO({
    title: 'Careers at Cyrion AI | Join the Team',
    description: 'Open roles at Cyrion AI — build autonomous offensive-security agents. Remote-first, equity, and a team of operators shipping at machine speed.',
    path: '/careers',
  });
  const jobs = window.JOBS;
  return (
    <div data-screen-label="careers">
      <section className="page-hero">
        <div className="page">
          <div className="breadcrumb" style={{ marginBottom: 20 }}><Link_c to="/">Home</Link_c><span>/</span><span className="ink">Careers</span></div>
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot" />Careers</div>
          <h1 className="h1" style={{ maxWidth: 820 }}>Work on offense, at machine speed.</h1>
          <p className="body-lg" style={{ maxWidth: 640, marginTop: 22 }}>We're a small, remote-first team building the agent swarm that finds what human-only red teams miss. If you'd rather ship exploits than write another slide deck, read on.</p>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <div style={{ maxWidth: 640, marginBottom: 44 }}><div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot" />Why Cyrion</div><h2 className="h2">What you get</h2></div>
          <div className="auto-fit-220">
            {[['Remote-first', 'Work from anywhere within ±4 hours of CET. We meet twice a week, async the rest.'], ['Real equity', 'Meaningful ownership for early team members, with standard 4-year vesting.'], ['Health & wellness', "Full health coverage, plus a wellness stipend, wherever you're based."], ['Learning budget', '$2,000/yr for courses, certifications (OSCP, OSWE) and conferences.'], ['Hardware', "Choose your machine. We'll set up your research lab too."], ['Unlimited PTO', 'Take it. We track outcomes, not hours in a chair.']].map(([t, b]) => (
              <div key={t} className="card" style={{ padding: 22 }}><div className="h3" style={{ marginBottom: 8, fontSize: 16 }}>{t}</div><p className="body">{b}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="page">
          <div style={{ maxWidth: 640, marginBottom: 20 }}><div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot" />Open roles — {jobs.length}</div><h2 className="h2">Where we're hiring</h2></div>
          <div className="col">
            {jobs.map((job, i) => (
              <Link_c key={job.slug} to={`/careers/${job.slug}`} className="job-row job-row-link" style={{ borderTop: i === 0 ? '1px solid var(--line)' : undefined, borderBottom: i === jobs.length - 1 ? '1px solid var(--line)' : undefined }}>
                <div>
                  <div className="h3" style={{ fontSize: 16 }}>{job.title}</div>
                  <div className="row" style={{ gap: 10, marginTop: 8, flexWrap: 'wrap' }}><span className="tag-chip">{job.team}</span><span className="tag-chip">{job.location}</span><span className="tag-chip">{job.type}</span></div>
                </div>
                <span className="btn btn-ghost">View role →</span>
              </Link_c>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)' }}>
        <div className="page">
          <div style={{ maxWidth: 640, marginBottom: 44 }}><div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot" />Process</div><h2 className="h2">How hiring works</h2></div>
          <div className="auto-fit-200" style={{ background: 'none', border: 'none' }}>
            {[['01', 'Intro call', '30 minutes with the hiring lead — about you, about the role.'], ['02', 'Technical round', 'A practical exercise close to real work — no whiteboard trivia.'], ['03', 'Team conversations', 'Meet 2–3 future teammates, async-friendly across time zones.'], ['04', 'Offer', 'Decisions in days, not weeks.']].map(([n, t, b]) => (
              <div key={n}><div className="tnum accent h3" style={{ fontSize: 20 }}>{n}</div><div className="h3" style={{ marginTop: 10, fontSize: 15 }}>{t}</div><p className="body" style={{ marginTop: 6 }}>{b}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)', background: 'var(--bg-deep)' }}>
        <div className="page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 20 }}>
          <div><div className="h3">Don't see your role?</div><p className="body" style={{ marginTop: 8 }}>We're always open to meeting strong offensive-security and infra people.</p></div>
          <Link_c className="btn btn-primary" to="/apply">Reach out →</Link_c>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Careers });