// Event detail — refactored.
//
// Three templates / examples:
//
// 1. EventDetailConcert  — Class or Concert (with or without ticket).
//    Plains Songbook example. NO checkout — replaced with a simple RSVP
//    "Reserve a seat" form and a suggested-donation note. Hero photo,
//    lineup with portraits, past-events photo gallery, venue.
//
// 2. EventDetailExhibit  — Gallery opening + multi-day on-view.
//    Spring Senior Exhibit example. The page has two states: "On view
//    through Jun 28" (default) and an "Opening reception" featurette.
//    Works grid with photo slots, featured-artist portraits.
//
// 3. EventDetailDropIn   — Campaign · Spring Open Studios (multi-site).
//    Kept as a one-off campaign artboard (not the standard template).
//
// All three obey the Events stream and place exactly one Hot Pink pop CTA
// on the page. Image placeholders use <image-slot> so the user can drop
// real photos and the drops persist.

const ED = {
  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",
  yellow: "#F3CF03",
  council: "#45217A",
  artists: "#01234B",
  artistsLake: "#1F5A8C",
};

function EDNav() {
  const items = [
    { label: "What's on", stream: "events",  path: "#/events",  active: true },
    { 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 ${ED.stone}`,
      background: ED.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: ED.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="#/events" style={{ fontWeight: 600, fontSize: 15, color: ED.navy }}>← All events</a>
        <a href="#/artists" style={{
          padding: "10px 20px", borderRadius: 999, background: ED.pine, color: ED.paper,
          fontWeight: 700, fontSize: 14,
        }}>Browse artists</a>
      </div>
    </header>
  );
}

function EDFooter() {
  return (
    <footer style={{ background: "#000000", color: ED.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 Breadcrumb({ parts }) {
  return (
    <div style={{
      padding: "16px 80px", fontSize: 12.5, color: ED.mute,
      letterSpacing: "0.08em", borderBottom: `1px solid ${ED.stone}`, background: ED.paper,
    }}>
      {parts.map((p, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span style={{ margin: "0 10px" }}>›</span>}
          {i === parts.length - 1
            ? <span style={{ color: ED.navy, fontWeight: 600 }}>{p}</span>
            : <a style={{ color: ED.mute }}>{p}</a>}
        </React.Fragment>
      ))}
    </div>
  );
}

// image-slot helper. `<image-slot>` is a custom element, so we instantiate
// it via dangerouslySetInnerHTML so React doesn't choke on the unknown tag.
// Each slot needs a unique id so drops persist; we accept it as a prop.
function ImgSlot({ id, w = "100%", h = 240, placeholder, radius = 0, shape = "rect", style }) {
  const html = `<image-slot id="${id}" shape="${shape}" radius="${radius}"
    placeholder="${placeholder || "Drop a photo here"}"
    style="width:100%;height:100%;display:block;"></image-slot>`;
  return (
    <div style={{ width: w, height: h, display: "block", ...style }}
         dangerouslySetInnerHTML={{ __html: html }} />
  );
}

function RelatedEvents({ exclude }) {
  const others = EVENTS.filter(e => e.id !== exclude).slice(0, 3);
  return (
    <section style={{ background: ED.paper, padding: "72px 80px 96px" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 28 }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, color: ED.pineDeep, margin: 0, letterSpacing: "-0.02em" }}>
          Around the same time
        </h2>
        <ArrowLink color={ED.pine} style={{ fontSize: 14 }}>The full calendar</ArrowLink>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
        {others.map((e) => {
          const d = shortDate(e.date);
          const s = KIND_STYLE[e.kind];
          return (
            <article key={e.id} style={{
              background: "#FFFFFF", borderTop: `4px solid ${ED.pine}`,
              padding: 0, display: "flex", flexDirection: "column", overflow: "hidden",
            }}>
              <ImgSlot id={`related-${e.id}`} h={120} placeholder={`Photo · ${e.title}`} />
              <div style={{ padding: "16px 20px 20px", display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{
                  display: "inline-flex", alignSelf: "flex-start",
                  padding: "3px 10px", background: s.chipBg, color: s.chipFg,
                  fontSize: 10, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase",
                }}>{s.label}</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, color: ED.pineDeep, lineHeight: 0.85, letterSpacing: "-0.03em" }}>{d.day}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13, color: ED.pineDeep }}>{d.mo} · {e.weekday}</div>
                </div>
                <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17, lineHeight: 1.15, color: ED.navy, margin: 0 }}>{e.title}</h3>
                <div style={{ fontSize: 12.5, color: ED.mute }}>{e.venue} · {e.time}</div>
                <div style={{ marginTop: 4 }}><ArrowLink color={ED.pine} style={{ fontSize: 12.5 }}>Details</ArrowLink></div>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════════
// Template 1 — Class / Concert (Plains Songbook)
// No checkout. RSVP form + suggested donation copy. Plays for ticketed
// concerts AND free classes — copy adapts; layout is the same.
// ════════════════════════════════════════════════════════════════
function EventDetailConcert() {
  const e = EVENTS.find(x => x.id === "songbook");
  const d = shortDate(e.date);
  return (
    <div className="roco-root" style={{ background: ED.paper, color: ED.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <EDNav />
      <Breadcrumb parts={["What's on", "Music", "Plains Songbook"]} />

      {/* Hero with photo */}
      <section style={{ background: "#000000", color: ED.paper, padding: "0", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "stretch", minHeight: 520 }}>
          <div style={{ padding: "72px 56px 64px 80px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
              <span style={{
                padding: "5px 12px", background: ED.pine, color: ED.paper,
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
              }}>Music · Concert</span>
              <span style={{
                padding: "5px 12px", background: ED.leaf, color: ED.pineDeep,
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
              }}>Suggested donation</span>
            </div>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 80, lineHeight: 0.98, letterSpacing: "-0.03em",
              color: ED.paper, margin: 0, marginBottom: 18,
            }}>Plains Songbook</h1>
            <p style={{ fontSize: 19, lineHeight: 1.45, opacity: 0.92, margin: 0, marginBottom: 28, maxWidth: 560 }}>
              Three songwriters, one fiddle, an honest pew. An evening of new songs about the
              county we live in.
            </p>
            <div style={{ display: "flex", gap: 28, fontSize: 14.5, color: ED.paper, opacity: 0.95, marginBottom: 28, flexWrap: "wrap" }}>
              <span><b style={{ color: ED.leaf }}>{d.weekday}, {d.mo} {d.day}</b></span>
              <span>{e.time}</span>
              <span>{e.venue}</span>
            </div>
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              {/* One Pink pop */}
              <span style={{
                padding: "16px 26px", borderRadius: 999, background: ED.pink, color: ED.paper,
                fontWeight: 700, fontSize: 15.5, display: "inline-flex", alignItems: "center", gap: 8,
              }}>Reserve a seat <span>→</span></span>
              <span style={{
                padding: "15px 22px", borderRadius: 999,
                border: "1.5px solid rgba(251,247,238,0.4)", color: ED.paper, fontWeight: 700, fontSize: 15,
              }}>Add to calendar</span>
            </div>
          </div>

          {/* Hero photo — fills the right half */}
          <ImgSlot id="songbook-hero" h="100%" placeholder="Drop a hero photo — venue, band, or atmosphere" />
        </div>
      </section>

      {/* Quick-info strip */}
      <section style={{ background: ED.whisper, padding: "20px 80px", borderBottom: `1px solid ${ED.stone}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 24 }}>
          {[
            { l: "When",        v: `${d.mo} ${d.day}, ${d.year}`, s: `${e.weekday} · doors 7 pm` },
            { l: "Run time",    v: "≈ 90 min",                    s: "No intermission" },
            { l: "Where",       v: "Old Methodist Church",        s: "Stockton · 119 W Cedar" },
            { l: "Suggested",   v: "$12 · $6 students",           s: "Pay what you can" },
            { l: "Capacity",    v: "140 seats",                   s: "86 still open" },
            { l: "Accessibility", v: "Step-free",                 s: "Hearing loop · pews 1–4" },
          ].map((it, i) => (
            <div key={i} style={{ borderLeft: i === 0 ? "none" : `1px solid ${ED.stone}`, paddingLeft: i === 0 ? 0 : 16 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.mute, marginBottom: 6 }}>{it.l}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17, color: ED.pineDeep, lineHeight: 1.15, letterSpacing: "-0.01em" }}>{it.v}</div>
              <div style={{ fontSize: 12, color: ED.mute, marginTop: 2 }}>{it.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Body */}
      <section style={{ padding: "96px 80px", background: ED.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 80 }}>
          {/* Left */}
          <div>
            <Eyebrow color={ED.pine} style={{ marginBottom: 14 }}>About the show</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, lineHeight: 1.05, color: ED.pineDeep, margin: 0, marginBottom: 24, letterSpacing: "-0.02em" }}>
              An evening of new songs in a 110-year-old church.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: ED.navy, margin: 0, marginBottom: 14 }}>
              The Songbook is a yearly evening of working songwriters from the High Plains —
              two locals and one guest from across the line. Most of them play in bars and
              farm-shop sessions; this is the one night a year you can sit still and listen.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: ED.navy, margin: 0, marginBottom: 32 }}>
              The Old Methodist Church gave us its sanctuary for the night. The pews are
              wooden, the acoustics are forgiving, and Lillian Schaeffer agreed to make
              shortbread for the lobby.
            </p>

            {/* Lineup with portrait slots */}
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: ED.pineDeep, margin: 0, marginBottom: 18, letterSpacing: "-0.015em" }}>
              Who's playing
            </h3>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 40 }}>
              {[
                { name: "Charlie Otieno", role: "Headliner", town: "Stockton", id: "songbook-headshot-1" },
                { name: "Sonny Briggs",   role: "Songbook",  town: "Stockton", id: "songbook-headshot-2" },
                { name: "Marisol Vega",   role: "Guest",     town: "Hays, KS", id: "songbook-headshot-3" },
              ].map((p) => (
                <article key={p.name} style={{
                  background: ED.whisper, overflow: "hidden",
                  display: "flex", flexDirection: "column",
                }}>
                  <ImgSlot id={p.id} h={180} placeholder={`Portrait · ${p.name}`} />
                  <div style={{ padding: "16px 18px 18px" }}>
                    <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.pine, marginBottom: 4 }}>{p.role}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 19, color: ED.pineDeep, lineHeight: 1.15 }}>{p.name}</div>
                    <div style={{ fontSize: 12.5, color: ED.mute, marginTop: 4 }}>{p.town}</div>
                  </div>
                </article>
              ))}
            </div>

            {/* Past-events gallery */}
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: ED.pineDeep, margin: 0, marginBottom: 14, letterSpacing: "-0.015em" }}>
              From past Songbooks
            </h3>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 32 }}>
              {[1, 2, 3, 4].map((i) => (
                <ImgSlot key={i} id={`songbook-past-${i}`} h={140} placeholder={`Songbook ${2026 - i}`} />
              ))}
            </div>

            {/* Notes */}
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: ED.pineDeep, margin: 0, marginBottom: 14, letterSpacing: "-0.015em" }}>
              A few things to know
            </h3>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10, fontSize: 15, lineHeight: 1.55, color: ED.navy }}>
              {[
                ["Seating", "Open seating in wooden pews. Early arrivers get the soft cushion."],
                ["Kids", "Welcome but the room is quiet. Recommended ages 10+."],
                ["Refreshments", "Shortbread and lemonade in the lobby. Donations to Lillian's flour fund appreciated."],
                ["Photos", "No flash. Phones on silent. Recordings only with the artist's nod."],
              ].map(([t, b]) => (
                <li key={t} style={{ paddingLeft: 14, borderLeft: `3px solid ${ED.meadow}` }}>
                  <b style={{ color: ED.pineDeep }}>{t}.</b> {b}
                </li>
              ))}
            </ul>
          </div>

          {/* Right — RSVP card (the no-checkout replacement) */}
          <aside>
            <div style={{
              padding: 28, background: "#FFFFFF",
              border: `1px solid ${ED.stone}`, borderTop: `4px solid ${ED.pink}`,
              position: "sticky", top: 24,
            }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.pine, marginBottom: 6 }}>
                RSVP keeps a spot
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26, color: ED.pineDeep, margin: 0, marginBottom: 6, letterSpacing: "-0.015em" }}>
                Reserve a seat
              </h3>
              <p style={{ fontSize: 14, color: ED.mute, lineHeight: 1.55, margin: 0, marginBottom: 18 }}>
                We're not selling tickets online — just let us know you're coming and we'll
                hold seats. Walk-ins are welcome too.
              </p>

              {/* Fake form fields */}
              <div style={{ display: "grid", gap: 12, marginBottom: 18 }}>
                <FormField label="Your name" placeholder="First and last" />
                <FormField label="Email"     placeholder="hello@example.com" />
                <FormField label="How many seats?" placeholder="2" small />
                <FormField label="Anything we should know? (optional)" placeholder="Wheelchair access, latecomer, etc." textarea />
              </div>

              <span style={{
                display: "block", textAlign: "center",
                padding: "14px 16px", borderRadius: 999,
                background: ED.pink, color: ED.paper,
                fontWeight: 700, fontSize: 15,
              }}>RSVP for 2 seats →</span>

              {/* Suggested donation note */}
              <div style={{
                marginTop: 22, padding: "16px 18px",
                background: ED.whisper,
                borderLeft: `4px solid ${ED.pine}`,
              }}>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.pine, marginBottom: 6 }}>
                  Suggested donation
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: ED.pineDeep, lineHeight: 1.1, marginBottom: 6, letterSpacing: "-0.01em" }}>
                  $12 · $6 students · pay-what-you-can
                </div>
                <p style={{ fontSize: 13, color: ED.navy, margin: 0, lineHeight: 1.5 }}>
                  Cash, Venmo, or just show up. Donations support free programming —
                  they're not the price of a ticket.
                </p>
              </div>

              <div style={{
                marginTop: 22, paddingTop: 18, borderTop: `1px dashed ${ED.stone}`,
                display: "grid", gap: 8, fontSize: 13, color: ED.navy,
              }}>
                <a style={{ color: ED.pine, fontWeight: 700 }}>Add to calendar (.ics) →</a>
                <a style={{ color: ED.pine, fontWeight: 700 }}>Get directions to the church →</a>
                <a style={{ color: ED.pine, fontWeight: 700 }}>Accessibility & seating notes →</a>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <RelatedEvents exclude="songbook" />
      <EDFooter />
    </div>
  );
}

function FormField({ label, placeholder, small, textarea }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: ED.mute, marginBottom: 6 }}>{label}</div>
      <div style={{
        padding: textarea ? "10px 14px" : "12px 14px",
        background: "#F5F0E2", border: `1.5px solid ${ED.stone}`,
        fontSize: 14, color: "rgba(1,35,75,0.4)",
        minHeight: textarea ? 56 : (small ? 0 : 18),
        width: "100%",
      }}>{placeholder}</div>
    </label>
  );
}

// ════════════════════════════════════════════════════════════════
// Template 2 — Gallery opening + on-view exhibit
// Spring Senior Exhibit: opening reception May 22, on view through Jun 28
// ════════════════════════════════════════════════════════════════
function EventDetailExhibit() {
  return (
    <div className="roco-root" style={{ background: ED.paper, color: ED.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <EDNav />
      <Breadcrumb parts={["What's on", "Exhibitions", "Spring Senior Exhibit"]} />

      {/* Hero — split black with texture + photo */}
      <section style={{ background: "#000000", color: ED.paper, padding: "0", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "stretch", minHeight: 560 }}>
          <div style={{ padding: "80px 56px 64px 80px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
              <span style={{
                padding: "5px 12px", background: ED.meadow, color: ED.pineDeep,
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
              }}>On view now</span>
              <span style={{
                padding: "5px 12px", background: "rgba(251,247,238,0.18)", color: ED.paper, border: "1px solid rgba(251,247,238,0.4)",
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
              }}>Exhibition · Free</span>
            </div>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 80, lineHeight: 0.98, letterSpacing: "-0.03em",
              color: ED.paper, margin: 0, marginBottom: 18,
            }}>Spring Senior Exhibit</h1>
            <p style={{ fontSize: 19, opacity: 0.92, margin: 0, marginBottom: 28, maxWidth: 560, lineHeight: 1.45 }}>
              Eight portfolios from county high-school seniors, hung together for the first time.
              The Annex · May 22 through Jun 28.
            </p>
            <div style={{ display: "flex", gap: 28, fontSize: 14.5, color: ED.paper, opacity: 0.95, marginBottom: 28, flexWrap: "wrap" }}>
              <span><b style={{ color: ED.leaf }}>Opening Fri May 22 · 6 – 9 pm</b></span>
              <span>On view through Jun 28</span>
              <span>The Annex · Stockton</span>
            </div>
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              {/* One Pink pop */}
              <span style={{
                padding: "16px 26px", borderRadius: 999, background: ED.pink, color: ED.paper,
                fontWeight: 700, fontSize: 15.5, display: "inline-flex", alignItems: "center", gap: 8,
              }}>RSVP to the opening <span>→</span></span>
              <span style={{
                padding: "15px 22px", borderRadius: 999,
                border: "1.5px solid rgba(251,247,238,0.4)", color: ED.paper, fontWeight: 700, fontSize: 15,
              }}>Plan a gallery visit</span>
            </div>
          </div>

          {/* Photo fills the right half */}
          <ImgSlot id="exhibit-hero" h="100%" placeholder="Drop an installation photo of the gallery" />
        </div>
      </section>

      {/* Dual-state info row — Opening reception AND On view */}
      <section style={{ background: ED.whisper, padding: "0 80px", borderBottom: `1px solid ${ED.stone}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
          {/* Opening night */}
          <div style={{
            padding: "32px 36px 32px 0", borderRight: `1px solid ${ED.stone}`,
            display: "flex", gap: 24, alignItems: "center",
          }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              color: ED.pink, lineHeight: 0.85, letterSpacing: "-0.03em",
              flexShrink: 0,
            }}>
              <div style={{ fontSize: 64 }}>22</div>
              <div style={{ fontSize: 13, fontFamily: "var(--font-body)", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 6, color: ED.pineDeep }}>May · Fri</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.pink, marginBottom: 6 }}>Opening reception</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: ED.pineDeep, lineHeight: 1.1, marginBottom: 6, letterSpacing: "-0.015em" }}>
                Friday night, 6 – 9 pm
              </div>
              <p style={{ fontSize: 14, color: ED.navy, margin: 0, lineHeight: 1.5 }}>
                The artists will be there. So will their families and a sheet cake.
                Bring a friend. Free, RSVP appreciated.
              </p>
              <div style={{ marginTop: 14 }}>
                {/* One Pink pop */}
                <span style={{
                  padding: "11px 22px", borderRadius: 999, background: ED.pink, color: ED.paper,
                  fontWeight: 700, fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8,
                }}>RSVP to the opening <span>→</span></span>
              </div>
            </div>
          </div>

          {/* On view */}
          <div style={{
            padding: "32px 0 32px 36px",
            display: "flex", gap: 24, alignItems: "center",
          }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              color: ED.pineDeep, lineHeight: 0.85, letterSpacing: "-0.03em",
              flexShrink: 0,
            }}>
              <div style={{ fontSize: 64 }}>38</div>
              <div style={{ fontSize: 13, fontFamily: "var(--font-body)", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 6, color: ED.pineDeep }}>days on view</div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.pine, marginBottom: 6 }}>On view</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: ED.pineDeep, lineHeight: 1.1, marginBottom: 6, letterSpacing: "-0.015em" }}>
                May 22 – Jun 28
              </div>
              <p style={{ fontSize: 14, color: ED.navy, margin: 0, lineHeight: 1.5 }}>
                The Annex · 119 N Main, Stockton · Thursday – Sunday, 11 am – 4 pm. Free admission.
              </p>
              <div style={{ marginTop: 14, display: "flex", gap: 12, fontSize: 13, fontWeight: 700, color: ED.pine }}>
                <a>Plan a visit →</a>
                <a>Group tour →</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About + Featured artists */}
      <section style={{ padding: "96px 80px 64px", background: ED.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, marginBottom: 64 }}>
          <div>
            <Eyebrow color={ED.pine} style={{ marginBottom: 14 }}>About the show</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 40, lineHeight: 1.05, color: ED.pineDeep, margin: 0, marginBottom: 24, letterSpacing: "-0.02em" }}>
              Eight portfolios.<br />Three high schools.<br />One room.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: ED.navy, margin: 0, marginBottom: 14 }}>
              Every spring we hand the back room of the Annex over to eight graduating
              seniors from county high schools. They show what they've been working on for
              the last two years — drawings, ceramics, photographs, a zine.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: ED.navy, margin: 0 }}>
              Curated by faculty advisors from Stockton, Plainville, and Palco. Most of
              the work is for sale; proceeds go straight to the student's college fund.
            </p>
          </div>

          {/* Featured artists portrait row */}
          <div>
            <Eyebrow color={ED.pine} style={{ marginBottom: 14 }}>Featured artists · 8</Eyebrow>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
              {[
                ["Jacob Steinmiller", "Drawing", "Stockton HS"],
                ["Lily Cho",           "Photo",   "Plainville HS"],
                ["Sage Wallin",        "Painting","Palco HS"],
                ["Mira Petrov",        "Fiber",   "Plainville HS"],
                ["Ben Yoon",           "Sculpture","Stockton HS"],
                ["Devon Heller",       "Ceramics","Plainville HS"],
                ["Ivy Reinholt",       "Photo",   "Palco HS"],
                ["Marcus Otieno",      "Print",   "Stockton HS"],
              ].map((p, i) => (
                <article key={p[0]} style={{ background: ED.whisper, overflow: "hidden" }}>
                  <ImgSlot id={`exhibit-portrait-${i}`} h={120} placeholder={p[0]} />
                  <div style={{ padding: "10px 12px 12px" }}>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13, color: ED.pineDeep, lineHeight: 1.1 }}>{p[0]}</div>
                    <div style={{ fontSize: 11, color: ED.mute, marginTop: 2 }}>{p[1]} · {p[2]}</div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>

        {/* Works grid */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 18 }}>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 28, color: ED.pineDeep, margin: 0, letterSpacing: "-0.015em" }}>
            Selected works
          </h3>
          <ArrowLink color={ED.pine} style={{ fontSize: 14 }}>See all 24 works</ArrowLink>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          {[
            ["Northbound · cover", "Jacob Steinmiller · Risograph zine"],
            ["The gas station, before", "Jacob Steinmiller · Ink"],
            ["Stockton at 2 am",   "Jacob Steinmiller · Brush"],
            ["Self-portrait, II",  "Jacob Steinmiller · Pen + brush"],
            ["First Friday",        "Lily Cho · Photograph"],
            ["Six fields",          "Lily Cho · Photograph"],
            ["Tea bowl #4",         "Devon Heller · Ceramic"],
            ["Loomwork",            "Mira Petrov · Fiber"],
          ].map((w, i) => (
            <article key={w[0]} style={{ background: ED.warmPaper }}>
              <ImgSlot id={`exhibit-work-${i}`} h={220} placeholder={w[0]} />
              <div style={{ padding: "12px 14px 14px" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 14, color: ED.navy, lineHeight: 1.2 }}>{w[0]}</div>
                <div style={{ fontSize: 11.5, color: ED.mute, marginTop: 4 }}>{w[1]}</div>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Visit panel */}
      <section style={{ background: ED.whisper, padding: "56px 80px 64px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 48 }}>
          <div>
            <Eyebrow color={ED.pine} style={{ marginBottom: 12 }}>Plan a visit</Eyebrow>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 32, color: ED.pineDeep, margin: 0, marginBottom: 14, letterSpacing: "-0.02em" }}>
              The Annex · 119 N Main, Stockton, KS
            </h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: ED.navy, margin: 0, marginBottom: 14 }}>
              Open Thursday – Sunday, 11 am – 4 pm. Free admission. The Annex is
              wheelchair-accessible with a step-free entry on Main Street.
            </p>
            <p style={{ fontSize: 14, color: ED.mute, margin: 0, lineHeight: 1.55 }}>
              School visits and group tours by appointment — drop us a line at
              <a style={{ color: ED.pine, fontWeight: 700 }}> hello@rocoarts.org</a>.
            </p>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.mute, marginBottom: 10 }}>Hours</div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 6, fontSize: 14, color: ED.navy }}>
              <li style={{ display: "flex", justifyContent: "space-between" }}><span>Mon – Wed</span><span style={{ color: ED.mute }}>Closed</span></li>
              <li style={{ display: "flex", justifyContent: "space-between" }}><span>Thu – Sat</span><span>11 am – 4 pm</span></li>
              <li style={{ display: "flex", justifyContent: "space-between" }}><span>Sun</span><span>12 – 4 pm</span></li>
              <li style={{ display: "flex", justifyContent: "space-between", marginTop: 6, paddingTop: 6, borderTop: `1px dashed ${ED.stone}` }}>
                <span>Fri May 22</span><span style={{ color: ED.pink, fontWeight: 700 }}>Opening · 6 – 9</span>
              </li>
            </ul>
          </div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.mute, marginBottom: 10 }}>Programs around this show</div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10, fontSize: 14, color: ED.navy, lineHeight: 1.4 }}>
              <li><b>May 31 · 2 pm</b> · Zine release reading (Jacob Steinmiller)</li>
              <li><b>Jun 7 · 1 pm</b>  · Quilt Wall Block Party</li>
              <li><b>Jun 14 · 11 am</b>· Walk-through with the artists</li>
            </ul>
          </div>
        </div>
      </section>

      <RelatedEvents exclude="ss-open" />
      <EDFooter />
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// Campaign — Spring Open Studios (kept as a one-off, not template)
// (Largely the same as before, with photo placeholders added.)
// ════════════════════════════════════════════════════════════════
function EventDetailDropIn() {
  const e = EVENTS.find(x => x.id === "spring-os");
  const d = shortDate(e.date);
  const sites = [
    { n: "01", town: "Stockton",  host: "Maribel Cortez",    medium: "Quilting",    hours: "10 – 5", note: "Front-room studio · shortbread" },
    { n: "02", town: "Stockton",  host: "Pat Lindsey",       medium: "Fiber",       hours: "10 – 4", note: "Loom demos at 11 & 2" },
    { n: "03", town: "Stockton",  host: "Jay Pruitt",        medium: "Printmaking", hours: "12 – 5", note: "Linocut try-it table" },
    { n: "04", town: "Plainville", host: "Henry Plumb",      medium: "Letterpress", hours: "10 – 5", note: "Set a poster, take it home" },
    { n: "05", town: "Plainville", host: "Joe Beaumont",     medium: "Printmaking", hours: "10 – 4", note: "Risograph zines" },
    { n: "06", town: "Plainville", host: "Nori Tagawa",      medium: "Ceramics",    hours: "10 – 4", note: "Hand-building & glazes" },
    { n: "07", town: "Palco",      host: "Marcus Reinholt",   medium: "Photography", hours: "11 – 4", note: "Darkroom open · BYO film" },
    { n: "08", town: "Damar",      host: "Ada Felix",        medium: "Fiber",       hours: "10 – 3", note: "Sheep on site, sometimes" },
    { n: "09", town: "Webster",    host: "Cal Westra",       medium: "Woodworking", hours: "10 – 5", note: "Shop demos hourly" },
    { n: "10", town: "Webster",    host: "Esau Hartmann",    medium: "Sculpture",   hours: "12 – 5", note: "Outdoor metal work · loud" },
    { n: "11", town: "Zurich",     host: "Walt Henning",     medium: "Woodturning", hours: "11 – 4", note: "Lathe demos at noon" },
    { n: "12", town: "Logan",      host: "Imogene Tate",     medium: "Watercolor",  hours: "10 – 4", note: "Porch setup if dry · garage if wet" },
  ];

  return (
    <div className="roco-root" style={{ background: ED.paper, color: ED.navy, fontFamily: "var(--font-body)", minHeight: "100%" }}>
      <EDNav />
      <Breadcrumb parts={["What's on", "Programs", "Spring Open Studios"]} />

      <section style={{ background: "#000000", color: ED.paper, padding: "72px 80px 56px", position: "relative", overflow: "hidden" }}>
        <HeroTexture />
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div style={{ display: "flex", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
              <span style={{
                padding: "5px 12px", background: ED.pine, color: ED.paper,
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
              }}>Campaign · County-wide · Free</span>
              <span style={{
                padding: "5px 12px", background: ED.pink, color: ED.paper,
                fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase",
              }}>Featured this season</span>
            </div>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 92, lineHeight: 0.98, letterSpacing: "-0.03em",
              color: ED.paper, margin: 0, marginBottom: 18,
            }}>Spring Open Studios</h1>
            <p style={{ fontSize: 20, lineHeight: 1.5, opacity: 0.92, margin: 0, marginBottom: 28, maxWidth: 560 }}>
              Twelve barns and back rooms across Rooks County, one Saturday. Pack a sandwich,
              start in Plainville, end in Logan.
            </p>
            <div style={{ display: "flex", gap: 32, marginBottom: 32, flexWrap: "wrap" }}>
              {[
                { n: "12", l: "studio sites" },
                { n: "7",  l: "towns" },
                { n: "5h", l: "loop · 90 min driving" },
                { n: "0",  l: "dollars to enter" },
              ].map((s, i) => (
                <div key={i}>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 44, color: ED.leaf, lineHeight: 0.9, letterSpacing: "-0.03em" }}>{s.n}</div>
                  <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(251,247,238,0.7)", marginTop: 6 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <span style={{
                padding: "16px 28px", borderRadius: 999, background: ED.pink, color: ED.paper,
                fontWeight: 700, fontSize: 16, display: "inline-flex", alignItems: "center", gap: 8,
              }}>Plan a route <span>→</span></span>
              <span style={{
                padding: "15px 24px", borderRadius: 999,
                border: "1.5px solid rgba(251,247,238,0.4)", color: ED.paper, fontWeight: 700, fontSize: 15,
              }}>Print the map (PDF)</span>
            </div>
          </div>
          <div style={{
            background: "rgba(251,247,238,0.06)", padding: 20,
            border: "1px solid rgba(251,247,238,0.18)",
          }}>
            <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.leaf, marginBottom: 10 }}>
              The loop · {d.weekday}, {d.mo} {d.day}
            </div>
            <OpenStudiosMap />
          </div>
        </div>
      </section>

      {/* photo strip - past Open Studios */}
      <section style={{ background: ED.paper, padding: "32px 80px 0" }}>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.mute, marginBottom: 14 }}>From past Open Studios</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
          {[1, 2, 3, 4, 5].map((i) => (
            <ImgSlot key={i} id={`os-past-${i}`} h={160} placeholder={`Open Studios photo ${i}`} />
          ))}
        </div>
      </section>

      <section style={{ background: ED.whisper, padding: "32px 80px", marginTop: 48, borderBottom: `1px solid ${ED.stone}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 24 }}>
          {[
            { l: "When",     v: `${d.mo} ${d.day}, ${d.year}`, s: e.weekday },
            { l: "Hours",    v: e.time,                        s: "Most sites · varies" },
            { l: "Sites",    v: "12",                          s: "7 towns" },
            { l: "Cost",     v: "Free",                        s: "No registration" },
            { l: "How to RSVP", v: "Just show up",             s: "Or tell us · helps planning" },
            { l: "Rain plan", v: "Sites stay open",            s: "Most are indoors" },
          ].map((it, i) => (
            <div key={i} style={{ borderLeft: i === 0 ? "none" : `1px solid ${ED.stone}`, paddingLeft: i === 0 ? 0 : 16 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: ED.mute, marginBottom: 6 }}>{it.l}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 17, color: ED.pineDeep, lineHeight: 1.15, letterSpacing: "-0.01em" }}>{it.v}</div>
              <div style={{ fontSize: 12, color: ED.mute, marginTop: 2 }}>{it.s}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: "72px 80px", background: ED.paper }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 80 }}>
          <div>
            <Eyebrow color={ED.pine} style={{ marginBottom: 14 }}>The twelve sites</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 36, lineHeight: 1.05, color: ED.pineDeep, margin: 0, marginBottom: 24, letterSpacing: "-0.02em" }}>
              Studios on the loop.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: ED.navy, margin: 0, marginBottom: 32, maxWidth: 580 }}>
              Hosts set their own hours. The loop runs west to east — drive it any way you like.
            </p>
            <div style={{ borderTop: `2px solid ${ED.pineDeep}`, borderBottom: `2px solid ${ED.pineDeep}` }}>
              {sites.map((s, i) => (
                <div key={s.n} style={{
                  display: "grid", gridTemplateColumns: "60px 110px 1fr 120px 100px",
                  gap: 18, alignItems: "center",
                  padding: "16px 0",
                  borderTop: i === 0 ? "none" : `1px solid ${ED.stone}`,
                }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 999,
                    background: ED.pine, color: ED.paper,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, letterSpacing: "-0.02em",
                  }}>{s.n}</div>
                  <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: ED.pine }}>{s.town}</div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, color: ED.navy, lineHeight: 1.15 }}>{s.host}</div>
                    <div style={{ fontSize: 12.5, color: ED.mute, marginTop: 3 }}>{s.medium} · {s.note}</div>
                  </div>
                  <div style={{ fontSize: 13, color: ED.navy, fontWeight: 600 }}>{s.hours}</div>
                  <ArrowLink color={ED.pine} style={{ fontSize: 12.5 }}>Profile</ArrowLink>
                </div>
              ))}
            </div>
          </div>

          <aside>
            <div style={{
              padding: 28, background: ED.whisper,
              borderTop: `4px solid ${ED.meadow}`,
              position: "sticky", top: 24,
            }}>
              <Eyebrow color={ED.pineDeep} style={{ marginBottom: 14 }}>How to do this day</Eyebrow>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: ED.pineDeep, margin: 0, marginBottom: 18, letterSpacing: "-0.015em" }}>
                A few honest notes.
              </h3>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 14, fontSize: 14, lineHeight: 1.55, color: ED.navy }}>
                {[
                  ["Start early.", "Most folks aim for site 04 first, which gets full by lunch."],
                  ["Pack a lunch.", "Stockton has one diner and it gets busy."],
                  ["Bring cash.", "A few hosts have small things for sale."],
                  ["Drive slow on K-9.", "The east stretch is bumpy and the cattle don't move fast."],
                  ["Talk to the hosts.", "They want you there."],
                  ["Wear layers.", "Barns are cold in May."],
                ].map(([h, b]) => (
                  <li key={h}><b style={{ color: ED.pineDeep }}>{h}</b> {b}</li>
                ))}
              </ul>
              <div style={{ marginTop: 24, paddingTop: 18, borderTop: `1px dashed rgba(31,122,46,0.35)`, display: "grid", gap: 8, fontSize: 13, color: ED.navy }}>
                <a style={{ color: ED.pine, fontWeight: 700 }}>Print the route sheet (PDF) →</a>
                <a style={{ color: ED.pine, fontWeight: 700 }}>Accessibility per site →</a>
                <a style={{ color: ED.pine, fontWeight: 700 }}>Volunteer for the day →</a>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <RelatedEvents exclude="spring-os" />
      <EDFooter />
    </div>
  );
}

function OpenStudiosMap() {
  const sitePins = [
    { x: 47, y: 51 }, { x: 49, y: 49 }, { x: 51, y: 53 },
    { x: 30, y: 75 }, { x: 28, y: 77 }, { x: 32, y: 73 },
    { x: 18, y: 60 }, { x: 12, y: 25 }, { x: 36, y: 28 },
    { x: 38, y: 30 }, { x: 64, y: 70 }, { x: 86, y: 44 },
  ];
  return (
    <svg viewBox="0 0 600 380" width="100%" style={{ display: "block" }}>
      <rect x={16} y={16} width={568} height={348} fill="rgba(251,247,238,0.08)" stroke="rgba(251,247,238,0.6)" strokeWidth={2} />
      {[1,2].map(i => <line key={"h"+i} x1={16} y1={16 + i*116} x2={584} y2={16 + i*116} stroke="rgba(251,247,238,0.18)" strokeWidth={1} strokeDasharray="2 4" />)}
      {[1,2,3,4].map(i => <line key={"v"+i} x1={16 + i*114} y1={16} x2={16 + i*114} y2={364} stroke="rgba(251,247,238,0.18)" strokeWidth={1} strokeDasharray="2 4" />)}
      <path d="M 30 200 Q 130 180, 220 220 T 420 195 T 580 225" stroke="rgba(251,247,238,0.4)" strokeWidth={3} fill="none" />
      <line x1={16} y1={335} x2={584} y2={335} stroke="#F3CF03" strokeWidth={3} opacity={0.85} />
      <text x={36} y={42} fontFamily="var(--font-display)" fontSize={14} fontWeight={800} fill="rgba(251,247,238,0.85)" letterSpacing="0.05em">ROOKS COUNTY · 12 SITES</text>
      {sitePins.map((p, i) => {
        const X = 16 + (p.x / 100) * 568;
        const Y = 16 + (p.y / 100) * 348;
        return (
          <g key={i}>
            <circle cx={X} cy={Y} r={11} fill="#EB4D86" />
            <text x={X} y={Y + 4} textAnchor="middle" fontSize={11} fontWeight={700} fill="#FBF7EE">{i + 1}</text>
          </g>
        );
      })}
    </svg>
  );
}

window.EventDetailConcert = EventDetailConcert;
window.EventDetailExhibit = EventDetailExhibit;
window.EventDetailDropIn = EventDetailDropIn;
// keep old name for back-compat with any existing references
window.EventDetailTicketed = EventDetailConcert;