function CartScreen({ cart, onNavigate, onUpdate, onRemove }) {
  const { Button, Divider, Icon, Input, Badge } = window.CedarHollowWineryDesignSystem_a59a90;
  const subtotal = cart.reduce((s, item) => s + item.price * item.qty, 0);
  const ship = subtotal === 0 ? 0 : subtotal > 250 ? 0 : 22;
  const tax = subtotal * 0.0825;
  const total = subtotal + ship + tax;

  return (
    <div style={{ maxWidth: 1180, margin: "0 auto", padding: "60px 32px 100px" }}>
      <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>Your cellar</span>
      <h1 style={{ fontSize: 64, fontWeight: 300, letterSpacing: "-0.015em", margin: "16px 0 8px" }}>
        Your <b style={{ fontWeight: 800 }}>cart.</b>
      </h1>
      <p style={{ fontSize: 16, color: "var(--text-secondary)", margin: "0 0 32px" }}>
        {cart.length === 0 ? "Empty for now." : `${cart.length} bottling${cart.length === 1 ? "" : "s"} ready to ship.`}
      </p>

      {cart.length === 0 ? (
        <div style={{ padding: "80px 0", textAlign: "center" }}>
          <Icon name="wine-glass" size={48} strokeWidth={1}/>
          <p style={{ margin: "16px 0 24px", color: "var(--text-secondary)" }}>Your cart is waiting for something good.</p>
          <Button onClick={() => onNavigate("wines")}>Browse wines</Button>
        </div>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 64 }}>
          <div>
            <Divider/>
            {cart.map(item => (
              <div key={item.id} style={{
                display: "grid", gridTemplateColumns: "100px 1fr auto",
                gap: 24, padding: "28px 0",
                borderBottom: "1px solid var(--border-default)",
                alignItems: "center",
              }}>
                <div style={{ background: "var(--color-cream)", aspectRatio: "1/1.4", display: "grid", placeItems: "center", borderRadius: 4 }}>
                  <svg viewBox="0 0 60 120" width="40" height="80">
                    <path d="M24 4 H36 V24 C36 28 42 32 42 40 V112 C42 116 39 118 36 118 H24 C21 118 18 116 18 112 V40 C18 32 24 28 24 24 Z" fill="var(--color-charcoal)"/>
                    <rect x="18" y="40" width="24" height="14" fill="var(--color-terracotta)"/>
                  </svg>
                </div>
                <div>
                  <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-accent)" }}>{item.series}</div>
                  <h3 style={{ fontSize: 20, fontWeight: 700, margin: "4px 0 4px" }}>{item.name}</h3>
                  <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--text-secondary)", margin: 0, fontSize: 14 }}>
                    {item.vintage} · {item.varietal}
                  </p>
                  <div style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 16 }}>
                    <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--border-soft)", borderRadius: 4 }}>
                      <button onClick={() => onUpdate(item.id, Math.max(1, item.qty - 1))} style={{ width: 32, height: 36, background: "transparent", border: "none", cursor: "pointer", fontSize: 16 }}>−</button>
                      <span style={{ width: 28, textAlign: "center", fontSize: 14, fontWeight: 700 }}>{item.qty}</span>
                      <button onClick={() => onUpdate(item.id, item.qty + 1)} style={{ width: 32, height: 36, background: "transparent", border: "none", cursor: "pointer", fontSize: 16 }}>+</button>
                    </div>
                    <button onClick={() => onRemove(item.id)} style={{
                      background: "transparent", border: "none", padding: 0, cursor: "pointer",
                      fontSize: 12, color: "var(--text-muted)", letterSpacing: "0.08em", textTransform: "uppercase",
                    }}>Remove</button>
                  </div>
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, textAlign: "right" }}>
                  ${item.price * item.qty}
                </div>
              </div>
            ))}
          </div>

          {/* Summary */}
          <aside style={{ background: "var(--color-cream)", padding: 32, borderRadius: 4, height: "fit-content", position: "sticky", top: 100 }}>
            <h3 style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", margin: "0 0 20px" }}>Order Summary</h3>
            <dl style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: "10px 24px", margin: 0, fontSize: 15 }}>
              <dt style={{ color: "var(--text-secondary)" }}>Subtotal</dt><dd style={{ margin: 0 }}>${subtotal.toFixed(2)}</dd>
              <dt style={{ color: "var(--text-secondary)" }}>Shipping</dt>
              <dd style={{ margin: 0 }}>{ship === 0 ? <Badge tone="success">Free over $250</Badge> : "$" + ship.toFixed(2)}</dd>
              <dt style={{ color: "var(--text-secondary)" }}>Tax · TX 8.25%</dt><dd style={{ margin: 0 }}>${tax.toFixed(2)}</dd>
            </dl>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--border-default)", alignItems: "baseline" }}>
              <span style={{ fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)" }}>Total</span>
              <span style={{ fontSize: 32, fontWeight: 700 }}>${total.toFixed(2)}</span>
            </div>
            <div style={{ marginTop: 24 }}>
              <Input label="Email for shipping updates" placeholder="you@example.com" />
            </div>
            <div style={{ marginTop: 18 }}>
              <Button fullWidth size="lg" onClick={() => onNavigate("home")}>Checkout</Button>
            </div>
            <p style={{ marginTop: 14, fontSize: 11, color: "var(--text-muted)", textAlign: "center", letterSpacing: "0.04em" }}>
              Ships in 3–5 business days. Adult signature required on delivery.
            </p>
          </aside>
        </div>
      )}
    </div>
  );
}

window.CartScreen = CartScreen;