// Shop — the e-commerce catalog
function ShopScreen({ onNavigate, onAddToCart }) {
  const { WineCard, Tag, Divider, Button } = window.CedarHollowWineryDesignSystem_a59a90;
  const [color, setColor] = React.useState("all");
  const [series, setSeries] = React.useState("all");
  const wines = window.CHData.WINES.filter(w =>
    (color === "all" || w.color === color) &&
    (series === "all" || w.series === series)
  );

  return (
    <div>
      <section style={{ maxWidth: 1180, margin: "0 auto", padding: "72px 32px 24px" }}>
        <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>Shop · 2024 Release</span>
        <h1 style={{ fontSize: 80, fontWeight: 300, letterSpacing: "-0.02em", margin: "20px 0 16px" }}>
          The <b style={{ fontWeight: 800 }}>release.</b>
        </h1>
        <p style={{ fontSize: 18, color: "var(--text-secondary)", maxWidth: "52ch", lineHeight: 1.6 }}>
          Eight bottlings from the south slope and the canopy block. Each in small numbers, each from a single hillside. Ships to TX, CA, NY, FL, OR, WA. Free over $250.
        </p>
      </section>

      <section style={{ maxWidth: 1180, margin: "0 auto", padding: "24px 32px" }}>
        <Divider/>
      </section>

      <section style={{ maxWidth: 1180, margin: "0 auto", padding: "16px 32px 24px", display: "flex", gap: 40, alignItems: "center", flexWrap: "wrap" }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)", marginRight: 8 }}>Color</span>
          {[
            { id: "all", label: "All" },
            { id: "red", label: "Red" },
            { id: "white", label: "White" },
            { id: "rose", label: "Rosé" },
          ].map(t => (
            <Tag key={t.id} tone="outline" selected={color === t.id} onClick={() => setColor(t.id)}>{t.label}</Tag>
          ))}
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <span style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)", marginRight: 8 }}>Series</span>
          {[
            { id: "all", label: "All" },
            { id: "Estate Reserve", label: "Estate Reserve" },
            { id: "Cellar Door", label: "Cellar Door" },
            { id: "Library", label: "Library" },
          ].map(t => (
            <Tag key={t.id} tone="outline" selected={series === t.id} onClick={() => setSeries(t.id)}>{t.label}</Tag>
          ))}
        </div>
        <div style={{ marginLeft: "auto", fontSize: 13, color: "var(--text-muted)", fontFamily: "var(--font-serif)", fontStyle: "italic" }}>
          {wines.length} bottling{wines.length === 1 ? "" : "s"}
        </div>
      </section>

      <section style={{ maxWidth: 1180, margin: "0 auto", padding: "16px 32px 60px" }}>
        {wines.length === 0 ? (
          <div style={{ padding: "80px", textAlign: "center", color: "var(--text-muted)" }}>
            <p>Nothing matches that combination.</p>
            <div style={{ marginTop: 16 }}><Button variant="secondary" onClick={() => { setColor("all"); setSeries("all"); }}>Clear filters</Button></div>
          </div>
        ) : (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
            {wines.map(w => (
              <WineCard key={w.id} {...w} onClick={() => onNavigate("wine:" + w.id)} onAdd={() => onAddToCart(w)}/>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}

window.ShopScreen = ShopScreen;