function OurWineScreen({ onNavigate, onAddToCart }) {
  const { Button, Divider, Icon, Badge } = window.CedarHollowWineryDesignSystem_a59a90;
  // First 4 get long-form storytelling blocks; the rest appear as a grid below.
  const wines = window.CHData.WINES.slice(0, 4);
  const rest = window.CHData.WINES.slice(4);

  return (
    <div>
      {/* HERO */}
      <section style={{ padding: "100px 32px 40px", textAlign: "center" }}>
        <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>Our Wine</span>
        <h1 style={{ fontSize: 88, fontWeight: 300, letterSpacing: "-0.02em", margin: "20px auto 16px", maxWidth: "20ch", lineHeight: 1.0 }}>
          Four grapes that <b style={{ fontWeight: 800 }}>belong here.</b>
        </h1>
        <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 20, color: "var(--text-secondary)", maxWidth: "52ch", margin: "0 auto" }}>
          We chose varietals that earn their place in Hill Country heat. Not what's easy to sell — what's good to grow.
        </p>
      </section>

      {/* BOTTLES STRIP */}
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "40px 32px 80px" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          background: "var(--color-cream)",
          borderRadius: 4, overflow: "hidden",
        }}>
          {wines.map((w, i) => (
            <a key={w.id} href="#" onClick={(e) => { e.preventDefault(); onNavigate("wine:" + w.id); }} style={{
              padding: "48px 24px 32px", textAlign: "center", textDecoration: "none", color: "inherit",
              borderRight: i < wines.length - 1 ? "1px solid var(--border-default)" : "none",
              display: "block",
            }}>
              <img src={w.imageSrc} alt={w.name} style={{ height: 320, width: "auto", margin: "0 auto", display: "block" }}/>
              <div style={{ marginTop: 28, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-accent)" }}>{w.series}</div>
              <h3 style={{ fontSize: 22, fontWeight: 700, margin: "8px 0 4px" }}>{w.name}</h3>
              <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--text-muted)", margin: 0, fontSize: 14 }}>{w.vintage}</p>
            </a>
          ))}
        </div>
      </section>

      {/* PORTFOLIO LONG-FORM */}
      {wines.map((w, i) => (
        <section key={w.id} style={{ padding: i === 0 ? "0 32px 100px" : "100px 32px" }}>
          <div style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: i % 2 === 0 ? "1fr 1.4fr" : "1.4fr 1fr", gap: 64, alignItems: "center" }}>
            {i % 2 === 0 ? <BottleArt w={w}/> : <Prose w={w} onNavigate={onNavigate} onAddToCart={onAddToCart}/>}
            {i % 2 === 0 ? <Prose w={w} onNavigate={onNavigate} onAddToCart={onAddToCart}/> : <BottleArt w={w}/>}
          </div>
        </section>
      ))}

      {/* THE OTHERS */}
      <section style={{ maxWidth: 1080, margin: "60px auto 0", padding: "0 32px" }}>
        <Divider>Plus a few more</Divider>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginTop: 40 }}>
          {rest.map(x => (
            <div key={x.id} style={{ borderTop: "1px solid var(--border-default)", paddingTop: 20 }}>
              <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-accent)" }}>{x.series}</div>
              <h3 style={{ fontSize: 20, fontWeight: 700, margin: "8px 0 4px" }}>{x.name}</h3>
              <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--text-secondary)", fontSize: 14, margin: 0 }}>{x.vintage} · {x.varietal}</p>
              <p style={{ fontSize: 13, color: "var(--text-secondary)", marginTop: 8, lineHeight: 1.5 }}>{x.notes}</p>
              <div style={{ marginTop: 12 }}>
                <Button variant="link" onClick={() => onNavigate("wine:" + x.id)}>See bottle  →</Button>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: 1180, margin: "120px auto 0", padding: "0 32px" }}>
        <div style={{
          background: "var(--color-charcoal)", color: "var(--text-on-dark)",
          padding: "72px 64px", borderRadius: 4,
          display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 48,
        }}>
          <div>
            <h2 style={{ fontSize: 36, fontWeight: 300, letterSpacing: "-0.01em", margin: 0, maxWidth: "24ch" }}>
              Ready to <b style={{ fontWeight: 800 }}>open one?</b>
            </h2>
          </div>
          <Button onClick={() => onNavigate("shop")}>Shop the Release</Button>
        </div>
      </section>
    </div>
  );
}

function BottleArt({ w }) {
  return (
    <div style={{
      background: "var(--color-cream)", padding: 40, borderRadius: 4,
      aspectRatio: "1/1.1",
      display: "grid", placeItems: "center",
    }}>
      <img src={w.imageSrc} alt={w.name} style={{ maxHeight: "100%", maxWidth: "auto" }}/>
    </div>
  );
}

function Prose({ w, onNavigate, onAddToCart }) {
  const { Button } = window.CedarHollowWineryDesignSystem_a59a90;
  return (
    <div>
      <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>{w.series} · {w.vintage}</span>
      <h2 style={{ fontSize: 64, fontWeight: 800, letterSpacing: "-0.02em", margin: "16px 0 12px", lineHeight: 0.98 }}>
        {w.name}
      </h2>
      <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--text-secondary)", fontSize: 18, margin: "0 0 20px" }}>{w.varietal}</p>
      <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--text-secondary)", maxWidth: "44ch", marginTop: 12 }}>{w.notes}</p>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--text-secondary)", maxWidth: "44ch", marginTop: 12, fontStyle: "italic", opacity: 0.85 }}>
        Pair with {w.pairing.toLowerCase()}.
      </p>
      <div style={{ display: "grid", gridTemplateColumns: "auto auto auto", gap: 24, marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--border-default)", fontSize: 13 }}>
        <div><div style={{ color: "var(--text-muted)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>ABV</div><div style={{ fontWeight: 700, marginTop: 4 }}>{w.abv}</div></div>
        <div><div style={{ color: "var(--text-muted)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>Cellar</div><div style={{ marginTop: 4 }}>{w.cellar}</div></div>
        <div><div style={{ color: "var(--text-muted)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>Cases</div><div style={{ fontWeight: 700, marginTop: 4 }}>{w.cases}</div></div>
      </div>
      <div style={{ display: "flex", gap: 12, marginTop: 28, alignItems: "center" }}>
        <Button onClick={() => onNavigate("wine:" + w.id)}>Buy — ${w.price}</Button>
        <Button variant="link" onClick={() => onNavigate("wine:" + w.id)}>Tech sheet  →</Button>
      </div>
    </div>
  );
}

window.OurWineScreen = OurWineScreen;