function Watch() {
  const videos = [
    { img: IMG.performance1, tag: "Live · 2024", title: "Gypsy Mandolin, full set", venue: "Private event, Boulder" },
    { img: IMG.band, tag: "Wedding · 2023", title: "Mandolin Ranch, ceremony to reception", venue: "Estes Park, CO" },
    { img: IMG.live1, tag: "Festival · 2022", title: "Telluride, mandolin contest finals", venue: "Telluride, CO" },
    { img: IMG.live4, tag: "Session · 2023", title: "Studio session, original compositions", venue: "Denver, CO" },
  ];

  return (
    <section>
      <div className="wrap">
        <div className="sec-head" style={{ marginTop: 40 }}>
          <div>
            <div className="mono kicker">Watch</div>
            <h1 style={{ fontSize: "clamp(40px, 6vw, 80px)" }}>Full-length<br /><em>video.</em></h1>
          </div>
          <p>
            A growing archive of live sessions, wedding footage (shared with permission),
            and contest performances from the last several years.
          </p>
        </div>

        <div className="video-grid">
          {videos.map((v, i) => (
            <div key={i} className="video-card">
              <div className="video-thumb" style={{ backgroundImage: `url(${v.img})` }}>
                <div className="play-btn">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M7 4 L20 12 L7 20 Z" />
                  </svg>
                </div>
              </div>
              <div className="video-meta">
                <span className="tag">{v.tag}</span>
                <h3>{v.title}</h3>
                <div style={{ color: "var(--ink-soft)", fontSize: 14, marginTop: 4 }}>{v.venue}</div>
              </div>
            </div>
          ))}
        </div>

        <Ornament />

        <div style={{ textAlign: "center", padding: "40px 0 60px" }}>
          <p style={{ maxWidth: 560, margin: "0 auto 24px", color: "var(--ink-2)" }}>
            Looking for a specific style or arrangement? We keep a private reel of
            past weddings and corporate events we can share on request.
          </p>
          <a className="btn btn-primary" onClick={() => go("/contact")}>Request the private reel →</a>
        </div>
      </div>
    </section>
  );
}

window.Watch = Watch;