// pages-shop.jsx — Home (editorial + streetwear), Shop, Product

const { useState: useS1, useEffect: useE1, useRef: useR1 } = React;

/* ============================ HOME — EDITORIAL ============================ */
function HomeEditorial() {
  const { goto, push, addToCart } = useShop();
  const featured = ORAH_PRODUCTS.slice(0, 4);

  return (
    <main>
      {/* hero */}
      <section className="hero">
        <div className="wrap">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 32, flexWrap: "wrap", gap: 12 }}>
            <Stamp rotate={-4}>Drop 01 · ao vivo</Stamp>
            <div className="row gap-3 mono muted">
              <span>desde 2026</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span>ponta grossa · pr · br</span>
            </div>
          </div>

          <div className="hero-grid">
            <div>
              <h1 className="display t-huge" style={{ textWrap: "balance" }}>
                uma marca,<br/>
                <span style={{ color: "var(--brand)" }}>um propósito.</span>
              </h1>
              <p className="lead">
                Camisetas oversized com estampas que carregam fé, versículo e identidade.
                <br/>Pra levar um pouco de Jesus por onde passar.
              </p>
              <div className="row gap-3" style={{ flexWrap: "wrap" }}>
                <button className="btn brand lg" onClick={() => goto("shop")}>
                  ver o drop 01 <Icon name="arrowR" size={14} />
                </button>
                <button className="btn ghost lg" onClick={() => goto("manifesto")}>
                  ler o manifesto
                </button>
              </div>

              <div className="row gap-5" style={{ marginTop: 48, flexWrap: "wrap" }}>
                {[
                  { n: "01", l: "drop ativo" },
                  { n: "08", l: "estampas" },
                  { n: "+450", l: "no insta" },
                ].map((s, i) => (
                  <div key={i}>
                    <div style={{ fontFamily: "var(--f-display)", fontSize: 48, color: "var(--brand)", lineHeight: 1 }}>{s.n}</div>
                    <div className="mono muted">{s.l}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ position: "relative" }}>
              <div className="hero-img">
                <ProductVisual product={ORAH_PRODUCTS[0]} large minimal />
              </div>
              <div className="tape only-desktop" style={{ top: -14, left: 28, transform: "rotate(-6deg)" }}>
                drop 01 · 03.06
              </div>
              <div className="tape only-desktop" style={{ bottom: -14, right: 18, background: "rgba(232,75,30,0.85)", color: "#fff", transform: "rotate(4deg)" }}>
                novo!
              </div>
              <div style={{ position: "absolute", bottom: 16, left: 16, padding: "8px 12px", background: "var(--bg-card)", borderRadius: 8 }}>
                <div className="mono muted">a partir de</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 24, color: "var(--ink)" }}>R$ 149,90</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* marquee */}
      <div className="marquee">
        <div className="marquee-track">
          {Array(2).fill(0).map((_, k) => (
            <React.Fragment key={k}>
              <span>ORAH</span>
              <span className="star">✺</span>
              <span>uma marca</span>
              <span className="star">✺</span>
              <span>um propósito</span>
              <span className="star">✺</span>
              <span>drop 01 · 03.06</span>
              <span className="star">✺</span>
              <span>+ Cristo, + cultura</span>
              <span className="star">✺</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* featured products */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <span className="t-eyebrow">001 · drop 01</span>
              <h2 className="t-lg" style={{ marginTop: 8 }}>águas vivas / fogo puro</h2>
              <p className="muted" style={{ maxWidth: 420, marginTop: 8 }}>O primeiro drop. Camisetas oversized, masculinas e femininas. Estampas modernas, cheias de significado.</p>
            </div>
            <div className="right">
              <button className="btn ghost" onClick={() => goto("shop")}>
                ver todos <Icon name="arrowR" size={14} />
              </button>
            </div>
          </div>

          <div className="products-grid">
            {featured.map((p) => (
              <ProductCard key={p.id} product={p} onClick={(pr) => goto({ name: "product", params: { id: pr.id } })} />
            ))}
          </div>
        </div>
      </section>

      {/* manifesto split */}
      <section className="section">
        <div className="wrap">
          <div className="manifesto-block">
            <span className="mono" style={{ opacity: 0.7 }}>002 · manifesto</span>
            <div className="quote" style={{ marginTop: 16 }}>
              ORAH vem de <em>ora</em>.<br/>
              Uma palavra que carrega <span className="hand" style={{ fontFamily: "var(--f-hand)", fontWeight: 400, textTransform: "none" }}>oração</span><br/>
              e viver essa cultura<br/>no dia a dia.
            </div>
            <div className="row gap-5" style={{ marginTop: 40, flexWrap: "wrap" }}>
              <button className="btn ghost" style={{ color: "inherit", borderColor: "currentColor" }} onClick={() => goto("manifesto")}>
                ler o manifesto completo
              </button>
              <span className="mono" style={{ opacity: 0.7 }}>isso é só o começo.</span>
            </div>

            {/* decorative big number */}
            <div style={{
              position: "absolute",
              right: -28, bottom: -42,
              fontFamily: "var(--f-display)",
              fontSize: "clamp(180px, 26cqw, 360px)",
              lineHeight: 0.85,
              opacity: 0.08,
              pointerEvents: "none",
            }}>02</div>
          </div>
        </div>
      </section>

      {/* polaroid wall */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <span className="t-eyebrow">003 · @orahculture</span>
              <h2 className="t-lg" style={{ marginTop: 8 }}>real, na rua</h2>
            </div>
            <div className="right">
              <button className="btn ghost">
                <Icon name="instagram" size={14} /> seguir
              </button>
            </div>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 32,
            padding: "20px 0",
          }} className="polaroid-wall">
            {[
              { p: ORAH_PRODUCTS[0], cap: "águas vivas", rot: -3 },
              { p: ORAH_PRODUCTS[2], cap: "o Reino vem", rot: 2 },
              { p: ORAH_PRODUCTS[1], cap: "fogo puro", rot: -2 },
              { p: ORAH_PRODUCTS[5], cap: "no jardim", rot: 3 },
            ].map((it, i) => (
              <div key={i} className="polaroid" style={{ "--rot": `${it.rot}deg` }}>
                <div className="img-ph" style={{ aspectRatio: "1" }}>
                  <ProductVisual product={it.p} />
                </div>
                <div className="cap">{it.cap}</div>
                <span className="tape" style={{ top: -10, left: "50%", transform: "translateX(-50%) rotate(-2deg)", fontSize: 14 }}>
                  @orahculture
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* values / commitments */}
      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="commit-grid">
            {[
              { n: "+", t: "Algodão pesado", d: "230g/m² · cai bonito, dura muito." },
              { n: "✺", t: "Estampa que fica", d: "Serigrafia em DTF/silk premium, lavável." },
              { n: "↺", t: "Troca tranquila", d: "30 dias pra trocar tamanho, sem dor." },
            ].map((c, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 56, color: "var(--brand)", lineHeight: 0.8 }}>{c.n}</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 24, textTransform: "uppercase", marginTop: 16 }}>{c.t}</div>
                <div className="muted" style={{ marginTop: 6 }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .viewport-frame[data-vp="mobile"] .polaroid-wall { grid-template-columns: 1fr 1fr; gap: 18px; }
        .viewport-frame[data-vp="mobile"] .commit-grid { grid-template-columns: 1fr; gap: 12px; }
      `}</style>
    </main>
  );
}

/* ============================ HOME — STREETWEAR ============================ */
function HomeStreet() {
  const { goto } = useShop();
  const featured = ORAH_PRODUCTS.slice(0, 4);

  return (
    <main>
      {/* hero — high contrast, big numerals, lookbook */}
      <section style={{ background: "var(--brand)", color: "var(--on-brand)", padding: "48px 0 0", position: "relative", overflow: "hidden" }}>
        <div className="wrap">
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 36 }}>
            <div className="mono" style={{ opacity: 0.7 }}>VOL. 001 · LOOKBOOK</div>
            <div className="mono" style={{ opacity: 0.7 }}>SS · 2026</div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "end", gap: 24, marginBottom: 32 }} className="street-h">
            <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(72px, 14cqw, 180px)", lineHeight: 0.82, textTransform: "uppercase" }}>
              ORAH
            </div>
            <div style={{ width: 1, height: 80, background: "currentColor", opacity: 0.4 }} className="only-desktop"></div>
            <div style={{ textAlign: "right" }}>
              <div className="mono" style={{ opacity: 0.7 }}>orah /ôra/</div>
              <div style={{ fontFamily: "var(--f-hand)", fontSize: 28, maxWidth: 300, marginLeft: "auto" }}>
                oração — viva essa cultura.
              </div>
            </div>
          </div>

          {/* lookbook strip */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, paddingBottom: 0 }} className="lookbook-strip">
            {featured.map((p, i) => (
              <div key={p.id} style={{ position: "relative", cursor: "pointer" }} onClick={() => goto({ name: "product", params: { id: p.id } })}>
                <div style={{ aspectRatio: "3/4", overflow: "hidden", borderRadius: 4 }}>
                  <ProductVisual product={p} />
                </div>
                <div className="mono" style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontSize: 10 }}>
                  <span>LOOK 0{i+1}</span>
                  <span>{p.id.replace("ora-", "REF.")}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* huge wordmark bleed */}
        <div style={{
          fontFamily: "var(--f-display)",
          fontSize: "clamp(72px, 16cqw, 200px)",
          lineHeight: 0.85,
          textTransform: "uppercase",
          opacity: 0.12,
          whiteSpace: "nowrap",
          marginTop: 32,
          paddingLeft: 24,
        }}>CULTURE · CULTURE · CULTURE</div>
      </section>

      {/* drop info bar */}
      <div className="marquee">
        <div className="marquee-track">
          {Array(2).fill(0).map((_, k) => (
            <React.Fragment key={k}>
              <span>DROP 01</span>
              <span className="star">/</span>
              <span>AGUAS VIVAS</span>
              <span className="star">/</span>
              <span>OVERSIZED 230G</span>
              <span className="star">/</span>
              <span>LIMITED</span>
              <span className="star">/</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* product grid as garment labels */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <span className="t-eyebrow">/ 01 · all products</span>
              <h2 className="t-lg" style={{ marginTop: 8 }}>SHOP THE DROP</h2>
            </div>
            <div className="right">
              <button className="btn ghost" onClick={() => goto("shop")}>todos →</button>
            </div>
          </div>

          <div className="products-grid">
            {ORAH_PRODUCTS.slice(0, 4).map((p, i) => (
              <div key={p.id} onClick={() => goto({ name: "product", params: { id: p.id } })} style={{ cursor: "pointer" }}>
                <div style={{ position: "relative", aspectRatio: "4/5", borderRadius: 4, overflow: "hidden", background: "var(--bg-alt)" }}>
                  <ProductVisual product={p} />
                  <div style={{
                    position: "absolute", top: 8, left: 8,
                    background: "var(--ink)", color: "var(--bg)",
                    fontFamily: "var(--f-mono)", fontSize: 10, padding: "4px 8px",
                    letterSpacing: 0.1, textTransform: "uppercase",
                  }}>
                    /{(i+1).toString().padStart(2, "0")}
                  </div>
                </div>
                <div style={{ marginTop: 12, padding: "10px 0", borderTop: "1px solid var(--ink-line)", borderBottom: "1px solid var(--ink-line)" }}>
                  <div className="row" style={{ justifyContent: "space-between" }}>
                    <span style={{ fontFamily: "var(--f-display)", fontSize: 20, textTransform: "uppercase" }}>{p.name}</span>
                    <span style={{ fontWeight: 700 }}>R$ {p.price.toFixed(0)}</span>
                  </div>
                  <div className="mono muted" style={{ marginTop: 4 }}>{p.line} / OVERSIZED 230G / {p.colors.join(" · ")}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* big quote */}
      <section style={{ background: "var(--ink)", color: "var(--bg)", padding: "var(--space-9) 0" }}>
        <div className="wrap">
          <div className="mono" style={{ opacity: 0.6 }}>/ 02 · purpose</div>
          <div style={{ fontFamily: "var(--f-display)", fontSize: "clamp(44px, 7.5cqw, 110px)", lineHeight: 0.92, textTransform: "uppercase", marginTop: 20, textWrap: "balance" }}>
            sair sendo<br/>
            <span style={{ color: "var(--accent)" }}>luz.</span> <span style={{ color: "var(--accent)" }}>sal.</span> <span style={{ color: "var(--brand)" }}>fogo.</span>
          </div>
          <div className="row" style={{ justifyContent: "space-between", marginTop: 48, flexWrap: "wrap", gap: 16 }}>
            <button className="btn fire lg" onClick={() => goto("manifesto")}>manifesto →</button>
            <span className="mono" style={{ opacity: 0.6 }}>ORAH · 2026 · ALL RIGHTS · NONE WASTED</span>
          </div>
        </div>
      </section>

      <style>{`
        .viewport-frame[data-vp="mobile"] .street-h { grid-template-columns: 1fr; text-align: left; }
        .viewport-frame[data-vp="mobile"] .street-h > div:last-child { text-align: left; }
        .viewport-frame[data-vp="mobile"] .lookbook-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
      `}</style>
    </main>
  );
}

/* ============================ SHOP / CATEGORY ============================ */
function ShopPage() {
  const { goto } = useShop();
  const [filter, setFilter] = useS1("todos");
  const [sort, setSort] = useS1("relevancia");

  const filtered = ORAH_PRODUCTS.filter((p) => {
    if (filter === "todos") return true;
    if (filter === "manifesto") return p.line === "Manifesto";
    if (filter === "eterno") return p.line === "Eterno";
    if (filter === "limitados") return p.tag === "EDIÇÃO LIMITADA" || p.tag === "PRÉ-VENDA";
    return true;
  });

  return (
    <main>
      {/* breadcrumb */}
      <div className="wrap" style={{ paddingTop: 32 }}>
        <div className="mono muted">
          <span onClick={() => goto("home")} style={{ cursor: "pointer" }}>home</span> / loja / todos os produtos
        </div>
      </div>

      {/* header */}
      <section style={{ padding: "32px 0 24px" }}>
        <div className="wrap">
          <div className="row" style={{ justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 16 }}>
            <h1 className="t-xl">a loja.</h1>
            <div>
              <div className="mono muted">{filtered.length} peças</div>
              <div style={{ fontFamily: "var(--f-hand)", fontSize: 28, color: "var(--brand)" }}>todas pensadas pra você.</div>
            </div>
          </div>
        </div>
      </section>

      {/* filter bar */}
      <div style={{ borderTop: "1px solid var(--ink-line)", borderBottom: "1px solid var(--ink-line)", position: "sticky", top: 72, background: "var(--bg)", zIndex: 20 }} className="filter-bar">
        <div className="wrap row" style={{ justifyContent: "space-between", padding: "12px 24px", gap: 16, flexWrap: "wrap" }}>
          <div className="row gap-2" style={{ flexWrap: "wrap" }}>
            {[
              { id: "todos", label: "Todos", n: 8 },
              { id: "manifesto", label: "Manifesto", n: 4 },
              { id: "eterno", label: "Eterno", n: 4 },
              { id: "limitados", label: "Limitados", n: 2 },
            ].map((f) => (
              <button key={f.id} className={"badge " + (filter === f.id ? "brand" : "")}
                style={{ cursor: "pointer" }}
                onClick={() => setFilter(f.id)}>
                {f.label} <span style={{ opacity: 0.6 }}>{f.n}</span>
              </button>
            ))}
          </div>
          <div className="row gap-3">
            <span className="mono muted">ordenar:</span>
            <select value={sort} onChange={(e) => setSort(e.target.value)} style={{ padding: "4px 10px", width: "auto" }}>
              <option value="relevancia">relevância</option>
              <option value="novos">mais novos</option>
              <option value="menor">menor preço</option>
              <option value="maior">maior preço</option>
            </select>
          </div>
        </div>
      </div>

      {/* products */}
      <section className="section">
        <div className="wrap">
          <div className="products-grid">
            {filtered.map((p) => (
              <ProductCard key={p.id} product={p} onClick={(pr) => goto({ name: "product", params: { id: pr.id } })} />
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .viewport-frame[data-vp="mobile"] .filter-bar { top: 56px; }
      `}</style>
    </main>
  );
}

/* ============================ PRODUCT PAGE ============================ */
function ProductPage() {
  const { params, goto, addToCart, setDrawer, toggleWish, wish } = useShop();
  const product = ORAH_PRODUCTS.find((p) => p.id === params.id) || ORAH_PRODUCTS[0];
  const [size, setSize] = useS1("M");
  const [qty, setQty] = useS1(1);
  const liked = wish.includes(product.id);

  return (
    <main>
      <div className="wrap" style={{ paddingTop: 32 }}>
        <div className="mono muted">
          <span onClick={() => goto("home")} style={{ cursor: "pointer" }}>home</span> /{" "}
          <span onClick={() => goto("shop")} style={{ cursor: "pointer" }}>loja</span> / {product.name.toLowerCase()}
        </div>
      </div>

      <section className="section" style={{ paddingTop: 32 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 56, alignItems: "start" }} className="pd-grid">
            {/* gallery */}
            <div>
              <div style={{ aspectRatio: "1", borderRadius: 12, overflow: "hidden", position: "relative", border: "1px solid var(--ink-line)" }}>
                <ProductVisual product={product} large minimal />
                {product.tag && <span className="badge fire" style={{ position: "absolute", top: 16, left: 16 }}>{product.tag}</span>}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 12 }}>
                {[product, product, product, product].map((p, i) => (
                  <div key={i} style={{ aspectRatio: "1", borderRadius: 6, overflow: "hidden", border: i === 0 ? "2px solid var(--ink)" : "1px solid var(--ink-line)" }}>
                    <ProductVisual product={p} />
                  </div>
                ))}
              </div>
            </div>

            {/* info */}
            <div>
              <span className="t-eyebrow">{product.line} · {product.drop}</span>
              <h1 className="t-lg" style={{ marginTop: 12 }}>{product.name}</h1>
              <div className="row gap-3" style={{ marginTop: 12 }}>
                <span className="hand" style={{ fontFamily: "var(--f-hand)", fontSize: 22, color: "var(--brand)" }}>
                  "{product.quote}"
                </span>
              </div>
              <div className="mono muted" style={{ marginTop: 4 }}>{product.verse}</div>

              <div className="row gap-3" style={{ marginTop: 28, alignItems: "baseline", flexWrap: "wrap" }}>
                <span style={{ fontFamily: "var(--f-display)", fontSize: 44, color: "var(--brand)", whiteSpace: "nowrap" }}>
                  R$ {product.price.toFixed(2).replace(".", ",")}
                </span>
                {product.oldPrice && (
                  <span style={{ textDecoration: "line-through", color: "var(--ink-soft)" }}>
                    R$ {product.oldPrice.toFixed(2).replace(".", ",")}
                  </span>
                )}
              </div>
              <div className="mono muted" style={{ marginTop: 4 }}>
                ou 3x de R$ {(product.price / 3).toFixed(2).replace(".", ",")} sem juros
              </div>

              {/* sizes */}
              <div style={{ marginTop: 32 }}>
                <div className="row" style={{ justifyContent: "space-between" }}>
                  <label>Tamanho</label>
                  <a className="link mono muted" style={{ fontSize: 11, cursor: "pointer" }}>tabela de medidas</a>
                </div>
                <div className="row gap-2" style={{ marginTop: 8 }}>
                  {product.sizes.map((s) => (
                    <button key={s} onClick={() => setSize(s)}
                      style={{
                        width: 52, height: 52, borderRadius: 8,
                        border: size === s ? "2px solid var(--ink)" : "1px solid var(--ink-line)",
                        background: size === s ? "var(--ink)" : "var(--bg-card)",
                        color: size === s ? "var(--bg)" : "var(--ink)",
                        fontFamily: "var(--f-display)", fontSize: 18,
                        cursor: "pointer",
                      }}>{s}</button>
                  ))}
                </div>
              </div>

              {/* qty + add */}
              <div className="row gap-3" style={{ marginTop: 24 }}>
                <div className="row" style={{ border: "1.5px solid var(--ink)", borderRadius: 999 }}>
                  <button className="icon-btn" onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={14} /></button>
                  <span style={{ width: 32, textAlign: "center", fontWeight: 700 }}>{qty}</span>
                  <button className="icon-btn" onClick={() => setQty(qty + 1)}><Icon name="plus" size={14} /></button>
                </div>
                <button className="btn brand lg" style={{ flex: 1 }} onClick={() => { addToCart(product.id, size, qty); setDrawer("cart"); }}>
                  adicionar à sacola
                </button>
                <button className="icon-btn" style={{ border: "1.5px solid var(--ink)", color: liked ? "var(--accent)" : "var(--ink)" }} onClick={() => toggleWish(product.id)}>
                  <Icon name="heart" />
                </button>
              </div>

              {/* info accordion */}
              <div style={{ marginTop: 36, borderTop: "1px solid var(--ink-line)" }}>
                {[
                  { t: "Detalhes da peça", c: "Oversized · 100% algodão · 230g/m² · gola redonda · ribana 2x1 · costura dupla." },
                  { t: "Estampa", c: "Serigrafia premium em DTF. Pode lavar do avesso, na máquina, água fria." },
                  { t: "Frete e entrega", c: "Sudeste em até 5 dias úteis. Frete grátis acima de R$ 250." },
                  { t: "Trocas", c: "30 dias pra trocar tamanho, sem dor de cabeça." },
                ].map((s, i) => <Acc key={i} title={s.t} body={s.c} defaultOpen={i === 0} />)}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* you may like */}
      <section className="section">
        <div className="wrap">
          <h2 className="t-md">você também pode amar</h2>
          <div className="products-grid" style={{ marginTop: 24 }}>
            {ORAH_PRODUCTS.filter((p) => p.id !== product.id).slice(0, 4).map((p) => (
              <ProductCard key={p.id} product={p} onClick={(pr) => goto({ name: "product", params: { id: pr.id } })} />
            ))}
          </div>
        </div>
      </section>

      <style>{`
        .viewport-frame[data-vp="mobile"] .pd-grid { grid-template-columns: 1fr; gap: 32px; }
      `}</style>
    </main>
  );
}

function Acc({ title, body, defaultOpen = false }) {
  const [open, setOpen] = useS1(defaultOpen);
  return (
    <div style={{ borderBottom: "1px solid var(--ink-line)" }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
        padding: "16px 0", background: "none", border: "none", cursor: "pointer",
        fontFamily: "var(--f-body)", fontSize: 14, fontWeight: 700,
        textTransform: "uppercase", letterSpacing: 0.05, color: "var(--ink)",
      }}>
        {title}
        <Icon name={open ? "minus" : "plus"} size={16} />
      </button>
      {open && <div style={{ paddingBottom: 18, color: "var(--ink-soft)", fontSize: 14, lineHeight: 1.5 }}>{body}</div>}
    </div>
  );
}

Object.assign(window, { HomeEditorial, HomeStreet, ShopPage, ProductPage });