const { useState: useListenState } = React;

const listenStyles = {
  section: {
    position: 'relative',
    padding: '140px 48px 160px',
    background: '#0a0a0a',
    borderTop: '1px solid #141414',
  },
  inner: {
    maxWidth: 1240,
    margin: '0 auto',
  },
  header: {
    display: 'flex',
    alignItems: 'baseline',
    justifyContent: 'space-between',
    marginBottom: 80,
    paddingBottom: 28,
    borderBottom: '1px solid #181818',
  },
  sectionLabel: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 11,
    letterSpacing: '0.4em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.4)',
  },
  sectionTitle: {
    fontFamily: "'Oswald', sans-serif",
    fontSize: 'clamp(48px, 7vw, 96px)',
    fontWeight: 600,
    letterSpacing: '0.04em',
    textTransform: 'uppercase',
    lineHeight: 1,
  },
  index: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 11,
    letterSpacing: '0.3em',
    color: 'rgba(255,255,255,0.3)',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 80,
    alignItems: 'center',
  },
  embedWrap: {
    position: 'relative',
    width: '100%',
    borderRadius: 12,
    overflow: 'hidden',
    background: '#0d0d0d',
    border: '1px solid #1c1c1c',
  },
  info: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  releaseLabel: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 11,
    letterSpacing: '0.4em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.4)',
    marginBottom: 12,
  },
  trackTitle: {
    fontFamily: "'Oswald', sans-serif",
    fontSize: 'clamp(42px, 5.5vw, 80px)',
    fontWeight: 600,
    letterSpacing: '0.02em',
    textTransform: 'uppercase',
    lineHeight: 1.05,
    marginBottom: 24,
  },
  trackMeta: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 13,
    letterSpacing: '0.15em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.45)',
    marginBottom: 40,
  },
  divider: {
    height: 1,
    background: '#181818',
    margin: '0 0 32px',
  },
  streamLabel: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 10,
    letterSpacing: '0.4em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.35)',
    marginBottom: 20,
  },
  streamList: {
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  streamRow: {
    display: 'grid',
    gridTemplateColumns: '28px 1fr auto',
    alignItems: 'center',
    gap: 18,
    padding: '16px 4px',
    borderBottom: '1px solid #151515',
    color: 'rgba(255,255,255,0.75)',
    cursor: 'pointer',
    transition: 'color 200ms ease, padding-left 200ms ease, background 200ms ease',
    fontFamily: "'Inter', sans-serif",
    fontSize: 13,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
  },
};

const STREAMING = [
  { name: 'Spotify',      Icon: window.IconSpotify,     href: 'https://open.spotify.com/track/3Gz0tN5T2ZvjQSHGspug0A?si=f550634f1be64a87' },
  { name: 'Apple Music',  Icon: window.IconAppleMusic,  href: 'https://music.apple.com/us/album/always-and-forever-single/1886542963' },
  { name: 'YouTube',      Icon: window.IconYouTube,     href: 'https://youtu.be/cTDs9CzNOdw?si=6wi6NHSQDAqSlBux' },
  { name: 'SoundCloud',   Icon: window.IconSoundCloud,  href: 'https://on.soundcloud.com/3tl92RgCu7CMzTeQCZ' },
  { name: 'Amazon Music', Icon: window.IconAmazonMusic, href: 'https://music.amazon.com/tracks/B0GT6Z5LXN' },
];

function Listen() {
  const [hoverRow, setHoverRow] = useListenState(null);

  return (
    <section id="listen" style={listenStyles.section}>
      <div style={listenStyles.inner}>
        <div className="listen-header" style={listenStyles.header}>
          <div>
            <div style={listenStyles.sectionLabel}>— Listen Now</div>
          </div>
          <div style={listenStyles.index}>01 / 01</div>
        </div>

        <div className="listen-grid" style={listenStyles.grid}>
          <div style={listenStyles.embedWrap}>
            <iframe
              data-testid="embed-iframe"
              style={{ borderRadius: 12, display: 'block' }}
              src="https://open.spotify.com/embed/track/3Gz0tN5T2ZvjQSHGspug0A?utm_source=generator&theme=0"
              width="100%"
              height="352"
              frameBorder="0"
              allowFullScreen=""
              allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
              loading="lazy"
              title="Spotify embed"
            />
          </div>

          <div style={listenStyles.info}>
            <div style={listenStyles.releaseLabel}>Single · Out Now</div>
            <h3 style={listenStyles.trackTitle}>Always and Forever</h3>
            <div style={listenStyles.trackMeta}>Eshwar &nbsp;·&nbsp; 2026</div>

            <div style={listenStyles.divider} />

            <div style={listenStyles.streamLabel}>Stream &amp; Buy</div>

            <div style={listenStyles.streamList}>
              {STREAMING.map(({ name, Icon, href }) => {
                const hovered = hoverRow === name;
                return (
                  <a
                    key={name}
                    href={href}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{
                      ...listenStyles.streamRow,
                      color: hovered ? '#fff' : 'rgba(255,255,255,0.7)',
                      paddingLeft: hovered ? 14 : 4,
                      background: hovered ? 'rgba(255,255,255,0.025)' : 'transparent',
                    }}
                    onMouseEnter={() => setHoverRow(name)}
                    onMouseLeave={() => setHoverRow(null)}
                  >
                    <Icon size={18} />
                    <span>{name}</span>
                    <span
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: 8,
                        color: 'rgba(255,255,255,0.5)',
                        transform: hovered ? 'translateX(4px)' : 'translateX(0)',
                        transition: 'transform 200ms ease',
                      }}
                    >
                      <span style={{ fontSize: 11, letterSpacing: '0.3em' }}>Open</span>
                      <window.IconArrow size={14} />
                    </span>
                  </a>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Listen = Listen;