// EYEQ — Hero section

const { useState: useStateHero, useEffect: useEffectHero } = React;

function Hero({ headlineIdx }) {
  const [active, setActive] = useStateHero(0);
  const slides = window.HERO_SLIDES;
  const headlines = window.HEADLINES;

  useEffectHero(() => {
    const id = setInterval(() => {
      setActive(a => (a + 1) % slides.length);
    }, 5200);
    return () => clearInterval(id);
  }, [slides.length]);

  const headline = headlines[headlineIdx % headlines.length];
  const meta = slides[active];

  return (
    <section className="hero" id="top">
      <div className="hero-media" data-camera-zoom>
        {slides.map((s, i) => (
          <div
            key={i}
            className={`hero-slide ${i === active ? 'active' : ''}`}
            style={{ backgroundImage: `url(${s.src})` }}
          />
        ))}
      </div>
      <div className="hero-vignette" />

      <div className="hero-content">
        <div>
          <span className="eyebrow">EYEQ STUDIOS · EST. 2014 · MUMBAI / NEW DELHI / LOS ANGELES</span>
          <h1 className="hero-headline serif" style={{ marginTop: 24 }}>
            {renderHeadlineLine(headline.line1)}
            <br />
            {renderHeadlineLine(headline.line2)}
          </h1>
          <p className="hero-sub">
            A cinematography &amp; photography house for brands and lives worth watching.
            From high-impact corporate films to intimate wedding celebrations — captured by
            directors, not operators.
          </p>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-line">NOW PLAYING · <b>REEL 2025</b></div>
          <div className="hero-meta-line">{meta.label}</div>
          <div className="hero-meta-line">TC <b>{meta.tc}</b></div>
          <div className="hero-thumbs">
            {slides.map((s, i) => (
              <button
                key={i}
                className={`hero-thumb ${i === active ? 'active' : ''}`}
                style={{ backgroundImage: `url(${s.src})` }}
                onClick={() => setActive(i)}
                aria-label={`Show slide ${i + 1}`}
              />
            ))}
          </div>
        </div>
      </div>

      <div className="scroll-cue" aria-hidden>
        <div className="scroll-mouse" />
        <span>Scroll to Explore</span>
      </div>
    </section>
  );
}

// Italicizes the last "expressive" word in each headline line, in gold.
function renderHeadlineLine(line) {
  // Heuristic: italicize the last word (or the noun)
  const words = line.split(' ');
  if (words.length <= 1) return <em>{line}</em>;
  const last = words.pop();
  return <>{words.join(' ') + ' '}<em>{last}</em></>;
}

Object.assign(window, { Hero });