// Hero.jsx — Hero section over navy with mockup
// The headline cycles 3 words (vendem/impressionam/conquistam) using the same
// pattern from apps/motion/02-hero-loop.html. The mockup on the right shows a
// static case-study preview (CASE · ACME) — the previous iframe embed of the
// hero-loop motion was removed because it duplicated the headline visually.
const Hero = () => {
  const stackRef = React.useRef(null);

  // Cycle the 3 italic champagne words in the headline.
  React.useEffect(() => {
    if (!window.gsap || !stackRef.current) return;
    const words = stackRef.current.querySelectorAll('.w');
    if (words.length < 3) return;

    // Inline transforms with explicit % units so GSAP parses yPercent correctly
    // (avoids the matrix-in-pixels parsing bug we hit in motion 02).
    words[0].style.transform = 'translateY(0%)';
    words[1].style.transform = 'translateY(140%)';
    words[2].style.transform = 'translateY(140%)';

    // y:0 alongside yPercent zeroes any stray pixel offset GSAP might infer.
    gsap.set(words[0], { y: 0, yPercent: 0 });
    gsap.set(words[1], { y: 0, yPercent: 140 });
    gsap.set(words[2], { y: 0, yPercent: 140 });

    const tl = gsap.timeline({ defaults: { ease: 'power3.inOut' }, repeat: -1 });

    // Reset state at t=0 of EVERY iteration so the loop is stable.
    tl.set(words[0], { y: 0, yPercent: 0 }, 0);
    tl.set(words[1], { y: 0, yPercent: 140 }, 0);
    tl.set(words[2], { y: 0, yPercent: 140 }, 0);

    function cycleWord(time, fromIdx) {
      const cur = words[fromIdx];
      const next = words[(fromIdx + 1) % 3];
      tl.set(next, { yPercent: 140 }, time - 0.05);
      tl.to(cur,  { yPercent: -140, duration: 0.7 }, time);
      tl.to(next, { yPercent: 0,    duration: 0.7 }, time);
    }
    cycleWord(4.0, 0);   // vendem → impressionam
    cycleWord(8.0, 1);   // impressionam → conquistam
    cycleWord(10.8, 2);  // conquistam → vendem (loops back)
    tl.to({}, { duration: 0.5 }, 11.5);

    return () => tl.kill();
  }, []);

  const scrollTo = (id) => () => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section className="site__hero on-navy" id="home" data-screen-label="Hero">
      <div className="hero-grid" aria-hidden="true"></div>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32 }}>
          <span className="jet-trail jet-trail--lg" aria-hidden="true"></span>
          <span className="micro" style={{ color: 'rgba(244,241,235,0.6)' }}>Estúdio digital · Desde 2014</span>
        </div>
        <h1 className="display-xl" aria-label="Sites que vendem, impressionam, conquistam">
          <span aria-hidden="true">
            Sites que{' '}
            <span className="hero-word-stack" ref={stackRef}>
              <span className="w">vendem</span>
              <span className="w">impressionam</span>
              <span className="w">conquistam</span>
            </span>
          </span>
        </h1>
        <p className="lead">
          Projetamos e desenvolvemos sites e e-commerces sob medida para empresas médias e corporativo.
          Em 60 dias o seu projeto sai do briefing para o ar — pronto para escalar.
        </p>
        <div className="cta-row">
          <button type="button" className="btn btn--accent btn--lg" onClick={scrollTo('contato')}>
            Pedir proposta <span className="arrow" aria-hidden="true">→</span>
          </button>
          <button type="button" className="btn btn--ghost btn--lg" onClick={scrollTo('cases')}>
            Ver cases
          </button>
          <a
            href="proposals/proposta-bpm.html"
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn--ghost btn--lg"
          >
            Ver proposta · BPM <span className="arrow" aria-hidden="true">↗</span>
          </a>
        </div>
      </div>
      <div className="hero-mockup" aria-hidden="true">
        <div className="hero-mockup__bar"><i></i><i></i><i></i></div>
        <div className="hero-mockup__body">
          <div>
            <div className="micro" style={{ color: 'rgba(244,241,235,0.5)', marginBottom: 14 }}>
              <span className="jet-trail" style={{ marginRight: 12, verticalAlign: 'middle' }}></span>
              CASE · ACME
            </div>
            <div className="hero-mockup__title">Pensado para <em>escalar</em></div>
          </div>
          <div className="hero-mockup__row">
            <span className="hero-mockup__chip">+3,2× leads</span>
            <span className="hero-mockup__chip">1,1s carga</span>
            <span className="hero-mockup__chip">60 dias</span>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;