// Music Hub — Spotify-only.
// Guests use Spotify's native controls to play, add tracks, and open in their app.

const SPOTIFY_PLAYLIST_ID = '3QdQf6kUdBYWCrECxVC2JQ';
const SPOTIFY_PLAYLIST_URL = `https://open.spotify.com/playlist/${SPOTIFY_PLAYLIST_ID}`;

const Music = () => {
  return (
    <section className="section music-section" id="music">
      <div className="section-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>06 — Guest DJ Hub</div>
          <h2 className="title">Compose the <em>night</em> together</h2>
        </div>
        <div className="meta">
          Open the playlist<br/>and add your favourite
        </div>
      </div>

      <div className="spotify-stage glass" style={{
        padding: 28,
        borderRadius: 'var(--r-lg)',
        maxWidth: 720,
        margin: '0 auto',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, flexWrap: 'wrap', gap: 8 }}>
          <span className="eyebrow">Community Playlist · Spotify</span>
          <a
            href={SPOTIFY_PLAYLIST_URL}
            target="_blank"
            rel="noopener noreferrer"
            className="mono"
            style={{
              fontSize: 10,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: 'var(--accent)',
              textDecoration: 'none',
              padding: '8px 14px',
              border: '1px solid var(--accent)',
              borderRadius: 999,
            }}
          >
            Open in Spotify ↗
          </a>
        </div>

        <iframe
          title="Shanthi & Nicholas — wedding playlist"
          src={`https://open.spotify.com/embed/playlist/${SPOTIFY_PLAYLIST_ID}?theme=0`}
          width="100%"
          height="480"
          frameBorder="0"
          allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
          loading="lazy"
          style={{ borderRadius: 'var(--r-md)', border: 0, display: 'block' }}
        />

        <p style={{
          fontSize: 12,
          color: 'var(--ink-soft)',
          marginTop: 16,
          textAlign: 'center',
          lineHeight: 1.6,
        }}>
          Press play to listen here, or tap <em>Open in Spotify</em> to add your own tracks to the playlist.
        </p>
      </div>
    </section>
  );
};

window.Music = Music;