// EVENTS — coming-soon preview. Shows the category lineup without fake listings.

const EVENT_KINDS = [
  {
    tag: "Club nights",
    title: "Weekly tables at partner venues.",
    body: "Standing weekly games at tea rooms, social clubs, and restaurants that already know how to set a table. Walk-in friendly. Level-tagged.",
    tone: "pink"
  },
  {
    tag: "Beginner nights",
    title: "Tea & Tiles · first-timers welcome.",
    body: "Monthly open tables for people who want to learn the NMJL card without a performance review. A teacher at every table, a lesson in the first hour.",
    tone: "green"
  },
  {
    tag: "Charity tournaments",
    title: "Play for a cause you choose.",
    body: "Seasonal tournaments run with partner nonprofits. Entry fee, verified proceeds, warm food. The pin on your profile you'll actually want.",
    tone: "gold"
  },
  {
    tag: "Signature retreats",
    title: "A long weekend, four tables, one house.",
    body: "Twice-a-year retreats in places worth the drive. Four reserved tables, linen service, and nothing scheduled between breakfast and the first round.",
    tone: "gold"
  },
];

const Events = () => (
  <section className="events section-pad" id="events">
    <div className="container">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 40, flexWrap: "wrap", marginBottom: 12 }}>
        <div style={{ maxWidth: 580 }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "6px 12px", borderRadius: 999,
            background: "rgba(255,255,255,0.14)", border: "1px solid rgba(255,255,255,0.35)",
            fontFamily: "var(--mm-font-sans)", fontSize: 10.5, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase", color: "#fff", marginBottom: 16
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--mm-sunflower-gold)" }} />
            Coming Soon · A Future Feature
          </div>
          <h2 className="sec-title" style={{ color: "#fff" }}>Events worth<br /><em style={{ fontStyle: "italic" }}>putting on the calendar.</em></h2>
        </div>
        <p className="lede on-pink" style={{ maxWidth: 420 }}>
          Club nights, beginner tables, charity tournaments, and signature retreats —
          rolling out after launch, city by city. Here's a preview of what's on the
          drawing board.
        </p>
      </div>

      <div className="events__grid">
        {EVENT_KINDS.map((e, i) => (
          <Reveal key={e.tag} delay={i * 60}>
            <article className="event-card" style={{ position: "relative" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12 }}>
                <Pill variant={e.tone === "gold" ? "gold" : e.tone === "green" ? "green" : "pink"}>{e.tag}</Pill>
                <span style={{ fontFamily: "var(--mm-font-sans)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--mm-warm-gray)", paddingTop: 6 }}>
                  Coming soon
                </span>
              </div>
              <h3 className="event-card__title" style={{ marginTop: 16 }}>{e.title}</h3>
              <p style={{ fontFamily: "var(--mm-font-sans)", fontSize: 14, lineHeight: 1.55, color: "var(--mm-warm-gray)", marginTop: 8, textWrap: "pretty" }}>
                {e.body}
              </p>
              <div className="event-card__foot">
                <div className="event-card__seats"><em>Launching post-beta</em></div>
                <a href="#founding" className="event-card__cta" style={{ background: "transparent", color: "var(--mm-kelly-green)", border: "1.5px solid var(--mm-kelly-green)" }}>Notify me</a>
              </div>
            </article>
          </Reveal>
        ))}
      </div>

      <div style={{ textAlign: "center", marginTop: 40, fontFamily: "var(--mm-font-sans)", fontSize: 13, color: "rgba(255,255,255,0.82)", maxWidth: 560, marginLeft: "auto", marginRight: "auto", textWrap: "pretty" }}>
        Running a club or venue that wants to host one of these? <a href="mailto:info@mahjongmatchmaker.com" style={{ color: "var(--mm-sunflower-gold)", fontWeight: 600 }}>info@mahjongmatchmaker.com</a>.
      </div>
    </div>
  </section>
);

Object.assign(window, { Events });