// Mission.jsx — manifesto block + open roles list
function Mission() {
  const roles = [
    {
      team: 'Research',
      title: 'Machine Learning Research Scientist',
      loc: 'San Mateo',
      url: 'https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application',
    },
    {
      team: 'Engineering',
      title: 'Software Engineer',
      loc: 'San Mateo',
      url: 'https://jobs.ashbyhq.com/autoscience/00843b73-a6d2-4e8e-894c-d823c77e70e3/application',
    },
    {
      team: 'Engineering',
      title: 'Software Engineer, AI Observability',
      loc: 'San Mateo',
      url: 'https://jobs.ashbyhq.com/autoscience/00843b73-a6d2-4e8e-894c-d823c77e70e3/application',
    },
    {
      team: 'Engineering',
      title: 'Senior Software Engineer',
      loc: 'San Mateo',
      url: 'https://jobs.ashbyhq.com/autoscience/8608b950-0779-4a09-90fb-a5c8587cb69e/application',
    },
    {
      team: 'Research',
      title: 'Research Engineer, Post-Training',
      loc: 'San Mateo',
      url: 'https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application',
    },
    {
      team: 'Research',
      title: 'Research Engineer, Performance RL',
      loc: 'San Mateo',
      url: 'https://jobs.ashbyhq.com/autoscience/323b577d-3150-4696-be85-b25e488fc2f5/application',
    },
  ];
  return (
    <section className="section mission" data-screen-label="05 Open roles" style={{ paddingTop: 64 }}>
      <div>
        <div className="section-head" style={{ maxWidth: 720, marginBottom: 32 }}>
          <p className="eyebrow">Open roles —</p>
          <h2 className="section-title" style={{ fontSize: 40 }}>
            Create an ML model. <em>One last time.</em>
          </h2>
        </div>

        <div className="roles">
          {roles.map((r, i) => (
            <a key={r.title} className="role" href={r.url} target="_blank" rel="noreferrer">
              <div className="role__num">{String(i + 1).padStart(2, '0')}</div>
              <div className="role__title">{r.title}</div>
              <div className="role__team">{r.team}</div>
              <div className="role__loc">{r.loc}</div>
              <div className="role__arr">→</div>
            </a>
          ))}
        </div>

        <div className="careers-cta">
          <a className="btn btn--ghost" href="/careers">
            See all roles <span className="arr">→</span>
          </a>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'rgba(255,255,255,0.4)'
          }}>
            San Mateo · in person
          </span>
        </div>
      </div>
    </section>
  );
}
window.Mission = Mission;