// Secret easter-egg screen
const { useState: useStateS, useEffect: useEffectS } = React;

function Secret({ onBack }) {
  const [typed, setTyped] = useStateS('');
  const full = "у тебя получилось. но теперь ты знаешь секрет: нишевости нет. есть только те, кто перестал притворяться, и те, кто продолжает. мы не темный принц и не madk1d — мы голоса в твоей голове, которые ты наконец-то услышал. выключи этот сайт. иди жить.";

  useEffectS(() => {
    let i = 0;
    const t = setInterval(() => {
      i++;
      setTyped(full.slice(0, i));
      if (i % 3 === 0) TP_Audio.playClick();
      if (i >= full.length) clearInterval(t);
    }, 40);
    TP_Audio.play808(35, 2, 0.3);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="screen" style={{
      background: '#000',
      color: 'var(--lavender)',
      padding: '80px 40px',
      display: 'flex', flexDirection: 'column',
      justifyContent: 'center', alignItems: 'center',
      textAlign: 'center',
      position: 'relative',
    }}>
      <CrossesBg count={50} seed={13} />

      <div style={{
        position: 'absolute', top: 40, left: 40, right: 40,
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--f-mono)', fontSize: 10, color: 'var(--blood)',
        letterSpacing: '0.3em',
      }}>
        <span>╬ SECRET CHAMBER ╬</span>
        <span>ACCESS GRANTED · 000</span>
      </div>

      <div style={{
        fontFamily: 'var(--f-gothic)',
        fontWeight: 300,
        fontSize: 'clamp(80px, 14vw, 220px)',
        color: 'var(--blood)',
        textShadow: '0 0 60px rgba(220,60,60,0.6)',
        marginBottom: 40,
        lineHeight: 0.9,
      }}>
        <span className="glitch" data-text="правда">правда</span>
      </div>

      <div style={{
        maxWidth: 780,
        fontFamily: 'var(--f-serif)',
        fontSize: 'clamp(20px, 2.2vw, 28px)',
        lineHeight: 1.6,
        color: 'var(--bone)',
        fontStyle: 'italic',
        minHeight: 240,
        textWrap: 'pretty',
        position: 'relative', zIndex: 2,
      }}>
        {typed}<span style={{
          borderLeft: '2px solid var(--lavender)',
          marginLeft: 4,
          animation: 'blink 1s infinite',
        }}>&nbsp;</span>
      </div>

      <div style={{ marginTop: 60, display: 'flex', gap: 16, position: 'relative', zIndex: 2 }}>
        <button className="btn" onClick={onBack}>← вернуться в доктрину</button>
        <button className="btn blood" onClick={() => location.reload()}>начать сначала</button>
      </div>

      <div className="mono" style={{
        position: 'absolute', bottom: 40,
        color: 'var(--ash)', opacity: 0.5, fontSize: 10,
      }}>
        ТЕМНЫЙ ПРИНЦ × MADK1D · HIDDEN TRACK · 0:00 / ∞
      </div>
    </div>
  );
}

window.Secret = Secret;