// shared.jsx — wireframe primitives + event data shared across variants

const UPCOMING = [
  {
    id: "t2049-sg",
    date: "OCT 01",
    year: "'26",
    name: "Founders' Dinner @ Token2049",
    city: "Singapore",
    convention: "Token2049",
    type: "Dinner",
    seats: "24",
    status: "By invitation",
    pitch: "An off-the-record dinner for L1/L2 founders and the funds writing $25M+ checks. Long table, no pitches, one mic.",
    agenda: ["18:30  Drinks on the river terrace", "20:00  Seated dinner, two themed roasts", "22:00  Cigar lounge + matchmaking", "00:00  After-hours speakeasy"],
    confirmed: ["3 GP-level investors", "9 protocol founders", "2 sovereign LPs"],
  },
  {
    id: "devcon-bsas",
    date: "NOV 14",
    year: "'26",
    name: "Speakeasy: Builders' Night",
    city: "Buenos Aires",
    convention: "Devconnect",
    type: "Speakeasy",
    seats: "120",
    status: "Curated guest list",
    pitch: "A late-night, low-light room for core devs and infra leads. House band, custom menu, zero panels.",
    agenda: ["22:00  Doors + welcome bitters", "23:00  Live set, intimate session", "01:00  Back room: open mic for builders", "03:00  Last call"],
    confirmed: ["Lead devs from 6 rollups", "EF guests", "Press: 2 verified outlets"],
  },
  {
    id: "ethd-2027",
    date: "FEB 26",
    year: "'27",
    name: "The Mountain Salon",
    city: "Denver",
    convention: "ETHDenver",
    type: "Private Salon",
    seats: "40",
    status: "Application open",
    pitch: "A two-evening salon at a private chalet — fireside roundtables for exchange & infra leadership.",
    agenda: ["Day 1 · Roundtable: post-MEV markets", "Day 1 · Tasting menu w/ guest chef", "Day 2 · Walking 1:1s on the trail", "Day 2 · Press dinner (off the record)"],
    confirmed: ["4 top-10 exchanges", "3 custody firms", "Anchor: a stablecoin foundation"],
  },
  {
    id: "kbw-2026",
    date: "SEP 03",
    year: "'26",
    name: "Han River Yacht Reception",
    city: "Seoul",
    convention: "Korea Blockchain Week",
    type: "Reception",
    seats: "80",
    status: "Sponsor slots open",
    pitch: "Sunset reception on the Han for APAC funds, Korean L1 ecosystems, and visiting US foundations.",
    agenda: ["17:30  Boarding & welcome", "18:30  Underwriter introduction", "20:00  Plated dinner under the bridge lights", "22:00  Disembark → afterparty"],
    confirmed: ["2 anchor sponsors locked", "12 Korean funds RSVP'd", "Translation provided"],
  },
  {
    id: "consensus-2027",
    date: "MAY 11",
    year: "'27",
    name: "The Capitol Briefing",
    city: "Austin",
    convention: "Consensus",
    type: "Briefing + Dinner",
    seats: "32",
    status: "Closed door",
    pitch: "Off-the-record policy briefing followed by a strict-NDA dinner with regulators, GCs, and protocol legal.",
    agenda: ["16:00  Briefing: enforcement outlook", "18:00  Reception (no phones)", "19:30  Dinner under Chatham House rules", "21:30  Cigars + nightcap"],
    confirmed: ["2 sitting commissioners (TBC)", "GCs from 5 funds", "Press: none"],
  },
];

const KPIS = [
  { n: "$2.4B", l: "deal flow surfaced in-room (last 12 mo)" },
  { n: "61%", l: "of dinners produce a follow-on meeting within 2 weeks" },
  { n: "94", l: "events run since 2022" },
  { n: "12", l: "cities · 6 majors · 0 leaks" },
];

const CLIENTS = ["aeon labs", "river/", "northpath", "Helix Foundation", "Citadel L2", "Open Mantle", "tachy.fi", "Carbide Capital"];

const PRESS = ["FORBES (rumored)", "BLOCKWORKS", "THE BLOCK", "Bankless ✦", "Decrypt"];

const TESTIMONIALS = [
  { q: "We closed our extension round at the dinner. The room was the product.", a: "GP, mid-stage crypto fund" },
  { q: "Six months of BD compressed into one weekend. No panel, no badge, no merch.", a: "Founder, modular DA layer" },
  { q: "They protected the guest list like it was the cap table. That's the job.", a: "Head of ecosystem, top-10 exchange" },
];

// ── small shared visual atoms ──────────────────────────────────────
function Marker({ children, style }) {
  return <span className="hl" style={style}>{children}</span>;
}
function Eyebrow({ children, style }) {
  return <div className="sk-eyebrow" style={style}>{children}</div>;
}
function Hr({ style }) { return <div className="sk-hr" style={{ margin: "12px 0", ...style }} />; }
function Squiggle({ style }) { return <div className="sk-squiggle" style={style} />; }
function Btn({ children, kind = "default", style, onClick }) {
  const cls = "sk-btn" + (kind === "dark" ? " dark" : kind === "accent" ? " accent" : kind === "ghost" ? " ghost" : "");
  return <button className={cls} style={style} onClick={onClick}>{children}</button>;
}
function ImgPh({ label, style }) {
  const slug = (label || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
  return <div className="sk-img" data-photo={slug} style={style}><span>{label}</span></div>;
}
function Chip({ children, kind, style }) {
  const cls = "sk-chip" + (kind === "dark" ? " dark" : kind === "accent" ? " accent" : "");
  return <span className={cls} style={style}>{children}</span>;
}
function Note({ children, style, className = "" }) {
  return <div className={"sk-note anno " + className} style={style}>{children}</div>;
}

// ── shared event list row used across all variants ─────────────────
function EventRow({ ev, onOpen, dense }) {
  return (
    <div className="event-row" onClick={() => onOpen(ev)}>
      <div>
        <div className="date">{ev.date}</div>
        <div className="sk-small">{ev.year} · {ev.city}</div>
      </div>
      <div>
        <div className="name">{ev.name}</div>
        <div className="meta">{ev.convention} · {ev.type} · {ev.seats} seats</div>
      </div>
      <div className="sk-chip" style={{ borderStyle: "dashed" }}>{ev.status}</div>
      <div className="sk-arrow" style={{ fontSize: 22 }}>↗</div>
    </div>
  );
}

// ── shared modal ──────────────────────────────────────────────────
function EventModal({ ev, onClose }) {
  if (!ev) return null;
  return (
    <div className="event-modal-backdrop" onClick={onClose}>
      <div className="event-modal" onClick={(e) => e.stopPropagation()}>
        <div style={{ padding: "20px 24px", borderBottom: "2px dashed var(--line)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
            <div>
              <Eyebrow>{ev.convention} · {ev.city}</Eyebrow>
              <div className="sk-h1" style={{ fontSize: 44, marginTop: 4 }}>{ev.name}</div>
              <div className="sk-body" style={{ marginTop: 6 }}>{ev.date} {ev.year} · {ev.type} · <Marker>{ev.seats} seats</Marker> · {ev.status}</div>
            </div>
            <button className="sk-btn" onClick={onClose} style={{ fontSize: 13 }}>✕  close</button>
          </div>
        </div>
        <div style={{ padding: "20px 24px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <div>
            <Eyebrow>The room</Eyebrow>
            <p className="hand" style={{ fontSize: 17, lineHeight: 1.4, marginTop: 6 }}>{ev.pitch}</p>
            <Eyebrow style={{ marginTop: 18 }}>Confirmed</Eyebrow>
            <ul className="hand" style={{ paddingLeft: 18, marginTop: 6 }}>
              {ev.confirmed.map((c, i) => <li key={i} className="sk-check" style={{ listStyle: "none", marginLeft: -18 }}>{c}</li>)}
            </ul>
          </div>
          <div>
            <Eyebrow>Run of show</Eyebrow>
            <div style={{ marginTop: 8 }}>
              {ev.agenda.map((a, i) => (
                <div key={i} className="hand" style={{ display: "flex", gap: 10, padding: "6px 0", borderBottom: "1px dotted var(--line)" }}>
                  <span style={{ fontFamily: '"Special Elite",monospace', fontSize: 11, color: "var(--ink-faint)", minWidth: 22 }}>{String(i + 1).padStart(2, "0")}</span>
                  <span>{a}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div style={{ padding: "16px 24px 24px", display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
          <Btn kind="dark">Request a seat →</Btn>
          <Btn kind="ghost">Brief us on a side event ↗</Btn>
          <div className="sk-small" style={{ marginLeft: "auto" }}>Vetting takes 48h. No exceptions.</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  UPCOMING, KPIS, CLIENTS, PRESS, TESTIMONIALS,
  Marker, Eyebrow, Hr, Squiggle, Btn, ImgPh, Chip, Note,
  EventRow, EventModal,
});