// === Mania De Jeans CG — Shop screens (Home, Catalog, Product) ===

const HERO_IMAGES = {
  main: "assets/images/dardak1.jpg",
  detail: "assets/images/dardak2.webp",
  look2: "assets/images/dardak3.jpg",
};

const HOME_CAT_TONES = ["#1f3a6b", "#5a7593", "#2a3e5c", "#4a6586", "#3d5a7a", "#4a6586"];
const HOME_CAT_FALLBACK = [
  "Wide leg", "Pantalona", "Flare", "Boot cut", "Barrel", "Mom", "Skinny", "Cigarrete",
];

const CATEGORY_IMAGES_DIR = "assets/images/categories/";
const CATEGORY_IMAGE_EXTS = ["webp", "png", "jpg", "jpeg"];

function normCategoryName(name) {
  return (name || "")
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase()
    .trim();
}

/** Nomes de arquivo em assets/images/categories/ (sem extensão). */
function categoryImageBases(name) {
  const norm = normCategoryName(name);
  const hyphen = norm.replace(/\s+/g, "-");
  const compact = norm.replace(/\s+/g, "");
  const aliases = {
    skynny: ["skinny"],
  };
  const extra = aliases[norm] || [];
  return [...new Set([compact, hyphen, ...extra])];
}

function categoryImageCandidates(name) {
  const urls = [];
  for (const base of categoryImageBases(name)) {
    for (const ext of CATEGORY_IMAGE_EXTS) {
      urls.push(`${CATEGORY_IMAGES_DIR}${base}.${ext}`);
    }
  }
  return urls;
}

function CatCategoryCard({ categoryId, label, tone, onClick }) {
  const candidates = useMemo(() => categoryImageCandidates(categoryId), [categoryId]);
  const [bgUrl, setBgUrl] = useState(null);
  const [tryIdx, setTryIdx] = useState(0);

  useEffect(() => {
    setBgUrl(null);
    setTryIdx(0);
  }, [categoryId]);

  useEffect(() => {
    if (tryIdx >= candidates.length) return;
    const img = new Image();
    img.onload = () => setBgUrl(candidates[tryIdx]);
    img.onerror = () => setTryIdx((i) => i + 1);
    img.src = candidates[tryIdx];
    return () => {
      img.onload = null;
      img.onerror = null;
    };
  }, [candidates, tryIdx]);

  return (
    <div className="cat-card" onClick={onClick}>
      <div
        className={"cat-ph" + (bgUrl ? " cat-ph--bg" : "")}
        style={bgUrl ? { backgroundImage: `url("${bgUrl}")` } : undefined}
      >
        {!bgUrl && tryIdx >= candidates.length && (
          <DenimPlaceholder label={label} seed={"cat-" + categoryId} tone={tone}/>
        )}
      </div>
      <div className="cat-label">{label}</div>
    </div>
  );
}

function ScreenHome({ go }) {
  const [catVersion, setCatVersion] = useState(0);
  useEffect(() => {
    if (window.MJ_CATEGORY_NAMES?.length) return;
    const p = window.MJ_loadCatalogLookups?.();
    if (p) p.then(() => setCatVersion((v) => v + 1)).catch(() => {});
  }, []);

  const homeCategories = useMemo(() => {
    void catVersion;
    const names = window.MJ_CATEGORY_NAMES?.length
      ? window.MJ_CATEGORY_NAMES
      : (window.MJ_CATEGORIES || []).map((c) => c.id);
    const list = names.length ? names : HOME_CAT_FALLBACK;
    return list.map((name, i) => ({
      id: name,
      label: name,
      tone: HOME_CAT_TONES[i % HOME_CAT_TONES.length],
    }));
  }, [catVersion]);

  return (
    <div>
      {/* Hero */}
      <section className="hero">
        <div className="hero-inner">
          <div>
            <div className="hero-eyebrow"><span className="line"/> Coleção 26</div>
            <h1>Calças jeans para <em>valorizar</em><br/>o seu estilo.</h1>
            <p>Enviamos para todo o Brasil.</p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={() => go("catalog")}>Ver coleção <Icon.ChevronRight s={16}/></button>
            </div>
          </div>
          <div className="hero-visual">
            <div className="frame tall">
              <img
                className="hero-img"
                src={HERO_IMAGES.main}
                alt="Modelo usando calça wide leg jeans em look casual"
                width="900"
                height="1400"
                loading="eager"
                fetchPriority="high"
              />
            </div>
            <div className="frame">
              <img
                className="hero-img"
                src={HERO_IMAGES.detail}
                alt="Detalhe da textura e lavagem do jeans azul"
                width="700"
                height="700"
                loading="lazy"
              />
            </div>
            <div className="frame">
              <img
                className="hero-img"
                src={HERO_IMAGES.look2}
                alt="Cliente experimentando calça jeans na loja"
                width="700"
                height="700"
                loading="lazy"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="section">
        <div className="section-head">
          <div>
            <span className="eyebrow">Categorias</span>
            <h2>Encontre seu modelo favorito</h2>
          </div>
          <a className="lnk" onClick={() => go("catalog")}>Ver tudo <Icon.ChevronRight s={14}/></a>
        </div>
        <div
          className="cat-grid"
          style={{ "--cat-cols": homeCategories.length }}
        >
          {homeCategories.map((c) => (
            <CatCategoryCard
              key={c.id}
              categoryId={c.id}
              label={c.label}
              tone={c.tone}
              onClick={() => go("catalog", { category: c.id })}
            />
          ))}
        </div>
      </section>

      {/* Benefits strip */}
      <section className="strip strip--footer">
        <div className="strip-inner">
          <div className="strip-item">
            <div className="ic"><Icon.Truck s={18}/></div>
            <div className="tx"><div className="t">Entregamos para todo Brasil</div></div>
          </div>
          <div className="strip-item">
            <div className="ic"><Icon.Shield s={18}/></div>
            <div className="tx"><div className="t">Compra 100% segura</div></div>
          </div>
          <div className="strip-item">
            <div className="ic"><Icon.WhatsApp s={18}/></div>
            <div className="tx"><div className="t">Atendimento WhatsApp</div></div>
          </div>
        </div>
      </section>

      {/* Novelties, Why us and Reviews removed by request */}
    </div>
  );
}

// === Catalog ===
function ScreenCatalog({ route, go, addToCart, fav, toggleFav, cardStyle, density, toast }) {
  const all = window.MJ_PRODUCTS;
  const [filters, setFilters] = useState({
    category: route.params?.category ? [route.params.category] : [],
    sizes: [],
    colors: [],
    promo: !!route.params?.promo,
  });
  const [sort, setSort] = useState("recent");
  const [openFilter, setOpenFilter] = useState(null);

  useEffect(() => {
    setFilters(f => ({
      ...f,
      category: route.params?.category ? [route.params.category] : [],
      promo: !!route.params?.promo,
    }));
  }, [route.params?.category, route.params?.promo]);

  const filtered = useMemo(() => {
    let r = all.filter(p => {
      if (filters.category.length && !filters.category.includes(p.category)) return false;
      if (filters.colors.length && !filters.colors.includes(p.wash)) return false;
      if (filters.sizes.length && !filters.sizes.some(s => p.stock[s] > 0)) return false;
      if (filters.promo && !p.isPromo) return false;
      return true;
    });
    if (sort === "lowprice") r = [...r].sort((a, b) => a.price - b.price);
    else if (sort === "highprice") r = [...r].sort((a, b) => b.price - a.price);
    else if (sort === "recent") r = [...r].sort((a, b) => (b.isNew - a.isNew));
    return r;
  }, [filters, sort]);

  const toggle = (key, value) => {
    setFilters(f => {
      const cur = f[key];
      if (cur.includes(value)) return { ...f, [key]: cur.filter(v => v !== value) };
      return { ...f, [key]: [...cur, value] };
    });
  };

  const clearAll = () => setFilters({ category: [], sizes: [], colors: [], promo: false });

  const activeFiltersCount = filters.category.length + filters.sizes.length + filters.colors.length + (filters.promo ? 1 : 0);

  const activeCategory = route.params?.category || filters.category[0] || null;

  const collectionNav = useMemo(() => {
    const names = window.MJ_CATEGORY_NAMES?.length
      ? window.MJ_CATEGORY_NAMES
      : (window.MJ_CATEGORIES || []).map((c) => c.id);
    const list = names.length ? names : HOME_CAT_FALLBACK;
    return list.map((name) => ({ id: name, label: name }));
  }, []);

  const filterSections = [
    { id: "category", label: "Modelo", count: filters.category.length },
    { id: "sizes", label: "Tamanho", count: filters.sizes.length },
    { id: "colors", label: "Cor / Lavagem", count: filters.colors.length },
  ];

  const toggleFilterMenu = (id) => setOpenFilter((cur) => (cur === id ? null : id));

  return (
    <div className="cat-page">
      <div className="crumbs">
        <a onClick={() => go("home")}><Icon.Home s={12}/></a>
        <span className="sep">/</span>
        <a onClick={() => go("catalog")}>Coleção</a>
        {filters.category[0] && <><span className="sep">/</span><span className="curr">{filters.category[0]}</span></>}
      </div>
      <div className="cat-head">
        <div>
          <h1>{filters.category[0] || (filters.promo ? "Ofertas" : "Toda a coleção")}</h1>
          <div className="meta">{filtered.length} produtos · Modelos femininos selecionados</div>
        </div>
        <div className="toolbar">
          <select className="sort-select" value={sort} onChange={(e) => setSort(e.target.value)}>
            <option value="recent">Mais recentes</option>
            <option value="lowprice">Menor preço</option>
            <option value="highprice">Maior preço</option>
          </select>
        </div>
      </div>

      <div className="collection-nav" role="navigation" aria-label="Categorias da coleção">
        <a
          className={"collection-nav-item" + (!activeCategory && !filters.promo ? " active" : "")}
          onClick={() => go("catalog")}
        >
          Toda a coleção
        </a>
        {collectionNav.map((c) => (
          <a
            key={c.id}
            className={"collection-nav-item" + (activeCategory === c.id ? " active" : "")}
            onClick={() => go("catalog", { category: c.id })}
          >
            {c.label}
          </a>
        ))}
      </div>

      <div className="catalog-filters">
        <div className="filters-menu" role="tablist" aria-label="Filtros do catálogo">
          {filterSections.map((sec) => (
            <button
              key={sec.id}
              type="button"
              role="tab"
              aria-selected={openFilter === sec.id}
              className={"filters-menu-btn" + (openFilter === sec.id ? " on" : "") + (sec.count ? " has-val" : "")}
              onClick={() => toggleFilterMenu(sec.id)}
            >
              {sec.label}
              {sec.count > 0 && <span className="filters-menu-badge">{sec.count}</span>}
              <span className="filters-menu-chevron" aria-hidden="true"><Icon.ChevronRight s={14}/></span>
            </button>
          ))}
          {activeFiltersCount > 0 && (
            <button type="button" className="filters-menu-clear" onClick={clearAll}>Limpar</button>
          )}
        </div>

        {openFilter && (
          <div className="filters-panel" role="tabpanel">
            {openFilter === "category" && (
              <div className="filters-panel-inner filters-panel--models">
                {window.MJ_CATEGORIES.map(c => (
                  <label key={c.id} className="filter-pill">
                    <input type="checkbox" checked={filters.category.includes(c.id)} onChange={() => toggle("category", c.id)}/>
                    <span>{c.label}</span>
                    <span className="cnt">({c.count})</span>
                  </label>
                ))}
              </div>
            )}
            {openFilter === "sizes" && (
              <div className="filters-panel-inner">
                <div className="size-grid size-grid--inline">
                  {window.MJ_SIZES.map(s => (
                    <button key={s} type="button" className={"size-chip" + (filters.sizes.includes(s) ? " on" : "")} onClick={() => toggle("sizes", s)}>{s}</button>
                  ))}
                </div>
              </div>
            )}
            {openFilter === "colors" && (
              <div className="filters-panel-inner">
                <div className="color-grid">
                  {window.MJ_COLORS.map(c => (
                    <button
                      key={c.id}
                      type="button"
                      className={"color-sw" + (filters.colors.includes(c.id) ? " on" : "")}
                      style={{background: c.hex}}
                      onClick={() => toggle("colors", c.id)}
                      aria-label={c.label}
                      title={c.label}
                    />
                  ))}
                </div>
              </div>
            )}
            <button type="button" className="filters-panel-close" onClick={() => setOpenFilter(null)}>
              Ver {filtered.length} produtos
            </button>
          </div>
        )}
      </div>

      {activeFiltersCount > 0 && (
        <div className="applied-filters">
          {filters.category.map(c => (
            <span key={c} className="applied-filter">{c} <button type="button" onClick={() => toggle("category", c)}><Icon.Close s={12}/></button></span>
          ))}
          {filters.sizes.map(s => (
            <span key={s} className="applied-filter">Tam {s} <button type="button" onClick={() => toggle("sizes", s)}><Icon.Close s={12}/></button></span>
          ))}
          {filters.colors.map(c => (
            <span key={c} className="applied-filter">{window.MJ_COLORS.find(x => x.id === c)?.label} <button type="button" onClick={() => toggle("colors", c)}><Icon.Close s={12}/></button></span>
          ))}
          {filters.promo && <span className="applied-filter">Promoção <button type="button" onClick={() => setFilters(f => ({...f, promo: false}))}><Icon.Close s={12}/></button></span>}
          <button type="button" className="applied-clear" onClick={clearAll}>Limpar tudo</button>
        </div>
      )}

      <div className="cat-results">
        {filtered.length === 0 ? (
          <div className="cat-empty">
            <Icon.Search s={40}/>
            <h3>Nenhum produto encontrado</h3>
            <p>Tente ajustar os filtros para ver outras opções.</p>
            <button className="btn btn-outline" onClick={clearAll}>Limpar filtros</button>
          </div>
        ) : (
          <div className={"products " + density}>
            {filtered.map(p => (
              <ProductCard key={p.id} p={p} style={cardStyle} onClick={() => go("product", { id: p.id })} fav={fav} toggleFav={toggleFav}/>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// === Product Page ===
function ScreenProduct({ route, go, addToCart, fav, toggleFav, cardStyle, density, toast, shipping, setShipping }) {
  const p = window.MJ_PRODUCTS.find(x => x.id === route.params?.id) || window.MJ_PRODUCTS[0];
  const [imgIdx, setImgIdx] = useState(0);
  const [size, setSize] = useState(null);
  const [qty, setQty] = useState(1);
  const [showSizeError, setShowSizeError] = useState(false);
  const [tab, setTab] = useState("desc");
  const [cep, setCep] = useState(shipping?.toCep || "");
  const [showGuide, setShowGuide] = useState(false);

  useEffect(() => {
    setImgIdx(0);
    setSize(null);
    setQty(1);
    setShowSizeError(false);
    window.scrollTo(0, 0);
  }, [p.id]);

  const handleAdd = (wpFlow) => {
    if (!size) {
      setShowSizeError(true);
      return;
    }
    addToCart({ productId: p.id, size, qty });
    if (wpFlow) {
      go("whatsapp");
    } else {
      toast(`Adicionado ao carrinho — Tam ${size}`);
    }
  };

  const isFav = fav.includes(p.id);
  const related = window.MJ_PRODUCTS.filter(x => x.id !== p.id && x.category === p.category).slice(0, 4);
  const galleryImages = (p.images || []).filter((src) => src && src !== "Sem imagem");
  const quoteItems = useMemo(() => window.MJ_buildItemsFromProduct?.(p, qty) || [], [p.id, p.price, qty]);
  const lineSubtotal = (p.price || 0) * qty;

  return (
    <div className="product-page">
      <div className="crumbs">
        <a onClick={() => go("home")}><Icon.Home s={12}/></a>
        <span className="sep">/</span>
        <a onClick={() => go("catalog")}>Coleção</a>
        <span className="sep">/</span>
        <a onClick={() => go("catalog", { category: p.category })}>{p.category}</a>
        <span className="sep">/</span>
        <span className="curr">{p.name}</span>
      </div>

      <div className="product-grid">
        <div className="gallery">
          {galleryImages.length > 0 && (
            <>
              <div className="thumbs">
                {galleryImages.map((src, i) => (
                  <div key={i} className={"thumb" + (imgIdx === i ? " on" : "")} onClick={() => setImgIdx(i)}>
                    <ProductPhoto
                      src={src}
                      seed={p.id + "_thumb_" + i}
                      tone={p.colorHex}
                      alt=""
                    />
                  </div>
                ))}
              </div>
              <div className="main-img">
                <ProductPhoto
                  src={galleryImages[imgIdx] || galleryImages[0]}
                  seed={p.id + "_main_" + imgIdx}
                  tone={p.colorHex}
                  alt={p.name}
                />
              </div>
            </>
          )}
          {p.video && (
            <div style={{ marginTop: 14 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 8 }}>Vídeo</div>
              <video src={p.video} controls playsInline style={{ width: "100%", borderRadius: 8, maxHeight: 420, background: "#000" }}/>
            </div>
          )}
        </div>

        <div className="product-info">
          <h1>{p.name}</h1>
          <div className="sku">SKU {p.sku}</div>
          <div className="rating">
            <StarRating rating={p.rating}/>
            <span style={{fontWeight:700, color:'var(--denim-900)'}}>{p.rating.toFixed(1)}</span>
            <span style={{color:'var(--ink-500)'}}>· {p.reviews} avaliações</span>
          </div>

          <div className="price-block">
            {p.priceOld && <div className="price-old">De {fmt(p.priceOld)}</div>}
            <div className="price-row">
              <span className="price-now">{fmt(p.price)}</span>
              {p.priceOld && <span className="price-off">-{Math.round(((p.priceOld - p.price) / p.priceOld) * 100)}%</span>}
            </div>
            <div className="price-installments">{p.installments}</div>
          </div>

          <div className="opt-block">
            <div className="opt-label">
              <span>Tamanho {size && <span className="val">· {size}</span>}</span>
              <a className="guide" onClick={() => setShowGuide(true)}>Guia de medidas</a>
            </div>
            <div className="size-row">
              {p.sizes.map(s => {
                const out = (p.stock[s] || 0) === 0;
                return (
                  <button
                    key={s}
                    className={"size-pill" + (size === s ? " on" : "") + (out ? " out" : "")}
                    onClick={() => { if (!out) { setSize(s); setShowSizeError(false); } }}
                    disabled={out}
                  >{s}</button>
                );
              })}
            </div>
            {showSizeError && (
              <div className="size-error"><Icon.Alert s={14}/> Selecione um tamanho para continuar</div>
            )}
          </div>

          <div className="opt-block">
            <div className="opt-label">Quantidade</div>
            <div className="qty-block">
              <button className="qty-btn" onClick={() => setQty(q => Math.max(1, q - 1))}><Icon.Minus/></button>
              <span className="qty-val">{qty}</span>
              <button className="qty-btn" onClick={() => setQty(q => q + 1)}><Icon.Plus/></button>
            </div>
          </div>

          <div className="cta-stack">
            <button className="btn btn-primary btn-lg btn-block" onClick={() => handleAdd(false)}>
              <Icon.Cart s={16}/> Adicionar ao carrinho · {fmt(p.price * qty)}
            </button>
            <button className="btn btn-wp btn-lg btn-block" onClick={() => handleAdd(true)}>
              <Icon.WhatsApp s={16}/> Comprar pelo WhatsApp
            </button>
          </div>

          <ShippingQuotePanel
            cep={cep}
            onCepChange={setCep}
            items={quoteItems}
            subtotal={lineSubtotal}
            shipping={shipping}
            setShipping={setShipping}
            toast={toast}
          />

          <div style={{display:'flex', gap:12, fontSize:12.5, color:'var(--ink-700)', flexWrap:'wrap'}}>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><Icon.Shield s={14}/> Compra 100% segura</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><Icon.Truck s={14}/> Frete calculado pelo CEP</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:6}}><Icon.Box s={14}/> Troca grátis em 7 dias</span>
          </div>

          <button
            className="btn btn-ghost"
            style={{marginTop:14, padding:'8px 0', justifyContent:'flex-start', color:isFav?'var(--promo)':'var(--ink-700)'}}
            onClick={() => toggleFav(p.id)}
          >
            <Icon.Heart s={16} filled={isFav}/> {isFav ? "Salvo nos favoritos" : "Salvar nos favoritos"}
          </button>
        </div>
      </div>

      {/* Tabs */}
      <div className="product-tabs">
        <div className="tabs-bar">
          <button className={"tab-btn" + (tab === "desc" ? " on" : "")} onClick={() => setTab("desc")}>Descrição</button>
          <button className={"tab-btn" + (tab === "medidas" ? " on" : "")} onClick={() => setTab("medidas")}>Tabela de medidas</button>
          <button className={"tab-btn" + (tab === "entrega" ? " on" : "")} onClick={() => setTab("entrega")}>Entrega e devolução</button>
          <button className={"tab-btn" + (tab === "aval" ? " on" : "")} onClick={() => setTab("aval")}>Avaliações ({p.reviews})</button>
        </div>
        <div className="tab-body">
          {tab === "desc" && (
            <>
              <p style={{fontSize:16, color:'var(--denim-900)', fontWeight:600}}>{p.desc}</p>
              <p>{p.descLong}</p>
              <h4>Composição e cuidados</h4>
              <p>98% Algodão · 2% Elastano. Lavar à máquina em água fria com peças de cor similar. Não usar alvejante. Secar à sombra. Passar do avesso em temperatura média.</p>
            </>
          )}
          {tab === "medidas" && (
            <>
              <p>Confira as medidas em centímetros. Em caso de dúvida entre dois tamanhos, recomendamos o maior. Dúvidas? Chame no WhatsApp.</p>
              <table className="measure-table">
                <thead>
                  <tr><th>Tamanho</th><th>Cintura</th><th>Quadril</th><th>Comprimento</th></tr>
                </thead>
                <tbody>
                  <tr><td>34</td><td>60 cm</td><td>86 cm</td><td>104 cm</td></tr>
                  <tr><td>36</td><td>64 cm</td><td>90 cm</td><td>105 cm</td></tr>
                  <tr><td>38</td><td>68 cm</td><td>94 cm</td><td>105 cm</td></tr>
                  <tr><td>40</td><td>72 cm</td><td>98 cm</td><td>106 cm</td></tr>
                  <tr><td>42</td><td>76 cm</td><td>102 cm</td><td>106 cm</td></tr>
                  <tr><td>44</td><td>80 cm</td><td>106 cm</td><td>107 cm</td></tr>
                  <tr><td>46</td><td>84 cm</td><td>110 cm</td><td>107 cm</td></tr>
                  <tr><td>48</td><td>88 cm</td><td>114 cm</td><td>108 cm</td></tr>
                </tbody>
              </table>
            </>
          )}
          {tab === "entrega" && (
            <>
              <h4>Entrega</h4>
              <p>Enviamos para todo o Brasil via Correios (PAC e SEDEX). O prazo começa a contar após a confirmação do pagamento. A postagem é feita manualmente na agência dos Correios.</p>
              <h4>Trocas e devoluções</h4>
              <p>Você tem 7 dias após o recebimento para solicitar troca ou devolução. A peça precisa estar sem uso, com etiqueta e na embalagem original. A primeira troca por tamanho é por nossa conta.</p>
            </>
          )}
          {tab === "aval" && (
            <div style={{display:'flex', flexDirection:'column', gap:16}}>
              {window.MJ_REVIEWS.map((r, i) => (
                <div key={i} style={{padding:'16px 0', borderBottom:'1px solid var(--denim-100)'}}>
                  <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8}}>
                    <div style={{display:'flex', alignItems:'center', gap:10}}>
                      <span style={{fontWeight:700, color:'var(--denim-900)', fontSize:14}}>{r.name}</span>
                      {r.verified && <span className="tag tag-on">Verificada</span>}
                    </div>
                    <span style={{fontSize:11.5, color:'var(--ink-500)'}}>{r.date}</span>
                  </div>
                  <div style={{marginBottom:6}}><StarRating rating={r.rating}/></div>
                  <p style={{margin:0, fontSize:14, color:'var(--ink-700)'}}>"{r.text}"</p>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Related */}
      {related.length > 0 && (
        <section style={{marginTop:48}}>
          <div className="section-head">
            <div>
              <span className="eyebrow">Você também pode gostar</span>
              <h2 style={{fontSize:24}}>Modelos similares</h2>
            </div>
            <a className="lnk" onClick={() => go("catalog", { category: p.category })}>Ver mais <Icon.ChevronRight s={14}/></a>
          </div>
          <div className={"products " + density}>
            {related.map(rp => (
              <ProductCard key={rp.id} p={rp} style={cardStyle} onClick={() => go("product", { id: rp.id })} fav={fav} toggleFav={toggleFav}/>
            ))}
          </div>
        </section>
      )}

      {/* Size guide modal */}
      <Modal open={showGuide} onClose={() => setShowGuide(false)} title="Guia de medidas">
        <p style={{fontSize:14, color:'var(--ink-700)', lineHeight:1.6, marginTop:0}}>
          Meça a cintura no ponto mais fino do tronco, e o quadril na parte mais larga. Use uma fita métrica e mantenha-a paralela ao chão.
        </p>
        <table className="measure-table" style={{marginTop:14}}>
          <thead><tr><th>Tamanho</th><th>Cintura</th><th>Quadril</th></tr></thead>
          <tbody>
            <tr><td>34</td><td>60 cm</td><td>86 cm</td></tr>
            <tr><td>36</td><td>64 cm</td><td>90 cm</td></tr>
            <tr><td>38</td><td>68 cm</td><td>94 cm</td></tr>
            <tr><td>40</td><td>72 cm</td><td>98 cm</td></tr>
            <tr><td>42</td><td>76 cm</td><td>102 cm</td></tr>
            <tr><td>44</td><td>80 cm</td><td>106 cm</td></tr>
            <tr><td>46</td><td>84 cm</td><td>110 cm</td></tr>
            <tr><td>48</td><td>88 cm</td><td>114 cm</td></tr>
          </tbody>
        </table>
      </Modal>
    </div>
  );
}

Object.assign(window, { ScreenHome, ScreenCatalog, ScreenProduct });