// screen-splash.jsx — Full-bleed splash entry page (Koloff-style, restrained)
const { useEffect: __spE, useState: __spS } = React;

function SplashScreen({ t, lang, navigate, series }) {
  // Pick a single image — using the first series hero.
  const hero = series[0]?.hero;
  const heroAlt = series[2]?.hero;

  const enter = () => navigate({ name: 'index' });

  // Allow scrolling down to enter — feels Koloff-y.
  __spE(() => {
    let entered = false;
    const onWheel = (e) => {
      if (entered) return;
      if (e.deltaY > 40) { entered = true; enter(); }
    };
    const onKey = (e) => {
      if (entered) return;
      if (['Enter', ' ', 'ArrowDown'].includes(e.key)) { entered = true; enter(); }
    };
    window.addEventListener('wheel', onWheel, { passive: true });
    window.addEventListener('keydown', onKey);
    return () => {
      window.removeEventListener('wheel', onWheel);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  return (
    <div className="splash" data-screen-label="Splash">
      <div className="splash-img-wrap">
        <SafeImg
          src={hero}
          alt=""
          label="HERO"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
        {heroAlt ? (
          <SafeImg
            src={heroAlt}
            alt=""
            aria-hidden="true"
            label=""
            className="splash-img-alt"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%', objectFit: 'cover',
            }}
          />
        ) : null}
      </div>

      <div className="splash-overlay">
        <div className="splash-top">
          <span className="micro">— {t.role.toUpperCase()} · {lang.toUpperCase()}</span>
          <span className="micro">PARIS · 48°51′N 2°21′E</span>
        </div>

        <div className="splash-center">
          <h1 className="display splash-name">Justin Personnaz</h1>
          <p className="splash-line micro">
            EDITORIAL · LUXURY · FASHION — EST. 2018
          </p>
        </div>

        <div className="splash-bottom">
          <button
            className="splash-enter"
            onClick={enter}
            aria-label={t.splash.enter}
          >
            <span className="micro">{t.splash.enter.toUpperCase()}</span>
            <span className="splash-arrow" aria-hidden="true">↓</span>
          </button>
          <span className="micro splash-hint">{t.splash.scrollHint}</span>
        </div>
      </div>
    </div>
  );
}

window.SplashScreen = SplashScreen;