function Listen() {
  const [playing, setPlaying] = useState(null);
  const audioRef = useRef(null);

  const tracks = [
    { id: 1, title: "Secret Gypsy Handshake", em: "Gypsy Mandolin", proj: "Gypsy Mandolin", dur: "3:12", tag: "Original", src: "https://www.mandolinranch.com/wp-content/uploads/2014/11/02-secret-gypsy-handshake-mp3.mp3" },
    { id: 2, title: "Moonlight in Telluride", em: "live session", proj: "Mandolin Ranch", dur: "4:08", tag: "Bluegrass" },
    { id: 3, title: "Italian Serenade", em: "duo arrangement", proj: "Gypsy Mandolin", dur: "3:44", tag: "European" },
    { id: 4, title: "Appalachian Sunrise", em: "solo mandolin", proj: "Solo", dur: "2:58", tag: "Traditional" },
    { id: 5, title: "Django's Corner", em: "gypsy jazz standard", proj: "Gypsy Mandolin", dur: "4:21", tag: "Jazz" },
    { id: 6, title: "Front Range Reel", em: "band version", proj: "Mandolin Ranch", dur: "3:30", tag: "Irish" },
    { id: 7, title: "Classical Caprice", em: "Vivaldi / arr. Provenza", proj: "Solo", dur: "5:02", tag: "Classical" },
    { id: 8, title: "Colorado Cross-Tune", em: "with Gordon Schrag", proj: "Gypsy Mandolin", dur: "3:15", tag: "Original" },
  ];

  const toggle = (t) => {
    if (playing === t.id) {
      audioRef.current?.pause();
      setPlaying(null);
    } else {
      setPlaying(t.id);
      if (t.src) {
        setTimeout(() => {
          if (audioRef.current) {
            audioRef.current.src = t.src;
            audioRef.current.play().catch(() => {});
          }
        }, 50);
      }
    }
  };

  const currentTrack = tracks.find((t) => t.id === playing);

  return (
    <section>
      <div className="wrap">
        <div className="sec-head" style={{ marginTop: 40 }}>
          <div>
            <div className="mono kicker">Listen</div>
            <h1 style={{ fontSize: "clamp(40px, 6vw, 80px)" }}>Songs, sessions<br /><em>& field recordings.</em></h1>
          </div>
          <p>
            A rotating selection of tracks from Charlie's projects.
            Some studio, some live, some captured on a porch somewhere in Colorado.
          </p>
        </div>

        <div className="tracks">
          <div
            className="track"
            style={{ borderBottom: "1px solid var(--rule)", background: "transparent", pointerEvents: "none" }}
          >
            <div className="mono">#</div>
            <div className="mono">Title</div>
            <div className="mono">Project</div>
            <div className="mono">Genre</div>
            <div className="mono" style={{ justifySelf: "end" }}>Dur.</div>
          </div>
          {tracks.map((t, i) => (
            <div key={t.id} className={`track ${playing === t.id ? "playing" : ""}`}>
              <button className="play" onClick={() => toggle(t)} aria-label={`Play ${t.title}`}>
                {playing === t.id ? (
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                    <rect x="2" y="2" width="3" height="10" />
                    <rect x="9" y="2" width="3" height="10" />
                  </svg>
                ) : (
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                    <path d="M3 2 L12 7 L3 12 Z" />
                  </svg>
                )}
              </button>
              <div className="title">
                {t.title} <em>{t.em}</em>
                {!t.src && <span className="placeholder-tag" style={{ marginLeft: 8 }}>Sample</span>}
              </div>
              <div className="proj">{t.proj}</div>
              <span className="tag">{t.tag}</span>
              <div className="dur">{t.dur}</div>
            </div>
          ))}
        </div>

        <audio ref={audioRef} onEnded={() => setPlaying(null)} />

        {currentTrack && (
          <div
            style={{
              position: "fixed",
              bottom: 20,
              left: "50%",
              transform: "translateX(-50%)",
              background: "var(--ink)",
              color: "var(--paper)",
              padding: "14px 22px",
              borderRadius: 999,
              display: "flex",
              alignItems: "center",
              gap: 16,
              zIndex: 50,
              boxShadow: "0 20px 50px -15px rgba(0,0,0,0.4)",
              fontSize: 14,
            }}
          >
            <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: "var(--accent)", animation: "pulse 1.5s infinite" }} />
            <span>Now playing · <em style={{ fontStyle: "italic" }}>{currentTrack.title}</em></span>
            <button
              onClick={() => { audioRef.current?.pause(); setPlaying(null); }}
              style={{ background: "none", border: 0, color: "var(--paper)", cursor: "pointer", padding: "0 6px", fontSize: 16 }}
            >
              ×
            </button>
          </div>
        )}

        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
          {[
            ["Weddings", "Curated set lists for ceremony, cocktail hour, and reception."],
            ["Corporate", "Polished, genre-flexible music that holds a room without demanding it."],
            ["Private", "Dinner parties, anniversaries, milestone celebrations."],
          ].map(([h, p]) => (
            <div key={h} style={{ padding: 30, background: "var(--paper-2)", border: "1px solid var(--rule)", borderRadius: 4 }}>
              <div className="mono" style={{ color: "var(--accent)", marginBottom: 10 }}>Set list for</div>
              <h3>{h}</h3>
              <p style={{ color: "var(--ink-2)", fontSize: 15, margin: "10px 0 16px" }}>{p}</p>
              <a style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".15em", color: "var(--accent)", textTransform: "uppercase", cursor: "pointer" }} onClick={() => go("/contact")}>
                Request sample set →
              </a>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
      `}</style>
    </section>
  );
}

window.Listen = Listen;