function Careers() {
  useReveal();
  const jobs = [
    { id: 'ENG-001', title: 'Senior Product Engineer', loc: 'Tokyo / Remote', type: 'Full-time' },
    { id: 'ENG-002', title: 'Staff Backend Engineer (Go / Rust)', loc: 'Tokyo / Remote', type: 'Full-time' },
    { id: 'DES-001', title: 'Senior Product Designer', loc: 'Tokyo', type: 'Full-time' },
    { id: 'SRE-001', title: 'Site Reliability Engineer', loc: 'Tokyo / Fukuoka / Remote', type: 'Full-time' },
    { id: 'PM-001', title: 'Engineering Manager', loc: 'Tokyo', type: 'Full-time' },
    { id: 'INT-001', title: '春期エンジニアインターン 2026', loc: 'Tokyo', type: 'Internship' },
  ];
  return (
    <section className="careers" id="careers">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">10</span>CAREERS — 採用情報</p>
        </div>
        <div className="careers-layout">
          <div className="careers-copy reveal">
            <h2 className="cc-big">同じ卓を<br/>囲む<span className="accent">仲間</span>を、<br/>募集しています。</h2>
            <p>47名のうち、エンジニア30名・デザイナー9名・PM 8名。全員が意思決定に関わり、プロダクトの最初から最後まで責任を持ちます。</p>
            <p>週休3日プロトタイプ、フルリモート可、学習予算 年40万円。詳しい条件は各ポジションからご確認ください。</p>
          </div>
          <div className="job-list reveal">
            {jobs.map(j => (
              <div className="job" key={j.id}>
                <div className="job-id">{j.id}</div>
                <div>
                  <div className="j-title">{j.title}</div>
                  <div className="j-meta">{j.loc} / {j.type}</div>
                </div>
                <div className="j-arrow">→</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Careers });