// brodo-sections.jsx — Header, Hero, Catalog, ProductCard, Footer
(function () {
  const { useState } = React;
  const Icon = window.Icon;
  const { Button, Badge, Price, Rating, ImgPlaceholder } = window;
  const { PRODUCTS, CATEGORIES, formatCLP } = window.BRODO;

  function scrollToId(id) {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 76;
    window.scrollTo({ top, behavior: "smooth" });
  }

  // ===================== HEADER =====================
  function Header() {
    const cart = window.useCart();
    const [menuOpen, setMenuOpen] = useState(false);
    const links = [["Packs", "packs"], ["Moldes", "individuales"], ["Bolsas", "individuales"], ["Organización", "individuales"]];
    return React.createElement("header",
      { className: "sticky top-0 z-40 bg-paper/85 backdrop-blur-md border-b border-line" },
      React.createElement("div", { className: "mx-auto max-w-[1200px] px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4" },
        // left: menu (mobile) + logo
        React.createElement("div", { className: "flex items-center gap-3" },
          React.createElement("button", { className: "md:hidden -ml-1 p-2 text-ink", onClick: () => setMenuOpen((o) => !o), "aria-label": "Menú" },
            React.createElement(Icon, { name: menuOpen ? "X" : "Menu", size: 22 })),
          React.createElement("a", { href: "#", onClick: (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); },
            className: "font-display font-extrabold text-[26px] leading-none text-ink tracking-tight flex items-center gap-1.5" },
            React.createElement("span", { className: "w-2.5 h-2.5 rounded-full bg-brand inline-block mb-0.5" }),
            "brodo")),
        // center nav
        React.createElement("nav", { className: "hidden md:flex items-center gap-1" },
          links.map(([label, id], i) => React.createElement("button", {
            key: i, onClick: () => scrollToId(id),
            className: "px-3.5 py-2 rounded-full font-body font-bold text-[15px] text-ink/75 hover:text-ink hover:bg-ink/[0.05] transition-colors",
          }, label))),
        // right icons
        React.createElement("div", { className: "flex items-center gap-1" },
          React.createElement("button", { className: "p-2.5 text-ink/80 hover:text-ink rounded-full hover:bg-ink/[0.05] transition-colors hidden sm:grid place-items-center", "aria-label": "Buscar" },
            React.createElement(Icon, { name: "Search", size: 20 })),
          React.createElement("button", { className: "p-2.5 text-ink/80 hover:text-ink rounded-full hover:bg-ink/[0.05] transition-colors hidden sm:grid place-items-center", "aria-label": "Cuenta" },
            React.createElement(Icon, { name: "User", size: 20 })),
          React.createElement("button", {
            onClick: () => cart.setDrawerOpen(true),
            className: "relative p-2.5 text-ink hover:bg-ink/[0.05] rounded-full transition-colors",
            "aria-label": "Carrito",
          },
            React.createElement(Icon, { name: "ShoppingCart", size: 22 }),
            cart.count > 0 ? React.createElement("span", {
              className: "absolute -top-0.5 -right-0.5 min-w-[20px] h-5 px-1 grid place-items-center bg-brand-2 text-white text-[11px] font-extrabold rounded-full ring-2 ring-paper brodo-pop",
              key: cart.count,
            }, cart.count) : null))),
      // mobile menu
      menuOpen ? React.createElement("div", { className: "md:hidden border-t border-line bg-paper px-4 py-2" },
        links.map(([label, id], i) => React.createElement("button", {
          key: i, onClick: () => { setMenuOpen(false); scrollToId(id); },
          className: "block w-full text-left px-2 py-3 font-body font-bold text-ink border-b border-line/60 last:border-0",
        }, label))) : null);
  }

  // ===================== HERO =====================
  function Hero() {
    return React.createElement("section", { className: "relative overflow-hidden" },
      React.createElement("div", { className: "mx-auto max-w-[1200px] px-4 sm:px-6 pt-10 pb-8 sm:pt-16 sm:pb-14 grid lg:grid-cols-2 gap-8 lg:gap-10 items-center" },
        // copy
        React.createElement("div", { className: "order-1 text-center lg:text-left" },
          React.createElement("div", { className: "inline-flex" }, React.createElement(Badge, { tone: "soft" },
            React.createElement(Icon, { name: "Leaf", size: 13 }), "meal-prep simple")),
          React.createElement("h1", { className: "font-display font-extrabold text-ink mt-4 leading-[0.92] tracking-[-0.02em] text-[clamp(2.8rem,8vw,5.2rem)]" },
            "Congela ",
            React.createElement("span", { className: "relative whitespace-nowrap" },
              React.createElement("span", { className: "relative z-10" }, "como pro"),
              React.createElement("span", { className: "absolute left-0 right-0 bottom-1 h-[0.34em] bg-brand -z-0 rounded-sm" })),
            "."),
          React.createElement("p", { className: "mt-5 text-lg text-sub font-body max-w-md mx-auto lg:mx-0 leading-relaxed" },
            "Moldes, bolsas y organización premium para preparar tu semana en minutos — y que tu refri se vea increíble."),
          React.createElement("div", { className: "mt-7 flex flex-col sm:flex-row gap-3 justify-center lg:justify-start" },
            React.createElement(Button, { size: "lg", onClick: () => scrollToId("packs") }, "Ver Packs", React.createElement(Icon, { name: "ArrowRight", size: 18 })),
            React.createElement(Button, { size: "lg", variant: "ghost", onClick: () => scrollToId("individuales") }, "Comprar ahora")),
          React.createElement("div", { className: "mt-7 flex flex-wrap gap-x-5 gap-y-2 justify-center lg:justify-start text-sm font-body font-bold text-sub" },
            [["Star", "4.9 · 2.1k reseñas"], ["Truck", "Envío 24h"], ["Leaf", "Libre de BPA"]].map(([ic, t], i) =>
              React.createElement("span", { key: i, className: "inline-flex items-center gap-1.5" },
                React.createElement(Icon, { name: ic, size: 16, className: "text-brand-2" }), t)))),
        // visual
        React.createElement("div", { className: "order-2 relative" },
          React.createElement(ImgPlaceholder, { img: "kit", photo: "assets/products/hero.png", alt: "Bandeja de meal-prep Brodo vaciándose en una olla", className: "w-full h-[280px] sm:h-[380px] lg:h-[460px]", iconSize: 86, rounded: "var(--radius-lg)" }),
          React.createElement("div", { className: "absolute -bottom-4 -left-3 sm:left-6 bg-surface rounded-[var(--radius)] shadow-xl border border-line px-4 py-3 flex items-center gap-3" },
            React.createElement("span", { className: "w-10 h-10 grid place-items-center rounded-full bg-[var(--brand-soft)] text-ink" }, React.createElement(Icon, { name: "Snowflake", size: 20 })),
            React.createElement("div", null,
              React.createElement("div", { className: "font-display font-extrabold text-ink leading-none" }, "−40%"),
              React.createElement("div", { className: "text-xs text-sub font-body" }, "menos desperdicio"))))));
  }

  // ===================== PRODUCT CARD =====================
  function ProductCard({ product }) {
    const cart = window.useCart();
    const hasOptions = product.options && product.options.length > 0;
    function onAdd(e) {
      e.stopPropagation();
      if (hasOptions) { cart.setQuickView(product); return; }
      cart.add(product, {}, 1);
    }
    return React.createElement("div", {
      onClick: () => cart.setQuickView(product),
      className: "group relative flex flex-col bg-surface rounded-[var(--radius-lg)] border border-line p-[var(--card-pad)] cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-xl hover:border-ink/10",
    },
      React.createElement("div", { className: "relative" },
        React.createElement(ImgPlaceholder, { img: product.img, photo: product.photo, alt: product.name, className: "aspect-square w-full", iconSize: 44 }),
        product.badge ? React.createElement("div", { className: "absolute top-2.5 left-2.5" }, React.createElement(Badge, { tone: product.badge.tone }, product.badge.label)) : null,
        React.createElement("button", { className: "absolute top-2.5 right-2.5 w-9 h-9 grid place-items-center rounded-full bg-paper/80 backdrop-blur text-ink/60 hover:text-brand-2 transition-colors opacity-0 group-hover:opacity-100", onClick: (e) => e.stopPropagation(), "aria-label": "Favorito" },
          React.createElement(Icon, { name: "Heart", size: 17 }))),
      React.createElement("div", { className: "flex-1 flex flex-col pt-3.5" },
        React.createElement("div", { className: "flex items-center justify-between gap-2" },
          React.createElement(Rating, { value: product.rating, reviews: product.reviews, mini: true }),
          hasOptions ? React.createElement("span", { className: "text-[11px] font-body font-bold text-sub/80 uppercase tracking-wide" }, "variantes") : null),
        React.createElement("h3", { className: "font-display font-extrabold text-ink text-lg leading-tight mt-1.5" }, product.name),
        React.createElement("p", { className: "text-sm text-sub font-body mt-1 line-clamp-2" }, product.tagline),
        React.createElement("div", { className: "flex items-end justify-between gap-2 mt-3.5 pt-1" },
          React.createElement(Price, { value: product.price, compareAt: product.compareAt, size: "sm" }),
          React.createElement("button", {
            onClick: onAdd,
            className: "shrink-0 inline-flex items-center gap-1.5 h-10 px-3.5 rounded-[var(--radius-btn)] bg-brand text-ink font-body font-extrabold text-sm transition-all hover:brightness-105 active:scale-95",
          }, React.createElement(Icon, { name: hasOptions ? "Plus" : "ShoppingCart", size: 16 }), hasOptions ? "Elegir" : "Añadir"))));
  }

  // ===================== FEATURED PACK =====================
  function FeaturedPack({ product }) {
    const cart = window.useCart();
    return React.createElement("div", { className: "relative bg-surface rounded-[var(--radius-lg)] border border-line overflow-hidden grid md:grid-cols-2" },
      React.createElement("div", { className: "relative min-h-[260px]" },
        React.createElement(ImgPlaceholder, { img: product.img, photo: product.photo, alt: product.name, className: "absolute inset-0 w-full h-full", iconSize: 96, rounded: "0" }),
        React.createElement("div", { className: "absolute top-4 left-4 flex gap-2" },
          product.badge ? React.createElement(Badge, { tone: product.badge.tone }, product.badge.label) : null,
          product.compareAt ? React.createElement(Badge, { tone: "ink" }, "−" + Math.round((1 - product.price / product.compareAt) * 100) + "%") : null)),
      React.createElement("div", { className: "p-6 sm:p-8 flex flex-col" },
        React.createElement(Rating, { value: product.rating, reviews: product.reviews }),
        React.createElement("h3", { className: "font-display font-extrabold text-ink text-[26px] sm:text-[32px] leading-[1.08] tracking-tight mt-2" }, product.name),
        React.createElement("p", { className: "text-sub font-body mt-2.5" }, product.tagline),
        React.createElement("ul", { className: "mt-4 space-y-2" },
          product.includes.map((inc, i) => React.createElement("li", { key: i, className: "flex items-center gap-2.5 text-ink font-body" },
            React.createElement("span", { className: "w-5 h-5 grid place-items-center rounded-full bg-[var(--brand-soft)] text-ink shrink-0" }, React.createElement(Icon, { name: "Check", size: 13, stroke: 3 })),
            inc))),
        React.createElement("div", { className: "mt-auto pt-6 flex flex-wrap items-center gap-4" },
          React.createElement(Price, { value: product.price, compareAt: product.compareAt, size: "lg" }),
          React.createElement(Button, { size: "lg", className: "ml-auto", onClick: () => cart.setQuickView(product) },
            "Añadir pack", React.createElement(Icon, { name: "ArrowRight", size: 18 })))));
  }

  // ===================== CATALOG =====================
  function Catalog() {
    const [cat, setCat] = useState("Todos");
    const packs = PRODUCTS.filter((p) => p.type === "pack");
    const featured = packs[0];
    const otherPacks = packs.slice(1);
    const individuals = PRODUCTS.filter((p) => p.type === "individual" && (cat === "Todos" || p.category === cat));

    return React.createElement(React.Fragment, null,
      // ---- Packs ----
      React.createElement("section", { id: "packs", className: "mx-auto max-w-[1200px] px-4 sm:px-6 py-12 sm:py-16 scroll-mt-20" },
        React.createElement(SectionHead, { kicker: "Ahorra más", title: "Packs listos para empezar", sub: "Combos pensados para distintos hábitos de meal-prep." }),
        React.createElement("div", { className: "mt-7" }, React.createElement(FeaturedPack, { product: featured })),
        React.createElement("div", { className: "mt-[var(--gap)] grid sm:grid-cols-2 gap-[var(--gap)]" },
          otherPacks.map((p) => React.createElement(ProductCard, { key: p.id, product: p })))),
      // ---- Individuales ----
      React.createElement("section", { id: "individuales", className: "bg-[var(--surface-2)] border-y border-line scroll-mt-20" },
        React.createElement("div", { className: "mx-auto max-w-[1200px] px-4 sm:px-6 py-12 sm:py-16" },
          React.createElement("div", { className: "flex flex-col sm:flex-row sm:items-end justify-between gap-4" },
            React.createElement(SectionHead, { kicker: "Pieza por pieza", title: "Productos individuales", sub: "Arma tu propio set a tu medida." }),
            React.createElement("div", { className: "flex flex-wrap gap-2" },
              CATEGORIES.map((c) => React.createElement("button", {
                key: c, onClick: () => setCat(c),
                className: `px-4 h-10 rounded-full font-body font-bold text-sm transition-all ${cat === c ? "bg-ink text-paper" : "bg-surface ring-1 ring-line text-ink/75 hover:ring-ink/30"}`,
              }, c)))),
          React.createElement("div", { className: "mt-7 grid grid-cols-2 lg:grid-cols-3 gap-[var(--gap)]" },
            individuals.map((p) => React.createElement(ProductCard, { key: p.id, product: p }))))));
  }

  function SectionHead({ kicker, title, sub }) {
    return React.createElement("div", null,
      React.createElement("div", { className: "font-body font-extrabold text-brand-2 uppercase tracking-[0.12em] text-xs" }, kicker),
      React.createElement("h2", { className: "font-display font-extrabold text-ink text-[30px] sm:text-[40px] leading-[1.04] tracking-tight mt-1.5" }, title),
      sub ? React.createElement("p", { className: "text-sub font-body mt-2 max-w-md" }, sub) : null);
  }

  // ===================== FOOTER =====================
  function Footer() {
    return React.createElement("footer", { className: "mx-auto max-w-[1200px] px-4 sm:px-6 py-14" },
      React.createElement("div", { className: "rounded-[var(--radius-lg)] bg-ink text-paper p-8 sm:p-12 relative overflow-hidden" },
        React.createElement("div", { className: "relative z-10 max-w-lg" },
          React.createElement("h3", { className: "font-display font-extrabold text-[28px] sm:text-[36px] leading-tight" }, "Tu refri, en orden esta semana."),
          React.createElement("p", { className: "text-paper/70 font-body mt-3" }, "Suma un pack y recibe la guía Brodo de meal-prep gratis."),
          React.createElement("div", { className: "mt-6 flex flex-col sm:flex-row gap-3" },
            React.createElement(Button, { size: "lg", onClick: () => scrollToId("packs") }, "Ver Packs", React.createElement(Icon, { name: "ArrowRight", size: 18 })),
            React.createElement(Button, { size: "lg", variant: "dark", className: "ring-1 ring-paper/20", onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }) }, "Volver arriba"))),
        React.createElement("span", { className: "absolute -right-10 -bottom-12 w-56 h-56 rounded-full bg-brand/20 blur-2xl" }),
        React.createElement("span", { className: "absolute right-10 top-8 text-brand/30" }, React.createElement(Icon, { name: "Snowflake", size: 120, stroke: 1 }))),
      React.createElement("div", { className: "mt-8 flex flex-col sm:flex-row items-center justify-between gap-3 text-sub font-body text-sm" },
        React.createElement("div", { className: "font-display font-extrabold text-ink text-lg" }, "brodo"),
        React.createElement("div", null, "© 2026 Brodo · brodo.cl — prototipo")));
  }

  Object.assign(window, { Header, Hero, Catalog, Footer });
})();