function Calendar() {
  const shows = [
    { d: "Apr", day: "24", year: "2026", t: "Mandolin Ranch Trio", v: "Private event", loc: "Denver, CO", time: "by invitation", tag: "Mandolin Ranch" },
    { d: "May", day: "24", year: "2026", t: "Chris King Band", v: "Evergreen Elks Lodge", loc: "Evergreen, CO", time: "2:00 – 6:00 PM", tag: "Public" },
    { d: "Jun", day: "13", year: "2026", t: "Mandolin Ranch", v: "Country Club private event", loc: "Colorado", time: "by invitation", tag: "Mandolin Ranch" },
    { d: "Jun", day: "26", year: "2026", t: "Chris King Band", v: "Kingman Winery", loc: "Berthoud, CO", time: "5:00 – 8:00 PM", tag: "Public" },
    { d: "Jul", day: "03", year: "2026", t: "Chris King Band", v: "The Woodcellar", loc: "Colorado", time: "8:00 – 11:30 PM", tag: "Public" },
    { d: "Jul", day: "04", year: "2026", t: "Chris King Band", v: "Buchanan Park · July 4", loc: "Evergreen, CO", time: "1:00 – 2:00 PM", tag: "Public" },
    { d: "Jul", day: "18", year: "2026", t: "Joe Bye Band", v: "Summerfest", loc: "Colorado", time: "3:00 – 6:00 PM", tag: "Public" },
    { d: "Jul", day: "19", year: "2026", t: "Joe Bye Band", v: "The Little Bear", loc: "Evergreen, CO", time: "1:00 – 5:00 PM", tag: "Public" },
    { d: "Aug", day: "01", year: "2026", t: "Chris King Band", v: "Shifterz", loc: "Colorado", time: "7:00 – 11:00 PM", tag: "Public" },
    { d: "Aug", day: "29", year: "2026", t: "Chris King Band", v: "Platte River", loc: "Colorado", time: "12:30 – 4:30 PM", tag: "Public" },
    { d: "Sep", day: "25", year: "2026", t: "Chris King Band", v: "3070 Sports Bar", loc: "Colorado", time: "7:00 – 10:00 PM", tag: "Public" },
  ];

  return (
    <section>
      <div className="wrap">
        <div className="sec-head" style={{ marginTop: 40 }}>
          <div>
            <div className="mono kicker">Tour Dates · 2026</div>
            <h1 style={{ fontSize: "clamp(40px, 6vw, 80px)" }}>Calendar<br /><em>of shows.</em></h1>
          </div>
          <p>
            Public appearances, residencies and a handful of private events
            noted where possible. For booking availability, <a onClick={() => go("/contact")} style={{ color: "var(--accent)", textDecoration: "underline" }}>send an inquiry</a>.
          </p>
        </div>

        <div className="cal-chips" style={{ display: "flex", gap: 10, marginBottom: 24, flexWrap: "wrap" }}>
          <span className="mono" style={{ padding: "8px 14px", border: "1px solid var(--accent)", color: "var(--accent)", borderRadius: 999 }}>All shows</span>
          <span className="mono" style={{ padding: "8px 14px", border: "1px solid var(--rule)", borderRadius: 999, color: "var(--ink-soft)" }}>Mandolin Ranch</span>
          <span className="mono" style={{ padding: "8px 14px", border: "1px solid var(--rule)", borderRadius: 999, color: "var(--ink-soft)" }}>Gypsy Mandolin</span>
          <span className="mono" style={{ padding: "8px 14px", border: "1px solid var(--rule)", borderRadius: 999, color: "var(--ink-soft)" }}>Chris King Band</span>
          <span className="mono" style={{ padding: "8px 14px", border: "1px solid var(--rule)", borderRadius: 999, color: "var(--ink-soft)" }}>Joe Bye Band</span>
        </div>

        <div style={{ borderTop: "1px solid var(--rule)" }}>
          {shows.map((s, i) => (
            <div
              key={i}
              className="cal-row"
              style={{
                display: "grid",
                gridTemplateColumns: "90px 1.4fr 1fr auto",
                gap: 28,
                padding: "22px 10px",
                borderBottom: "1px solid var(--rule)",
                alignItems: "center",
              }}
            >
              <div>
                <div style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--accent)" }}>{s.d}</div>
                <div className="cal-day" style={{ fontFamily: "var(--f-display)", fontSize: 40, lineHeight: 1, fontWeight: 400 }}>{s.day}</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 22 }}>{s.t}</div>
                <div style={{ color: "var(--ink-soft)", fontSize: 14, marginTop: 2 }}>{s.v} · {s.loc}</div>
              </div>
              <div className="mono cal-time">{s.time}</div>
              <div className="cal-tag">
                <span
                  style={{
                    fontFamily: "var(--f-mono)",
                    fontSize: 10,
                    padding: "4px 10px",
                    border: "1px solid var(--rule)",
                    borderRadius: 2,
                    letterSpacing: ".15em",
                    textTransform: "uppercase",
                    color: s.tag === "Public" ? "var(--sage)" : "var(--accent)",
                  }}
                >
                  {s.tag}
                </span>
              </div>
            </div>
          ))}
        </div>

        <div
          style={{
            marginTop: 60,
            padding: 40,
            background: "var(--paper-2)",
            borderRadius: 4,
            border: "1px solid var(--rule)",
            display: "grid",
            gridTemplateColumns: "1fr auto",
            gap: 30,
            alignItems: "center",
          }}
        >
          <div>
            <div className="mono" style={{ marginBottom: 8, color: "var(--accent)" }}>Residency</div>
            <h3 style={{ marginBottom: 8 }}>Every Sunday · Faith Bible Chapel South</h3>
            <div style={{ color: "var(--ink-2)" }}>4250 S Federal Blvd · 10:00 – 11:30 AM</div>
          </div>
          <a className="btn btn-ghost">Add to calendar</a>
        </div>
      </div>
    </section>
  );
}

window.Calendar = Calendar;