/* Rotunda — App root with routing */
const { useState: _useStateApp, useEffect: _useEffectApp, useCallback: _useCBApp, useRef: _useRefApp } = React;

/* ============ NAV ============ */
function Nav({ onNavigate, cartCount, transparent }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  _useEffectApp(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, []);

  const go = (view, sub) => {setMobileOpen(false);onNavigate(view, sub);};

  return (
    <nav className={`nav ${scrolled || !transparent ? "nav--solid" : ""}`}>
      <a className="nav-logo" href="#" onClick={(e) => {e.preventDefault();go("home");}}>
        <img src="logo-white.png" alt="Rotunda" className="nav-logo-img" style={{ width: "2px", height: "58px" }}></img>
      </a>
      <button className={`nav-burger ${mobileOpen ? "open" : ""}`} onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menú">
        <span></span><span></span><span></span>
      </button>
      <div className={`nav-links ${mobileOpen ? "open" : ""}`}>
        <a href="#inicio" onClick={(e) => {e.preventDefault();go("home");}}>Inicio</a>
        <a href="#catalogo" onClick={(e) => {e.preventDefault();go("catalog", "todas");}}>Catálogo</a>
        <a href="#nosotros" onClick={(e) => {e.preventDefault();go("home");setTimeout(() => {const el = document.getElementById("nosotros");if (el) el.scrollIntoView({ behavior: "smooth" });}, 100);}}>Nosotros</a>
        <a href="#contacto" onClick={(e) => {e.preventDefault();go("home");setTimeout(() => {const el = document.getElementById("contacto");if (el) el.scrollIntoView({ behavior: "smooth" });}, 100);}}>Contacto</a>
        <a href="#" className="nav-cart" onClick={(e) => {e.preventDefault();go("cart");}}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ verticalAlign: "middle", marginRight: "4px" }}><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
          {cartCount > 0 && <span className="cart-badge">{cartCount}</span>}
        </a>
      </div>
    </nav>);

}

/* ============ TOAST ============ */
function Toast({ message, visible }) {
  return <div className={`toast ${visible ? "show" : ""}`}>{message}</div>;
}

/* ============ APP ============ */
function App() {
  const [view, setView] = _useStateApp("home");
  const [subFilter, setSubFilter] = _useStateApp("todas");
  const [selectedProduct, setSelectedProduct] = _useStateApp(null);
  const [cart, setCart] = _useStateApp(getCart());
  const [toast, setToast] = _useStateApp({ msg: "", visible: false });
  const toastTimer = _useRefApp(null);

  const showToast = _useCBApp((msg) => {
    clearTimeout(toastTimer.current);
    setToast({ msg, visible: true });
    toastTimer.current = setTimeout(() => setToast({ msg: "", visible: false }), 2500);
  }, []);

  const navigate = _useCBApp((v, sub) => {
    setView(v);
    if (sub) setSubFilter(sub);
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, []);

  const handleAddToCart = _useCBApp((pid, qty) => {
    const c = addToCart(pid, qty || 1);
    setCart([...c]);
    const p = findProduct(pid);
    showToast(p ? `${p.name} agregado al carrito` : "Agregado al carrito");
  }, [showToast]);

  const handleUpdateQty = _useCBApp((pid, qty) => {
    const c = updateCartQty(pid, qty);
    setCart([...c]);
  }, []);

  const handleRemove = _useCBApp((pid) => {
    const c = removeFromCart(pid);
    setCart([...c]);
  }, []);

  const handleProductClick = _useCBApp((product) => {
    if (typeof product === "string") {
      const p = findProduct(product);
      if (p) {setSelectedProduct(p);setView("product");window.scrollTo({ top: 0, behavior: "smooth" });}
    } else {
      setSelectedProduct(product);
      setView("product");
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  }, []);

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

  return (
    <React.Fragment>
      <Nav onNavigate={navigate} cartCount={cartCount} transparent={isHome}></Nav>
      <Toast message={toast.msg} visible={toast.visible}></Toast>

      {view === "home" &&
      <main>
          <HeroSlideshow onProductClick={handleProductClick} onNavigate={navigate}></HeroSlideshow>
          <Categorias onNavigate={navigate}></Categorias>
          <Nosotros></Nosotros>
          <Confianza></Confianza>
          <Contacto></Contacto>
          <TradeSection></TradeSection>
          <NewsletterBanner></NewsletterBanner>
          <Footer onNavigate={navigate}></Footer>
        </main>
      }

      {view === "catalog" &&
      <main className="main-padded">
          <CatalogView initialFilter={subFilter} onProductClick={handleProductClick} onAddToCart={handleAddToCart}></CatalogView>
          <Footer onNavigate={navigate}></Footer>
        </main>
      }

      {view === "product" &&
      <main className="main-padded">
          <ProductDetail product={selectedProduct} onBack={navigate} onAddToCart={handleAddToCart}></ProductDetail>
          <Footer onNavigate={navigate}></Footer>
        </main>
      }

      {view === "cart" &&
      <main className="main-padded">
          <CartView cart={cart} onUpdateQty={handleUpdateQty} onRemove={handleRemove} onNavigate={navigate}></CartView>
          <Footer onNavigate={navigate}></Footer>
        </main>
      }

      {view === "checkout" &&
      <main className="main-padded">
          <CheckoutView cart={cart} onNavigate={navigate}></CheckoutView>
          <Footer onNavigate={navigate}></Footer>
        </main>
      }
    </React.Fragment>);

}

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