// app.jsx — composes the scenes. Reads inline TWEAK_DEFAULTS from index.html
// as runtime configuration (atmosphere toggles, palette, accent colors).

const { useEffect: useEffA, useState: useStateA, useRef: useRefA } = React;

function App() {
  const t = window.TWEAK_DEFAULTS || {};

  // Apply runtime toggles to the engines
  useEffA(() => { window.AriCursorFx?.setEnabled?.(t.cursorFx !== false); }, [t.cursorFx]);
  useEffA(() => { window.AriStars?.setEnabled?.(t.starfield !== false); }, [t.starfield]);
  useEffA(() => { window.AriCelestial?.setEnabled?.(t.celestial !== false); }, [t.celestial]);
  useEffA(() => {
    document.querySelectorAll('.grain').forEach((el) => { el.style.display = t.grain === false ? 'none' : ''; });
  }, [t.grain]);

  // Apply accent colors as CSS vars (overrides)
  useEffA(() => {
    if (t.accentDay) document.documentElement.style.setProperty('--gold-light', t.accentDay);
    if (t.accentNight) document.documentElement.style.setProperty('--lavender', t.accentNight);
  }, [t.accentDay, t.accentNight]);

  // Palette presets
  useEffA(() => {
    const root = document.documentElement.style;
    if (t.palette === 'classic') {
      root.setProperty('--gold', '#b07d28');
      root.setProperty('--gold-light', '#d4a85a');
      root.setProperty('--lavender', '#c8b8ff');
      root.setProperty('--lavender-2', '#ece2ff');
    } else if (t.palette === 'ember') {
      root.setProperty('--gold', '#c66631');
      root.setProperty('--gold-light', '#e29464');
      root.setProperty('--lavender', '#e9a8c8');
      root.setProperty('--lavender-2', '#fbe1ec');
    } else if (t.palette === 'mercury') {
      root.setProperty('--gold', '#8a7e62');
      root.setProperty('--gold-light', '#b9a87a');
      root.setProperty('--lavender', '#a9c2e8');
      root.setProperty('--lavender-2', '#e2ecf8');
    } else if (t.palette === 'thistle') {
      root.setProperty('--gold', '#7e7028');
      root.setProperty('--gold-light', '#c0b65a');
      root.setProperty('--lavender', '#d8a8e0');
      root.setProperty('--lavender-2', '#f1d6f6');
    }
  }, [t.palette]);

  // Build the right-side gutter from the section ids
  useEffA(() => {
    const gutter = document.getElementById('gutter');
    if (!gutter) return;
    const items = [
      { id: 'hero', label: 'Dawn' },
      { id: 'ethos', label: 'Quiet' },
      { id: 'family', label: 'Family' },
      { id: 'core', label: 'Core' },
      { id: 'roam', label: 'Roam' },
      { id: 'code', label: 'Code' },
      { id: 'desk', label: 'Desk' },
      { id: 'manifesto', label: 'Manifesto' },
      { id: 'studio', label: 'Studio' },
    ];
    gutter.innerHTML = items.map((it) => `
      <a href="#${it.id}" class="gutter-item" data-id="${it.id}" data-cursor="hover">
        <span class="label">${it.label}</span>
        <span class="dot"></span>
      </a>
    `).join('');

    function onScroll() {
      const y = window.scrollY + window.innerHeight * 0.4;
      let active = items[0].id;
      for (const it of items) {
        const el = document.getElementById(it.id);
        if (el && el.offsetTop <= y) active = it.id;
      }
      gutter.querySelectorAll('.gutter-item').forEach((a) => {
        a.classList.toggle('active', a.dataset.id === active);
      });
    }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      {window.Hero ? <window.Hero/> : null}
      {window.Ethos ? <window.Ethos/> : null}
      {window.Constellation ? <window.Constellation/> : null}
      {window.Spotlights ? <window.Spotlights/> : null}
      {window.Manifesto ? <window.Manifesto/> : null}
      {window.Footer ? <window.Footer/> : null}
    </>
  );
}

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