// App shell — routing, cart state, slide-in cart drawer
function App() {
  const { Icon, Header, Footer, HomeScreen, ShopScreen, ProductScreen, AboutScreen, QualityScreen, EspaceProScreen } = window;
  const { Button } = window.SinopharmaDesignSystem_d11735;
  const [route, setRoute] = React.useState('home');
  const [current, setCurrent] = React.useState(null);
  const [cart, setCart] = React.useState([]);
  const [drawer, setDrawer] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 760);
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 760);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const nav = (r) => { setRoute(r); window.scrollTo(0, 0); };
  const open = (p) => { setCurrent(p); setRoute('product'); window.scrollTo(0, 0); };
  const add = (p, qty = 1) => {
    setCart((c) => {
      const ex = c.find((i) => i.id === p.id);
      if (ex) return c.map((i) => i.id === p.id ? { ...i, qty: i.qty + qty } : i);
      return [...c, { ...p, qty }];
    });
    setDrawer(true);
  };
  const remove = (id) => setCart((c) => c.filter((i) => i.id !== id));
  const count = cart.reduce((n, i) => n + i.qty, 0);
  const total = cart.reduce((n, i) => n + parseFloat(i.price.replace(',', '.')) * i.qty, 0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <Header cartCount={count} onNav={nav} onCart={() => setDrawer(true)} active={route} mobile={isMobile} />
      {route === 'home' && <HomeScreen onNav={nav} onAdd={add} onOpen={open} m={isMobile} />}
      {route === 'shop' && <ShopScreen onAdd={add} onOpen={open} />}
      {route === 'about' && <AboutScreen m={isMobile} onNav={nav} />}
      {route === 'quality' && <QualityScreen m={isMobile} onNav={nav} />}
      {route === 'pro' && <EspaceProScreen m={isMobile} onNav={nav} />}
      {route === 'product' && current && <ProductScreen product={current} onAdd={add} onOpen={open} onNav={nav} />}
      <Footer mobile={isMobile} />

      {/* CART DRAWER */}
      {drawer ? (
        <div style={{ position: 'fixed', inset: 0, zIndex: 60 }}>
          <div onClick={() => setDrawer(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(35,42,32,0.42)', backdropFilter: 'blur(2px)' }} />
          <aside style={{ position: 'absolute', top: 0, right: 0, height: '100%', width: 408, maxWidth: '92vw', background: 'var(--cream-50)', boxShadow: 'var(--shadow-lg)', display: 'flex', flexDirection: 'column', transform: 'translateX(0)', animation: 'spSlide var(--dur-base) var(--ease-out)' }}>
            <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--gray-900)', display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                <Icon name="shopping-bag" size={20} color="var(--green-600)" /> Panier · {count}
              </span>
              <button onClick={() => setDrawer(false)} style={{ width: 38, height: 38, border: 'none', background: 'transparent', color: 'var(--gray-700)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="x" size={20} /></button>
            </div>
            <div style={{ flex: 1, overflowY: 'auto', padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {cart.length === 0 ? (
                <div style={{ textAlign: 'center', color: 'var(--gray-500)', padding: '60px 20px' }}>
                  <Icon name="leaf" size={40} color="var(--sage-400)" />
                  <p style={{ marginTop: 14 }}>Votre panier est vide.</p>
                </div>
              ) : cart.map((i) => (
                <div key={i.id} style={{ display: 'flex', gap: 14, background: 'var(--surface-card)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', padding: 12 }}>
                  <div style={{ width: 62, height: 62, borderRadius: 'var(--radius-sm)', background: 'var(--wave-sage)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="leaf" size={24} color="var(--sage-600)" />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 600, color: 'var(--gray-900)' }}>{i.name}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--gray-500)', fontStyle: 'italic', fontFamily: 'var(--font-serif)' }}>{i.latin}</div>
                    <div style={{ marginTop: 6, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <span style={{ fontSize: 13, color: 'var(--gray-600)', fontFamily: 'var(--font-mono)' }}>{i.qty} × {i.price} €</span>
                      <button onClick={() => remove(i.id)} style={{ border: 'none', background: 'transparent', color: 'var(--gray-400)', cursor: 'pointer', display: 'inline-flex' }}><Icon name="trash-2" size={16} /></button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            {cart.length > 0 ? (
              <div style={{ padding: 22, borderTop: '1px solid var(--border-hairline)', background: 'var(--surface-card)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                  <span style={{ color: 'var(--gray-600)', fontSize: 14 }}>Sous-total</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--gray-900)' }}>{total.toFixed(2).replace('.', ',')} €</span>
                </div>
                <p style={{ fontSize: 12.5, color: 'var(--gray-500)', margin: '0 0 14px' }}>Livraison calculée à l'étape suivante.</p>
                <Button variant="primary" size="lg" fullWidth rightIcon={<Icon name="arrow-right" size={18} />}>Commander</Button>
              </div>
            ) : null}
          </aside>
        </div>
      ) : null}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);