// Catalog — browse with 3 product card variants (controlled by tweak)

function ProductCardEditorial({ p, onClick, onAdd }) {
  return (
    <div onClick={onClick} style={{
      background: "var(--surface)", borderRadius: "var(--r-lg)",
      overflow: "hidden", cursor: "pointer", position: "relative",
      border: "1px solid var(--line)",
    }}>
      <div style={{
        aspectRatio: "1/1.15",
        background: `linear-gradient(160deg, ${p.color}22, ${p.accent}30)`,
        display: "flex", alignItems: "center", justifyContent: "center",
        position: "relative",
      }}>
        <ProductPhoto p={p} />
        {p.cacao && <div style={{
          position: "absolute", top: 10, left: 10,
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.1em", color: "var(--ink-soft)",
          background: "rgba(255,250,240,0.85)", padding: "3px 8px",
          borderRadius: 999,
        }}>{p.cacao}</div>}
      </div>
      <div style={{ padding: "14px 14px 16px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, lineHeight: 1.05 }}>
          {p.name}
        </div>
        <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 4, fontFamily: "var(--font-mono)" }}>
          {p.weight}
        </div>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          marginTop: 12,
        }}>
          <div style={{ fontSize: 14, fontWeight: 600, fontFamily: "var(--font-mono)", letterSpacing: "0.02em" }}>
            {formatIDR(p.price)}
          </div>
          <button onClick={(e) => { e.stopPropagation(); onAdd(); }} className="btn-icon" style={{
            background: "var(--cocoa-deep)", color: "var(--bg)", borderColor: "var(--cocoa-deep)",
          }}>
            <Icon name="plus" size={16} />
          </button>
        </div>
      </div>
    </div>
  );
}

function ProductCardClassic({ p, onClick, onAdd }) {
  return (
    <div onClick={onClick} style={{
      background: "var(--surface)", borderRadius: "var(--r-md)",
      overflow: "hidden", cursor: "pointer", border: "1px solid var(--line)",
      display: "flex", flexDirection: "column",
    }}>
      <div style={{
        aspectRatio: "1/1",
        background: `linear-gradient(135deg, ${p.color}1a, ${p.accent}25)`,
        display: "flex", alignItems: "center", justifyContent: "center",
        position: "relative",
      }}>
        <ProductPhoto p={p} />
      </div>
      <div style={{ padding: 12 }}>
        <div style={{ fontWeight: 600, fontSize: 14, lineHeight: 1.2 }}>{p.name}</div>
        <div style={{ fontSize: 11, color: "var(--ink-muted)", marginTop: 2 }}>{p.weight}</div>
        <div style={{ fontSize: 13, fontWeight: 700, color: "var(--ink)", marginTop: 8, fontFamily: "var(--font-mono)" }}>
          {formatIDR(p.price)}
        </div>
        <button onClick={(e) => { e.stopPropagation(); onAdd(); }} style={{
          marginTop: 8, width: "100%", background: "var(--cocoa-deep)",
          color: "var(--bg)", border: "none", padding: "10px", borderRadius: 8,
          fontSize: 13, fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-body)",
        }}>
          + Tambah
        </button>
      </div>
    </div>
  );
}

function ProductCardOverlay({ p, onClick, onAdd }) {
  return (
    <div onClick={onClick} style={{
      borderRadius: "var(--r-lg)", overflow: "hidden", cursor: "pointer",
      position: "relative",
      background: `linear-gradient(180deg, ${p.color}, ${p.color}ee)`,
      aspectRatio: "1/1.3", color: "#fff8e7",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <ProductPhoto p={p} />
      </div>
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%)",
      }}/>
      {p.cacao && <div style={{
        position: "absolute", top: 12, right: 12,
        background: "rgba(255,248,231,0.2)", backdropFilter: "blur(8px)",
        padding: "4px 10px", borderRadius: 999,
        fontSize: 11, fontFamily: "var(--font-mono)",
      }}>
        {p.cacao}
      </div>}
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, padding: 14,
      }}>
        <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 19, lineHeight: 1.05 }}>
          {p.name}
        </div>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          marginTop: 8,
        }}>
          <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", opacity: 0.85 }}>
            {formatIDR(p.price)} · {p.weight}
          </div>
          <button onClick={(e) => { e.stopPropagation(); onAdd(); }} style={{
            background: "var(--gold)", color: "var(--cocoa-deep)", border: "none",
            width: 34, height: 34, borderRadius: "50%",
            display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
          }}>
            <Icon name="plus" size={16} />
          </button>
        </div>
      </div>
    </div>
  );
}

function Catalog({ go, cartCount, addToCart, cardStyle = "editorial" }) {
  const [cat, setCat] = React.useState("all");
  const [q, setQ] = React.useState("");

  const filtered = PRODUCTS.filter((p) => {
    if (cat !== "all" && p.category !== cat) return false;
    if (q && !`${p.name} ${p.description}`.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  const Card = {
    editorial: ProductCardEditorial,
    classic: ProductCardClassic,
    overlay: ProductCardOverlay,
  }[cardStyle] || ProductCardEditorial;

  return (
    <div className="screen" data-screen-label="02 Catalog">
      {/* Header */}
      <div style={{
        position: "sticky", top: 0, zIndex: 10,
        background: "var(--bg)",
        padding: "var(--safe-top) 20px 12px",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <button className="btn-icon" onClick={() => go("landing")}>
            <Icon name="back" size={18} />
          </button>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 20 }}>
            Katalog
          </div>
          <button className="btn-icon" onClick={() => go("cart")} style={{ position: "relative" }}>
            <Icon name="bag" size={18} />
            {cartCount > 0 && (
              <span style={{
                position: "absolute", top: -4, right: -4,
                background: "var(--cocoa-deep)", color: "var(--bg)",
                fontSize: 10, fontWeight: 700, fontFamily: "var(--font-mono)",
                width: 18, height: 18, borderRadius: "50%",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>{cartCount}</span>
            )}
          </button>
        </div>
        {/* Search */}
        <div style={{ position: "relative" }}>
          <div style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--ink-muted)" }}>
            <Icon name="search" size={16} />
          </div>
          <input
            className="field"
            placeholder="Cari cokelat…"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            style={{ paddingLeft: 40, borderRadius: 999, background: "var(--surface)" }}
          />
        </div>
        {/* Categories */}
        <div style={{ display: "flex", gap: 8, marginTop: 12, overflowX: "auto" }}>
          {CATEGORIES.map((c) => (
            <button key={c.id} className="chip" data-active={cat === c.id} onClick={() => setCat(c.id)}>
              {c.label}
            </button>
          ))}
        </div>
      </div>

      {/* Results */}
      <div style={{ padding: "20px 20px 80px" }}>
        {cat === "all" && !q && (
          <div style={{
            position: "relative", height: "clamp(150px, 22vw, 280px)", borderRadius: "var(--r-lg)",
            overflow: "hidden", marginBottom: 20,
          }}>
            <img src={STORE.catalogBanner} alt={STORE.name} style={{
              position: "absolute", inset: 0, width: "100%", height: "100%",
              objectFit: "cover", objectPosition: "center 45%",
            }} />
            <div style={{
              position: "absolute", inset: 0, display: "flex", alignItems: "flex-end",
              padding: 14, color: "#fff8e7",
              background: "linear-gradient(180deg, transparent 40%, rgba(26,14,8,0.75) 100%)",
              fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18,
            }}>
              {STORE.tagline}
            </div>
          </div>
        )}
        <div style={{
          display: "flex", alignItems: "baseline",
          justifyContent: "space-between", marginBottom: 14,
        }}>
          <div className="eyebrow">{filtered.length} produk</div>
          <div style={{ fontSize: 12, color: "var(--ink-muted)", fontFamily: "var(--font-body)" }}>
            Per kategori
          </div>
        </div>

        <div className="product-grid">
          {filtered.map((p) => (
            <Card key={p.id} p={p}
              onClick={() => go("product", p.id)}
              onAdd={() => addToCart(p.id, 1)}
            />
          ))}
        </div>

        {filtered.length === 0 && (
          <div style={{ textAlign: "center", padding: "40px 0", color: "var(--ink-muted)" }}>
            <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18 }}>
              Belum ada hasil
            </div>
            <div style={{ fontSize: 13, marginTop: 4 }}>Coba kategori lain.</div>
          </div>
        )}
      </div>
    </div>
  );
}

window.Catalog = Catalog;