// ============================================================
// VACATURES · detail-page components
// ------------------------------------------------------------
// Pattern matches kennisbank blogs: a thin per-vacancy HTML file
// supplies a SLUG, and this shell renders everything from the
// matching VACANCIES entry in vacatures_data.jsx.
// ============================================================

function VacancyHero({ vac }) {
  return (
    <section
      className="vac-hero"
      style={{ '--vac-color': vac.color, '--vac-color-alt': vac.colorAlt }}
    >
      <div className="vac-glow" aria-hidden="true"></div>

      <div className="vac-hero-inner">
        <div className="eyebrow-big"><span className="bar"></span>Open positie</div>
        <h1>{vac.title}</h1>
        <p className="vac-blurb">{vac.blurb}</p>

        <dl className="vac-hero-meta">
          <div className="vhm-row">
            <dt>Locatie</dt>
            <dd>
              {vac.location}
              {vac.locationDetail && <span className="vhm-note"> · {vac.locationDetail}</span>}
            </dd>
          </div>
          <div className="vhm-row">
            <dt>Type</dt>
            <dd>{vac.type}</dd>
          </div>
          <div className="vhm-row">
            <dt>Niveau</dt>
            <dd>{vac.level}</dd>
          </div>
          <div className="vhm-row">
            <dt>Salaris</dt>
            <dd>
              {vac.salary}
              {vac.salaryNote && <span className="vhm-note"> · {vac.salaryNote}</span>}
            </dd>
          </div>
        </dl>
      </div>
    </section>
  );
}

function VacancyBody({ vac }) {
  const introParas = (vac.intro || '').split(/\n\n+/).filter(Boolean);
  return (
    <article className="vac-body">
      <div className="vac-body-inner">
        {introParas.length > 0 && (
          <div className="vac-intro">
            {introParas.map((p, i) => <p key={i} className={i === 0 ? 'lede' : ''}>{p}</p>)}
          </div>
        )}

        {vac.sections.map((s, idx) => (
          <section key={idx} className="vac-section">
            <h2>{s.heading}</h2>
            {s.paragraphs && s.paragraphs.map((p, i) => <p key={i}>{p}</p>)}
            {s.bullets && (
              <ul className="vac-bullets">
                {s.bullets.map((b, i) => <li key={i}>{b}</li>)}
              </ul>
            )}
          </section>
        ))}
      </div>
    </article>
  );
}

function VacancyApply({ vac }) {
  const email = (vac && vac.applyEmail) || 'arlette@repetive.ai';

  return (
    <section className="vac-apply" id="contact">
      <div className="vac-apply-inner">
        <div className="eyebrow-big"><span className="bar"></span>Wait Less, Apply More</div>
        <h2>Interesse? Laat van je horen.</h2>
        <p className="vac-apply-lede">
          Stuur je LinkedIn-profiel met een kort bericht. Geen lange motivatiebrief nodig,
          vertel ons gewoon waarom dit voor jou de juiste rol is.
        </p>

        <a
          href={`mailto:${email}`}
          className="vac-apply-mail"
          aria-label={`Mail ${email}`}
        >
          <span className="vac-apply-mail-addr">{email}</span>
        </a>

        <p className="vac-disclaimer">
          Acquisitie naar aanleiding van {vac ? 'deze vacature' : 'deze vacatures'} wordt niet op prijs gesteld.
        </p>
      </div>
    </section>
  );
}

function VacancyShell({ slug }) {
  const vac = (typeof window.vacGetBySlug === 'function') ? window.vacGetBySlug(slug) : null;
  React.useEffect(() => {
    if (vac && typeof window.vacInjectSeo === 'function') window.vacInjectSeo(vac);
  }, [vac && vac.slug]);

  if (!vac) {
    return (
      <>
        <HmTopribbon activeLabel="Vacatures" homePrefix="Homepage.html" />
        <div className="vac-shell">
          <a href="Jobs.html" className="vac-back"><span aria-hidden="true">←</span> Terug naar vacatures</a>
          <div className="vac-not-found">
            <h1>Deze vacature bestaat niet (meer)</h1>
            <p>Slug "{slug}" niet gevonden in VACANCIES. Bekijk alle open posities op <a href="Jobs.html">Jobs.html</a>.</p>
          </div>
        </div>
        <HmFooter />
      </>
    );
  }

  return (
    <>
      <HmTopribbon activeLabel="Vacatures" homePrefix="Homepage.html" />
      <div className="vac-shell">
        <a href="Jobs.html" className="vac-back">
          <span aria-hidden="true">←</span> Terug naar vacatures
        </a>
      </div>
      <VacancyHero vac={vac} />
      <VacancyBody vac={vac} />
      <VacancyApply vac={vac} />
      <HmFooter />
    </>
  );
}

Object.assign(window, { VacancyShell, VacancyHero, VacancyBody, VacancyApply });