// Now Playing — immersive visual player, big full-bleed aurora artwork

function NowPlayingSection({ theme }) {
  // Always dark for this section — it's an immersive moment
  const [prog, setProg] = React.useState(0.28);
  React.useEffect(() => {
    const id = setInterval(() => setProg(p => (p + 0.002) % 1), 200);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="now-playing" className="np-section">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow">04 · NOW PLAYING</span>
          <h2>The song becomes<br/>the <em>room.</em></h2>
          <p className="lede">
            Artwork becomes the canvas. Diffuse colour fills the screen, transport controls
            float on frosted glass. Everything else disappears.
          </p>
        </div>

        <div className="np-stage">
          {/* full-bleed aurora */}
          <div style={{ position: 'absolute', inset: 0 }}>
            <div style={{ position: 'absolute', width: 900, height: 900, borderRadius: '50%', top: -200, left: -200, filter: 'blur(100px)', background: 'radial-gradient(circle, #E9C46A 0%, transparent 60%)', opacity: 0.7, animation: 'aurora 20s cubic-bezier(.4,.1,.3,1) infinite' }}/>
            <div style={{ position: 'absolute', width: 1000, height: 1000, borderRadius: '50%', top: 100, right: -240, filter: 'blur(110px)', background: 'radial-gradient(circle, #D58E90 0%, transparent 60%)', opacity: 0.7, animation: 'aurora 22s cubic-bezier(.4,.1,.3,1) infinite', animationDelay: '-7s' }}/>
            <div style={{ position: 'absolute', width: 700, height: 700, borderRadius: '50%', bottom: -200, left: '30%', filter: 'blur(90px)', background: 'radial-gradient(circle, #C799B8 0%, transparent 60%)', opacity: 0.6, animation: 'aurora 18s cubic-bezier(.4,.1,.3,1) infinite', animationDelay: '-13s' }}/>
          </div>

          {/* Content */}
          <div style={{
            position: 'relative', zIndex: 2,
            minHeight: 720, padding: 60,
            display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center',
          }}>
            {/* Left — giant artwork tile */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{
                width: 440, height: 440, borderRadius: 28,
                background: `
                  radial-gradient(circle at 25% 30%, #E9C46A 0%, transparent 55%),
                  radial-gradient(circle at 75% 30%, #D58E90 0%, transparent 60%),
                  radial-gradient(circle at 50% 85%, #C799B8 0%, transparent 60%),
                  linear-gradient(135deg, #F0B895, #C799B8)
                `,
                boxShadow: '0 60px 120px -20px rgba(0,0,0,0.6), 0 0 0 0.5px rgba(255,255,255,0.15)',
                position: 'relative',
              }}>
                {/* subtle specular highlight */}
                <div style={{ position: 'absolute', inset: 0, borderRadius: 28, background: 'radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25) 0%, transparent 40%)', pointerEvents: 'none' }}/>
              </div>
            </div>

            {/* Right — transport controls as glass stack */}
            <div style={{ color: '#fff', maxWidth: 440 }}>
              <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, color: 'rgba(255,255,255,0.55)', letterSpacing: 0.14, textTransform: 'uppercase', marginBottom: 12 }}>
                Playing from album · Sensation
              </div>
              <div style={{ fontSize: 48, fontWeight: 600, letterSpacing: -0.03, lineHeight: 1.05, marginBottom: 8 }}>Synthoria</div>
              <div style={{ fontSize: 19, color: 'rgba(255,255,255,0.68)', marginBottom: 38 }}>Alexxon</div>

              {/* scrubber */}
              <div style={{ marginBottom: 36 }}>
                <div style={{ position: 'relative', height: 3, borderRadius: 2, background: 'rgba(255,255,255,0.18)' }}>
                  <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${prog*100}%`, borderRadius: 2, background: '#fff' }}/>
                  <div style={{ position: 'absolute', left: `${prog*100}%`, top: '50%', transform: 'translate(-50%, -50%)', width: 12, height: 12, borderRadius: 6, background: '#fff' }}/>
                </div>
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>
                  <span>{formatTime(Math.floor(222*prog))}</span>
                  <span>-{formatTime(Math.max(0, 222-Math.floor(222*prog)))}</span>
                </div>
              </div>

              {/* Transport row */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
                <button style={transportBtn(44)} aria-label="Shuffle">
                  <svg width="18" height="15" viewBox="0 0 17 14" fill="none"><path d="M1 2h3l8 10h3M13 2h3M13 12h3M15 0l2 2-2 2M15 10l2 2-2 2M1 12h3l2-2.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
                <button style={transportBtn(56)} aria-label="Previous">
                  <svg width="30" height="20" viewBox="0 0 22 15" fill="currentColor"><path d="M10 1.5L2 7v1L10 13.5a.5.5 0 00.8-.4V2a.5.5 0 00-.8-.5z"/><path d="M20 1.5L12 7v1L20 13.5a.5.5 0 00.8-.4V2a.5.5 0 00-.8-.5z"/></svg>
                </button>
                <button style={{
                  width: 76, height: 76, borderRadius: 38, border: 0,
                  background: '#fff', color: '#111', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 20px 40px rgba(0,0,0,0.4)',
                }}>
                  <svg width="26" height="26" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14" rx="1.2"/><rect x="11" y="2" width="4" height="14" rx="1.2"/></svg>
                </button>
                <button style={transportBtn(56)} aria-label="Next">
                  <svg width="30" height="20" viewBox="0 0 22 15" fill="currentColor"><path d="M12 1.5L20 7v1L12 13.5a.5.5 0 01-.8-.4V2a.5.5 0 01.8-.5z"/><path d="M2 1.5L10 7v1L2 13.5a.5.5 0 01-.8-.4V2a.5.5 0 01.8-.5z"/></svg>
                </button>
                <button style={transportBtn(44)} aria-label="Repeat">
                  <svg width="18" height="15" viewBox="0 0 17 14" fill="none"><path d="M2 5V4a2 2 0 012-2h9M2 5l-1-1m1 1l-1 1M15 9v1a2 2 0 01-2 2H4m11-3l1 1m-1-1l1-1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
                </button>
              </div>

              {/* Glass shelf — airplay / volume / queue */}
              <div style={{
                padding: '14px 18px', borderRadius: 22,
                background: 'rgba(22,24,28,0.45)',
                backdropFilter: 'blur(28px) saturate(180%)',
                WebkitBackdropFilter: 'blur(28px) saturate(180%)',
                boxShadow: 'inset 0 0.5px 0 rgba(255,255,255,0.12), inset 0 0 0 0.5px rgba(255,255,255,0.06)',
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 12H2a1 1 0 01-1-1V3a1 1 0 011-1h14a1 1 0 011 1v8a1 1 0 01-1 1h-1M6 16l3-3 3 3z"/></svg>
                <div style={{ flex: 1, position: 'relative', height: 3, borderRadius: 2, background: 'rgba(255,255,255,0.18)' }}>
                  <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '64%', background: 'rgba(255,255,255,0.9)', borderRadius: 2 }}/>
                </div>
                <svg width="18" height="14" viewBox="0 0 18 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 2h11M6 7h11M6 12h11" strokeLinecap="round"/></svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function transportBtn(size) {
  return {
    width: size, height: size, borderRadius: size/2, border: 0,
    background: 'transparent', color: '#fff', cursor: 'pointer',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
}
function formatTime(s) {
  return `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`;
}

Object.assign(window, { NowPlayingSection });