function WineDetailScreen({ wineId, onNavigate, onAddToCart }) {
  const { Button, Tabs, Badge, Icon, Divider, WineCard } = window.CedarHollowWineryDesignSystem_a59a90;
  const w = window.CHData.WINES.find(x => x.id === wineId) || window.CHData.WINES[0];
  const [tab, setTab] = React.useState("notes");
  const [qty, setQty] = React.useState(1);

  return (
    <div>
      <nav style={{ maxWidth: 1180, margin: "0 auto", padding: "28px 32px 0", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>
        <button onClick={() => onNavigate("shop")} style={{ background: "transparent", border: "none", color: "inherit", padding: 0, cursor: "pointer", letterSpacing: "inherit" }}>Shop</button>
        <span style={{ margin: "0 10px" }}>/</span>
        <span style={{ color: "var(--text-primary)" }}>{w.name}</span>
      </nav>

      <section style={{ maxWidth: 1180, margin: "0 auto", padding: "32px 32px 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }}>
        {/* BOTTLE */}
        <div style={{
          background: "var(--color-cream)",
          aspectRatio: "4/5",
          display: "grid", placeItems: "center",
          padding: 40, borderRadius: 4,
        }}>
          {w.imageSrc
            ? <img src={w.imageSrc} alt={w.name} style={{ maxHeight: "100%", maxWidth: "100%", objectFit: "contain" }}/>
            : <FallbackBottle w={w}/>
          }
        </div>

        {/* META */}
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
            <Badge tone="accent">{w.series}</Badge>
            {w.badge && <Badge tone="dark">{w.badge}</Badge>}
          </div>
          <h1 style={{ fontSize: 56, fontWeight: 800, letterSpacing: "-0.015em", margin: "0 0 8px", lineHeight: 1.02 }}>{w.name}</h1>
          <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 20, color: "var(--text-secondary)", margin: 0 }}>
            {w.vintage} · {w.varietal}
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, margin: "32px 0", paddingTop: 24, borderTop: "1px solid var(--border-default)" }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>ABV</div>
              <div style={{ fontSize: 22, fontWeight: 700, marginTop: 6 }}>{w.abv}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>Élevage</div>
              <div style={{ fontSize: 14, marginTop: 6, lineHeight: 1.35 }}>{w.cellar}</div>
            </div>
            <div>
              <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>Production</div>
              <div style={{ fontSize: 22, fontWeight: 700, marginTop: 6 }}>{w.cases} <span style={{ fontSize: 12, fontWeight: 400, color: "var(--text-muted)" }}>cases</span></div>
            </div>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 20, padding: "24px 0", borderTop: "1px solid var(--border-default)", borderBottom: "1px solid var(--border-default)" }}>
            <div style={{ fontSize: 36, fontWeight: 700 }}>${w.price}</div>
            <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--border-soft)", borderRadius: 4 }}>
              <button onClick={() => setQty(Math.max(1, qty - 1))} style={{ width: 36, height: 44, background: "transparent", border: "none", cursor: "pointer", color: "var(--text-primary)", fontSize: 16 }}>−</button>
              <span style={{ width: 32, textAlign: "center", fontSize: 15, fontWeight: 700 }}>{qty}</span>
              <button onClick={() => setQty(qty + 1)} style={{ width: 36, height: 44, background: "transparent", border: "none", cursor: "pointer", color: "var(--text-primary)", fontSize: 16 }}>+</button>
            </div>
            <Button onClick={() => onAddToCart(w, qty)} size="lg">Add to cart</Button>
          </div>

          <div style={{ marginTop: 14, fontSize: 13, color: "var(--text-muted)", display: "flex", alignItems: "center", gap: 8 }}>
            <Icon name="leaf" size={14}/>
            Ships to TX, CA, NY, FL, OR, WA · Free over $250
          </div>

          <div style={{ marginTop: 36 }}>
            <Tabs items={[
              { id: "notes", label: "Tasting Notes" },
              { id: "pairing", label: "Pairing" },
              { id: "tech", label: "Tech Sheet" },
            ]} value={tab} onChange={setTab}/>
            <div style={{ padding: "24px 0", fontSize: 16, lineHeight: 1.65, color: "var(--text-secondary)", minHeight: 100 }}>
              {tab === "notes" && w.notes}
              {tab === "pairing" && w.pairing}
              {tab === "tech" && (
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "auto 1fr", columnGap: 32, rowGap: 8 }}>
                  <li style={{ color: "var(--text-muted)" }}>Varietal</li><li>{w.varietal}</li>
                  <li style={{ color: "var(--text-muted)" }}>Vintage</li><li>{w.vintage}</li>
                  <li style={{ color: "var(--text-muted)" }}>ABV</li><li>{w.abv}</li>
                  <li style={{ color: "var(--text-muted)" }}>Élevage</li><li>{w.cellar}</li>
                  <li style={{ color: "var(--text-muted)" }}>Bottled</li><li>{w.bottling}</li>
                  <li style={{ color: "var(--text-muted)" }}>Production</li><li>{w.cases} cases</li>
                </ul>
              )}
            </div>
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 1180, margin: "80px auto 0", padding: "0 32px" }}>
        <Divider>You may also enjoy</Divider>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginTop: 32 }}>
          {window.CHData.WINES.filter(x => x.id !== w.id).slice(0, 4).map(other => (
            <WineCard key={other.id} {...other} onClick={() => onNavigate("wine:" + other.id)} onAdd={() => onAddToCart(other)}/>
          ))}
        </div>
      </section>
    </div>
  );
}

function FallbackBottle({ w }) {
  return (
    <svg viewBox="0 0 120 400" width="auto" height="100%" aria-hidden>
      <path d="M48 4 H72 V64 C72 76 88 84 88 112 V388 C88 394 84 396 80 396 H40 C36 396 32 394 32 388 V112 C32 84 48 76 48 64 Z" fill="var(--color-charcoal)"/>
      <rect x="32" y="112" width="56" height="56" fill="var(--color-charcoal-85)"/>
      <rect x="32" y="190" width="56" height="130" fill="var(--color-parchment)" opacity="0.96"/>
      <g transform="translate(60 230)" textAnchor="middle">
        <text y="0"   fill="var(--color-charcoal)" fontFamily="Helvetica, sans-serif" fontWeight="300" fontSize="10" letterSpacing="1.5">CEDAR</text>
        <text y="14"  fill="var(--color-charcoal)" fontFamily="Helvetica, sans-serif" fontWeight="800" fontSize="10" letterSpacing="1.5">HOLLOW</text>
        <text y="25"  fill="var(--color-terracotta)" fontSize="4.5" letterSpacing="2">W I N E R Y</text>
        <line x1="-18" x2="18" y1="33" y2="33" stroke="var(--color-gold)" strokeWidth="0.5"/>
        <text y="44"  fill="var(--color-charcoal)" fontFamily="Helvetica, sans-serif" fontSize="4.5" letterSpacing="1.5">TEXAS HILL COUNTRY</text>
        <text y="52"  fill="var(--color-charcoal)" fontFamily="Helvetica, sans-serif" fontSize="4" letterSpacing="1">EST. 2008</text>
        <text y="68"  fill="var(--color-terracotta)" fontFamily="Helvetica, sans-serif" fontWeight="500" fontSize="8" letterSpacing="2.5">{w.name.toUpperCase()}</text>
        <text y="80"  fill="var(--color-charcoal)" fontFamily="Helvetica, sans-serif" fontSize="6" letterSpacing="1.5">{w.vintage}</text>
      </g>
    </svg>
  );
}

window.WineDetailScreen = WineDetailScreen;