/* global React, Icons */
const { useState: useStateD, useMemo: useMemoD, useEffect: useEffectD } = React;

// ─── HOMEPAGE ──────────────────────────────────────────────
function HomePage() {
  const { products, formatIDR } = useStore();
  const { navigate } = useRouter();
  const featured = products.slice(0, 8);
  const editors = products.filter((p) => ["p09", "p03", "p05"].includes(p.id));

  return React.createElement("div", { className: "fade-in" },
    // HERO
    React.createElement("section", {
      style: {
        position: "relative", overflow: "hidden",
        background: "var(--graycool-50)",
      }
    },
      React.createElement("div", { className: "container", style: { display: "grid", gridTemplateColumns: "1fr", gap: 48, padding: "56px 32px 0", alignItems: "center" } },
        React.createElement("div", { style: { padding: "24px 0" } },
          React.createElement("span", { className: "badge badge-brand", style: { marginBottom: 20 } }, "Autumn 2026 — new arrivals"),
          React.createElement("h1", { className: "display-lg", style: { margin: "16px 0 16px", maxWidth: 560, fontSize: "clamp(40px, 6vw, 64px)", lineHeight: 1.05 } },
            "Wardrobe staples, ",
            React.createElement("em", { style: { fontStyle: "normal", color: "var(--brand-500)" } }, "made to outlast the trend."),
          ),
          React.createElement("p", { style: { fontSize: 18, lineHeight: "28px", color: "var(--graycool-600)", maxWidth: 480, marginBottom: 28 } },
            "Small-batch cuts in natural fibres. Considered, versatile, and built to be worn for years."),
          React.createElement("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" } },
            React.createElement(Button, { variant: "primary", size: "xl", onClick: () => navigate("/shop"), iconRight: React.createElement(Icons.ArrowRight, { size: 18 }) }, "Shop the collection"),
            React.createElement(Button, { variant: "secondary", size: "xl", onClick: () => navigate("/shop?col=Autumn") }, "Autumn drop")
          ),
          React.createElement("div", { style: { display: "flex", gap: 24, marginTop: 40, flexWrap: "wrap" } },
            [
              { I: Icons.Truck, t: "Free express over Rp 1jt" },
              { I: Icons.Undo, t: "30-day returns" },
              { I: Icons.ShieldCheck, t: "Secured checkout" },
            ].map(({ I, t }) =>
              React.createElement("div", { key: t, style: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--graycool-600)" } },
                React.createElement(I, { size: 16, style: { color: "var(--brand-500)" } }), t
              )
            )
          )
        ),
        React.createElement("div", { style: { position: "relative", aspectRatio: "4/5", maxHeight: 620, borderRadius: 20, overflow: "hidden", boxShadow: "var(--shadow-2xl)" } },
          React.createElement("img", { src: products[4].images[0], alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } }),
          React.createElement("div", {
            style: {
              position: "absolute", left: 20, bottom: 20,
              background: "rgba(255,255,255,0.92)", backdropFilter: "blur(10px)",
              padding: "12px 16px", borderRadius: 14, display: "flex", alignItems: "center", gap: 12, cursor: "pointer",
            },
            onClick: () => navigate(`/product/${products[4].id}`),
          },
            React.createElement("div", { style: { width: 44, height: 44, borderRadius: 10, overflow: "hidden" } },
              React.createElement("img", { src: products[4].images[0], style: { width: "100%", height: "100%", objectFit: "cover" } })
            ),
            React.createElement("div", null,
              React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, "Featured"),
              React.createElement("div", { style: { fontSize: 14, fontWeight: 600 } }, products[4].name),
              React.createElement("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--brand-600)" } }, formatIDR(products[4].price)),
            ),
            React.createElement(Icons.ArrowRight, { size: 18, style: { color: "var(--graycool-500)", marginLeft: 8 } })
          )
        ),
      ),
      React.createElement("style", null, `
        @media (min-width: 900px) {
          section > .container { grid-template-columns: 1fr 1fr !important; padding: 80px 64px !important; }
        }
      `)
    ),

    // CATEGORY TILES
    React.createElement("section", { className: "container", style: { padding: "72px 32px 0" } },
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24, flexWrap: "wrap", gap: 12 } },
        React.createElement("h2", { className: "section-title" }, "Shop by category"),
        React.createElement(Link, { to: "/shop", style: { color: "var(--graycool-600)", fontWeight: 500, fontSize: 14, display: "inline-flex", gap: 4, alignItems: "center" } },
          "View all", React.createElement(Icons.ArrowRight, { size: 14 })
        )
      ),
      React.createElement("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "repeat(2, 1fr)" } },
        [
          { label: "Knitwear", count: 12, img: products[2].images[0], cat: "Knitwear" },
          { label: "Outerwear", count: 8, img: products[5].images[0], cat: "Outerwear" },
          { label: "Dresses", count: 14, img: products[4].images[0], cat: "Dresses" },
          { label: "Accessories", count: 20, img: products[3].images[0], cat: "Accessories" },
        ].map((t) =>
          React.createElement("div", {
            key: t.label,
            onClick: () => navigate(`/shop?cat=${t.cat}`),
            style: { position: "relative", aspectRatio: "4/5", borderRadius: 16, overflow: "hidden", cursor: "pointer", minHeight: 200 }
          },
            React.createElement("img", { src: t.img, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", transition: "transform 400ms" } }),
            React.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55))" } }),
            React.createElement("div", { style: { position: "absolute", left: 16, bottom: 16, color: "#fff" } },
              React.createElement("div", { style: { fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em" } }, t.label),
              React.createElement("div", { style: { fontSize: 13, opacity: 0.85 } }, t.count, " pieces →")
            )
          )
        )
      ),
      React.createElement("style", null, `@media (min-width: 768px) { section.container > div:nth-child(2) { grid-template-columns: repeat(4, 1fr) !important; } }`)
    ),

    // FEATURED PRODUCTS
    React.createElement("section", { className: "container", style: { padding: "72px 32px 0" } },
      React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24, flexWrap: "wrap", gap: 12 } },
        React.createElement("div", null,
          React.createElement("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--brand-500)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 } }, "Just dropped"),
          React.createElement("h2", { className: "section-title" }, "This week's favourites")
        ),
        React.createElement(Button, { variant: "ghost", onClick: () => navigate("/shop"), iconRight: React.createElement(Icons.ArrowRight, { size: 14 }) }, "Shop all")
      ),
      React.createElement("div", { className: "product-grid" },
        featured.map((p) => React.createElement(ProductCard, { key: p.id, product: p }))
      )
    ),

    // EDITOR'S PICKS — editorial strip
    React.createElement("section", { style: { background: "var(--graycool-900)", color: "#fff", padding: "80px 0", marginTop: 96 } },
      React.createElement("div", { className: "container", style: { display: "grid", gap: 48, gridTemplateColumns: "1fr" } },
        React.createElement("div", { style: { maxWidth: 520 } },
          React.createElement("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--secondary-300)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12 } }, "Editor's picks"),
          React.createElement("h2", { className: "display-md", style: { color: "#fff", marginBottom: 16 } }, "Three pieces we'd pack for a weekend away."),
          React.createElement("p", { style: { fontSize: 17, lineHeight: "28px", color: "rgba(255,255,255,0.75)" } },
            "One coat that dresses up, one knit that dresses down, one dress that does both. Everything else, optional.")
        ),
        React.createElement("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "repeat(3, 1fr)" } },
          editors.map((p) =>
            React.createElement("div", { key: p.id, style: { cursor: "pointer" }, onClick: () => navigate(`/product/${p.id}`) },
              React.createElement("div", { style: { aspectRatio: "3/4", borderRadius: 12, overflow: "hidden", marginBottom: 12 } },
                React.createElement("img", { src: p.images[0], style: { width: "100%", height: "100%", objectFit: "cover" } })
              ),
              React.createElement("div", { style: { fontSize: 13, opacity: 0.7 } }, p.category),
              React.createElement("div", { style: { fontSize: 15, fontWeight: 500 } }, p.name),
              React.createElement("div", { style: { fontSize: 14, fontWeight: 600, marginTop: 4 } }, formatIDR(p.price))
            )
          )
        )
      ),
      React.createElement("style", null, `@media (min-width: 900px) { section[style*="graycool-900"] > .container { grid-template-columns: 1fr 1.6fr !important; align-items: center; } }`)
    ),

    // SUSTAINABILITY / TRUST
    React.createElement("section", { className: "container", style: { padding: "96px 32px 0" } },
      React.createElement("div", { style: { display: "grid", gap: 24, gridTemplateColumns: "repeat(1, 1fr)" } },
        [
          { I: Icons.Sparkles, t: "Made in small batches", d: "We produce 80–200 pieces per style, in Bandung and Bologna. No overstock, no waste." },
          { I: Icons.ShieldCheck, t: "Traceable materials", d: "Every fabric lists its mill, its fibre content, and its certifications. Scroll any product." },
          { I: Icons.Heart, t: "Built to be repaired", d: "We'll fix or replace anything that fails within 2 years. Seams, buttons, zips — on us." },
        ].map(({ I, t, d }) =>
          React.createElement("div", { key: t, className: "card", style: { padding: 28 } },
            React.createElement("div", { style: { width: 44, height: 44, borderRadius: 10, background: "var(--brand-50)", color: "var(--brand-600)", display: "grid", placeItems: "center", marginBottom: 16 } },
              React.createElement(I, { size: 22 })
            ),
            React.createElement("h3", { style: { fontSize: 18, fontWeight: 600, margin: "0 0 6px", color: "var(--graycool-900)" } }, t),
            React.createElement("p", { style: { fontSize: 14, lineHeight: "22px", color: "var(--graycool-600)", margin: 0 } }, d)
          )
        )
      ),
      React.createElement("style", null, `@media (min-width: 768px) { section.container > div[style*="grid-template-columns: repeat(1"] { grid-template-columns: repeat(3, 1fr) !important; } }`)
    ),
  );
}

// ─── SHOP / PRODUCT LIST ───────────────────────────────────
function ShopPage() {
  const { products, categories, collections } = useStore();
  const { query, navigate } = useRouter();
  const [sort, setSort] = useStateD("featured");
  const [priceMax, setPriceMax] = useStateD(3000000);
  const [selectedSizes, setSelectedSizes] = useStateD([]);
  const [filtersOpen, setFiltersOpen] = useStateD(false);

  const activeCat = query.cat || "All";
  const activeCol = query.col || "";

  const filtered = useMemoD(() => {
    let list = [...products];
    if (activeCat !== "All") list = list.filter((p) => p.category === activeCat);
    if (activeCol) list = list.filter((p) => p.collection === activeCol);
    list = list.filter((p) => p.price <= priceMax);
    if (selectedSizes.length) list = list.filter((p) => p.sizes.some((s) => selectedSizes.includes(s)));
    if (sort === "price-asc") list.sort((a, b) => a.price - b.price);
    if (sort === "price-desc") list.sort((a, b) => b.price - a.price);
    if (sort === "newest") list.sort((a, b) => (b.tag === "New" ? 1 : 0) - (a.tag === "New" ? 1 : 0));
    if (sort === "rating") list.sort((a, b) => b.rating - a.rating);
    return list;
  }, [products, activeCat, activeCol, priceMax, selectedSizes, sort]);

  const allSizes = ["XS","S","M","L","XL","26","28","30","32","34","38","39","40","41","42","One size"];

  const setCat = (c) => {
    const q = new URLSearchParams();
    if (c !== "All") q.set("cat", c);
    if (activeCol) q.set("col", activeCol);
    navigate(`/shop${q.toString() ? "?" + q.toString() : ""}`);
  };

  return React.createElement("div", { className: "container page fade-in" },
    React.createElement(Breadcrumbs, { items: [{ to: "/", label: "Home" }, { label: activeCat === "All" ? "Shop all" : activeCat }] }),
    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", margin: "20px 0 24px", flexWrap: "wrap", gap: 12 } },
      React.createElement("div", null,
        React.createElement("h1", { className: "section-title" }, activeCat === "All" ? "All pieces" : activeCat),
        React.createElement("p", { style: { color: "var(--graycool-600)", marginTop: 6 } }, filtered.length, " item", filtered.length === 1 ? "" : "s")
      ),
      React.createElement("div", { style: { display: "flex", gap: 8 } },
        React.createElement(Button, { variant: "secondary", size: "sm", icon: React.createElement(Icons.Filter, { size: 16 }), onClick: () => setFiltersOpen((v) => !v) }, "Filters"),
        React.createElement("select", {
          className: "input",
          style: { width: "auto", padding: "8px 12px", fontSize: 14, fontWeight: 500 },
          value: sort, onChange: (e) => setSort(e.target.value),
        },
          React.createElement("option", { value: "featured" }, "Sort: Featured"),
          React.createElement("option", { value: "newest" }, "Newest"),
          React.createElement("option", { value: "price-asc" }, "Price: Low → high"),
          React.createElement("option", { value: "price-desc" }, "Price: High → low"),
          React.createElement("option", { value: "rating" }, "Highest rated"),
        )
      )
    ),
    // Category chips
    React.createElement("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 24, overflowX: "auto", paddingBottom: 4 } },
      categories.map((c) =>
        React.createElement("button", { key: c, className: "chip" + (activeCat === c ? " active" : ""), onClick: () => setCat(c) }, c)
      )
    ),
    // Filters drawer (inline)
    filtersOpen && React.createElement("div", { className: "card", style: { padding: 20, marginBottom: 24, display: "grid", gap: 20, gridTemplateColumns: "1fr" } },
      React.createElement("div", null,
        React.createElement("div", { style: { fontWeight: 600, fontSize: 14, marginBottom: 10 } }, "Max price: ", formatIDR(priceMax)),
        React.createElement("input", { type: "range", min: 200000, max: 3000000, step: 50000, value: priceMax, onChange: (e) => setPriceMax(+e.target.value), style: { width: "100%" } }),
      ),
      React.createElement("div", null,
        React.createElement("div", { style: { fontWeight: 600, fontSize: 14, marginBottom: 10 } }, "Collection"),
        React.createElement("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" } },
          [""].concat(collections).map((c) =>
            React.createElement("button", {
              key: c || "all", className: "chip" + (activeCol === c ? " active" : ""),
              onClick: () => {
                const q = new URLSearchParams();
                if (activeCat !== "All") q.set("cat", activeCat);
                if (c) q.set("col", c);
                navigate(`/shop${q.toString() ? "?" + q.toString() : ""}`);
              },
            }, c || "All seasons")
          )
        )
      ),
      React.createElement("div", null,
        React.createElement("div", { style: { fontWeight: 600, fontSize: 14, marginBottom: 10 } }, "Size"),
        React.createElement("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" } },
          allSizes.map((s) =>
            React.createElement("button", {
              key: s, className: "chip" + (selectedSizes.includes(s) ? " active" : ""),
              onClick: () => setSelectedSizes((prev) => prev.includes(s) ? prev.filter((x) => x !== s) : [...prev, s]),
              style: { padding: "4px 10px", fontSize: 12 }
            }, s)
          )
        )
      ),
    ),
    // Grid
    filtered.length === 0
      ? React.createElement("div", { style: { textAlign: "center", padding: "80px 0", color: "var(--graycool-500)" } },
          React.createElement(Icons.Package, { size: 40, style: { color: "var(--graycool-300)", marginBottom: 12 } }),
          React.createElement("h3", null, "No pieces match those filters"),
          React.createElement("p", null, "Try widening the price range or resetting filters.")
        )
      : React.createElement("div", { className: "product-grid" },
          filtered.map((p) => React.createElement(ProductCard, { key: p.id, product: p }))
        )
  );
}

// ─── SEARCH ────────────────────────────────────────────────
function SearchPage() {
  const { products } = useStore();
  const { query, navigate } = useRouter();
  const [q, setQ] = useStateD(query.q || "");

  useEffectD(() => { setQ(query.q || ""); }, [query.q]);

  const matches = useMemoD(() => {
    if (!query.q) return [];
    const needle = query.q.toLowerCase();
    return products.filter((p) =>
      p.name.toLowerCase().includes(needle) ||
      p.category.toLowerCase().includes(needle) ||
      p.collection.toLowerCase().includes(needle) ||
      p.desc.toLowerCase().includes(needle)
    );
  }, [query.q, products]);

  return React.createElement("div", { className: "container page fade-in" },
    React.createElement(Breadcrumbs, { items: [{ to: "/", label: "Home" }, { label: "Search" }] }),
    React.createElement("form", {
      style: { marginTop: 20, marginBottom: 32, maxWidth: 560 },
      onSubmit: (e) => { e.preventDefault(); navigate(`/search?q=${encodeURIComponent(q)}`); }
    },
      React.createElement("div", { className: "input-group" },
        React.createElement("span", { className: "addon" }, React.createElement(Icons.Search, { size: 18 })),
        React.createElement("input", { className: "input", placeholder: "Search by name, category, collection…", value: q, onChange: (e) => setQ(e.target.value), autoFocus: true })
      )
    ),
    !query.q
      ? React.createElement("div", { style: { color: "var(--graycool-500)" } },
          React.createElement("p", { style: { marginBottom: 16 } }, "Try a popular search:"),
          React.createElement("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" } },
            ["linen dress", "wool coat", "merino", "loafers", "tote"].map((s) =>
              React.createElement("button", { key: s, className: "chip", onClick: () => navigate(`/search?q=${encodeURIComponent(s)}`) }, s)
            )
          )
        )
      : React.createElement(React.Fragment, null,
          React.createElement("div", { style: { marginBottom: 20 } },
            React.createElement("h2", { style: { fontSize: 20, fontWeight: 600, margin: 0 } },
              matches.length, " result", matches.length === 1 ? "" : "s", " for ",
              React.createElement("span", { style: { color: "var(--brand-600)" } }, "\u201C", query.q, "\u201D")
            )
          ),
          matches.length === 0
            ? React.createElement("div", { style: { textAlign: "center", padding: "64px 0", color: "var(--graycool-500)" } },
                React.createElement("p", null, "No matches. Try a broader term."))
            : React.createElement("div", { className: "product-grid" },
                matches.map((p) => React.createElement(ProductCard, { key: p.id, product: p }))
              )
        )
  );
}

// ─── PRODUCT DETAIL ────────────────────────────────────────
function ProductPage() {
  const { products, addToCart, toggleWishlist, wishlist, formatIDR } = useStore();
  const { parts, navigate } = useRouter();
  const id = parts[1];
  const product = products.find((p) => p.id === id);

  const [activeImg, setActiveImg] = useStateD(0);
  const [color, setColor] = useStateD(product?.colors[0]);
  const [size, setSize] = useStateD(null);
  const [qty, setQty] = useStateD(1);
  const [openSpec, setOpenSpec] = useStateD(true);

  useEffectD(() => {
    if (product) {
      setActiveImg(0);
      setColor(product.colors[0]);
      setSize(null);
      setQty(1);
    }
  }, [id]);

  if (!product) {
    return React.createElement("div", { className: "container page", style: { textAlign: "center" } },
      React.createElement("h2", null, "Product not found"),
      React.createElement(Button, { variant: "primary", onClick: () => navigate("/shop") }, "Back to shop")
    );
  }

  const faved = wishlist.includes(product.id);
  const related = products.filter((p) => p.id !== product.id && p.category === product.category).slice(0, 4);

  const handleAdd = () => {
    if (!size) { alert("Please pick a size"); return; }
    addToCart(product, { size, color, qty });
  };

  return React.createElement("div", { className: "container page fade-in" },
    React.createElement(Breadcrumbs, { items: [
      { to: "/", label: "Home" },
      { to: `/shop?cat=${product.category}`, label: product.category },
      { label: product.name },
    ] }),
    React.createElement("div", { style: { display: "grid", gap: 48, gridTemplateColumns: "1fr", marginTop: 24 } },
      // GALLERY
      React.createElement("div", null,
        React.createElement("div", { style: { aspectRatio: "4/5", borderRadius: 16, overflow: "hidden", background: "var(--graycool-50)", marginBottom: 12 } },
          React.createElement("img", { src: product.images[activeImg], alt: product.name, style: { width: "100%", height: "100%", objectFit: "cover" } })
        ),
        React.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${product.images.length}, 1fr)`, gap: 10 } },
          product.images.map((src, i) =>
            React.createElement("button", {
              key: i, onClick: () => setActiveImg(i),
              style: {
                aspectRatio: "1/1", borderRadius: 10, overflow: "hidden", border: activeImg === i ? "2px solid var(--graycool-900)" : "1px solid var(--graycool-200)",
                padding: 0, background: "var(--graycool-50)", cursor: "pointer",
              }
            },
              React.createElement("img", { src, style: { width: "100%", height: "100%", objectFit: "cover" } })
            )
          )
        )
      ),
      // DETAILS
      React.createElement("div", null,
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 10 } },
          React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 500 } }, product.category),
          product.tag && React.createElement("span", { className: `badge ${product.tag === "New" ? "badge-brand" : product.tag === "Low stock" ? "badge-warning" : "badge-dark"}` }, product.tag),
        ),
        React.createElement("h1", { className: "display-xs", style: { fontSize: 28, margin: "0 0 8px" } }, product.name),
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8, color: "var(--graycool-600)", fontSize: 14, marginBottom: 16 } },
          React.createElement("div", { style: { display: "flex", gap: 2, color: "var(--warning-500)" } },
            [...Array(5)].map((_, i) =>
              React.createElement(Icons.Star, { key: i, size: 14, style: { fill: i < Math.round(product.rating) ? "currentColor" : "none" } })
            )
          ),
          React.createElement("span", null, product.rating, " · ", product.reviews, " reviews")
        ),
        React.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 10, marginBottom: 24 } },
          React.createElement("span", { style: { fontSize: 28, fontWeight: 600, color: "var(--graycool-900)" } }, formatIDR(product.price)),
          product.priceOld && React.createElement(React.Fragment, null,
            React.createElement("span", { style: { fontSize: 16, color: "var(--graycool-400)", textDecoration: "line-through" } }, formatIDR(product.priceOld)),
            React.createElement("span", { className: "badge badge-error" }, "Save ", formatIDR(product.priceOld - product.price))
          )
        ),
        React.createElement("p", { style: { color: "var(--graycool-600)", lineHeight: "24px", marginBottom: 24 } }, product.desc),
        // COLOR
        React.createElement("div", { style: { marginBottom: 20 } },
          React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10 } },
            React.createElement("div", { style: { fontSize: 14, fontWeight: 500, color: "var(--graycool-700)" } }, "Colour"),
            React.createElement("div", { style: { fontSize: 14, color: "var(--graycool-500)" } }, color?.name)
          ),
          React.createElement("div", { style: { display: "flex", gap: 10 } },
            product.colors.map((c) =>
              React.createElement("button", {
                key: c.name, onClick: () => setColor(c),
                "aria-label": c.name,
                style: {
                  width: 36, height: 36, borderRadius: 9999,
                  background: c.hex, border: "2px solid #fff",
                  boxShadow: color?.name === c.name ? "0 0 0 2px var(--graycool-900)" : "0 0 0 1px var(--graycool-200)",
                  cursor: "pointer",
                }
              })
            )
          )
        ),
        // SIZE
        React.createElement("div", { style: { marginBottom: 24 } },
          React.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10 } },
            React.createElement("div", { style: { fontSize: 14, fontWeight: 500, color: "var(--graycool-700)" } }, "Size"),
            React.createElement("a", { style: { fontSize: 14, color: "var(--brand-600)", cursor: "pointer" } }, "Size guide")
          ),
          React.createElement("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" } },
            product.sizes.map((s) =>
              React.createElement("button", {
                key: s, onClick: () => setSize(s),
                style: {
                  minWidth: 52, padding: "10px 14px",
                  borderRadius: "var(--radius-md)",
                  border: size === s ? "1px solid var(--graycool-900)" : "1px solid var(--graycool-200)",
                  background: size === s ? "var(--graycool-900)" : "#fff",
                  color: size === s ? "#fff" : "var(--graycool-800)",
                  fontSize: 14, fontWeight: 500, cursor: "pointer",
                }
              }, s)
            )
          )
        ),
        // STOCK & QTY
        React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 24, flexWrap: "wrap" } },
          React.createElement(Stepper, { value: qty, onChange: setQty, max: product.stock }),
          React.createElement("span", { style: { fontSize: 13, color: product.stock <= 5 ? "var(--warning-700)" : "var(--success-700)", display: "inline-flex", alignItems: "center", gap: 6 } },
            React.createElement("span", { style: { width: 8, height: 8, borderRadius: 9999, background: product.stock <= 5 ? "var(--warning-400)" : "var(--success-400)" } }),
            product.stock <= 5 ? `Only ${product.stock} left` : `In stock — ships in 1–2 days`
          )
        ),
        // CTA
        React.createElement("div", { style: { display: "flex", gap: 10, marginBottom: 28 } },
          React.createElement(Button, { variant: "primary", size: "xl", block: true, onClick: handleAdd, icon: React.createElement(Icons.ShoppingBag, { size: 18 }) },
            "Add to bag — ", formatIDR(product.price * qty)
          ),
          React.createElement(Button, {
            variant: "secondary", size: "xl",
            className: "btn-icon",
            onClick: () => toggleWishlist(product.id),
            "aria-label": "Wishlist",
          },
            React.createElement(Icons.Heart, { size: 18, style: faved ? { color: "var(--error-500)", fill: "currentColor" } : {} })
          )
        ),
        // TRUST BAR
        React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, padding: "16px 0", borderTop: "1px solid var(--graycool-100)", borderBottom: "1px solid var(--graycool-100)", marginBottom: 24 } },
          [
            [Icons.Truck, "Free express", "Over Rp 1jt"],
            [Icons.Undo, "30-day returns", "No questions"],
            [Icons.ShieldCheck, "2-yr repair", "On us"],
          ].map(([I, t, d]) =>
            React.createElement("div", { key: t, style: { display: "flex", gap: 10 } },
              React.createElement(I, { size: 18, style: { color: "var(--brand-500)", flexShrink: 0, marginTop: 2 } }),
              React.createElement("div", null,
                React.createElement("div", { style: { fontSize: 13, fontWeight: 600 } }, t),
                React.createElement("div", { style: { fontSize: 12, color: "var(--graycool-500)" } }, d),
              )
            )
          )
        ),
        // SPECS
        React.createElement("div", { className: "card-flat" },
          React.createElement("button", {
            onClick: () => setOpenSpec((v) => !v),
            style: { width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", padding: 16, background: "transparent", border: 0, cursor: "pointer", fontWeight: 600, fontSize: 15, color: "var(--graycool-900)" }
          },
            "Details & specs",
            React.createElement(Icons.ChevronDown, { size: 18, style: { transform: openSpec ? "rotate(180deg)" : "none", transition: "transform 200ms" } })
          ),
          openSpec && React.createElement("div", { style: { padding: "0 16px 16px" } },
            React.createElement("table", { style: { width: "100%", fontSize: 14 } },
              React.createElement("tbody", null,
                product.specs.map(([k, v]) =>
                  React.createElement("tr", { key: k, style: { borderTop: "1px solid var(--graycool-100)" } },
                    React.createElement("td", { style: { padding: "10px 0", color: "var(--graycool-500)", width: 140 } }, k),
                    React.createElement("td", { style: { padding: "10px 0", color: "var(--graycool-900)" } }, v)
                  )
                )
              )
            )
          )
        )
      ),
      React.createElement("style", null, `@media (min-width: 900px) { .container.page > div[style*="grid-template-columns: 1fr"] { grid-template-columns: 1.1fr 1fr !important; gap: 64px !important; } }`)
    ),
    // RELATED
    related.length > 0 && React.createElement("section", { style: { marginTop: 96 } },
      React.createElement("h2", { className: "section-title", style: { marginBottom: 24 } }, "You may also like"),
      React.createElement("div", { className: "product-grid" },
        related.map((p) => React.createElement(ProductCard, { key: p.id, product: p }))
      )
    )
  );
}

Object.assign(window, { HomePage, ShopPage, SearchPage, ProductPage });