// 01 Hero — Vogue Cover (full-bleed editorial)
const Hero = () => {
  React.useEffect(() => {
    const onScroll = () => {
      const host = document.querySelector('.hero__host');
      if (!host) { document.body.classList.remove('hero--nav-light'); return; }
      const rect = host.getBoundingClientRect();
      document.body.classList.toggle('hero--nav-light', rect.bottom > 80);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      document.body.classList.remove('hero--nav-light');
    };
  }, []);

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__host">
        <div className="hero__photo">
          <img
            src={(window.__r||(p=>p))('images/hero-main.jpg')}
            alt="Editorial fashion model among purple banana leaves"
          />
        </div>
        <div className="hero__light" />
        <div className="hero__shimmer" />

        <div className="hero__text">
          <div className="hero__eyebrow-pill">The AI solution for fashion brands</div>
          <h1 className="hero__headline">
            We build your brand's<br />
            <span className="hero__headline-accent">AI</span>{' '}
            <em className="serif hero-serif">Studio.</em>
          </h1>
          <p className="hero__sub">
            <strong>The AI-native fashion content platform.</strong>{' '}
            <span className="hero__sub-dim">
              Digital casting, image and video generation, editing, and workflows — all in one professional solution.
            </span>
          </p>
          <div className="hero__cta-wrap">
            <a className="hero__cta" href="https://www.stoodio.ai/contact">
              Book Demo
              <svg className="hero__cta-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div className="hero__logos" aria-label="Fashion brand customers">
        <div className="hero__logos-track">
          {Array.from({ length: 4 }).map((_, i) => (
            <div className="hero__logos-inner" key={i}>
              <img className="hero__logo-img hero__logo-img--jp"       src={(window.__r||(p=>p))('images/logos/jp.png')}       alt="JP 1880" />
              <img className="hero__logo-img hero__logo-img--desigual" src={(window.__r||(p=>p))('images/logos/desigual.png')} alt="Desigual" />
              <img className="hero__logo-img hero__logo-img--forsberg" src={(window.__r||(p=>p))('images/logos/forsberg.png')} alt="Forsberg" />
              <img className="hero__logo-img hero__logo-img--kismet"   src={(window.__r||(p=>p))('images/logos/kismet.png')}   alt="Kismet" />
              <img className="hero__logo-img hero__logo-img--pfanner"  src={(window.__r||(p=>p))('images/logos/pfanner.png')}  alt="Pfanner" />
              <img className="hero__logo-img hero__logo-img--partyde"  src={(window.__r||(p=>p))('images/logos/partyde.png')}  alt="Party.de" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};