// app.jsx — root, routing, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "clay",
  "heroIntensity": "lively",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('home');
  const [cart, setCart] = React.useState([]);
  const [inquireRug, setInquireRug] = React.useState(null);
  const [flash, setFlash] = React.useState(null);

  // Apply palette + density to <body>
  React.useEffect(() => {
    document.body.dataset.palette = t.palette;
    document.body.dataset.density = t.density;
    // hero speed
    const speedMap = { off:0, calm:0.55, lively:1, eager:1.7 };
    document.documentElement.style.setProperty('--hero-speed', speedMap[t.heroIntensity] ?? 1);
  }, [t.palette, t.density, t.heroIntensity]);

  const go = (r) => { setRoute(r); window.scrollTo({ top:0, behavior:'instant' }); };
  const openInquire = (r) => setInquireRug(r);
  const addToCart = (item) => {
    setCart(c => {
      const existing = c.find(i => i.key === item.key);
      if (existing) return c.map(i => i.key === item.key ? { ...i, qty: i.qty + 1 } : i);
      return [...c, item];
    });
    setFlash(`Reserved: ${item.name}${item.italic ? ' · ' + item.italic : ''}, ${item.size}`);
  };

  const screens = {
    home:    <Home   go={go} openInquire={openInquire} addToCart={addToCart}
                     heroIntensity={t.heroIntensity} />,
    browse:  <Browse go={go} />,
    pdp:     <PDP    go={go} addToCart={addToCart} openInquire={openInquire} />,
    shop:    <Shop />,
    cart:    <Cart   go={go} cart={cart} setCart={setCart} />,
    checkout:<Checkout go={go} cart={cart} setCart={setCart} />,
  };

  return (
    <>
      <Nav route={route} go={go} cartCount={cart.reduce((s,i) => s + i.qty, 0)} />
      <main key={route}>{screens[route]}</main>
      <Footer go={go} />

      {inquireRug && <InquireModal rug={inquireRug} onClose={() => setInquireRug(null)} />}
      {flash && <FlashToast onDone={() => setFlash(null)}>{flash}</FlashToast>}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Palette" value={t.palette}
                    options={['clay', 'moss', 'midnight']}
                    onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Hero" />
        <TweakRadio label="Animation" value={t.heroIntensity}
                    options={['off', 'calm', 'lively', 'eager']}
                    onChange={(v) => setTweak('heroIntensity', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Grid density" value={t.density}
                    options={['compact', 'regular', 'spacious']}
                    onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Jump to" />
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:6 }}>
          {['home','browse','pdp','shop','cart','checkout'].map((r) => (
            <button key={r}
              onClick={() => go(r)}
              style={{
                padding:'8px 10px', borderRadius:6, fontSize:11, letterSpacing:'.06em',
                textTransform:'uppercase', fontFamily:'ui-sans-serif, system-ui',
                background: route === r ? '#29261b' : 'rgba(0,0,0,.05)',
                color: route === r ? '#FAF5EC' : '#29261b',
                border:'1px solid rgba(0,0,0,.08)', cursor:'pointer'
              }}>
              {r}
            </button>
          ))}
        </div>
      </TweaksPanel>
    </>
  );
}

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