/* Maison Silya — the signature digital moment: "The Unveiling".
   A slow, once-per-session unroll of the hero piece on a dark gallery
   stage, with a travelling rolling-edge shadow, a drifting key light,
   progressive text and elegant scroll parallax. The visible end-state is
   the base style; animation runs only when .is-playing is set and is
   skipped for reduced-motion / repeat visits / no-JS. */
function HeroCinematic({ onNav, heroImage }) {
  const rootRef = React.useRef(null);
  const rugRef = React.useRef(null);
  const contentRef = React.useRef(null);
  const cueRef = React.useRef(null);

  const reduced = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    let seen = false;
    try { seen = sessionStorage.getItem('ms-hero-seen') === '1'; } catch (e) {}
    if (reduced || seen) {
      root.classList.add('is-instant');
    } else {
      const id = requestAnimationFrame(() => requestAnimationFrame(() => root.classList.add('is-playing')));
      try { sessionStorage.setItem('ms-hero-seen', '1'); } catch (e) {}
      return () => cancelAnimationFrame(id);
    }
  }, []);

  React.useEffect(() => {
    if (reduced) return;
    const scroller = document.getElementById('ms-scroll');
    if (!scroller) return;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        const vh = window.innerHeight || 800;
        const f = Math.min(scroller.scrollTop, vh);
        if (scroller.scrollTop > vh * 1.25) return;
        if (rugRef.current) rugRef.current.style.transform = `translateY(${f * 0.28}px) scale(${1 + f * 0.00009})`;
        if (contentRef.current) {
          contentRef.current.style.transform = `translateY(${f * -0.14}px)`;
          contentRef.current.style.opacity = String(Math.max(0, 1 - f / (vh * 0.6)));
        }
        if (cueRef.current) cueRef.current.style.opacity = String(Math.max(0, 1 - f / (vh * 0.22)));
      });
    };
    scroller.addEventListener('scroll', onScroll, { passive: true });
    return () => { scroller.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);

  const mono = !heroImage;
  return (
    <section className="ms-hero" ref={rootRef}>
      <div className="ms-hero-stage">
        <div className="ms-hero-rug" ref={rugRef}>
          <div className="ms-hero-surface" style={heroImage ? { backgroundImage: `url(${heroImage})` } : undefined}>
            {mono && <div className="ms-hero-key" />}
            {mono && <div className="ms-hero-weave" />}
            {mono && <span className="ms-hero-plate">{t('hero.plate')}</span>}
          </div>
        </div>
        <div className="ms-hero-edge">
          <div className="ms-hero-edge-shadow" />
          <div className="ms-hero-edge-line" />
        </div>
        <div className="ms-hero-scrim" />
        <div className="ms-hero-vignette" />
      </div>

      <div className="ms-hero-content" ref={contentRef}>
        <div className="ms-hero-eyebrow r r1">{t('hero.eyebrow')}</div>
        <h1 className="ms-hero-title">
          <span className="ms-hl r r2">{t('hero.title1')}</span>
          <span className="ms-hl r r3"><em>{t('hero.title2')}</em></span>
        </h1>
        <div className="ms-hero-cta r r4">
          <Btn variant="inverse" size="lg" onClick={() => onNav('signature')}>{t('hero.cta1')}</Btn>
          <Btn variant="ghost-inverse" size="lg" onClick={() => onNav('philosophy')}>{t('hero.cta2')}</Btn>
        </div>
      </div>

      <div className="ms-hero-cue r r5" ref={cueRef}>
        <span className="ms-hero-cue-label">{t('hero.scroll')}</span>
        <span className="ms-hero-cue-line" />
      </div>

      <div className="ms-hero-veil"><span className="ms-hero-whisper">Silya</span></div>
    </section>
  );
}
Object.assign(window, { HeroCinematic });