// Home — top-level composition. Owns rare-state so headline + calculator share it.

function mkPalette(name, bg, fg, accent) {
  return { name, swatch: [bg, fg, accent], colors: { bg, fg, accent } };
}

const PALETTES = {
  bone:      mkPalette('Bone + amber (C-inspired)', '#ebe6d8', '#28231d', '#a8581f'),
  paperInk:  mkPalette('Paper + ink red',           '#efebdc', '#1a1a1a', '#b2391c'),
  darkAmber: mkPalette('Off-black + amber',         '#14110e', '#e8e4d9', '#d9a05b'),
  boneOlive: mkPalette('Bone + olive',              '#ebe7dc', '#24241f', '#5a6a22'),
};

function Home() {
  const tweaksDefault = (window.__INITIAL_TWEAKS) || { palette: 'darkAmber', typography: 'spectral' };
  const [tweaks, setTweaks] = React.useState(tweaksDefault);
  const { active, toggle, pool, lastToggled } = window.useRareState();

  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') document.getElementById('tweaks').classList.add('open');
      if (e.data?.type === '__deactivate_edit_mode') document.getElementById('tweaks').classList.remove('open');
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setAndPost = React.useCallback((patch) => {
    setTweaks((t) => ({ ...t, ...patch }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  }, []);

  React.useEffect(() => {
    const sw = document.getElementById('palette-sw');
    if (!sw) return;
    sw.innerHTML = '';
    Object.entries(PALETTES).forEach(([k, p]) => {
      const el = document.createElement('div');
      el.className = 'sw' + (k === tweaks.palette ? ' active' : '');
      el.style.background = `linear-gradient(135deg, ${p.swatch[0]} 33%, ${p.swatch[1]} 33% 66%, ${p.swatch[2]} 66%)`;
      el.title = p.name;
      el.onclick = () => setAndPost({ palette: k });
      sw.appendChild(el);
    });
    const sel = document.getElementById('type-sel');
    if (sel) {
      sel.value = tweaks.typography;
      sel.onchange = (e) => setAndPost({ typography: e.target.value });
    }
  }, [tweaks, setAndPost]);

  const palette = (PALETTES[tweaks.palette] || PALETTES.darkAmber).colors;
  const serif = tweaks.typography === 'instrument' ? '"Instrument Serif", serif'
    : tweaks.typography === 'neue' ? '-apple-system, "Helvetica Neue", Arial, sans-serif'
    : '"Spectral", serif';
  const mono = '"JetBrains Mono", ui-monospace, monospace';

  // CSS variables — set on the page root so descendants can resolve via var().
  const rootVars = {
    '--bg': palette.bg,
    '--fg': palette.fg,
    '--accent': palette.accent,
    '--bg-rgb': window.hexToRgb(palette.bg),
    '--fg-rgb': window.hexToRgb(palette.fg),
    '--accent-rgb': window.hexToRgb(palette.accent),
    '--font-serif': serif,
    '--font-mono': mono,
  };

  return (
    <div data-dc-scroll style={{
      ...rootVars,
      width: '100%', minHeight: '100vh',
      background: 'var(--bg)', color: 'var(--fg)',
      fontFamily: 'var(--font-serif)',
      // overflowY for vertical scroll, overflowX hidden so any fixed-width
      // child that exceeds the viewport (e.g. the 270px squares) doesn't
      // push the page into horizontal scrolling.
      overflowX: 'hidden', overflowY: 'auto',
      position: 'relative',
      display: 'flex', flexDirection: 'column',
    }}>
      <window.Nav />
      <window.Hero active={active} toggle={toggle} pool={pool} lastToggled={lastToggled} />
      <div style={{
        padding: 'var(--space-2) var(--page-pad-x) var(--space-5)',
        display: 'var(--ticker-display)',
      }}>
        <window.Ticker />
      </div>
      <window.Experience />
      <window.Footer />
    </div>
  );
}

window.Home = Home;