// Illusions — app.jsx
// Composes the gate + immersive site, wires Tweaks.

const { useState, useEffect } = React;

function App() {
  const [t, setTweak] = useTweaks(window.__TWEAKS__);
  const [verified, setVerified] = useState(t.skipGate);
  const [activeLevel, setActiveLevel] = useState(t.focusLevel != null ? t.focusLevel : 1);

  // sync focusLevel tweak → state
  useEffect(() => {
    if (t.focusLevel != null && t.focusLevel !== activeLevel) setActiveLevel(t.focusLevel);
  }, [t.focusLevel]);

  // atmosphere intensity → data attr on root
  useEffect(() => {
    document.documentElement.setAttribute('data-atmosphere', t.atmosphere || 'high');
  }, [t.atmosphere]);

  // accent overrides — adjust amber/violet wash mix
  useEffect(() => {
    const r = document.documentElement;
    if (t.accent === 'violet') {
      r.style.setProperty('--amber', '#C84BFF');
      r.style.setProperty('--amber-glow', '#E4A0FF');
      r.style.setProperty('--line-active', 'rgba(200,75,255,0.42)');
      r.style.setProperty('--line-soft',   'rgba(200,75,255,0.22)');
      r.style.setProperty('--line-faint',  'rgba(200,75,255,0.10)');
    } else if (t.accent === 'gold') {
      r.style.setProperty('--amber', '#D4AF37');
      r.style.setProperty('--amber-glow', '#F0CE6E');
      r.style.setProperty('--line-active', 'rgba(212,175,55,0.42)');
      r.style.setProperty('--line-soft',   'rgba(212,175,55,0.20)');
      r.style.setProperty('--line-faint',  'rgba(212,175,55,0.10)');
    } else {
      r.style.removeProperty('--amber');
      r.style.removeProperty('--amber-glow');
      r.style.removeProperty('--line-active');
      r.style.removeProperty('--line-soft');
      r.style.removeProperty('--line-faint');
    }
  }, [t.accent]);

  const replayGate = () => {
    setVerified(false);
    requestAnimationFrame(() => {
      window.dispatchEvent(new CustomEvent('illusions:gate', { detail: { replay: true } }));
    });
  };

  return (
    <>
      <AccessGate skip={t.skipGate} onComplete={() => setVerified(true)} />

      <Nav />
      <Hero />
      <TonightStrip />
      <Philosophy />
      <Clearance activeIndex={activeLevel} setActiveIndex={(i) => { setActiveLevel(i); setTweak('focusLevel', i); }} />
      <Vault />
      <Identity />
      <FinalCTA />
      <Marquee />
      <Footer />

      {/* Mobile preview overlay — floating phone over current scene */}
      {t.mobilePreview && (
        <div
          style={{
            position: 'fixed', right: 32, bottom: 32, zIndex: 90,
            width: 320, transformOrigin: 'bottom right', transform: 'scale(0.85)',
            pointerEvents: 'none',
            filter: 'drop-shadow(0 30px 80px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(255,184,26,0.25))',
          }}
        >
          <Phone />
        </div>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Boot Sequence">
          <TweakButton label="Replay access gate" onClick={replayGate}>Run →</TweakButton>
          <TweakToggle label="Skip on load" value={t.skipGate} onChange={(v) => setTweak('skipGate', v)} />
        </TweakSection>

        <TweakSection label="Atmosphere">
          <TweakRadio label="Intensity" value={t.atmosphere}
            options={['low', 'high']}
            onChange={(v) => setTweak('atmosphere', v)} />
          <TweakSelect label="Accent" value={t.accent}
            options={['amber', 'gold', 'violet']}
            onChange={(v) => setTweak('accent', v)} />
        </TweakSection>

        <TweakSection label="Clearance Focus">
          <TweakRadio
            label="Level"
            value={String(t.focusLevel)}
            options={['0', '1', '2']}
            onChange={(v) => setTweak('focusLevel', parseInt(v, 10))}
          />
          <div className="twk-row" style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em', color: 'var(--fg-3)', textTransform: 'uppercase', justifyContent: 'space-between' }}>
            <span>0 GENERAL</span><span>1 CREATOR</span><span>2 VAULT</span>
          </div>
        </TweakSection>

        <TweakSection label="Mobile Preview">
          <TweakToggle label="Show phone overlay" value={t.mobilePreview}
            onChange={(v) => setTweak('mobilePreview', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);