function Bands() {
  const bands = [
    {
      name: "Mandolin Ranch",
      em: "the flagship",
      sizes: "Duo · Trio · Quartet · 5-piece",
      genres: ["Rock", "Country", "Bluegrass", "Blues", "Irish", "Gypsy", "Jazz", "Classical"],
      img: IMG.band,
      body: "The band Charlie built. Mandolin Ranch reads the room and the night, from a quiet duo during cocktails to a driving five-piece that holds a dance floor until last call. Thirty-five years of Colorado weddings, corporate galas, and public stages.",
      highlights: ["Ceremony + cocktail + reception in one booking", "Genre-flexible across an evening", "Professional sound & stage presence"],
    },
    {
      name: "Gypsy Mandolin",
      em: "an intimate duo",
      sizes: "Duo, Mandolin & Guitar",
      genres: ["Italian", "European", "Classical", "Gypsy Jazz", "Standards"],
      img: IMG.performance1,
      body: "Charlie and guitarist Gordon Schrag. A duo built for moments that want candlelight more than stage lights, vineyard ceremonies, gallery openings, dinner parties. Classical and European repertoire, reimagined acoustically.",
      highlights: ["Acoustic, no PA needed in smaller rooms", "Ceremony + cocktail hour specialists", "Instantly elegant"],
    },
    {
      name: "Chris King Band",
      em: "front-range classic rock",
      sizes: "Full band",
      genres: ["Classic Rock", "Americana"],
      img: IMG.live1,
      body: "A Colorado classic-rock outfit Charlie plays with across the Front Range club circuit. Tight, loud, and extremely fun, the band you book when the brief is 'a great bar band.'",
      highlights: ["Residencies across Colorado", "Deep classic-rock book", "Full PA & lights ready"],
    },
    {
      name: "Solo & Sessions",
      em: "just Charlie",
      sizes: "Solo · Recording sessions",
      genres: ["Mandolin", "Acoustic Guitar"],
      img: IMG.othello,
      body: "One player, one instrument, one room. Solo mandolin or acoustic guitar for wedding ceremonies, cocktail hours, corporate receptions, and private dinners. Also available as a session player for albums, film, and theater, including a tenure with the Aspen Music Festival and the Colorado Symphony.",
      highlights: ["Most flexible price point", "Perfect for ceremonies under 100 guests", "Studio + live session work"],
    },
  ];

  return (
    <section>
      <div className="wrap">
        <div className="sec-head" style={{ marginTop: 40 }}>
          <div>
            <div className="mono kicker">Bands & Projects</div>
            <h1 style={{ fontSize: "clamp(40px, 6vw, 80px)" }}>Four projects,<br /><em>one player.</em></h1>
          </div>
          <p>
            Depending on the night, Charlie is a duo, a five-piece, a classic-rock guitarist,
            or a single mandolin in a candlelit room. Here's what each project is built for.
          </p>
        </div>

        {bands.map((b, i) => (
          <article
            key={b.name}
            className="bands-page-article"
            style={{
              display: "grid",
              gridTemplateColumns: i % 2 === 0 ? "1fr 1.1fr" : "1.1fr 1fr",
              gap: 60,
              alignItems: "center",
              padding: "70px 0",
              borderTop: i === 0 ? "1px solid var(--rule)" : "none",
              borderBottom: "1px solid var(--rule)",
            }}
          >
            <div
              style={{
                order: i % 2 === 0 ? 1 : 2,
                aspectRatio: "4/5",
                backgroundImage: `url(${b.img})`,
                backgroundSize: "cover",
                backgroundPosition: "center",
                borderRadius: 4,
                filter: "saturate(0.88) contrast(1.02)",
              }}
            />
            <div style={{ order: i % 2 === 0 ? 2 : 1 }}>
              <div className="mono" style={{ marginBottom: 14, color: "var(--accent)" }}>
                0{i + 1} · {b.sizes}
              </div>
              <h2 style={{ marginBottom: 16 }}>
                {b.name}<br />
                <em style={{ fontStyle: "italic", color: "var(--accent)", fontWeight: 400 }}>{b.em}.</em>
              </h2>
              <p style={{ color: "var(--ink-2)", fontSize: 18, marginBottom: 28 }}>{b.body}</p>

              <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 28 }}>
                {b.genres.map((g) => (
                  <span
                    key={g}
                    style={{
                      fontFamily: "var(--f-mono)",
                      fontSize: 10,
                      padding: "4px 10px",
                      border: "1px solid var(--rule)",
                      borderRadius: 999,
                      letterSpacing: ".12em",
                      textTransform: "uppercase",
                      color: "var(--ink-soft)",
                    }}
                  >
                    {g}
                  </span>
                ))}
              </div>

              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px" }}>
                {b.highlights.map((h) => (
                  <li
                    key={h}
                    style={{
                      display: "flex",
                      gap: 12,
                      padding: "10px 0",
                      borderTop: "1px solid var(--rule)",
                      fontSize: 15,
                    }}
                  >
                    <span style={{ color: "var(--accent)", fontFamily: "var(--f-display)", fontStyle: "italic" }}>✦</span>
                    {h}
                  </li>
                ))}
              </ul>

              <a className="btn btn-ghost" onClick={() => go("/contact")}>
                Inquire for this project →
              </a>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

window.Bands = Bands;