// Root App — wires everything up
const DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "primary": "shop",
  "accent": "sky",
  "corp": "section"
}/*EDITMODE-END*/;

function App() {
  const [cartOpen, setCartOpen] = React.useState(false);
  const [cart, setCart] = React.useState([]);
  const [tweaks, setTweaksState] = React.useState(DEFAULTS);
  const [editMode, setEditMode] = React.useState(false);

  React.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);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setTweaks = (partial) => {
    const next = { ...tweaks, ...partial };
    setTweaksState(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: partial }, '*');
  };

  const addToCart = (p) => {
    setCart(prev => {
      const ex = prev.findIndex(x => x.id === p.id);
      if (ex >= 0) {
        const next = [...prev]; next[ex] = { ...next[ex], qty: next[ex].qty + 1 }; return next;
      }
      return [...prev, { id: p.id, name: p.name, price: p.price, qty: 1 }];
    });
    setCartOpen(true);
  };
  const removeFromCart = (i) => setCart(prev => prev.filter((_, j) => j !== i));

  const goShop = () => { document.getElementById('shop').scrollIntoView({ behavior: 'smooth', block: 'start' }); };
  const goClub = () => { document.getElementById('club').scrollIntoView({ behavior: 'smooth', block: 'start' }); };
  const goGift = () => { document.getElementById('gift').scrollIntoView({ behavior: 'smooth', block: 'start' }); };
  const goCorp = () => { document.getElementById('corp').scrollIntoView({ behavior: 'smooth', block: 'start' }); };

  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  return (
    <React.Fragment>
      <Header cartCount={cartCount} onCartClick={() => setCartOpen(true)}/>
      <main>
        <div data-screen-label="Hero">
          <Hero variant={tweaks.hero} onShop={goShop} onGift={goGift}/>
        </div>
        <div data-screen-label="Path split">
          <PathSplit onShop={goShop} onGift={goGift} onClub={goClub} onGiftClub={goGift}/>
        </div>
        <TrustStrip/>
        <div id="shop" data-screen-label="Shop favorites">
          <ShopFavorites onAdd={addToCart}/>
        </div>
        <div id="club" data-screen-label="Cookie Craving Club">
          <CravingClub onJoin={goClub}/>
        </div>
        <div id="gift" data-screen-label="Gifting">
          <Gifting onGift={goGift}/>
        </div>
        <div id="corp" data-screen-label="Corporate / bulk">
          {tweaks.corp === 'banner' ? (
            <section style={{ padding: '32px 0', background: 'var(--brown-900)', color: 'var(--cream-50)' }}>
              <div className="container" style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <Icon name="building" size={22}/>
                  <div>
                    <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>Bulk &amp; Corporate Gifting</div>
                    <div style={{ fontSize: 13, opacity: 0.75 }}>Client thank-yous, new-hire welcomes, holiday mailings.</div>
                  </div>
                </div>
                <button className="btn btn-lg" style={{ background: 'var(--cream-50)', color: 'var(--brown-900)' }}>Request a quote →</button>
              </div>
            </section>
          ) : (
            <Corporate onInquire={goCorp}/>
          )}
        </div>
        <div id="how" data-screen-label="How it works">
          <HowItWorks/>
        </div>
        <FAQ/>
        <FinalCTA onShop={goShop} onClub={goClub} onGift={goGift}/>
      </main>
      <Footer/>

      <CartDrawer open={cartOpen} onClose={() => setCartOpen(false)} items={cart} onRemove={removeFromCart}/>
      <TweakPanel active={editMode} tweaks={tweaks} setTweaks={setTweaks} onClose={() => setEditMode(false)}/>
    </React.Fragment>
  );
}

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