function ArtistConfirm({ artist: track, onConfirm, onReset }) {
  const w = useWindowWidth();
  const mobile = w < 768;
  const [visible, setVisible] = React.useState(false);
  const [playing, setPlaying] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const audioRef = React.useRef(null);

  React.useEffect(() => {
    setVisible(false); setPlaying(false); setProgress(0);
    const t = setTimeout(() => setVisible(true), 60);
    return () => clearTimeout(t);
  }, [track]);

  // Audio preview controls
  function togglePlay() {
    const audio = audioRef.current;
    if (!audio) return;
    if (playing) { audio.pause(); setPlaying(false); }
    else { audio.play(); setPlaying(true); }
  }

  function handleTimeUpdate() {
    const audio = audioRef.current;
    if (audio && audio.duration) setProgress(audio.currentTime / audio.duration);
  }

  function handleEnded() { setPlaying(false); setProgress(0); }

  const releaseYear = track.releaseDate ? track.releaseDate.slice(0, 4) : null;

  return (
    <div style={{ minHeight: '80vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: mobile ? '60px 20px' : '80px 40px' }}>
      {/* Ambient glow */}
      <div style={{ position: 'fixed', top: '25%', left: '50%', transform: 'translateX(-50%)', width: '600px', height: '500px', pointerEvents: 'none', background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,76,255,0.06) 0%, transparent 70%)' }} />

      <div style={{
        textAlign: 'center', maxWidth: '480px', width: '100%',
        opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(20px)',
        transition: 'opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1)',
      }}>
        {/* Eyebrow */}
        <div style={{ color: '#7C7C90', fontSize: '11px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: '32px', fontFamily: "'JetBrains Mono', monospace" }}>
          Is this your track?
        </div>

        {/* Album artwork */}
        <div style={{ position: 'relative', display: 'inline-block', marginBottom: '28px' }}>
          {track.artwork
            ? <img src={track.artwork} alt={track.name} style={{ width: mobile ? '180px' : '220px', height: mobile ? '180px' : '220px', borderRadius: '16px', objectFit: 'cover', display: 'block', boxShadow: '0 0 0 1px rgba(255,255,255,0.06), 0 0 60px rgba(201,76,255,0.15), 0 24px 60px rgba(0,0,0,0.5)' }} />
            : <div style={{ width: mobile ? '180px' : '220px', height: mobile ? '180px' : '220px', borderRadius: '16px', background: 'linear-gradient(135deg, rgba(94,43,255,0.4), rgba(201,76,255,0.2))', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 60px rgba(201,76,255,0.12)' }}>
                <span style={{ color: '#E7C8FF', fontSize: '48px', fontWeight: 800, letterSpacing: '-0.04em' }}>{track.artist?.slice(0,2).toUpperCase()}</span>
              </div>
          }
        </div>

        {/* Track info */}
        <h2 style={{ fontSize: mobile ? '24px' : 'clamp(24px,4vw,36px)', fontWeight: 800, letterSpacing: '-0.04em', color: '#F5F2FF', margin: '0 0 6px', lineHeight: 1.1 }}>
          {track.name}
        </h2>
        <p style={{ color: '#A1A1B3', fontSize: '16px', fontWeight: 500, letterSpacing: '-0.02em', margin: '0 0 16px' }}>
          {track.allArtists}
        </p>

        {/* Meta in mono */}
        <div style={{ display: 'flex', gap: '16px', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '24px' }}>
          {releaseYear && (
            <span style={{ color: '#7C7C90', fontSize: '12px', fontFamily: "'JetBrains Mono', monospace" }}>{releaseYear}</span>
          )}
          {track.albumName && (
            <span style={{ color: '#7C7C90', fontSize: '12px', fontFamily: "'JetBrains Mono', monospace", maxWidth: '220px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{track.albumName}</span>
          )}
          {track.popularity != null && (
            <span style={{ color: '#7C7C90', fontSize: '12px', fontFamily: "'JetBrains Mono', monospace" }}>
              Popularity: {track.popularity}
            </span>
          )}
        </div>

        {/* Preview player */}
        {track.previewUrl && (
          <div style={{ marginBottom: '28px' }}>
            <audio ref={audioRef} src={track.previewUrl} onTimeUpdate={handleTimeUpdate} onEnded={handleEnded} style={{ display: 'none' }} />
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: '12px',
              background: 'rgba(94,43,255,0.1)', border: '1px solid rgba(94,43,255,0.25)',
              borderRadius: '100px', padding: '10px 20px',
              cursor: 'pointer',
            }} onClick={togglePlay}>
              <div style={{ width: '28px', height: '28px', borderRadius: '50%', background: 'linear-gradient(135deg, #5E2BFF, #C94CFF)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                {playing
                  ? <svg width="10" height="12" viewBox="0 0 10 12" fill="none"><rect x="0" y="0" width="3.5" height="12" rx="1" fill="white"/><rect x="6.5" y="0" width="3.5" height="12" rx="1" fill="white"/></svg>
                  : <svg width="10" height="12" viewBox="0 0 10 12" fill="none"><path d="M1 1l8 5-8 5V1z" fill="white"/></svg>
                }
              </div>
              <div style={{ flex: 1, minWidth: '100px' }}>
                <div style={{ height: '3px', background: 'rgba(255,255,255,0.1)', borderRadius: '2px', overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${progress * 100}%`, background: 'linear-gradient(to right, #5E2BFF, #C94CFF)', borderRadius: '2px', transition: 'width 0.2s linear' }} />
                </div>
              </div>
              <span style={{ color: '#A1A1B3', fontSize: '11px', fontFamily: "'JetBrains Mono', monospace", flexShrink: 0 }}>30s preview</span>
            </div>
          </div>
        )}

        <p style={{ color: '#7C7C90', fontSize: '13px', letterSpacing: '-0.01em', marginBottom: '32px', lineHeight: 1.5 }}>
          We'll build your campaign around this track.
        </p>

        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexDirection: mobile ? 'column' : 'row' }}>
          <button onClick={onConfirm} style={{
            background: 'linear-gradient(135deg, #5E2BFF, #C94CFF)',
            color: '#F5F2FF', padding: '15px 34px', borderRadius: '12px',
            fontSize: '14px', fontWeight: 700, border: 'none', cursor: 'pointer',
            letterSpacing: '-0.01em', fontFamily: 'inherit',
            transition: 'transform 300ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms',
            boxShadow: '0 8px 24px rgba(94,43,255,0.25)', flex: mobile ? 1 : 'none',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='0 16px 32px rgba(94,43,255,0.35)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform='translateY(0)'; e.currentTarget.style.boxShadow='0 8px 24px rgba(94,43,255,0.25)'; }}
          >Yes, continue with this track</button>
          <button onClick={onReset} style={{
            background: 'transparent', color: '#A1A1B3', padding: '15px 34px',
            borderRadius: '12px', fontSize: '14px', fontWeight: 500,
            border: '1px solid rgba(255,255,255,0.08)',
            cursor: 'pointer', letterSpacing: '-0.01em', fontFamily: 'inherit',
            transition: 'border-color 200ms, color 200ms', flex: mobile ? 1 : 'none',
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor='rgba(255,255,255,0.15)'; e.currentTarget.style.color='#F5F2FF'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor='rgba(255,255,255,0.08)'; e.currentTarget.style.color='#A1A1B3'; }}
          >Search again</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ArtistConfirm });