// Hero — wordmark monolith + technical metadata bar
function Hero({ t }) {
  // Wordmark variants
  const wordmark = (() => {
    if (t.logoTreatment === 'monolith') {
      return (
        <div className="wm wm-monolith">
          <div>HTX</div>
          <div>EDI</div>
          <div>FICE</div>
        </div>
      );
    }
    if (t.logoTreatment === 'lowercase-mono') {
      return <div className="wm wm-lower">htxedifice</div>;
    }
    return <div className="wm wm-tracked">HTXEDIFICE</div>;
  })();

  return (
    <section id="index" data-screen-label="01 Index" className="hero">
      <div className="hero-meta hero-meta-tl">
        <div>FILE / 001</div>
        <div>HTX_INDEX.EXE</div>
      </div>
      <div className="hero-meta hero-meta-tr">
        <div>HOUSTON, TX → ANYWHERE</div>
        <div>EST. 2006</div>
      </div>
      <div className="hero-meta hero-meta-bl">
        <div>SIGNAL · 96kHz / 24-bit</div>
        <div>STATUS · ONLINE</div>
      </div>
      <div className="hero-meta hero-meta-br">
        <div>RHYTHMIC OSCILLATIONS</div>
        <div>EP. 091 LIVE · KTRU 96.1</div>
      </div>

      <div className="hero-center">
        {wordmark}
      </div>

      <div className="hero-foot">
        <div className="hero-foot-l">
          <span className="cursor">▌</span> SCROLL TO TRANSMIT
        </div>
        <div className="hero-foot-r">
          <span>01 / 08</span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;