// Hero — cinematic portrait crossfade + editorial title
const { useEffect, useState, useRef } = React;

function Hero(){
  const [idx, setIdx] = useState(0);
  const portraits = ['assets/gustavo-1.png', 'assets/gustavo-3.png', 'assets/gustavo-2.png'];
  const stageRef = useRef(null);

  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i+1) % portraits.length), 4800);
    return () => clearInterval(id);
  }, []);

  // subtle parallax
  useEffect(() => {
    const onScroll = () => {
      if(!stageRef.current) return;
      const y = window.scrollY;
      stageRef.current.style.transform = `translateY(${y * 0.18}px)`;
    };
    window.addEventListener('scroll', onScroll, {passive:true});
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero" id="hero" data-screen-label="01 Hero">
<div className="hero-stage" ref={stageRef}>
        <div className="hero-portrait" data-cursor="view">
          {portraits.map((src,i) => (
            <img key={src} src={src} alt="" className={i===idx ? 'active':''} />
          ))}
          <div className="hero-portrait-frame"></div>
          <span className="hero-portrait-cap">
            <span>Gustavo Sousa</span>
            <span className="dot-sep">·</span>
            <span>{String(idx+1).padStart(2,'0')} / {String(portraits.length).padStart(2,'0')}</span>
          </span>
        </div>
      </div>

      <div className="hero-title">
        <h1>
          <span className="word-row reveal-line in"><span data-i18n="hero.title.a">{window.t('hero.title.a')}</span></span>
          <span className="word-row reveal-line in"><span className="kicker" data-i18n="hero.title.b">{window.t('hero.title.b')}</span></span>
          <span className="word-row reveal-line in"><span className="suffix" data-i18n="hero.title.c">{window.t('hero.title.c')}</span></span>
          <span className="word-row reveal-line in"><span data-i18n="hero.title.d">{window.t('hero.title.d')}</span> <span className="kicker" data-i18n="hero.title.e">{window.t('hero.title.e')}</span></span>
        </h1>
      </div>


      <div className="hero-index">
        {portraits.map((_,i) => (
          <span key={i} className={'tick ' + (i===idx ? 'active':'')}>
            {String(i+1).padStart(2,'0')}
          </span>
        ))}
      </div>
    </section>
  );
}
window.Hero = Hero;