// ============================================================
// app.jsx — router, tweaks
// ============================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#a04a2a",
  "density": "comfortable",
  "contrast": "standard"
}/*EDITMODE-END*/;

const ACCENTS = [
  { name: 'Clay', color: '#a04a2a' },
  { name: 'Ochre', color: '#b8862f' },
  { name: 'Moss', color: '#5a6b2b' },
  { name: 'Indigo', color: '#3d4a6b' },
];

function useLocal(key, initial) {
  const [v, setV] = useState(() => {
    try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : initial; } catch { return initial; }
  });
  useEffect(() => { try { localStorage.setItem(key, JSON.stringify(v)); } catch {} }, [key, v]);
  return [v, setV];
}

function Tweaks({ editMode, state, set, close }) {
  if (!editMode) return null;
  return (
    <div className="tweaks">
      <h4>Tweaks <button className="close" onClick={close}>hide</button></h4>
      <div className="tweak-row">
        <label>Accent</label>
        <div className="swatches">
          {ACCENTS.map(a => (
            <button key={a.color} title={a.name}
              className={state.accent === a.color ? 'on' : ''}
              style={{ background: a.color }}
              onClick={() => set('accent', a.color)} />
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>Contrast</label>
        <div className="segmented">
          {[['standard', 'Standard'], ['hi', 'High']].map(([k, l]) => (
            <button key={k} className={state.contrast === k ? 'on' : ''} onClick={() => set('contrast', k)}>{l}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <label>Density</label>
        <div className="segmented">
          {[['cozy', 'Cozy'], ['comfortable', 'Comfy'], ['airy', 'Airy']].map(([k, l]) => (
            <button key={k} className={state.density === k ? 'on' : ''} onClick={() => set('density', k)}>{l}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

function getHashPage() {
  const h = window.location.hash.slice(1);
  return h || 'home';
}

function App() {
  const [page, setPage] = useState(getHashPage);
  const [state, setState] = useLocal('pw-tweaks', TWEAK_DEFAULTS);
  const [editMode, setEditMode] = useState(false);

  const set = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*'); } catch {}
  };

  const onNav = (p) => {
    window.location.hash = p === 'home' ? '' : p;
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  useEffect(() => {
    const onHashChange = () => setPage(getHashPage());
    window.addEventListener('hashchange', onHashChange);
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  // accent + contrast
  useEffect(() => { document.documentElement.style.setProperty('--accent', state.accent); }, [state.accent]);
  useEffect(() => {
    document.body.classList.toggle('hi-contrast', state.contrast === 'hi');
  }, [state.contrast]);
  useEffect(() => {
    const densityMap = { cozy: '72px', comfortable: '96px', airy: '128px' };
    document.documentElement.style.setProperty('--section-pad', densityMap[state.density]);
    document.querySelectorAll('.section').forEach(s => {
      if (!s.classList.contains('tight')) s.style.padding = `${densityMap[state.density]} 0`;
    });
  }, [state.density, page]);

  // edit mode wiring
  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditMode(true);
      if (d.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  let Content;
  switch (page) {
    case 'home':      Content = <HomePage onNav={onNav} />; break;
    case 'approach':  Content = <ApproachPage onNav={onNav} />; break;
    case 'quiz':      Content = <QuizPage onNav={onNav} />; break;
    case 'vata':      Content = <DoshaPage dosha="vata" onNav={onNav} />; break;
    case 'pitta':     Content = <DoshaPage dosha="pitta" onNav={onNav} />; break;
    case 'kapha':     Content = <DoshaPage dosha="kapha" onNav={onNav} />; break;
    case 'research':  Content = <ResearchPage onNav={onNav} />; break;
    case 'faq':       Content = <FaqPage onNav={onNav} />; break;
    case 'waitlist':  Content = <WaitlistPage onNav={onNav} />; break;
    case 'vata-bathamrit': Content = <VataBathamritPage onNav={onNav} />; break;
    case 'vata-keshamrit': Content = <VataKeshamritPage onNav={onNav} />; break;
    default:          Content = <HomePage onNav={onNav} />;
  }

  return (
    <div data-screen-label={page}>
      <Nav current={page} onNav={onNav} />
      <main>{Content}</main>
      <Footer onNav={onNav} />
      <Tweaks editMode={editMode} state={state} set={set} close={() => setEditMode(false)} />
    </div>
  );
}

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