function App() {
  const [state, setRawState] = React.useState(window.TWEAK_DEFAULTS);
  const [editMode, setEditMode] = React.useState(false);

  const scrollToHashTarget = React.useCallback(() => {
    const hash = window.location.hash;
    if (!hash) return false;

    const targetId = decodeURIComponent(hash.slice(1));
    const target = document.getElementById(targetId);
    if (!target) return false;

    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    return true;
  }, []);

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

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

  React.useEffect(() => {
    const syncHashScroll = () => {
      const retryDelays = [0, 120, 320, 700];
      retryDelays.forEach((delay) => {
        window.setTimeout(() => {
          scrollToHashTarget();
        }, delay);
      });
    };

    const onHashChange = () => syncHashScroll();
    window.addEventListener('hashchange', onHashChange);

    if (window.location.hash) {
      requestAnimationFrame(syncHashScroll);
    }

    return () => window.removeEventListener('hashchange', onHashChange);
  }, [scrollToHashTarget]);

  // Apply accent color live
  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', state.accent);
    // derive accent-ink (darker) and accent-soft (lighter) from the hex
    // lightweight conversion — for custom colors, use a muted lighter version as soft
    const hex = state.accent.replace('#', '');
    const r = parseInt(hex.substr(0,2), 16), g = parseInt(hex.substr(2,2), 16), b = parseInt(hex.substr(4,2), 16);
    const soft = `rgba(${r},${g},${b},0.12)`;
    const ink = `rgb(${Math.max(0, r - 60)},${Math.max(0, g - 60)},${Math.max(0, b - 60)})`;
    document.documentElement.style.setProperty('--accent-soft', soft);
    document.documentElement.style.setProperty('--accent-ink', ink);
  }, [state.accent]);

  return (
    <React.Fragment>
      <Nav/>
      <main>
        <Hero headline={state.headline} subhead={state.subhead} ctaLabel={state.ctaLabel}/>
        <Problem/>
        <Generations/>
        <IsIsnt/>
        <Platform/>
        <Architecture/>
        <Comparison/>
        <ROI/>
        <FAQ/>
        <CTA ctaLabel={state.ctaLabel}/>
      </main>
      <Footer/>
      <Tweaks state={state} setState={setState} visible={editMode} onClose={() => setEditMode(false)}/>
    </React.Fragment>
  );
}

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