// ============================================================
// JOBS · overview page
// Renders all VACANCIES (from vacatures_data.jsx) as cards.
// Each card links to its detail page in /vacatures/<slug>.html.
// ============================================================

function JobsHero() {
  const count = (typeof VACANCIES !== 'undefined') ? VACANCIES.length : 0;
  return (
    <section className="jobs-hero">
      <div className="jobs-hero-inner">
        <h1>
          Bouw mee aan agents <br />
          die werk <span className="grad">nog leuker maken</span>.
        </h1>
        <div className="jobs-hero-meta">
          <div className="jobs-hero-meta-item">
            <div className="l">Locatie</div>
            <div className="v">Tilburg · hybride</div>
          </div>
          <div className="jobs-hero-meta-item">
            <div className="l">Open rollen</div>
            <div className="v">{count}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function JobCard({ job }) {
  return (
    <article className="job-card" style={{ '--job-color': job.color, '--job-color-alt': job.colorAlt }}>
      <div className="job-card-bar"></div>
      <div className="job-card-body">
        <div className="job-card-eyebrow">
          <span className="bar"></span>
          Open positie
        </div>
        <h2 className="job-card-title">{job.title}</h2>
        <p className="job-card-blurb">{job.blurb}</p>

        <dl className="job-card-meta">
          <div className="jcm-row">
            <dt>Locatie</dt>
            <dd>{job.location}</dd>
          </div>
          <div className="jcm-row">
            <dt>Type</dt>
            <dd>{job.type}</dd>
          </div>
          <div className="jcm-row">
            <dt>Niveau</dt>
            <dd>{job.level}</dd>
          </div>
          <div className="jcm-row">
            <dt>Salaris</dt>
            <dd>{job.salary}</dd>
          </div>
        </dl>

        <div className="job-card-cta-row">
          <a href={job.href} className="job-card-cta">
            Bekijk vacature
            <span className="arr">→</span>
          </a>
          <a href="#contact" className="job-card-cta-ghost">
            Vragen? Neem contact op
          </a>
        </div>
      </div>
    </article>
  );
}

function JobsGrid() {
  return (
    <section className="jobs-grid-section">
      <div className="jobs-grid-inner">
        <div className="jobs-grid-head">
          <div className="eyebrow-big"><span className="bar"></span>Open vacatures</div>
          <h2>Rollen waar je direct impact maakt.</h2>
        </div>
        <div className="jobs-grid">
          {VACANCIES.map(v => <JobCard key={v.slug} job={v} />)}
        </div>
      </div>
    </section>
  );
}

function JobsApp() {
  return (
    <React.Fragment>
      <HmTopribbon activeLabel="Vacatures" homePrefix="Homepage.html" />
      <JobsHero />
      <JobsGrid />
      <VacancyApply />
      <HmFooter />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<JobsApp />);