function VisitScreen({ onNavigate }) {
  const { Button, Input, Card, Divider, Icon } = window.CedarHollowWineryDesignSystem_a59a90;
  const exp = window.CHData.EXPERIENCES;
  const [selected, setSelected] = React.useState(exp[0].id);
  const [party, setParty] = React.useState(2);
  const [submitted, setSubmitted] = React.useState(false);
  const days = ["Thu 15", "Fri 16", "Sat 17", "Sun 18", "Thu 22", "Fri 23", "Sat 24", "Sun 25"];
  const times = ["11:00", "12:30", "2:00", "3:30", "5:00"];
  const [day, setDay] = React.useState("Sat 17");
  const [time, setTime] = React.useState("2:00");

  return (
    <div>
      {/* HERO */}
      <section style={{ background: "var(--color-cream)", padding: "100px 32px 80px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>The Cellar Door</span>
            <h1 style={{ fontSize: 80, fontWeight: 300, letterSpacing: "-0.02em", margin: "20px 0", lineHeight: 1.0 }}>
              Come <b style={{ fontWeight: 800 }}>visit us.</b>
            </h1>
            <p style={{ fontSize: 18, color: "var(--text-secondary)", lineHeight: 1.65, maxWidth: "48ch" }}>
              The cellar door sits at the edge of the south block in Hye, Texas, half an hour east of Fredericksburg. Thursday through Sunday, by reservation. Walk-ins welcome when the porch has room.
            </p>
            <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 16px", maxWidth: 480 }}>
              <div style={{ color: "var(--text-muted)" }}><Icon name="map-pin" size={18}/></div>
              <div>10428 US Hwy 290 · Hye, TX 78635</div>
              <div style={{ color: "var(--text-muted)" }}><Icon name="clock" size={18}/></div>
              <div>Thu–Sun · 11am to 6pm · Closed Mon–Wed</div>
              <div style={{ color: "var(--text-muted)" }}><Icon name="calendar" size={18}/></div>
              <div>Last seating 90 minutes before close</div>
            </div>
          </div>
          <div style={{
            aspectRatio: "1/1",
            backgroundImage: "url('../../assets/photos/oak-table.jpg')",
            backgroundSize: "cover", backgroundPosition: "center",
            borderRadius: 4,
          }}/>
        </div>
      </section>

      {/* SPACES STRIP */}
      <section style={{ maxWidth: 1280, margin: "80px auto 0", padding: "0 32px" }}>
        <Divider>The spaces</Divider>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 32 }}>
          {[
            { src: "tasting-bar.jpg", t: "The Long Table", d: "Indoor, climate-controlled. Six pours, a few thoughtful bites." },
            { src: "porch-evening.jpg", t: "The Porch", d: "Wraparound porch, ceiling fans, sixty-foot live oaks for shade." },
            { src: "vineyard-sunset.jpg", t: "The Overlook", d: "Adirondacks at the edge of the south block. Just bring a glass." },
          ].map(s => (
            <div key={s.t}>
              <div style={{
                aspectRatio: "4/3", borderRadius: 4, overflow: "hidden",
                backgroundImage: `url('../../assets/photos/${s.src}')`,
                backgroundSize: "cover", backgroundPosition: "center",
              }}/>
              <h3 style={{ fontSize: 18, fontWeight: 700, margin: "16px 0 6px" }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: "var(--text-secondary)", margin: 0, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* EXPERIENCES */}
      <section style={{ maxWidth: 1180, margin: "80px auto 0", padding: "0 32px" }}>
        <Divider>Three experiences</Divider>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 32 }}>
          {exp.map(e => (
            <Card key={e.id} variant={selected === e.id ? "raised" : "outlined"} padding="lg" accent={selected === e.id}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <h3 style={{ fontSize: 24, fontWeight: 700, margin: 0 }}>{e.name}</h3>
                <span style={{ fontSize: 22, fontWeight: 700, color: "var(--text-primary)" }}>${e.price}</span>
              </div>
              <p style={{ fontSize: 13, color: "var(--text-muted)", margin: "4px 0 16px", letterSpacing: "0.04em" }}>{e.duration} · per guest</p>
              <p style={{ fontSize: 15, color: "var(--text-secondary)", lineHeight: 1.55, margin: 0, minHeight: 70 }}>{e.summary}</p>
              <div style={{ marginTop: 20 }}>
                <Button variant={selected === e.id ? "primary" : "secondary"} size="sm" fullWidth onClick={() => setSelected(e.id)}>
                  {selected === e.id ? "Selected" : "Select"}
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </section>

      {/* BOOKING */}
      <section style={{ maxWidth: 1180, margin: "60px auto 100px", padding: "0 32px" }}>
        <Card variant="outlined" padding="lg">
          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 56 }}>
            <div>
              <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>Reserve</span>
              <h2 style={{ fontSize: 36, fontWeight: 800, letterSpacing: "-0.01em", margin: "12px 0 8px" }}>Choose a time</h2>
              <p style={{ color: "var(--text-secondary)", margin: 0 }}>
                {exp.find(e => e.id === selected).name} · {party} guest{party === 1 ? "" : "s"}
              </p>

              <div style={{ marginTop: 28, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 10 }}>Date</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {days.map(d => (
                  <button key={d} onClick={() => setDay(d)} style={{
                    background: day === d ? "var(--color-charcoal)" : "transparent",
                    color: day === d ? "var(--color-parchment)" : "var(--text-primary)",
                    border: "1px solid " + (day === d ? "var(--color-charcoal)" : "var(--border-soft)"),
                    padding: "10px 14px", fontSize: 13, fontWeight: 500, borderRadius: 4, cursor: "pointer",
                    fontFamily: "var(--font-sans)",
                  }}>{d}</button>
                ))}
              </div>

              <div style={{ marginTop: 24, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 10 }}>Time</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {times.map(t => (
                  <button key={t} onClick={() => setTime(t)} style={{
                    background: time === t ? "var(--color-terracotta)" : "transparent",
                    color: time === t ? "var(--color-parchment)" : "var(--text-primary)",
                    border: "1px solid " + (time === t ? "var(--color-terracotta)" : "var(--border-soft)"),
                    padding: "10px 14px", fontSize: 13, fontWeight: 500, borderRadius: 4, cursor: "pointer",
                    fontFamily: "var(--font-sans)", minWidth: 78,
                  }}>{t} pm</button>
                ))}
              </div>

              <div style={{ marginTop: 24, fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: 10 }}>Party size</div>
              <div style={{ display: "flex", gap: 8 }}>
                {[1, 2, 3, 4, 6, 8].map(n => (
                  <button key={n} onClick={() => setParty(n)} style={{
                    background: party === n ? "var(--color-charcoal)" : "transparent",
                    color: party === n ? "var(--color-parchment)" : "var(--text-primary)",
                    border: "1px solid " + (party === n ? "var(--color-charcoal)" : "var(--border-soft)"),
                    width: 44, height: 44, fontSize: 14, fontWeight: 700, borderRadius: 4, cursor: "pointer",
                  }}>{n}</button>
                ))}
              </div>
            </div>

            <div style={{ background: "var(--color-cream)", padding: 28, borderRadius: 4 }}>
              <h3 style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", margin: 0 }}>Your reservation</h3>
              <div style={{ marginTop: 20, display: "grid", gridTemplateColumns: "auto 1fr", gap: "10px 18px", fontSize: 14 }}>
                <span style={{ color: "var(--text-muted)" }}>Experience</span><span>{exp.find(e => e.id === selected).name}</span>
                <span style={{ color: "var(--text-muted)" }}>Date</span><span>{day} November · {time} pm</span>
                <span style={{ color: "var(--text-muted)" }}>Guests</span><span>{party}</span>
              </div>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--border-default)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <span style={{ fontSize: 12, color: "var(--text-muted)", letterSpacing: "0.08em", textTransform: "uppercase" }}>Total</span>
                <span style={{ fontSize: 32, fontWeight: 700 }}>${exp.find(e => e.id === selected).price * party}</span>
              </div>
              <div style={{ marginTop: 20 }}>
                <Button fullWidth onClick={() => setSubmitted(true)}>{submitted ? "Reservation held" : "Hold reservation"}</Button>
              </div>
              {submitted && (
                <p style={{ marginTop: 14, fontSize: 12, color: "var(--color-success)", textAlign: "center" }}>
                  We&rsquo;ll see you {day}. Check your email for confirmation.
                </p>
              )}
            </div>
          </div>
        </Card>
      </section>
    </div>
  );
}

window.VisitScreen = VisitScreen;