// cinematic-hero.jsx — Floema-inspired fullscreen editorial hero

function CinematicHero() {
  const heroRef = React.useRef(null);

  React.useEffect(() => {
    if (typeof gsap === 'undefined') return;

    const ctx = gsap.context(() => {
      // Image: slow cinematic zoom-out from slightly enlarged
      gsap.fromTo('.ch-img',
        { scale: 1.07 },
        { scale: 1, duration: 2.8, ease: 'power2.out' }
      );

      // Main text — staggered upward reveal
      gsap.fromTo('.ch-anim',
        { autoAlpha: 0, y: 36 },
        { autoAlpha: 1, y: 0, duration: 1.4, stagger: 0.16, ease: 'power4.out', delay: 0.6 }
      );

      // Bottom bar
      gsap.fromTo('.ch-bottom-bar > *',
        { autoAlpha: 0 },
        { autoAlpha: 1, duration: 1.2, stagger: 0.1, ease: 'power2.out', delay: 1.2 }
      );
    }, heroRef);

    return () => ctx.revert();
  }, []);

  return (
    <section className="ch-hero" ref={heroRef}>

      {/* Full-bleed image */}
      <div className="ch-img-wrap">
        <img src="firefly2.png" alt="" className="ch-img" />
      </div>

      {/* Layered overlays for depth */}
      <div className="ch-overlay-top" />
      <div className="ch-overlay-bot" />

      {/* Cinematic grain */}
      <div className="ch-grain" aria-hidden="true" />

      {/* Content */}
      <div className="ch-content">

        {/* Centre text */}
        <div className="ch-main">
          <h1 className="ch-anim ch-headline">
            <span className="ch-regular">A decade<br />of </span><em>craft.</em>
          </h1>
          <p className="ch-anim ch-subline">
            From the heart of Punjab to screens across six countries —
            one studio, one founder, real results.
          </p>
        </div>

        {/* Bottom bar */}
        <div className="ch-bottom-bar">
          <div className="ch-scroll-cue">
            <span className="ch-scroll-line" />
            <span className="ch-scroll-label">Scroll</span>
          </div>
          <span className="ch-year">2017 — {new Date().getFullYear()}</span>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { CinematicHero });