/* global React */
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

const HOME_HERO_IMAGES = [
  'assets/Photos/Hero%20Images/Home/BDB-7.jpg',
  'assets/Photos/Hero%20Images/Home/RJM-6.jpg',
];

function splitWords(text) {
  return text.split(' ').map((w, i) => (
    <span className="word" key={i}><span className="inner">{w}</span></span>
  ));
}

function Hero({ variant }) {
  const mediaRef = useRefHero(null);
  const headlineRef = useRefHero(null);
  const [current, setCurrent] = useStateHero(0);

  useEffectHero(() => {
    const id = setInterval(() => setCurrent(c => (c + 1) % HOME_HERO_IMAGES.length), 5500);
    return () => clearInterval(id);
  }, []);

  useEffectHero(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const gsap = window.gsap;
    gsap.registerPlugin(window.ScrollTrigger);

    const st = gsap.to(mediaRef.current, {
      yPercent: 18,
      ease: 'none',
      scrollTrigger: {
        trigger: '.hero',
        start: 'top top',
        end: 'bottom top',
        scrub: true,
      }
    });

    // headline reveal
    requestAnimationFrame(() => {
      if (headlineRef.current) headlineRef.current.classList.add('in');
    });

    return () => { st.scrollTrigger && st.scrollTrigger.kill(); st.kill(); };
  }, []);

  // Variant content
  if (variant === 'split') {
    return (
      <section className="hero" id="top">
        <div className="hero-media" ref={mediaRef}>
          <div className="hero-grain"></div>
          {HOME_HERO_IMAGES.map((src, i) => (
            <img key={src} className={'hero-slide' + (i === current ? ' active' : '')} src={src} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
          ))}
        </div>
        <div className="hero-inner">
          <div className="hero-eyebrow"><span className="bar"></span> Sydney lifestyle photography</div>
          <h1 className="display split" ref={headlineRef}>
            {splitWords('Genuine content for')} <em>{splitWords('your brand,')}</em> {splitWords('your life.')}
          </h1>
          <p className="hero-sub">A Northern Beaches photographer making content that shows the real feeling of your brand, your products and your people. No stiff poses, just natural moments.</p>
          <div className="hero-ctas">
            <a href="#brand" className="btn">Brand &amp; lifestyle <span className="arr">→</span></a>
            <a href="#personal" className="btn ghost">Personal sessions <span className="arr">→</span></a>
          </div>
        </div>
        <div className="hero-bottom-rule">
          <span>Dee Why · Northern Beaches, Sydney</span>
        </div>
      </section>
    );
  }

  // default editorial
  return (
    <section className="hero" id="top">
      <div className="hero-media" ref={mediaRef}>
        <div className="hero-grain"></div>
        {HOME_HERO_IMAGES.map((src, i) => (
          <img key={src} className={'hero-slide' + (i === current ? ' active' : '')} src={src} alt="" loading={i === 0 ? 'eager' : 'lazy'} />
        ))}
      </div>
      <div className="hero-inner">
        <div className="hero-eyebrow"><span className="bar"></span> Sydney lifestyle photographer</div>
        <h1 className="display split" ref={headlineRef}>
          {splitWords('I make content')} {splitWords('that shows the')} <em>{splitWords('real feeling')}</em> {splitWords('of your brand,')} {splitWords('your products')} {splitWords('and your life.')}
        </h1>
        <p className="hero-sub">Jorge Paz · lifestyle photography on Sydney's Northern Beaches. Warm, unposed work for brands that want to feel real, and for families who want the same.</p>
        <div className="hero-ctas">
          <a href="#brand" className="btn">Brand &amp; lifestyle <span className="arr">→</span></a>
          <a href="#personal" className="btn ghost">Personal sessions <span className="arr">→</span></a>
        </div>
      </div>
      <div className="hero-bottom-rule">
        <span>Est. Dee Why · Northern Beaches, Sydney</span>
      </div>
    </section>
  );
}

window.Hero = Hero;