// wireframe-b.jsx — "THE CALENDAR"
// Partner framing. Pain: organizing remotely. Versatile formats. Calendar = sliding carousel.

// ── Email capture with inline success state ────────────────────────
function EmailCapture({ label = "Get available venues →", formStyle }) {
  const [sent, setSent] = React.useState(false);
  const [email, setEmail] = React.useState("");
  if (sent) return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding: "11px 24px",
      background: "var(--ink)", color: "var(--paper)",
      borderRadius: 99, fontFamily: "'Space Grotesk', sans-serif",
      fontWeight: 700, fontSize: 15, border: "2px solid var(--ink)",
    }}>
      <span style={{ fontSize: 18 }}>✓</span> We'll be in touch.
    </div>
  );
  return (
    <form className="sk-email" style={{ maxWidth: "none", ...formStyle }}
      onSubmit={(e) => { e.preventDefault(); if (email) setSent(true); }}>
      <input type="email" placeholder="you@yourdomain.com"
        value={email} onChange={(e) => setEmail(e.target.value)} required />
      <button type="submit">{label}</button>
    </form>
  );
}

// ── Contact modal ──────────────────────────────────────────────────
function ContactModal({ open, onClose }) {
  const [done, setDone] = React.useState(false);
  const [f, setF] = React.useState({ name: "", email: "", event: "", note: "" });
  const set = (k) => (e) => setF(p => ({ ...p, [k]: e.target.value }));

  React.useEffect(() => {
    if (!open) setTimeout(() => { setDone(false); setF({ name: "", email: "", event: "", note: "" }); }, 300);
  }, [open]);

  if (!open) return null;

  const field = {
    width: "100%", boxSizing: "border-box",
    border: "1.5px solid rgba(12,12,12,.18)",
    borderRadius: 6, padding: "10px 14px",
    fontFamily: "'DM Sans', sans-serif", fontSize: 15,
    background: "var(--paper-2)", color: "var(--ink)", outline: "none",
  };

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(12,12,12,.6)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
    }} onClick={onClose}>
      <div className="sk-box" style={{
        background: "var(--paper)", width: "min(520px, 100%)",
        padding: 40, position: "relative",
        boxShadow: "6px 8px 0 rgba(0,0,0,.15)",
      }} onClick={(e) => e.stopPropagation()}>

        <button onClick={onClose} style={{
          position: "absolute", top: 16, right: 20, background: "none",
          border: "none", fontSize: 24, cursor: "pointer",
          color: "var(--ink-faint)", lineHeight: 1,
        }}>✕</button>

        {!done ? <>
          <Eyebrow>// contact</Eyebrow>
          <div className="sk-h2" style={{ fontSize: 40, marginTop: 6, lineHeight: .95 }}>
            Tell us what<br />you're planning.
          </div>
          <p className="sk-body" style={{ marginTop: 10, marginBottom: 26, fontSize: 14 }}>
            Convention, city, format. We'll come back within 24h.
          </p>
          <form onSubmit={(e) => { e.preventDefault(); if (f.email) setDone(true); }}
            style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <input style={field} placeholder="Your name" value={f.name} onChange={set("name")} />
              <input style={field} type="email" placeholder="you@company.com" required value={f.email} onChange={set("email")} />
            </div>
            <input style={field} placeholder="Which convention? (e.g. Token2049, DevCon…)" value={f.event} onChange={set("event")} />
            <textarea style={{ ...field, resize: "vertical", minHeight: 88 }}
              placeholder="Anything else we should know?" value={f.note} onChange={set("note")} />
            <button type="submit" className="sk-btn dark"
              style={{ marginTop: 6, width: "100%", justifyContent: "center", padding: "13px 0", fontSize: 16 }}>
              Send →
            </button>
            <div className="hand" style={{ textAlign: "center", fontSize: 13, color: "var(--ink-faint)" }}>
              or write us at <span className="hl">hello@shifters.events</span>
            </div>
          </form>
        </> : (
          <div style={{ textAlign: "center", padding: "30px 0 20px" }}>
            <div style={{ fontSize: 64, marginBottom: 12, lineHeight: 1 }}>✓</div>
            <div className="sk-h2" style={{ fontSize: 42, lineHeight: .95 }}>Got it.</div>
            <p className="sk-body" style={{ marginTop: 14, fontSize: 16 }}>
              We'll be in touch within 24h.<br />Keep an eye on your inbox.
            </p>
            <button className="sk-btn" style={{ marginTop: 28 }} onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

function WireframeB({ onOpen, showAnno }) {
  // 12 events — sliding carousel · each links to event site
  const TIMELINE = [
    { conv: "Money 2020 Europe",              month: "JUN '26", dates: "Jun 2 – 4, 2026",    city: "Amsterdam",     url: "https://europe.money2020.com/" },
    { conv: "StableCon",                      month: "SEP '26", dates: "Sep 9 – 10, 2026",   city: "Washington DC", url: "https://stablecon.com" },
    { conv: "European Blockchain Convention", month: "SEP '26", dates: "Sep 16 – 17, 2026",  city: "Barcelona",     url: "https://eblockchainconvention.com/" },
    { conv: "Korea Blockchain Week",          month: "SEP '26", dates: "Sep 22 – 28, 2026",  city: "Seoul",         url: "https://koreablockchainweek.com/" },
    { conv: "Token 2049",                     month: "OCT '26", dates: "Oct 7 – 8, 2026",    city: "Singapore",     url: "https://www.asia.token2049.com/" },
    { conv: "Money 2020 Vegas",               month: "OCT '26", dates: "Oct 18 – 21, 2026", city: "Las Vegas",     url: "https://us.money2020.com/" },
    { conv: "Digital Asset Summit",           month: "OCT '26", dates: "Oct 20 – 21, 2026", city: "London",        url: "https://blockworks.com/event/digital-asset-summit-london-2025" },
    { conv: "DevCon",                         month: "NOV '26", dates: "Nov 3 – 6, 2026",   city: "Mumbai",        url: "https://devcon.org/" },
    { conv: "Bitcoin Amsterdam",              month: "NOV '26", dates: "Nov 5 – 6, 2026",   city: "Amsterdam",     url: "https://www.bitcoin.amsterdam/" },
    { conv: "Web Summit Lisbon",              month: "NOV '26", dates: "Nov 9 – 12, 2026", city: "Lisbon",        url: "https://websummit.com/web-summit-2026/" },
    { conv: "Solana Breakpoint",              month: "NOV '26", dates: "Nov 15 – 17, 2026", city: "London",        url: "https://solana.com/breakpoint" },
    { conv: "Digital Asset Summit UAE",       month: "DEC '26", dates: "Dec 9 – 10, 2026",  city: "Dubai",         url: "https://blockworks.com/events" },
  ];

  // Cities ticker — every city we've worked in
  const CITIES = [
    "Denver", "Atlanta", "Lisbon", "Berlin", "Paris",
    "Singapore", "Istanbul", "New York", "Hong Kong", "Bangkok",
    "London", "Dubai", "Zurich", "Toronto", "Las Vegas", "Amsterdam",
    "Brooklyn", "Milan", "Cannes", "Seoul", "Frankfurt", "Barcelona",
    "Split", "Miami", "Buenos Aires", "Abu Dhabi", "Washington DC",
    "Riyadh", "Tokyo", "Mumbai",
  ];

  // Hosting options — title + short subtitle only.
  const FORMATS = [
    { name: "VIP Dinner",            promise: "Candlelight setting for real conversations.",   img: "long table · candlelight" },
    { name: "Welcome Drinks",        promise: "Laidback event to break the ice.",              img: "cocktail bar · 8pm" },
    { name: "Signature Cocktails",   promise: "Bespoke drinks, hand-picked crowd.",            img: "shaker · twist of lemon" },
    { name: "House Party",           promise: "Live music, low lights, late night.",           img: "live set · low light" },
    { name: "Long Lunch",            promise: "Midday table where plans take shape.",          img: "private dining · 1pm" },
    { name: "Power Breakfast",       promise: "Early start, espresso and clean light.",        img: "espresso · 8am" },
    { name: "Morning Run",           promise: "Sunrise miles before the day begins.",          img: "harbor run · 6am" },
    { name: "Espresso Bar",          promise: "Quiet pour-over for one-on-ones.",              img: "two cups · window seat" },
    { name: "Wine Tasting",          promise: "Glass-by-glass, hosted by a sommelier.",        img: "stemware · flight of six" },
    { name: "Late-Night Afterparty", promise: "Doors at midnight, room kept warm.",            img: "speakeasy · 1am" },
    { name: "Sunday Brunch",         promise: "Slow morning, soft music, terrace.",            img: "terrace · noon" },
    { name: "Fitness Class",         promise: "Sweat first, then the introductions.",          img: "rooftop · class" },
    { name: "Demo Day",              promise: "One stage, sharp lighting, captive room.",      img: "stage · clicker" },
    { name: "Hands-on Workshop",     promise: "Small group, real work, off the record.",       img: "round table · notebooks" },
    { name: "Hackathon",             promise: "Long benches, builders, food on a loop.",       img: "warehouse · long benches" },
    { name: "Happy Hour",            promise: "Golden-hour drinks, locked-door guest list.",   img: "bar · 6:30pm" },
    { name: "Cocktail Party",        promise: "Standing room, trays moving, sharper list.",    img: "trays · clinking glasses" },
    { name: "Coffee Chat",           promise: "Two seats, two cups, one honest hour.",         img: "two seats · bar height" },
    { name: "Yoga Session",          promise: "Mat, view, a quieter way to meet.",             img: "rooftop · sunrise" },
  ];

  // "Feet on the ground" — operational work we handle
  const FEET = [
    { n: "01", t: "Venue scouting",         d: "We shortlist 4–8 venues per city: restaurants, mansions, rooftops, yachts, members' clubs. All pre-walked by someone local." },
    { n: "02", t: "Securing the location",  d: "Negotiation, holds, contracts, deposits, exclusivity clauses. We sign in our name so you don't have to." },
    { n: "03", t: "Permits & insurance",    d: "City permits, alcohol licensing, event insurance, fire-code sign-off. In your language, or ours." },
    { n: "04", t: "F&B + bar program",      d: "Menu design with the chef, dietary screening of every guest, sommelier or cocktail program, allergens flagged." },
    { n: "05", t: "AV, lighting & music",   d: "Sound system, mic plan, lighting design, DJ or live act, run-of-show with cues. We rehearse it." },
    { n: "06", t: "Door, security & staffing", d: "Vetting, RSVP control, check-in flow, security, coat check, hosts, runners. One floor manager per 40 guests." },
    { n: "07", t: "Logistics on the ground", d: "Local team in-market 72h before. Car service, hotel blocks, last-mile transit, weather contingency." },
    { n: "08", t: "Photo & video",          d: "House photographer, video team and editor on site. After-movies of the event delivered within 72h, cut for socials and the morning-after recap." },
  ];

  const [contactOpen, setContactOpen] = React.useState(false);

  // ref for the timeline carousel
  const tlRef = React.useRef(null);
  const slide = (ref, dir) => {
    const el = ref.current;
    if (!el) return;
    const step = Math.round(el.clientWidth * 0.8);
    el.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <div className="wf sk-paper" style={{ width: "100%" }}>

      {/* nav */}
      <div style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
        background: "var(--paper)",
        borderBottom: "1px solid rgba(12,12,12,.12)",
        padding: "16px max(48px, calc(50vw - 600px))",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div className="hand" style={{ fontWeight: 700, fontSize: 22, letterSpacing: ".06em" }}>SHIFTERS.<span className="script" style={{ fontSize: 26, color: "var(--ink-soft)" }}>events</span></div>
        <Btn kind="dark" onClick={() => setContactOpen(true)}>Contact us →</Btn>
      </div>

      {/* HERO — partner framing, no web3, no deal language */}
      <div className="section" style={{ paddingTop: 88, paddingBottom: 20, position: "relative" }}>
        <Eyebrow>// crafting side events</Eyebrow>
        <div className="sk-h1" style={{ fontSize: 92, marginTop: 6 }}>
          We're the partner that <Marker>hosts your side event</Marker> in any city.
        </div>
        <p className="sk-body" style={{ fontSize: 18, maxWidth: 760, marginTop: 16 }}>
          From intimate dinners to morning runs to cocktail receptions, we handle the space, the flow, and the experience so the right people can meet naturally.
        </p>

        {/* TIMELINE — SLIDING CAROUSEL · 11 events */}
        <div className="sk-box filled" style={{ marginTop: 22, padding: "18px 4px 6px" }} data-comment-anchor="9adf1d0e36-div-102-9">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0 14px" }}>
            <Eyebrow>// our 2026 calendar · slide →</Eyebrow>
            <div className="car-hint">
              <button className="car-arrow" aria-label="prev" onClick={() => slide(tlRef, -1)}>‹</button>
              <button className="car-arrow" aria-label="next" onClick={() => slide(tlRef, +1)}>›</button>
            </div>
          </div>
          <div className="ruler" style={{ margin: "12px 14px 0" }} />
          <div className="sk-carousel" ref={tlRef}>
            {TIMELINE.map((t, i) => (
              <a className="tl-card" key={i} href={t.url} target="_blank" rel="noopener noreferrer">
                <div className="mono" style={{ fontSize: 11, color: "var(--ink-faint)" }}>{t.month}</div>
                <div className="hand" style={{ fontWeight: 700, fontSize: 18, marginTop: 2, lineHeight: 1.1 }}>{t.conv}</div>
                <div className="sk-small" style={{ marginTop: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span>{t.city}</span>
                  <span className="sk-arrow tl-link" aria-hidden="true">↗</span>
                </div>
              </a>
            ))}
          </div>
        </div>

        {showAnno && (
          <Note className="r" style={{ top: 260, right: 60, transform: "rotate(4deg)" }}>
            sliding calendar —<br />12 conventions,<br /><span style={{ fontSize: 14 }}>tap a card → site</span>
          </Note>
        )}
      </div>

      {/* CITIES MARQUEE — small section, lateral */}
      <div data-comment-anchor="301e6b0861-div-123-7">
        <div className="cities-marquee">
          <div className="cities-track">
            {[...CITIES, ...CITIES].map((c, i) => (
              <span className="city" key={i}>{c}</span>
            ))}
          </div>
        </div>

        {/* PAIN STRIP — organizing remotely is a quilombo */}
        <div className="section" style={{ paddingTop: 28, paddingBottom: 28 }}>
          <div className="sk-box ink" style={{ padding: 32, position: "relative" }} data-comment-anchor="79d6e32e3f-div-124-9">
            <Eyebrow style={{ color: "rgba(246,243,236,.55)" }}>// the problem we solve</Eyebrow>
            <div className="sk-h2" style={{ fontSize: 56, color: "var(--paper)", marginTop: 6, lineHeight: 1 }}>
              You live in New York. <br />
              The event is in <span className="hl" style={{ color: "var(--ink)" }}>Singapore</span>.
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 26 }}>
              <div>
                <div className="script" style={{ fontSize: 32, color: "var(--accent)", lineHeight: 1 }}>14h ahead.</div>
                <p className="hand" style={{ fontSize: 15, color: "rgba(246,243,236,.75)", marginTop: 6 }}>
                  Vendors who answer at 3 AM your time. Permits in a language you don't speak. A venue you've never walked.
                </p>
              </div>
              <div>
                <div className="script" style={{ fontSize: 32, color: "var(--accent)", lineHeight: 1 }}>No local network.</div>
                <p className="hand" style={{ fontSize: 15, color: "rgba(246,243,236,.75)", marginTop: 6 }}>
                  The best room in town isn't on Google. The chef you want is booked. The DJ doesn't return cold emails.
                </p>
              </div>
              <div>
                <div className="script" style={{ fontSize: 32, color: "var(--accent)", lineHeight: 1 }}>One shot.</div>
                <p className="hand" style={{ fontSize: 15, color: "rgba(246,243,236,.75)", marginTop: 6 }}>
                  You fly in for a week. There's no time to fix a bad caterer, a missing permit, or an empty room.
                </p>
              </div>
            </div>

            <p className="hand" style={{ fontSize: 20, color: "var(--paper)", marginTop: 22, maxWidth: 820 }}>
              We're already on the ground. Local team, every city: scouting venues, signing contracts, briefing the door. Months before you land.
            </p>
          </div>
        </div>
      </div>

      {/* HOW IT WORKS — editorial two-column */}
      <div className="section" style={{ paddingTop: 20, paddingBottom: 28 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: "0 56px", alignItems: "start" }}>

          <div>
            <Eyebrow>// how it works</Eyebrow>
            <div className="sk-h2" style={{ fontSize: 40, marginTop: 6, lineHeight: .95 }}>
              We do the <Marker>boring part.</Marker>
            </div>
            <p className="sk-body" style={{ fontSize: 14, color: "var(--ink-soft)", marginTop: 14, lineHeight: 1.55 }}>
              Pick what you need.<br />We handle it.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: "2px solid var(--line)" }}>
            {FEET.map((f, i) => (
              <div key={f.n} style={{
                padding: "14px 32px 14px 0",
                borderBottom: "1px solid rgba(12,12,12,.1)",
                borderRight: i % 2 === 0 ? "1px solid rgba(12,12,12,.1)" : "none",
                paddingLeft: i % 2 === 1 ? 24 : 0,
              }}>
                <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: "var(--accent)", marginRight: 12 }}>{f.n}</span>
                <span className="hand" style={{ fontWeight: 700, fontSize: 17 }}>{f.t}</span>
              </div>
            ))}
          </div>

        </div>
      </div>

      {/* FORMATS — EDITORIAL TIME-OF-DAY INDEX */}
      <div className="section" style={{ paddingTop: 12 }}>
        <Eyebrow>// what we host</Eyebrow>
        <div style={{ marginBottom: 32 }}>
          <div className="sk-h2" style={{ fontSize: 52, maxWidth: 720, lineHeight: 1 }}>
            From a 6 AM run to a 2 AM toast.
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "0 40px", borderTop: "2px solid var(--line)" }}>
          {[
            {
              time: "Morning", range: "6 am – noon",
              items: ["Morning Run", "Yoga Session", "Fitness Class", "Power Breakfast", "Espresso Bar", "Coffee Chat"],
            },
            {
              time: "Afternoon", range: "noon – 6 pm",
              items: ["Long Lunch", "Sunday Brunch", "Hands-on Workshop", "Demo Day", "Hackathon"],
            },
            {
              time: "Evening", range: "6 pm – midnight",
              items: ["Welcome Drinks", "Happy Hour", "VIP Dinner", "Wine Tasting", "Signature Cocktails", "Cocktail Party"],
            },
            {
              time: "Night", range: "midnight – 2 am",
              items: ["House Party", "Late-Night Afterparty"],
              note: "Because the best conversations happen after midnight.",
            },
          ].map((group) => (
            <div key={group.time} style={{ paddingTop: 18 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", fontWeight: 700, background: "var(--accent)", display: "inline-block", padding: "2px 6px" }}>{group.time.toUpperCase()}</div>
              <div className="script" style={{ fontSize: 13, color: "var(--ink-faint)", marginTop: 3, marginBottom: 16 }}>{group.range}</div>
              <div>
                {group.items.map((name) => {
                  const f = FORMATS.find((x) => x.name === name);
                  return (
                    <div key={name} style={{ padding: "11px 0", borderBottom: "1px solid rgba(12,12,12,.12)" }}>
                      <div className="hand" style={{ fontSize: 15, fontWeight: 500, lineHeight: 1.1 }}>{f.name}</div>
                      <div className="script" style={{ fontSize: 13, color: "var(--ink-soft)", marginTop: 3, lineHeight: 1.3 }}>{f.promise}</div>
                    </div>
                  );
                })}
                {group.note && (
                  <div className="script" style={{ fontSize: 13, color: "var(--ink-faint)", marginTop: 20, lineHeight: 1.4 }}>{group.note}</div>
                )}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 36, paddingTop: 24, borderTop: "1px solid rgba(12,12,12,.12)" }}>
          <div className="script" style={{ fontSize: 17, color: "var(--ink-soft)" }}>
            Looking for something off-menu? Give us a nudge. That's usually where the fun starts.
          </div>
        </div>
      </div>

      {/* CONVENTION SPOTLIGHTS — next three events */}
      {TIMELINE.slice(0, 3).map((t, i) => (
        <div className="section" key={t.conv + i} style={{ paddingTop: 12, paddingBottom: 24, borderTop: "2px dashed var(--line)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 36, alignItems: "start" }}>
            <div>
              <Eyebrow>{t.month} · {t.city}</Eyebrow>
              <div className="sk-h2" style={{ fontSize: 40, marginTop: 4 }}>{t.conv}</div>
              <Squiggle style={{ margin: "14px 0", width: 80 }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 8, margin: "14px 0 18px" }}>
                <div className="hand" style={{ fontWeight: 700, fontSize: 17, background: "var(--accent)", display: "inline-block", padding: "1px 6px" }}>{t.dates}</div>
                <a className="hand" href={t.url} target="_blank" rel="noopener noreferrer" style={{ fontSize: 15, color: "var(--ink)", borderBottom: "1.5px dashed var(--line)", width: "fit-content" }}>
                  {t.url.replace(/^https?:\/\//, "").replace(/\/$/, "")} ↗
                </a>
              </div>
              <p className="sk-body">
                {i === 0 && "Europe's biggest fintech week. Banks, payments, infra and the fund side. All in town for three days. We hold restaurants, canal-side terraces and members' clubs walking distance from the RAI."}
                {i === 1 && "Two days of stablecoin policy, treasury and infra in the capital. Smaller room, sharper guest list. The dinners are where the regulators actually talk."}
                {i === 2 && "Europe converges on Barcelona for two days. Rooftop receptions, late-night flamenco rooms, the kind of long lunches that turn into commitments."}
              </p>
            </div>

            <div>
              <ImgPh label={`${t.city} · placeholder photo`} style={{ height: 320, width: "100%" }} />
              <EmailCapture label="Get available venues →" formStyle={{ marginTop: 18 }} />
            </div>
          </div>

          {showAnno && i === 0 && (
            <Note style={{ position: "relative", display: "inline-block", marginTop: 14, marginLeft: 420, transform: "rotate(3deg)" }}>
              one block per convention<br />→ no example events<br />just an email capture
            </Note>
          )}
        </div>
      ))}

      {/* SEE MORE — link to full calendar */}
      <div className="section" style={{ paddingTop: 8, paddingBottom: 32, textAlign: "center", borderTop: "2px dashed var(--line)" }}>
        <p className="sk-body" style={{ marginBottom: 14 }}>
          9 more conventions through December: Korea Blockchain Week, Token 2049, DevCon, Web Summit and more.
        </p>
        <Btn kind="dark">See more events →</Btn>
      </div>

      {/* CONTACT US — simple */}
      <div className="section" style={{ paddingBottom: 56, paddingTop: 36 }}>
        <div className="sk-box accent" style={{ padding: 40, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "center" }} data-comment-anchor="d8e369c294-div-275-9">
          <div>
            <Eyebrow>// contact us</Eyebrow>
            <div className="sk-h1" style={{ fontSize: 72, marginTop: 6, lineHeight: .95 }}>
              Let's talk.
            </div>
            <p className="sk-body" style={{ marginTop: 12, maxWidth: 480, fontSize: 17 }}>
              Tell us the convention, the city, and roughly when. We'll come back within 24h with what we can host for you.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <EmailCapture label="Contact us →" formStyle={{ background: "var(--paper)" }} />
            <div className="hand" style={{ fontSize: 15 }}>
              or write us directly at <span className="hl">hello@shifters.events</span>
            </div>
          </div>
        </div>
      </div>

      <ContactModal open={contactOpen} onClose={() => setContactOpen(false)} />
    </div>
  );
}

window.WireframeB = WireframeB;