/* App shell + routing + theme + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "google-blue",
  "density": "comfortable"
}/*EDITMODE-END*/;

const ACCENTS = {
  'google-blue': { p: '#1a73e8', pl: '#e8f0fe', pd: '#1557b0', dp: '#8ab4f8', dpl: '#1f3058' },
  'cobalt':      { p: '#1d4ed8', pl: '#e0e7ff', pd: '#1e3a8a', dp: '#93b4ff', dpl: '#1e293b' },
  'teal':        { p: '#0891b2', pl: '#cffafe', pd: '#155e75', dp: '#67e8f9', dpl: '#164e63' },
  'graphite':    { p: '#3f3f46', pl: '#e4e4e7', pd: '#18181b', dp: '#a1a1aa', dpl: '#27272a' },
};

function App() {
  const [route, setRoute] = React.useState('home');
  const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS);

  const setTweak = (k, v) => {
    const next = typeof k === 'object' ? { ...tweaks, ...k } : { ...tweaks, [k]: v };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys',
        edits: typeof k === 'object' ? k : { [k]: v } }, '*');
    } catch {}
  };

  // Apply theme + accent
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    const a = ACCENTS[tweaks.accent] || ACCENTS['google-blue'];
    const dark = tweaks.theme === 'dark';
    const r = document.documentElement;
    r.style.setProperty('--color-primary', dark ? a.dp : a.p);
    r.style.setProperty('--color-primary-light', dark ? a.dpl : a.pl);
    r.style.setProperty('--color-primary-dark', dark ? a.p : a.pd);
  }, [tweaks.theme, tweaks.accent]);

  // Tweaks panel host protocol
  const [editOpen, setEditOpen] = React.useState(false);
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode')   setEditOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setEditOpen(false);
    };
    window.addEventListener('message', handler);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', handler);
  }, []);

  const toggleTheme = () => setTweak('theme', tweaks.theme === 'dark' ? 'light' : 'dark');

  const page = (() => {
    if (route === 'product') return <ProductPage setRoute={setRoute} />;
    if (route === 'pricing') return <PricingPage setRoute={setRoute} />;
    if (route === 'company' || route === 'demo') return <CompanyPage setRoute={setRoute} />;
    return <Landing setRoute={setRoute} />;
  })();

  return (
    <React.Fragment>
      <Nav route={route} setRoute={setRoute} theme={tweaks.theme} toggleTheme={toggleTheme} />
      <main>{page}</main>
      <Footer setRoute={setRoute} />

      {editOpen && (
        <TweaksPanel onClose={() => setEditOpen(false)}>
          <TweakSection title="Theme">
            <TweakRadio label="Mode"
              value={tweaks.theme}
              options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }]}
              onChange={v => setTweak('theme', v)} />
          </TweakSection>
          <TweakSection title="Accent">
            <TweakSelect label="Color"
              value={tweaks.accent}
              options={[
                { value: 'google-blue', label: 'Google Blue (default)' },
                { value: 'cobalt',      label: 'Cobalt' },
                { value: 'teal',        label: 'Industrial Teal' },
                { value: 'graphite',    label: 'Graphite' },
              ]}
              onChange={v => setTweak('accent', v)} />
          </TweakSection>
          <TweakSection title="Navigate">
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {['home', 'product', 'pricing', 'company'].map(r => (
                <TweakButton key={r}
                  variant={route === r ? 'primary' : 'secondary'}
                  onClick={() => { setRoute(r); window.scrollTo(0, 0); }}>
                  {r}
                </TweakButton>
              ))}
            </div>
          </TweakSection>
        </TweaksPanel>
      )}
    </React.Fragment>
  );
}

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