/* Qortex — Hero (three variants). Exports HeroEditorial, HeroScript, HeroManifesto, PALETTES */

const PALETTES = {
  sand:  { accent: '#D4C5A9', tint: '#EDE6D6', label: 'Varm sand' },
  green: { accent: '#3D5A50', tint: '#DCE3DF', label: 'Djup grön' },
  mono:  { accent: '#1B2A3A', tint: '#E8E7E2', label: 'Endast mörk' },
};

/* ─────────── Variant A — Editorial / oversize type ─────────── */
function HeroEditorial({ accent, tint }) {
  const h = window.QORTEX_CONTENT.hero;
  return (
    <section className="qx-hero qx-hero--editorial" id="top" style={{ '--accent': accent, '--tint': tint }}>
      <div className="qx-hero__meta qx-hero__meta--top">
        <span className="qx-eyebrow">
          <span className="qx-dot" />
          {h.eyebrow}
        </span>
        <span className="qx-eyebrow qx-eyebrow--muted">Del av Q-group</span>
      </div>

      <h1 className="qx-display">
        <span className="qx-display__line">{h.headlineLine1}</span>
        <span className="qx-display__line qx-display__line--accent">
          {h.headlineLine2}
        </span>
      </h1>

      <div className="qx-hero__foot">
        <p className="qx-lede">{h.lede}</p>
        <div className="qx-ctas">
          <a className="qx-btn qx-btn--primary qx-btn--lg" href="#kontakt">
            Boka ett möte
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
          <a className="qx-btn qx-btn--ghost qx-btn--lg" href="#tjanster">Se vad vi gör</a>
        </div>
      </div>

      <div className="qx-hero__sidemeta" aria-hidden="true">
        <div className="qx-sidemeta__row"><span>01</span><span>Tänk</span></div>
        <div className="qx-sidemeta__row"><span>02</span><span>Förstå</span></div>
        <div className="qx-sidemeta__row"><span>03</span><span>Förändra</span></div>
      </div>
    </section>
  );
}

/* ─────────── Variant B — Script (handwritten lead, mirrors the logo) ─────────── */
function HeroScript({ accent, tint }) {
  return (
    <section className="qx-hero qx-hero--script" id="top" style={{ '--accent': accent, '--tint': tint }}>
      <div className="qx-hero__meta qx-hero__meta--top">
        <span className="qx-eyebrow">
          <span className="qx-dot" />
          Göteborg · Boutique IT-konsulter
        </span>
        <span className="qx-eyebrow qx-eyebrow--muted">Del av Q-group</span>
      </div>

      <h1 className="qx-script-head">
        <span className="qx-script-head__sans">Fem personer.</span>
        <span className="qx-script-head__script" aria-hidden="true">Det är&nbsp;poängen.</span>
        <span className="qx-sr-only">Det är poängen.</span>
      </h1>

      <div className="qx-hero__foot qx-hero__foot--script">
        <p className="qx-lede">
          Seniora konsulter inom <span className="qx-underline">tech</span> och{' '}
          <span className="qx-underline">produkt&nbsp;/&nbsp;projekt</span> —
          för dig som vill prata direkt med den som faktiskt gör jobbet.
        </p>
        <div className="qx-ctas">
          <a className="qx-btn qx-btn--primary qx-btn--lg" href="#kontakt">
            Boka ett möte
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
          <a className="qx-btn qx-btn--ghost qx-btn--lg" href="#tjanster">Se vad vi gör</a>
        </div>
      </div>
    </section>
  );
}

/* ─────────── Variant C — Centered manifesto ─────────── */
function HeroManifesto({ accent, tint }) {
  return (
    <section className="qx-hero qx-hero--manifesto" id="top" style={{ '--accent': accent, '--tint': tint }}>
      <div className="qx-manifesto__top">
        <span className="qx-eyebrow"><span className="qx-dot"/>Tänk · Förstå · Förändra</span>
      </div>

      <h1 className="qx-manifesto__head">
        Fem personer.<br/>
        <span className="qx-manifesto__accent">Det är <em>poängen</em>.</span>
      </h1>

      <p className="qx-lede qx-lede--center">
        Seniora konsulter inom tech och produkt/projekt — för dig som vill prata
        direkt med den som faktiskt gör jobbet.
      </p>

      <div className="qx-ctas qx-ctas--center">
        <a className="qx-btn qx-btn--primary qx-btn--lg" href="#kontakt">
          Boka ett möte
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </a>
        <a className="qx-btn qx-btn--ghost qx-btn--lg" href="#tjanster">Se vad vi gör</a>
      </div>

      <ul className="qx-bullets">
        <li><span>Inga juniora som "tränas på kunden"</span></li>
        <li><span>Inga proxy-konsulter</span></li>
        <li><span>Du pratar direkt med den som gör jobbet</span></li>
      </ul>
    </section>
  );
}

Object.assign(window, { PALETTES, HeroEditorial, HeroScript, HeroManifesto });