function Home() {
  const bands = [
    {
      name: "Mandolin Ranch",
      em: "the main band",
      tag: "Duo to 5-piece · Est. 1990",
      img: IMG.band,
      body: "A versatile Colorado band weaving rock, country, bluegrass, blues, Irish, gypsy, jazz and classical into a single evening. Sized to the room, from quiet duo to a driving five-piece.",
    },
    {
      name: "Gypsy Mandolin",
      em: "an intimate duo",
      tag: "Mandolin + Guitar",
      img: IMG.performance1,
      body: "Charlie with guitarist Gordon Schrag, Italian, European and classical music reimagined for a candlelit cocktail hour or a sunlit vineyard ceremony.",
    },
    {
      name: "Chris King Band",
      em: "front-range classic rock",
      tag: "Regular residencies",
      img: IMG.live1,
      body: "A tight Colorado classic-rock outfit Charlie plays with on the Front Range club circuit. Dependable, high-energy, a little dangerous.",
    },
    {
      name: "Solo & Sessions",
      em: "just Charlie",
      tag: "Mandolin · Guitar",
      img: IMG.othello,
      body: "Solo mandolin or acoustic guitar for ceremonies, cocktail hours, and intimate dinners where the room deserves one instrument, played beautifully.",
    },
  ];

  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <div className="eyebrow">
                <span className="hr" />
                <span className="mono">Colorado · Since 1990 · Weddings · Corporate · Private</span>
              </div>
              <h1>
                Live music,<br />
                <em>played by hand ,</em><br />
                across Colorado.
              </h1>
              <p className="hero-lede">
                Charlie Provenza is a National Mandolin Champion and six-time Telluride winner.
                For thirty-five years he and his bands have turned weddings, corporate stages,
                and cocktail hours into something worth remembering.
              </p>
              <div className="hero-ctas">
                <a className="btn btn-primary" onClick={() => go("/contact")}>
                  Check a date →
                </a>
                <a className="btn btn-ghost" onClick={() => go("/listen")}>
                  Hear a song
                </a>
              </div>
            </div>
            <div className="hero-visual">
              <div className="hero-stamp">
                <div className="stamp-inner">
                  35 yrs
                  <span className="big">on stage</span>
                  in Colorado
                </div>
              </div>
              <div
                className="hero-photo"
                style={{ backgroundImage: `url(${IMG.performance1})` }}
              />
              <div
                className="hero-photo-sub"
                style={{ backgroundImage: `url(${IMG.portrait})` }}
              />
            </div>
          </div>
          <div className="hero-marquee">
            <span><strong style={{ color: "var(--accent)", fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: 20, letterSpacing: 0, textTransform: "none" }}>1×</strong> National Mandolin Champion</span>
            <span><strong style={{ color: "var(--accent)", fontFamily: "var(--f-display)", fontStyle: "italic", fontSize: 20, letterSpacing: 0, textTransform: "none" }}>6×</strong> Telluride Contest Winner</span>
            <span>Mel Bay Publications, Featured Author</span>
            <span>Aspen Music Festival · Colorado Symphony</span>
          </div>
        </div>
      </section>

      {/* BANDS */}
      <section id="bands">
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="mono kicker">01 · Bands & Projects</div>
              <h2>Four rooms,<br /><em>one player.</em></h2>
            </div>
            <p>
              Depending on the night, Charlie is a duo, a five-piece, or a single voice
              on a mandolin. Pick the shape that fits your event, or let us help you choose.
            </p>
          </div>
          <div className="bands-grid">
            {bands.map((b) => (
              <article key={b.name} className="band-card" onClick={() => go("/bands")}>
                <div className="img" style={{ backgroundImage: `url(${b.img})` }} />
                <div className="body">
                  <div className="tag">{b.tag}</div>
                  <h3>{b.name} <em>{b.em}</em></h3>
                  <p>{b.body}</p>
                  <div className="more">More about this project →</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* QUOTE */}
      <section className="quote-strip">
        <div className="wrap">
          <div className="big-q">“</div>
          <blockquote>
            Charlie and Mandolin Ranch read a room like a book.
            Our guests are still talking about the ceremony music, and the dance floor
            was absolutely packed until the last song.
          </blockquote>
          <cite>K. &amp; M., Estes Park wedding
            <span className="placeholder-tag">Placeholder testimonial</span>
          </cite>
        </div>
      </section>

      {/* UPCOMING */}
      <section>
        <div className="wrap">
          <div className="sec-head">
            <div>
              <div className="mono kicker">02 · Upcoming</div>
              <h2>Where you can<br /><em>catch us next.</em></h2>
            </div>
            <p>
              A handful of public shows and residencies on the Colorado Front Range.
              Come say hello, or <a onClick={() => go("/calendar")} style={{ color: "var(--accent)", textDecoration: "underline" }}>see the full calendar</a>.
            </p>
          </div>
          <div className="shows">
            {[
              ["Apr 24", "Mandolin Ranch Trio", "Private event · Denver", "by invitation"],
              ["May 24", "Chris King Band", "Evergreen Elks Lodge", "2:00 – 6:00 PM"],
              ["Jun 26", "Chris King Band", "Kingman Winery", "5:00 – 8:00 PM"],
              ["Jul 04", "Chris King Band", "Buchanan Park · Independence Day", "1:00 – 2:00 PM"],
              ["Jul 18", "Joe Bye Band", "Summerfest", "3:00 – 6:00 PM"],
            ].map(([d, t, v, time]) => (
              <div key={d + t} className="show-row">
                <div className="date">{d}</div>
                <div className="title">{t} <em>{v}</em></div>
                <div className="time">{time}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="home-big-cta" style={{ background: "var(--paper-2)", padding: "100px 0" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <div className="mono" style={{ marginBottom: 14 }}>Let's build your evening</div>
          <h2 className="home-cta-h2" style={{ marginBottom: 24 }}>Tell us about <em>your event.</em></h2>
          <p style={{ maxWidth: 560, margin: "0 auto 36px", color: "var(--ink-2)", fontSize: 18 }}>
            Weddings, corporate dinners, private parties, vineyards, backyards.
            Send the date and a few details, we usually reply within a day.
          </p>
          <div style={{ display: "inline-flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
            <a className="btn btn-primary" onClick={() => go("/contact")}>Start an inquiry →</a>
            <a className="btn btn-ghost" href="tel:+17209368877">(720) 936-8877</a>
          </div>
        </div>
      </section>
    </>
  );
}

window.Home = Home;