// Intro / start screen
const { useState: useStateIntro, useEffect: useEffectIntro } = React;

function Intro({ onStart }) {
  const [hover, setHover] = useStateIntro(false);
  const [loaded, setLoaded] = useStateIntro(false);
  useEffectIntro(() => { setTimeout(() => setLoaded(true), 100); }, []);

  return (
    <div className="screen" style={{
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      alignItems: 'center', textAlign: 'center', padding: '100px 40px',
      position: 'relative',
    }}>
      <BgVideo opacity={0.4} />
      <CrossesBg count={30} seed={7} />

      <div className="mono" style={{
        color: 'var(--lavender)', marginBottom: 40,
        opacity: loaded ? 1 : 0, transition: 'opacity 1.4s',
      }}>
        [ ANNO DOMINI MMXXVI — VHS CHAPEL EDITION ]
      </div>

      <div style={{ position: 'relative', zIndex: 2 }}>
        <div className="mono" style={{ color: 'var(--ash)', marginBottom: 24 }}>
          A Guide By — madk1d × темный принц
        </div>

        <h1 className="glitch" data-text="нормис" style={{
          fontFamily: 'var(--f-gothic)',
          color: 'var(--bone)',
          textShadow: '0 0 40px rgba(201,168,255,0.3)',
        }}>
          нормис
        </h1>

        <div style={{
          fontFamily: 'var(--f-serif)',
          fontSize: 'clamp(20px, 2.6vw, 36px)',
          fontStyle: 'italic',
          margin: '24px 0',
          color: 'var(--ash)',
        }}>
          — это не приговор. <br />это <span style={{ color: 'var(--lavender)' }}>стадия</span>, которую можно пройти.
        </div>

        <h2 style={{
          fontFamily: 'var(--f-gothic)',
          color: 'var(--lavender)',
          margin: '30px 0 50px',
          textShadow: '0 0 60px rgba(201,168,255,0.5)',
        }}>
          евангелие <br />от <span style={{ color: 'var(--blood)' }}>нишевого</span>
        </h2>

        <div style={{
          maxWidth: 620,
          margin: '0 auto 50px',
          fontFamily: 'var(--f-serif)',
          fontSize: 20,
          lineHeight: 1.6,
          color: 'var(--bone)',
          opacity: 0.85,
        }}>
          прежде чем принять доктрину — пройди <span className="mono" style={{ color: 'var(--lavender)', fontSize: 13 }}>экзамен</span>.
          семь вопросов отделят тебя от масс. соврёшь — система узнает.
        </div>

        <button
          className="btn blood"
          onMouseEnter={() => { setHover(true); TP_Audio.playHover(); }}
          onMouseLeave={() => setHover(false)}
          onClick={() => { TP_Audio.play808(42, 0.5, 0.3); onStart(); }}
          style={{ fontSize: 13, padding: '22px 36px' }}
        >
          начать экзамен →
        </button>

        <div className="mono" style={{ color: 'var(--ash)', marginTop: 60, fontSize: 10 }}>
          ↓ scroll не работает · только клик · cursor: crux
        </div>
      </div>

      {/* side marks — hidden on mobile to avoid crowding */}
      <div className="mono intro-side-mark" style={{
        position: 'absolute', left: 20, top: '50%',
        transform: 'rotate(-90deg) translateX(50%)',
        transformOrigin: 'left top',
        color: 'var(--ash)', fontSize: 10, letterSpacing: '0.4em',
      }}>
        SIDE A — INITIATION
      </div>
      <div className="mono intro-side-mark" style={{
        position: 'absolute', right: 20, bottom: 40,
        color: 'var(--ash)', fontSize: 10,
      }}>
        TRK 00 · 0:00 / 6:66
      </div>
    </div>
  );
}

window.Intro = Intro;