// Tweaks panel + app root
function Tweaks() {
  const [visible, setVisible] = React.useState(false);
  const [state, setState] = React.useState(() => ({
    theme: document.documentElement.getAttribute('data-theme') || 'dark',
    accent: document.documentElement.getAttribute('data-accent') || 'green',
    density: document.documentElement.getAttribute('data-density') || 'default',
    hero: document.documentElement.getAttribute('data-hero') || 'v1',
    ticker: document.documentElement.getAttribute('data-ticker') || 'on',
  }));

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const apply = (k, v) => {
    setState(s => ({ ...s, [k]: v }));
    document.documentElement.setAttribute(`data-${k}`, v);
    // persist accent via CSS var override
    if (k === 'accent') {
      const map = {
        green: 'oklch(0.80 0.15 145)',
        amber: 'oklch(0.80 0.14 75)',
        blue:  'oklch(0.78 0.13 235)',
        magenta: 'oklch(0.75 0.18 350)',
        white: 'oklch(0.97 0.005 85)',
      };
      document.documentElement.style.setProperty('--accent', map[v]);
    }
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  const accentSwatches = [
    ['green', 'oklch(0.80 0.15 145)'],
    ['amber', 'oklch(0.80 0.14 75)'],
    ['blue', 'oklch(0.78 0.13 235)'],
    ['magenta', 'oklch(0.75 0.18 350)'],
    ['white', 'oklch(0.97 0.005 85)'],
  ];

  return (
    <div className={`tweaks-panel ${visible ? 'visible' : ''}`}>
      <div className="tweaks-h">
        <span>TWEAKS</span>
        <span style={{ color: 'var(--accent)' }}>●</span>
      </div>
      <div className="tweaks-row">
        <label>Theme</label>
        <div className="opts">
          {['dark', 'light'].map(t => (
            <button key={t} className={state.theme === t ? 'active' : ''} onClick={() => apply('theme', t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>Accent</label>
        <div className="opts">
          {accentSwatches.map(([name, col]) => (
            <div key={name}
              className={`swatch ${state.accent === name ? 'active' : ''}`}
              style={{ background: col }}
              onClick={() => apply('accent', name)} />
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>Density</label>
        <div className="opts">
          {['compact', 'default', 'spacious'].map(t => (
            <button key={t} className={state.density === t ? 'active' : ''} onClick={() => apply('density', t)}>{t[0]}</button>
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>Hero</label>
        <div className="opts">
          {['v1', 'v2', 'v3'].map(t => (
            <button key={t} className={state.hero === t ? 'active' : ''} onClick={() => apply('hero', t)}>{t}</button>
          ))}
        </div>
      </div>
      <div className="tweaks-row">
        <label>Ticker</label>
        <div className="opts">
          {['on', 'off'].map(t => (
            <button key={t} className={state.ticker === t ? 'active' : ''} onClick={() => apply('ticker', t)}>{t}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function App() {
  // Allow other pages (e.g. /letters) to deep-link the CTA modals by sending
  // visitors to /?form=tearsheet or /?form=access. Fire once after mount.
  React.useEffect(() => {
    let param = null;
    try { param = new URLSearchParams(window.location.search).get('form'); } catch (e) {}
    if (!param) return;
    const evt = param === 'tearsheet' ? 'open-tearsheet-form'
              : param === 'access'    ? 'open-request-form'
              : null;
    if (!evt) return;
    // Defer so the modal listeners are mounted first.
    setTimeout(() => window.dispatchEvent(new Event(evt)), 0);
    // Clean the URL so a refresh doesn't reopen the modal.
    try { window.history.replaceState({}, '', window.location.pathname + window.location.hash); } catch (e) {}
  }, []);

  return (
    <>
      <Nav />
      <Ticker />
      <Hero />
      <Metrics />
      <Strategy />
      <Performance />
      <Regimes />
      <Risk />
      <Terms />
      <CTA />
      <Footer />
      <RequestAccessModal />
      <RequestTearSheetModal />
      <Tweaks />
    </>
  );
}

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