function EventsScreen({ onNavigate }) {
  const { Button, Divider, Tag } = window.CedarHollowWineryDesignSystem_a59a90;
  const events = window.CHData.EVENTS;
  const calendarItems = window.CHData.CALENDAR_ITEMS;
  const [filter, setFilter] = React.useState("All");
  const eventTypes = ["All", ...Array.from(new Set(calendarItems.map((item) => item.type)))];
  const visibleItems = filter === "All" ? calendarItems : calendarItems.filter((item) => item.type === filter);
  const featured = events[0];

  return (
    <div>
      <section style={{ background: "var(--color-cream)", padding: "92px 32px 72px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 64, alignItems: "center" }}>
          <div>
            <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>Events Calendar</span>
            <h1 style={{ fontSize: 82, fontWeight: 300, letterSpacing: "-0.02em", margin: "20px 0 16px", lineHeight: 1 }}>
              What is on <b style={{ fontWeight: 800 }}>the hill.</b>
            </h1>
            <p style={{ fontSize: 18, color: "var(--text-secondary)", lineHeight: 1.6, maxWidth: "52ch", margin: 0 }}>
              Dinners, porch sessions, release previews, and seasonal evenings. Start with the calendar, then open an event for dates, times, tickets, and the story behind it.
            </p>
          </div>
          <button onClick={() => onNavigate("event:" + featured.id)} style={{
            border: "1px solid var(--border-default)",
            background: "var(--surface-page)",
            borderRadius: 4,
            padding: 0,
            overflow: "hidden",
            cursor: "pointer",
            textAlign: "left",
          }}>
            <div style={{ aspectRatio: "4/3", backgroundImage: `url('${featured.imageSrc}')`, backgroundSize: "cover", backgroundPosition: "center" }}/>
            <div style={{ padding: 24 }}>
              <Tag tone="outline">{featured.status}</Tag>
              <h2 style={{ fontSize: 28, fontWeight: 800, margin: "14px 0 8px", lineHeight: 1.05 }}>{featured.name}</h2>
              <p style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: 1.5, margin: 0 }}>{featured.summary}</p>
            </div>
          </button>
        </div>
      </section>

      <section style={{ maxWidth: 1180, margin: "60px auto 0", padding: "0 32px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", gap: 24, alignItems: "center", flexWrap: "wrap", marginBottom: 28 }}>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {eventTypes.map((type) => (
              <Tag key={type} tone="outline" selected={filter === type} onClick={() => setFilter(type)}>{type}</Tag>
            ))}
          </div>
          <Button variant="secondary" onClick={() => onNavigate("visit")}>Book a tasting</Button>
        </div>
        <Divider>Upcoming events</Divider>
      </section>

      <section style={{ maxWidth: 980, margin: "34px auto 96px", padding: "0 32px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {visibleItems.map((item) => {
            const event = events.find((entry) => entry.id === item.eventId);
            return (
              <button key={item.id} onClick={() => onNavigate("event:" + item.eventId)} style={{
                display: "grid",
                gridTemplateColumns: "92px 1fr auto",
                gap: 24,
                alignItems: "center",
                border: "1px solid var(--border-default)",
                borderRadius: 4,
                background: "var(--surface-page)",
                padding: 18,
                textAlign: "left",
                cursor: "pointer",
              }}>
                <div style={{ borderRight: "1px solid var(--border-default)", paddingRight: 18, textAlign: "center" }}>
                  <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>{item.month}</div>
                  <div style={{ fontSize: 34, fontWeight: 800, lineHeight: 1, marginTop: 4 }}>{item.date}</div>
                  <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--text-secondary)", marginTop: 2 }}>{item.day}</div>
                </div>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                    <Tag tone="outline">{item.type}</Tag>
                    {event && <span style={{ fontSize: 12, color: "var(--text-muted)" }}>{event.status}</span>}
                  </div>
                  <h2 style={{ fontSize: 24, fontWeight: 800, margin: "10px 0 4px" }}>{item.title}</h2>
                  <p style={{ color: "var(--text-muted)", margin: 0 }}>{item.time}</p>
                </div>
                <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-accent)" }}>Details</span>
              </button>
            );
          })}
        </div>
      </section>
    </div>
  );
}

function EventDetailScreen({ eventId, onNavigate }) {
  const { Button, Card, Divider, Input, Tag } = window.CedarHollowWineryDesignSystem_a59a90;
  const events = window.CHData.EVENTS;
  const event = events.find((item) => item.id === eventId) || events[0];
  const [mediaIndex, setMediaIndex] = React.useState(0);
  const [slotIndex, setSlotIndex] = React.useState(0);
  const [ticketId, setTicketId] = React.useState(event.ticketTypes[0].id);
  const [quantity, setQuantity] = React.useState(2);
  const [reserved, setReserved] = React.useState(false);
  const selectedTicket = event.ticketTypes.find((ticket) => ticket.id === ticketId) || event.ticketTypes[0];
  const selectedSlot = event.slots[slotIndex] || event.slots[0];

  return (
    <div>
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "40px 32px 0" }}>
        <button onClick={() => onNavigate("events")} style={{
          border: "none",
          background: "transparent",
          color: "var(--text-secondary)",
          fontSize: 12,
          fontWeight: 800,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          cursor: "pointer",
          padding: "0 0 18px",
        }}>Back to events</button>
        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 34, alignItems: "stretch" }}>
          <div style={{
            minHeight: 560,
            borderRadius: 4,
            overflow: "hidden",
            backgroundImage: `url('${event.gallery[mediaIndex]}')`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            position: "relative",
          }}>
            <div style={{ position: "absolute", left: 24, bottom: 24, display: "flex", gap: 8 }}>
              {event.gallery.map((src, index) => (
                <button key={src} onClick={() => setMediaIndex(index)} aria-label={"Show event image " + (index + 1)} style={{
                  width: index === mediaIndex ? 34 : 10,
                  height: 10,
                  borderRadius: 999,
                  border: "1px solid rgba(255,255,255,0.8)",
                  background: index === mediaIndex ? "var(--color-parchment)" : "rgba(255,255,255,0.35)",
                  cursor: "pointer",
                  transition: "width 180ms ease",
                }}/>
              ))}
            </div>
          </div>
          <div style={{ background: "var(--color-cream)", borderRadius: 4, padding: "54px 44px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>{event.eyebrow}</span>
            <h1 style={{ fontSize: 62, fontWeight: 300, letterSpacing: "-0.02em", lineHeight: 0.98, margin: "18px 0 16px" }}>
              {event.name}
            </h1>
            <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 19, color: "var(--text-secondary)", lineHeight: 1.55, margin: 0 }}>{event.summary}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 30 }}>
              <Fact label="Next date" value={event.date}/>
              <Fact label="Capacity" value={event.capacity}/>
            </div>
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 1080, margin: "78px auto 0", padding: "0 32px" }}>
        <Divider>Event details</Divider>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 0.9fr", gap: 56, marginTop: 34 }}>
          <div>
            <h2 style={{ fontSize: 42, fontWeight: 800, letterSpacing: "-0.01em", margin: "0 0 16px" }}>The shape of the evening.</h2>
            <p style={{ color: "var(--text-secondary)", fontSize: 17, lineHeight: 1.7, margin: 0 }}>{event.longDescription}</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 34 }}>
              {event.ticketTypes.map((ticket) => (
                <button key={ticket.id} onClick={() => setTicketId(ticket.id)} style={{
                  border: "1px solid " + (ticketId === ticket.id ? "var(--color-charcoal)" : "var(--border-default)"),
                  background: ticketId === ticket.id ? "var(--color-cream)" : "var(--surface-page)",
                  borderRadius: 4,
                  padding: 18,
                  textAlign: "left",
                  cursor: "pointer",
                }}>
                  <div style={{ fontSize: 18, fontWeight: 800, lineHeight: 1.1 }}>{ticket.name}</div>
                  <div style={{ fontSize: 28, fontWeight: 800, marginTop: 12 }}>${ticket.price}</div>
                  <p style={{ fontSize: 12, color: "var(--text-muted)", lineHeight: 1.45, margin: "8px 0 0" }}>{ticket.note}</p>
                </button>
              ))}
            </div>
          </div>

          <Card variant="outlined" padding="lg">
            <span style={{ fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "var(--text-accent)" }}>Tickets</span>
            <h3 style={{ fontSize: 30, fontWeight: 800, margin: "12px 0 18px" }}>Choose a time.</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {event.slots.map((slot, index) => (
                <button key={slot.label + slot.time} onClick={() => setSlotIndex(index)} style={{
                  border: "1px solid " + (slotIndex === index ? "var(--color-charcoal)" : "var(--border-default)"),
                  background: slotIndex === index ? "var(--color-cream)" : "transparent",
                  borderRadius: 4,
                  padding: "14px 16px",
                  display: "flex",
                  justifyContent: "space-between",
                  gap: 14,
                  alignItems: "center",
                  textAlign: "left",
                  cursor: "pointer",
                }}>
                  <span>
                    <b>{slot.label}</b>
                    <span style={{ display: "block", color: "var(--text-muted)", fontSize: 13, marginTop: 3 }}>{slot.time}</span>
                  </span>
                  <Tag tone="outline">{slot.availability}</Tag>
                </button>
              ))}
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 20 }}>
              <Input label="Name" placeholder="Sam Hollow"/>
              <Input label="Email" type="email" placeholder="sam@example.com"/>
            </div>

            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 22 }}>
              <span style={{ color: "var(--text-secondary)" }}>{selectedTicket.name}</span>
              <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--border-default)", borderRadius: 4 }}>
                <button onClick={() => setQuantity(Math.max(1, quantity - 1))} style={ticketButtonStyle}>-</button>
                <span style={{ width: 44, textAlign: "center", fontWeight: 800 }}>{quantity}</span>
                <button onClick={() => setQuantity(Math.min(8, quantity + 1))} style={ticketButtonStyle}>+</button>
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderTop: "1px solid var(--border-default)", paddingTop: 20, marginTop: 24 }}>
              <span style={{ color: "var(--text-muted)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase" }}>Total</span>
              <span style={{ fontSize: 36, fontWeight: 800 }}>${selectedTicket.price * quantity}</span>
            </div>
            <div style={{ marginTop: 20 }}>
              <Button fullWidth onClick={() => setReserved(true)}>{reserved ? "Tickets reserved" : "Reserve tickets"}</Button>
            </div>
            {reserved && (
              <p style={{ margin: "14px 0 0", fontSize: 12, color: "var(--color-success)", textAlign: "center" }}>
                Held for {selectedSlot.label} at {selectedSlot.time}. The final Avero widget should return an event order ID here.
              </p>
            )}
          </Card>
        </div>
      </section>
    </div>
  );
}

function Fact({ label, value }) {
  return (
    <div style={{ borderTop: "1px solid var(--border-default)", paddingTop: 14 }}>
      <div style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--text-muted)" }}>{label}</div>
      <div style={{ fontWeight: 800, marginTop: 6 }}>{value}</div>
    </div>
  );
}

const ticketButtonStyle = {
  width: 38,
  height: 38,
  border: "none",
  background: "transparent",
  cursor: "pointer",
  fontSize: 18,
  fontWeight: 800,
  color: "var(--text-primary)",
};

window.EventsScreen = EventsScreen;
window.EventDetailScreen = EventDetailScreen;