function Jobs() {
  const { t } = window.useT();
  const [active, setActive] = React.useState(0);

  const JOB_SLUGS = ['hardware-engineer', 'social-media-werkstudent'];
  const JOBS = [1, 2].map((n) => ({
    title: t(`jobs.j${n}.title`),
    tag: t(`jobs.j${n}.tag`),
    type: t(`jobs.j${n}.type`),
    location: t(`jobs.j${n}.location`),
    desc: t(`jobs.j${n}.desc`),
    slug: JOB_SLUGS[n - 1],
  }));

  const go = (dir) => {
    setActive((a) => (a + dir + JOBS.length) % JOBS.length);
  };

  return (
    <section className="jobs" id="jobs">
      <div className="container">
        <div className="jobs-header">
          <div>
            <span className="eyebrow">{t('jobs.eyebrow')}</span>
            <h3 style={{marginTop: 24}}>{t('jobs.title.l1')} <em>{t('jobs.title.l2')}</em></h3>
          </div>
          <a className="btn btn-ghost" href="mailto:jobs@dentson.tech">{t('jobs.initiative')}</a>
        </div>

        <div className="jobs-layout">
          <div className="jobs-overview">
            <div className="jobs-overview-label">{JOBS.length} {t('jobs.openCount')}</div>
            <ul>
              {JOBS.map((j, i) => (
                <li
                  key={i}
                  className={i === active ? 'on' : ''}
                  onClick={() => setActive(i)}
                >
                  <span className="ov-n">0{i + 1}</span>
                  <span className="ov-title">{j.title}</span>
                  <span className="ov-arrow">→</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="jobs-swiper">
            <div
              className="jobs-track"
              style={{ transform: `translateX(calc(${-active * 100}% - ${active * 20}px))` }}
            >
              {JOBS.map((j, i) => (
                <article className={`job-card ${i === active ? 'on' : ''}`} key={i}>
                  <div className="job-card-top">
                    <span className="job-card-tag">{j.tag}</span>
                    <span className="job-card-idx">0{i + 1} / 0{JOBS.length}</span>
                  </div>
                  <h4>{j.title}</h4>
                  <p>{j.desc}</p>
                  <div className="job-card-meta">
                    <div><span>{t('jobs.metaType')}</span><b>{j.type}</b></div>
                    <div><span>{t('jobs.metaLocation')}</span><b>{j.location}</b></div>
                    <div><span>{t('jobs.metaGender')}</span><b>{t('jobs.metaGenderValue')}</b></div>
                  </div>
                  <a href={`/jobs/${j.slug}/`} className="btn btn-primary">
                    {t('jobs.moreInfo')}
                  </a>
                </article>
              ))}
            </div>
          </div>
        </div>

        <div className="jobs-nav">
          <button onClick={() => go(-1)} aria-label={t('jobs.prev')}>←</button>
          <div className="jobs-dots">
            {JOBS.map((_, i) => (
              <span key={i} className={i === active ? 'on' : ''} onClick={() => setActive(i)} />
            ))}
          </div>
          <button onClick={() => go(1)} aria-label={t('jobs.next')}>→</button>
        </div>
      </div>
    </section>
  );
}

window.Jobs = Jobs;