// Hero + showreel
function Hero({ lang, onPlayReel }) {
  const t = window.I18N[lang];
  const reelMediaRef = window.useParallax(0.08);

  return (
    <section id="top" className="hero">
      <div className="hero-bg"></div>
      <div className="hero-grain"></div>
      <div className="container hero-content">
        <h1>
          <span className="line"><span>{t.hero.l1}</span></span>
          <span className="line"><span><em>{t.hero.l2}</em></span></span>
          <span className="line"><span>{t.hero.l3}</span></span>
        </h1>
        <div className="hero-meta">
          <p>{t.hero.desc}</p>
        </div>
      </div>
      <div className="hero-scroll">
        <span>scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

function Showreel({ lang, onPlay }) {
  const t = window.I18N[lang];
  const mediaRef = window.useParallax(0.12);
  return (
    <div className="container" style={{ padding: 0, marginTop: 40 }}>
      <div
        className="showreel"
        onClick={onPlay}
        data-cursor="play"
        style={{ cursor: "none" }}
      >
        <div ref={mediaRef} className="showreel-media still-rooftop"></div>
        <div className="showreel-media fx-night" style={{ mixBlendMode: "screen", opacity: 0.6 }}></div>
        <div className="showreel-overlay"></div>
        <div className="showreel-play">
          <div className="lg lg-pill" style={{
            padding: "14px 22px",
            display: "inline-flex",
            alignItems: "center",
            gap: 12,
            fontSize: 11,
            letterSpacing: "0.22em",
            textTransform: "uppercase",
          }}>
            <svg width="10" height="12" viewBox="0 0 10 12" fill="#F7F7F7"><path d="M0 0L10 6L0 12V0Z"/></svg>
            <span>{t.showreel.play} · {t.showreel.label}</span>
          </div>
        </div>
        <div className="showreel-meta">
          <div>
            <span>{t.hero.runtime}</span>
            <strong>{t.showreel.duration}</strong>
          </div>
          <div>
            <span>est. 2019</span>
            <strong>{t.showreel.since}</strong>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Hero = Hero;
window.Showreel = Showreel;