function App() {
  const [state, setStateRaw] = React.useState(window.TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);

  const setState = (patch) => {
    const next = { ...state, ...patch };
    setStateRaw(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
    } catch (e) {}
  };

  // apply theme + font on change
  React.useEffect(() => { applyTheme(state.theme); }, [state.theme]);
  React.useEffect(() => { applyFont(state.font); }, [state.font]);

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

  // apply global body styles reactively
  const dark = state.theme === 'dark';

  return (
    <div className={dark ? 'bg-ink-900 text-paper-0' : 'bg-paper-50 text-ink-900'}>
      <style>{`
        body { background: ${THEMES[state.theme].body}; color: ${THEMES[state.theme].ink}; }
        .theme-dark .bg-paper-50 { background: #0B1220 !important; }
        .theme-dark .bg-paper-0 { background: #121A2B !important; }
        .theme-dark .bg-paper-100 { background: #1B2438 !important; }
        .theme-dark .text-ink-900 { color: #F3F3EE !important; }
        .theme-dark .text-ink-700 { color: #C8CEDB !important; }
        .theme-dark .text-ink-600 { color: #A8B0C3 !important; }
        .theme-dark .text-ink-500 { color: #7A869E !important; }
        .theme-dark .ring-ink-900\\/10 { --tw-ring-color: rgba(255,255,255,0.10) !important; }
        .theme-dark .ring-ink-900\\/15 { --tw-ring-color: rgba(255,255,255,0.15) !important; }
        .theme-dark .ring-ink-900\\/8 { --tw-ring-color: rgba(255,255,255,0.08) !important; }
        .theme-dark .border-ink-900\\/8 { border-color: rgba(255,255,255,0.08) !important; }
        .theme-dark .border-ink-900\\/15 { border-color: rgba(255,255,255,0.15) !important; }
        .theme-dark .bg-ink-900 { background: #050912 !important; }
        .theme-dark .text-ink-400 { color: #7A869E !important; }
        .theme-dark .hl-ink { background-image: linear-gradient(transparent 62%, rgba(255,255,255,0.14) 62% 92%, transparent 92%); }

        .theme-cream .bg-paper-50 { background: #F5F1E8 !important; }
        .theme-cream .bg-paper-0 { background: #FBF8F0 !important; }
        .theme-cream .bg-paper-100 { background: #EDE7D8 !important; }
      `}</style>

      <Hero ctaLabel={state.ctaLabel}/>
      <PointsSection/>
      <PromisesSection/>
      <AboutSection/>
      <SamplesSection/>
      <ClosingSection ctaLabel={state.ctaLabel}/>
      <FooterLite/>

      {/* Mobile sticky CTA */}
      <div className="md:hidden fixed bottom-0 inset-x-0 z-40 bg-paper-0/95 backdrop-blur border-t border-ink-900/10 px-4 py-3 sticky-shadow">
        <CtaButton label={state.ctaLabel} size="md"/>
      </div>
      <div className="md:hidden h-20"></div>

      {tweaksOpen && (
        <TweaksPanel state={state} setState={setState} onClose={() => {
          setTweaksOpen(false);
          try { window.parent.postMessage({ type: '__deactivate_edit_mode_request' }, '*'); } catch(e){}
        }}/>
      )}
    </div>
  );
}

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