// Events index — two directions.
// Direction A · Calendar view (two-month grid + filter row + featured strip)
// Direction B · List view (grouped by month, big rows)
//
// Both follow the Events stream (Pine palette anchor, Hot Pink as the
// one-per-page pop). The page is Events-led, so the single pink CTA is
// "Buy tickets" on Plains Songbook — the season's main ticketed action.

const EI = {
  paper: "#FBF7EE",
  warmPaper: "#F5F0E2",
  stone: "#E8E2D3",
  navy: "#01234B",
  ink: "#1F1B2E",
  mute: "#6B6577",
  pine: "#2F7A2E",
  pineDeep: "#1A461A",
  pineForest: "#0F2E10",
  pineLifted: "#4FA13A",
  meadow: "#78BE4D",
  leaf: "#BFE0A5",
  whisper: "#EBF3DF",
  pink: "#EB4D86",   // the Events pop
  yellow: "#F3CF03",
  council: "#45217A",
  artists: "#01234B",
};

function EventsNav({ active = "events" }) {
  const items = [
    { label: "What's on", stream: "events",  path: "#/events",  active: active === "events" },
    { label: "Artists",   stream: "artists", path: "#/artists" },
    { label: "Programs",  stream: "council", path: "#/about" },
    { label: "News",      stream: "news",    path: "#/news" },
    { label: "Visit",     stream: "council", path: "#/about" },
  ];
  return (
    <header style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "24px 80px", borderBottom: `1px solid ${EI.stone}`,
      background: EI.paper,
    }}>
      <a href="#/"><Logo height={48} /></a>
      <nav style={{ display: "flex", gap: 4 }}>
        {items.map((n) => (
          <a key={n.label} href={n.path} style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "8px 14px", borderRadius: 999,
            fontWeight: 600, fontSize: 15, color: EI.navy,
            background: n.active ? "rgba(47,122,46,0.12)" : "transparent",
          }}>
            <StreamDot stream={n.stream} />
            {n.label}
          </a>
        ))}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a href="#/" style={{ fontWeight: 600, fontSize: 15, color: EI.navy }}>Home</a>
        <a href="#/artists" style={{
          padding: "10px 20px", borderRadius: 999, background: EI.pine, color: EI.paper,
          fontWeight: 700, fontSize: 14,
        }}>Browse artists</a>
      </div>
    </header>
  );
}

function EventsFooter() {
  return (
    <footer style={{ background: "#000000", color: EI.paper, padding: "48px 80px 28px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12.5, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7 }}>
        <span>© 2026 RoCo Arts Council</span>
        <span>The Annex · 119 N Main · Stockton, KS</span>
        <span>hello@rocoarts.org</span>
      </div>
    </footer>
  );
}

function EventsHero({ subtitle, count, mostWantedCta }) {
  return (
    <section style={{ background: "#000000", color: EI.paper, padding: "72px 80px 56px", position: "relative", overflow: "hidden" }}>
      <HeroTexture />
      <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64, alignItems: "end" }}>
        <div>
          <Eyebrow color={EI.leaf} style={{ marginBottom: 16 }}>Events & Learning · {subtitle}</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: 72, lineHeight: 1.0, letterSpacing: "-0.025em",
            color: EI.paper, margin: 0,
          }}>
            What's on this season.
          </h1>
        </div>
        <div style={{ paddingBottom: 14 }}>
          <p style={{ fontSize: 16, lineHeight: 1.6, opacity: 0.85, margin: 0, marginBottom: 16, maxWidth: 440 }}>
            {count} events through summer 2026 — drop-in days, classes, openings, and one
            ticketed concert. Everything is free or pay-what-you-can unless marked.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            {/* THE one Hot Pink pop CTA */}
            <span style={{
              padding: "14px 24px", borderRadius: 999, background: EI.pink, color: EI.paper,
              fontWeight: 700, fontSize: 14.5, display: "inline-flex", alignItems: "center", gap: 8,
            }}>{mostWantedCta} <span>→</span></span>
            <span style={{
              padding: "13px 22px", borderRadius: 999,
              border: "1.5px solid rgba(251,247,238,0.4)", color: EI.paper, fontWeight: 700, fontSize: 14.5,
            }}>Add to calendar (.ics)</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function FilterBar() {
  const filterKinds = [
    { label: "All",      count: 14, active: true },
    { label: "Drop-in",  count: 6 },
    { label: "Class",    count: 3 },
    { label: "Talk",     count: 2 },
    { label: "Ticketed", count: 2 },
    { label: "Opening",  count: 1 },
  ];
  return (
    <section style={{ background: EI.paper, padding: "28px 80px 0", borderBottom: `1px solid ${EI.stone}` }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16, gap: 24 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: EI.mute }}>Search</span>
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 16px", border: "1.5px solid rgba(1,35,75,0.18)",
            borderRadius: 999, minWidth: 300, color: EI.mute, fontSize: 14,
          }}>
            <span>⌕</span><span>Search by title or venue…</span>
          </div>
        </div>
        <div style={{ fontSize: 13.5, color: EI.mute, display: "flex", alignItems: "center", gap: 16 }}>
          <span>Showing <b style={{ color: EI.navy }}>May – Jul 2026</b></span>
          <span style={{ color: EI.navy, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 6 }}>Change <span>▾</span></span>
        </div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16, paddingBottom: 22, flexWrap: "wrap" }}>
        <span style={{ minWidth: 60, fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: EI.mute }}>Kind</span>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {filterKinds.map((f) => (
            <span key={f.label} style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "8px 14px", borderRadius: 999,
              fontSize: 13.5, fontWeight: 600,
              color: f.active ? EI.paper : EI.navy,
              background: f.active ? EI.pine : "transparent",
              border: `1.5px solid ${f.active ? EI.pine : "rgba(1,35,75,0.18)"}`,
            }}>
              {f.label}
              <span style={{ fontSize: 11, fontWeight: 700, color: f.active ? "rgba(251,247,238,0.7)" : "rgba(1,35,75,0.5)" }}>{f.count}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════════
// Direction A — Calendar (two months side by side)
// ════════════════════════════════════════════════════════════════
function EventsIndexA() {
  return (
    <div className="roco-root" style={{ background: EI.paper, color: EI.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <EventsNav />
      <EventsHero subtitle="Calendar" count="14" mostWantedCta="Buy tickets · Plains Songbook" />
      <FilterBar />

      {/* Toggle: Calendar / List */}
      <section style={{ padding: "28px 80px 0", background: EI.paper }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <ViewToggle active="calendar" />
          <div style={{ fontSize: 13, color: EI.mute }}>
            <span style={{ color: EI.navy, fontWeight: 700 }}>14 events</span>
            <span style={{ margin: "0 8px" }}>·</span>
            <span>2 ticketed</span>
            <span style={{ margin: "0 8px" }}>·</span>
            <span>1 series</span>
          </div>
        </div>
      </section>

      {/* Two-month grid */}
      <section style={{ padding: "32px 80px 64px", background: EI.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36 }}>
          <CalendarMonth name="May 2026" days={MAY_2026} />
          <CalendarMonth name="June 2026" days={JUN_2026} />
        </div>

        {/* Legend */}
        <div style={{
          marginTop: 32, display: "flex", gap: 24, flexWrap: "wrap", alignItems: "center",
          paddingTop: 20, borderTop: `1px solid ${EI.stone}`,
          fontSize: 12.5, color: EI.navy,
        }}>
          {Object.entries(KIND_STYLE).map(([k, s]) => (
            <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 12, height: 12, borderRadius: 3, background: s.chipBg }} />
              {s.label}
            </span>
          ))}
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 12, height: 12, borderRadius: 3, background: EI.pink }} />
            Featured · ticketed
          </span>
        </div>
      </section>

      {/* Highlighted upcoming strip — featured + next two */}
      <section style={{ background: EI.whisper, padding: "64px 80px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, color: EI.pineDeep, margin: 0, letterSpacing: "-0.02em" }}>
            Coming up this season
          </h2>
          <ArrowLink color={EI.pine} style={{ fontSize: 14 }}>Subscribe to the calendar</ArrowLink>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 20 }}>
          <FeaturedEventCard event={EVENTS.find(e => e.id === "songbook")} />
          <CompactEventCard event={EVENTS.find(e => e.id === "spring-os")} />
          <CompactEventCard event={EVENTS.find(e => e.id === "qw-party")} />
        </div>
      </section>

      <EventsFooter />
    </div>
  );
}

function ViewToggle({ active }) {
  return (
    <div style={{ display: "inline-flex", border: `1.5px solid rgba(1,35,75,0.18)`, borderRadius: 999, overflow: "hidden" }}>
      {[
        { id: "calendar", label: "Calendar" },
        { id: "list", label: "List" },
      ].map((v) => (
        <span key={v.id} style={{
          padding: "8px 18px", fontWeight: 700, fontSize: 13,
          background: v.id === active ? EI.pine : "transparent",
          color: v.id === active ? EI.paper : EI.navy,
          display: "inline-flex", alignItems: "center", gap: 6,
        }}>
          {v.label}
        </span>
      ))}
    </div>
  );
}

// Manually laid out — May 1 = Friday (col 5, week 1), Jun 1 = Monday (col 1)
// 0-indexed cols: Sun=0 Mon=1 Tue=2 Wed=3 Thu=4 Fri=5 Sat=6
const MAY_2026 = [
  [null,null,null,null,null,1,2],
  [3,4,5,6,7,8,9],
  [10,11,12,13,14,15,16],
  [17,18,19,20,21,22,23],
  [24,25,26,27,28,29,30],
  [31,null,null,null,null,null,null],
];
const JUN_2026 = [
  [null,1,2,3,4,5,6],
  [7,8,9,10,11,12,13],
  [14,15,16,17,18,19,20],
  [21,22,23,24,25,26,27],
  [28,29,30,null,null,null,null],
  [null,null,null,null,null,null,null],
];

function CalendarMonth({ name, days }) {
  const [monthName, year] = name.split(" ");
  const monthNum = ["January","February","March","April","May","June","July","August","September","October","November","December"].indexOf(monthName) + 1;
  const monthIso = `${year}-${String(monthNum).padStart(2, "0")}`;
  const headerLabels = ["S", "M", "T", "W", "T", "F", "S"];

  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14, borderBottom: `2px solid ${EI.pineDeep}`, paddingBottom: 10 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, color: EI.pineDeep, margin: 0, letterSpacing: "-0.02em" }}>
          {monthName} <span style={{ color: EI.mute, fontWeight: 500 }}>{year}</span>
        </h3>
        <div style={{ display: "inline-flex", gap: 6 }}>
          <span style={{ width: 30, height: 30, borderRadius: 6, border: `1.5px solid rgba(1,35,75,0.18)`, display: "inline-flex", alignItems: "center", justifyContent: "center", color: EI.mute }}>‹</span>
          <span style={{ width: 30, height: 30, borderRadius: 6, border: `1.5px solid rgba(1,35,75,0.18)`, display: "inline-flex", alignItems: "center", justifyContent: "center", color: EI.mute }}>›</span>
        </div>
      </div>
      {/* Weekday header */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4, marginBottom: 6 }}>
        {headerLabels.map((l, i) => (
          <div key={i} style={{
            fontSize: 11, fontWeight: 700, letterSpacing: "0.12em",
            color: EI.mute, textAlign: "center", padding: "4px 0",
          }}>{l}</div>
        ))}
      </div>
      {/* Day cells */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 4 }}>
        {days.flat().map((d, i) => (
          <CalendarCell key={i} day={d} iso={d ? `${monthIso}-${String(d).padStart(2, "0")}` : null} />
        ))}
      </div>
    </div>
  );
}

function CalendarCell({ day, iso }) {
  const events = iso ? (EVENTS_BY_DATE[iso] || []) : [];
  if (!day) {
    return <div style={{ aspectRatio: "1 / 1.05", background: "transparent" }} />;
  }
  return (
    <div style={{
      aspectRatio: "1 / 1.05", padding: 6,
      background: events.length ? "#FFFFFF" : EI.warmPaper,
      border: `1px solid ${EI.stone}`,
      display: "flex", flexDirection: "column",
      overflow: "hidden",
    }}>
      <div style={{
        fontSize: 12, fontWeight: 700, color: events.length ? EI.navy : EI.mute,
        marginBottom: 4,
      }}>{day}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
        {events.slice(0, 2).map((e) => {
          const s = KIND_STYLE[e.kind];
          const featured = e.featured && e.kind === "ticketed";
          return (
            <div key={e.id} style={{
              padding: "2px 5px", borderRadius: 3,
              background: featured ? EI.pink : s.chipBg,
              color: featured ? EI.paper : s.chipFg,
              fontSize: 9.5, fontWeight: 700, lineHeight: 1.15,
              whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
            }}>
              {e.title}
            </div>
          );
        })}
        {events.length > 2 && (
          <div style={{ fontSize: 9.5, color: EI.mute, fontWeight: 600 }}>+{events.length - 2} more</div>
        )}
      </div>
    </div>
  );
}

function FeaturedEventCard({ event }) {
  if (!event) return null;
  const d = shortDate(event.date);
  return (
    <article style={{
      background: "#FFFFFF", borderTop: `4px solid ${EI.pink}`,
      padding: "32px 32px 28px", display: "flex", flexDirection: "column", gap: 18,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", top: 0, right: 0, opacity: 0.45 }}>
        <HstStamp size={120} top={EI.pineDeep} bottom={EI.meadow} />
      </div>
      <div style={{
        display: "inline-flex", alignSelf: "flex-start",
        padding: "3px 10px", background: EI.pink, color: EI.paper,
        fontSize: 10, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
      }}>Featured · {KIND_STYLE[event.kind].label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 64, color: EI.pineDeep, lineHeight: 0.85, letterSpacing: "-0.03em" }}>{d.day}</div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: EI.pineDeep }}>{d.mo} · {event.weekday}</div>
      </div>
      <h3 style={{
        fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: 32, lineHeight: 1.1, color: EI.navy, margin: 0,
        letterSpacing: "-0.02em", maxWidth: 380,
      }}>{event.title}</h3>
      <p style={{ fontSize: 14.5, lineHeight: 1.55, color: EI.mute, margin: 0 }}>{event.short}</p>
      <div style={{
        marginTop: 8, paddingTop: 14, borderTop: `1px dashed ${EI.stone}`,
        display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14,
      }}>
        <div style={{ fontSize: 13, color: EI.navy }}>
          <span style={{ color: EI.pine, fontWeight: 700 }}>When </span>{event.time}
          <span style={{ margin: "0 10px", color: EI.mute }}>·</span>
          <span style={{ color: EI.pine, fontWeight: 700 }}>Where </span>{event.venue}
        </div>
        <span style={{
          padding: "10px 18px", borderRadius: 999, background: EI.pink, color: EI.paper,
          fontWeight: 700, fontSize: 13.5, display: "inline-flex", alignItems: "center", gap: 6,
        }}>Buy tickets <span>→</span></span>
      </div>
    </article>
  );
}

function CompactEventCard({ event }) {
  if (!event) return null;
  const d = shortDate(event.date);
  const s = KIND_STYLE[event.kind];
  return (
    <article style={{
      background: "#FFFFFF", borderTop: `4px solid ${EI.pine}`,
      padding: "24px 24px 22px", display: "flex", flexDirection: "column", gap: 14,
    }}>
      <div style={{
        display: "inline-flex", alignSelf: "flex-start",
        padding: "3px 10px", background: s.chipBg, color: s.chipFg,
        fontSize: 10, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
      }}>{s.label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 44, color: EI.pineDeep, lineHeight: 0.85, letterSpacing: "-0.03em" }}>{d.day}</div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, color: EI.pineDeep }}>{d.mo} · {event.weekday}</div>
      </div>
      <h3 style={{
        fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: 20, lineHeight: 1.15, color: EI.navy, margin: 0,
      }}>{event.title}</h3>
      <p style={{ fontSize: 13.5, lineHeight: 1.5, color: EI.mute, margin: 0 }}>{event.short}</p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 4 }}>
        <span style={{ fontSize: 12.5, color: EI.navy, fontWeight: 600 }}>{event.cost}</span>
        <a href={`#/events/${event.id || event.slug}`}><ArrowLink color={EI.pine} style={{ fontSize: 12.5 }}>Details</ArrowLink></a>
      </div>
    </article>
  );
}

// ════════════════════════════════════════════════════════════════
// Direction B — List (grouped by month, big rows)
// ════════════════════════════════════════════════════════════════
function EventsIndexB() {
  const byMonth = {};
  EVENTS.forEach(e => {
    const d = shortDate(e.date);
    const key = `${d.monthFull} ${d.year}`;
    (byMonth[key] = byMonth[key] || []).push(e);
  });
  const months = Object.keys(byMonth);

  return (
    <div className="roco-root" style={{ background: EI.paper, color: EI.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <EventsNav />
      <EventsHero subtitle="List view" count="14" mostWantedCta="Buy tickets · Plains Songbook" />
      <FilterBar />

      <section style={{ padding: "28px 80px 0", background: EI.paper }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <ViewToggle active="list" />
          <div style={{ fontSize: 13, color: EI.mute }}>
            <span style={{ color: EI.navy, fontWeight: 700 }}>14 events</span>
            <span style={{ margin: "0 8px" }}>·</span>
            <span>Sorted by date</span>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 80px 80px", background: EI.paper }}>
        {months.map((m, mi) => (
          <div key={m} style={{ marginBottom: 48 }}>
            <div style={{
              display: "flex", alignItems: "baseline", gap: 18,
              paddingBottom: 14, marginBottom: 20,
              borderBottom: `2px solid ${EI.pineDeep}`,
            }}>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 40, lineHeight: 1, color: EI.pineDeep, margin: 0, letterSpacing: "-0.02em" }}>
                {m.split(" ")[0]}
              </h2>
              <span style={{ fontSize: 18, color: EI.mute, fontWeight: 500 }}>{m.split(" ")[1]}</span>
              <span style={{ marginLeft: "auto", fontSize: 12, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: EI.mute }}>
                {byMonth[m].length} events
              </span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {byMonth[m].map((e, i) => <EventListRow key={e.id} event={e} />)}
            </div>
          </div>
        ))}

        {/* Bottom pager — "load more" pattern */}
        <div style={{
          marginTop: 24, paddingTop: 28, borderTop: `1px solid ${EI.stone}`,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 13.5, color: EI.mute,
        }}>
          <div><span style={{ color: EI.navy, fontWeight: 700 }}>Showing all 14</span> events through Oct 2026</div>
          <span style={{
            padding: "10px 20px", borderRadius: 999,
            border: `1.5px solid ${EI.pine}`, color: EI.pine, fontWeight: 700, fontSize: 13.5,
          }}>Look further ahead →</span>
        </div>
      </section>

      <EventsFooter />
    </div>
  );
}

function EventListRow({ event }) {
  const d = shortDate(event.date);
  const s = KIND_STYLE[event.kind];
  const isPinkCta = event.id === "songbook"; // the page's one pop
  return (
    <article style={{
      display: "grid", gridTemplateColumns: "120px 1fr auto auto",
      gap: 32, alignItems: "center",
      padding: "20px 28px", background: "#FFFFFF",
      border: `1px solid ${EI.stone}`,
      borderLeft: `4px solid ${event.featured ? EI.pink : EI.pine}`,
    }}>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, color: EI.pineDeep, lineHeight: 0.85, letterSpacing: "-0.03em" }}>
        <div style={{ fontSize: 56 }}>{d.day}</div>
        <div style={{ fontSize: 13, fontFamily: "var(--font-body)", fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", marginTop: 4 }}>
          {d.mo} · {event.weekday}
        </div>
      </div>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
          <span style={{
            padding: "2px 8px", background: s.chipBg, color: s.chipFg,
            fontSize: 10, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase",
          }}>{s.label}</span>
          {event.featured && (
            <span style={{
              padding: "2px 8px", background: EI.pink, color: EI.paper,
              fontSize: 10, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase",
            }}>Featured</span>
          )}
          <span style={{ fontSize: 12, color: EI.mute }}>{event.medium}</span>
        </div>
        <h3 style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: 24, lineHeight: 1.15, color: EI.navy, margin: 0, marginBottom: 6, letterSpacing: "-0.015em",
        }}>{event.title}</h3>
        <p style={{ fontSize: 13.5, color: EI.mute, lineHeight: 1.5, margin: 0, maxWidth: 540 }}>{event.short}</p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 13, color: EI.navy, minWidth: 200 }}>
        <div><b>{event.time}</b></div>
        <div style={{ color: EI.mute }}>{event.venue}</div>
        <div style={{ marginTop: 6, fontWeight: 700, color: EI.pine }}>{event.cost}</div>
      </div>
      <div>
        <a href={`#/events/${event.id || event.slug}`} style={{
          padding: "12px 22px", borderRadius: 999,
          background: isPinkCta ? EI.pink : EI.pine, color: EI.paper,
          fontWeight: 700, fontSize: 14,
          display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap",
        }}>
          {isPinkCta ? "Buy tickets" : (event.kind === "class" ? "Sign up" : (event.cost.toLowerCase().includes("free") ? "RSVP" : "Details"))} <span>→</span>
        </a>
      </div>
    </article>
  );
}

window.EventsIndexA = EventsIndexA;
window.EventsIndexB = EventsIndexB;
