// AirStep — Root app

const App = () => {
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [checkoutOpen, setCheckoutOpen] = React.useState(false);
  const [order, setOrder] = React.useState(null);
  const [successOpen, setSuccessOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 700);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const addToCart = (line) => {
    setCart(prev => {
      // merge same size
      const idx = prev.findIndex(p => p.size === line.size);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], qty: Math.min(9, next[idx].qty + line.qty) };
        return next;
      }
      return [...prev, line];
    });
    setCartOpen(true);
  };

  const removeItem = (i) => setCart(prev => prev.filter((_, idx) => idx !== i));

  const startCheckout = () => {
    setCartOpen(false);
    setTimeout(() => setCheckoutOpen(true), 250);
  };

  const finishOrder = (orderData) => {
    setOrder(orderData);
    setCheckoutOpen(false);
    setTimeout(() => {
      setSuccessOpen(true);
      setCart([]);
    }, 250);
  };

  const closeSuccess = () => {
    setSuccessOpen(false);
    setTimeout(() => setOrder(null), 300);
  };

  const scrollToBuy = () => {
    const el = document.getElementById("buy");
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };

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

  return (
    <>
      <AnnounceBar/>
      <Nav cartCount={cartCount} onCart={()=>setCartOpen(true)}/>
      <Hero onBuy={scrollToBuy}/>
      {/* Trust first — instant credibility before features */}
      <TrustStrip/>
      {/* Problem framing — primary audience (diabetes), then broaden */}
      <DiabetesFocus/>
      <Problem/>
      {/* Solution — at-a-glance icons, then deep technical spec */}
      <QuickBenefits/>
      <Anatomy/>
      {/* Proof — clinical then social */}
      <Evidence/>
      <Reviews/>
      <Compare/>
      <BuyBlock onAddToCart={addToCart}/>
      <FAQ/>
      <Footer/>

      <StickyBuy show={scrolled && !cartOpen && !checkoutOpen && !successOpen} onBuy={scrollToBuy}/>

      <CartDrawer
        open={cartOpen}
        onClose={()=>setCartOpen(false)}
        cart={cart}
        removeItem={removeItem}
        onCheckout={startCheckout}/>

      <CheckoutDrawer
        open={checkoutOpen}
        onClose={()=>setCheckoutOpen(false)}
        cart={cart}
        onSuccess={finishOrder}/>

      <SuccessDrawer
        open={successOpen}
        onClose={closeSuccess}
        order={order}/>
    </>
  );
};

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