function WineClubScreen({ onNavigate }) {
  const { Button, Divider, Icon, Card, Input } = window.CedarHollowWineryDesignSystem_a59a90;
  const tiers = window.CHData.CLUB_TIERS;
  const [chosen, setChosen] = React.useState("reserve");
  const [joined, setJoined] = React.useState(false);

  return (
    <div>
      {/* HERO */}
      <section style={{ padding: "100px 32px 40px", textAlign: "center" }}>
        <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>The Wine Club</span>
        <h1 style={{ fontSize: 84, fontWeight: 300, letterSpacing: "-0.02em", margin: "20px auto 16px", maxWidth: "20ch", lineHeight: 1.0 }}>
          The hill, <b style={{ fontWeight: 800 }}>delivered.</b>
        </h1>
        <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 20, color: "var(--text-secondary)", maxWidth: "52ch", margin: "0 auto" }}>
          Three or six bottles, three times a year. Plus first call on every release, a 10–20% discount, and an open invitation to the harvest table.
        </p>
      </section>

      {/* HERO IMAGE */}
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "32px 32px 0" }}>
        <div style={{
          aspectRatio: "16/6.5", borderRadius: 4, overflow: "hidden",
          backgroundImage: "url('../../assets/photos/barrel-room.jpg')",
          backgroundSize: "cover", backgroundPosition: "center",
        }}/>
      </section>

      {/* TIERS */}
      <section style={{ maxWidth: 1180, margin: "80px auto 0", padding: "0 32px" }}>
        <Divider>Three tiers</Divider>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 40 }}>
          {tiers.map(t => {
            const isFeatured = t.featured;
            const isChosen = chosen === t.id;
            return (
              <div key={t.id} style={{
                position: "relative",
                background: "var(--surface-page)",
                border: "1px solid " + (isChosen ? "var(--color-charcoal)" : "var(--border-default)"),
                borderRadius: 4,
                padding: "36px 28px 28px",
                display: "flex", flexDirection: "column",
                transition: "border-color 220ms",
              }}>
                <div style={{
                  position: "absolute", top: 0, left: 0, right: 0,
                  height: 4, background: t.accent,
                }}/>
                {isFeatured && (
                  <div style={{
                    position: "absolute", top: 0, right: 24, transform: "translateY(-50%)",
                    background: "var(--color-charcoal)", color: "var(--color-parchment)",
                    fontSize: 10, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
                    padding: "6px 12px", borderRadius: 999,
                  }}>Most popular</div>
                )}
                <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: t.accent }}>{t.bottles} · {t.cadence.split(" · ")[1]}</div>
                <h3 style={{ fontSize: 32, fontWeight: 800, letterSpacing: "-0.01em", margin: "12px 0 6px" }}>{t.name}</h3>
                <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--text-secondary)", margin: 0 }}>{t.cadence}</p>

                <div style={{ display: "flex", alignItems: "baseline", gap: 6, margin: "24px 0" }}>
                  <span style={{ fontSize: 44, fontWeight: 700 }}>${t.price}</span>
                  <span style={{ fontSize: 13, color: "var(--text-muted)" }}>/ shipment</span>
                </div>

                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                  {t.perks.map(p => (
                    <li key={p} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 10, fontSize: 14, lineHeight: 1.5, color: "var(--text-secondary)" }}>
                      <span style={{ color: t.accent, marginTop: 4 }}>—</span>
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>

                <div style={{ marginTop: 24 }}>
                  <Button
                    variant={isChosen ? "primary" : "secondary"}
                    fullWidth
                    onClick={() => setChosen(t.id)}
                  >
                    {isChosen ? "Selected" : "Choose " + t.name}
                  </Button>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section style={{ background: "var(--color-cream)", padding: "100px 32px", marginTop: 100 }}>
        <div style={{ maxWidth: 1080, margin: "0 auto" }}>
          <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>How it works</span>
          <h2 style={{ fontSize: 48, fontWeight: 300, letterSpacing: "-0.015em", margin: "16px 0 40px", maxWidth: "20ch" }}>
            Three shipments. <b style={{ fontWeight: 800 }}>One simple rhythm.</b>
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
            {[
              { n: "01", t: "Pick a tier", d: "Cellar Door, Reserve, or Library. Change any time after the first shipment." },
              { n: "02", t: "We curate", d: "Each shipment is hand-selected by Maria and Eli from the current release." },
              { n: "03", t: "We notify", d: "You'll see what's coming two weeks before it ships, with the option to swap." },
              { n: "04", t: "We ship", d: "March, July, November. Adult signature required. Ships to fourteen states." },
            ].map(s => (
              <div key={s.n} style={{ borderTop: "1px solid var(--border-default)", paddingTop: 20 }}>
                <div style={{
                  fontFamily: "var(--font-serif)", fontSize: 32, fontStyle: "italic",
                  color: "var(--color-terracotta)", marginBottom: 8,
                }}>{s.n}</div>
                <h3 style={{ fontSize: 18, fontWeight: 700, margin: "0 0 8px" }}>{s.t}</h3>
                <p style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.55, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* JOIN */}
      <section style={{ maxWidth: 920, margin: "100px auto 60px", padding: "0 32px" }}>
        <Card variant="outlined" padding="lg">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
            <div>
              <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>Join the club</span>
              <h2 style={{ fontSize: 36, fontWeight: 800, letterSpacing: "-0.01em", margin: "12px 0 12px", lineHeight: 1.05 }}>
                Save your seat at the table.
              </h2>
              <p style={{ color: "var(--text-secondary)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>
                You'll get a confirmation email and a welcome note before your first shipment lands.
              </p>
              <div style={{ marginTop: 24, padding: "16px 20px", background: "var(--color-cream)", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>Your tier</div>
                  <div style={{ fontSize: 16, fontWeight: 700, marginTop: 4 }}>{tiers.find(t => t.id === chosen).name}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>Per shipment</div>
                  <div style={{ fontSize: 16, fontWeight: 700, marginTop: 4 }}>${tiers.find(t => t.id === chosen).price}</div>
                </div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <Input label="First name" placeholder="Sam"/>
              <Input label="Email" type="email" placeholder="you@example.com"/>
              <Input label="Shipping ZIP" placeholder="78635"/>
              <Button fullWidth onClick={() => setJoined(true)}>
                {joined ? "Welcome to the table ✓" : "Join the Club"}
              </Button>
              {joined && (
                <p style={{ fontSize: 12, color: "var(--color-success)", textAlign: "center", margin: 0 }}>
                  Check your inbox — first shipment goes out in March.
                </p>
              )}
            </div>
          </div>
        </Card>
      </section>
    </div>
  );
}

window.WineClubScreen = WineClubScreen;