function App() {
  // ---- Tweaks / theme ----
  const [tweaks, setTweaks] = useState(window.__TWEAKS__ || { accent: '#fe6400', dark: false });
  const [tweaksVisible, setTweaksVisible] = useState(false);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.setAttribute('data-theme', tweaks.dark ? 'dark' : 'light');
  }, [tweaks]);

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

  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent?.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // ---- Navigation ----
  const [screen, setScreen] = useState(() => localStorage.getItem('dv_screen') || 'landing');
  const [screenProps, setScreenProps] = useState(() => {
    try { return JSON.parse(localStorage.getItem('dv_screenProps') || '{}'); } catch { return {}; }
  });
  const go = (s, p = {}) => {
    setScreen(s); setScreenProps(p);
    localStorage.setItem('dv_screen', s);
    localStorage.setItem('dv_screenProps', JSON.stringify(p));
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // ---- Cart ----
  const [cart, setCart] = useState(() => {
    try { return JSON.parse(localStorage.getItem('dv_cart')) || []; } catch { return []; }
  });
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [cartBump, setCartBump] = useState(false);

  useEffect(() => { localStorage.setItem('dv_cart', JSON.stringify(cart)); }, [cart]);

  const addToCart = (sku, qty = 1) => {
    setCart(prev => {
      const existing = prev.find(i => i.sku === sku);
      if (existing) return prev.map(i => i.sku === sku ? { ...i, qty: i.qty + qty } : i);
      return [...prev, { sku, qty }];
    });
    setCartBump(true);
    setTimeout(() => setCartBump(false), 500);
  };
  const updateQty = (sku, qty) => {
    if (qty < 1) return setCart(prev => prev.filter(i => i.sku !== sku));
    setCart(prev => prev.map(i => i.sku === sku ? { ...i, qty } : i));
  };
  const removeItem = (sku) => setCart(prev => prev.filter(i => i.sku !== sku));
  const clearCart = () => setCart([]);

  // ---- Render ----
  const cartCount = cart.reduce((s,i) => s + i.qty, 0);
  const showFooter = ['landing', 'catalog'].includes(screen);

  return (
    <div className="app">
      <Topbar
        currentScreen={screen}
        go={go}
        cartCount={cartCount}
        cartBump={cartBump}
        openCart={() => setDrawerOpen(true)}
      />

      <main style={{flex: 1}}>
        {screen === 'landing' && <Landing go={go} addToCart={addToCart} />}
        {screen === 'catalog' && <Catalog go={go} addToCart={addToCart} />}
        {screen === 'product' && <Product go={go} addToCart={addToCart} sku={screenProps.sku} />}
        {screen === 'cart' && (
          <CartPage go={go} cart={cart} updateQty={updateQty} removeItem={removeItem} clearCart={clearCart} />
        )}
      </main>

      {showFooter && <Footer />}

      <CartDrawer
        open={drawerOpen}
        close={() => setDrawerOpen(false)}
        cart={cart}
        updateQty={updateQty}
        removeItem={removeItem}
        go={go}
      />

      {tweaksVisible && (
        <TweaksPanel visible={tweaksVisible} tweaks={tweaks} setTweak={setTweak} />
      )}
    </div>
  );
}

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