// Podcast section with animated waveform
const { useEffect: useE3, useState: useS3, useRef: useR3 } = React;

function Waveform({ playing }) {
  // animated bars
  const bars = Array.from({ length: 60 });
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 3, height: 80, flex: 1 }}>
      {bars.map((_, i) => {
        const base = 0.2 + Math.abs(Math.sin(i * 0.6)) * 0.8;
        return (
          <div key={i} style={{
            flex: 1,
            height: `${base * 100}%`,
            background: 'var(--gradient)',
            borderRadius: 2,
            transformOrigin: 'center',
            animation: playing
              ? `wave ${1.2 + (i % 7) * 0.15}s ease-in-out ${i * 0.04}s infinite alternate`
              : 'none',
            opacity: playing ? 1 : 0.55,
          }} />
        );
      })}
    </div>
  );
}

function Podcast({ t }) {
  const ref = useR3(null);
  const [inView, setInView] = useS3(false);
  const [playing, setPlaying] = useS3(false);
  const [current, setCurrent] = useS3(0);

  useE3(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const ep = t.podcast.episodes[current];

  return (
    <section ref={ref} id="podcast" className="section on-ivory-bg" style={{ position: 'relative' }}>
      {/* decorative circle */}
      <div style={{
        position: 'absolute', right: '-8vw', top: '-8vw',
        width: '36vw', height: '36vw',
        background: 'var(--gradient)',
        borderRadius: '50%',
        opacity: 0.12,
        filter: 'blur(2px)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <span className={`eyebrow on-ivory reveal ${inView ? 'in' : ''}`}>{t.podcast.eyebrow}</span>
            <h2 className={`h2 reveal d1 ${inView ? 'in' : ''}`} style={{ marginTop: 24, maxWidth: '14ch' }}>
              {t.podcast.title1} <em style={{ fontStyle: 'italic' }}>{t.podcast.title2}</em>.
            </h2>
          </div>
          <div className={`reveal d2 ${inView ? 'in' : ''}`} style={{ display: 'flex', gap: 8, flexDirection: 'column', alignItems: 'flex-end' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--ink-dim)', textTransform: 'uppercase' }}>
              {t.podcast.available}
            </div>
            <div style={{ display: 'flex', gap: 14 }}>
              {[
                { name: 'Spotify', url: 'https://open.spotify.com/show/06IFnuG3RIpVc34QUu3BSG' },
                { name: 'Apple', url: '#' },
                { name: 'YouTube', url: '#' },
              ].map(p => (
                <a key={p.name} href={p.url} target="_blank" rel="noopener" style={{
                  fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500, color: 'var(--ink)',
                  padding: '8px 14px', border: '1px solid var(--rule-ink)', borderRadius: 999,
                }}>{p.name}</a>
              ))}
            </div>
          </div>
        </div>

        {/* Main player card */}
        <div className={`reveal d2 ${inView ? 'in' : ''}`} style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 420px) minmax(0, 1fr)', gap: 40,
          background: '#fff',
          border: '1px solid var(--rule-ink)',
          borderRadius: 8,
          overflow: 'hidden',
          boxShadow: '0 30px 80px -40px rgba(232,90,90,.25)',
        }}>
          {/* Cover */}
          <div style={{ position: 'relative', aspectRatio: '1', background: 'var(--bg)' }}>
            <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
              {[
                { c: '#f4a8b8', x: 30, y: 45, s: 55 },
                { c: '#f06b8f', x: 55, y: 35, s: 55 },
                { c: '#e85a5a', x: 52, y: 62, s: 55 },
              ].map((d, i) => (
                <div key={i} style={{
                  position: 'absolute',
                  left: `${d.x}%`, top: `${d.y}%`,
                  width: `${d.s}%`, aspectRatio: '1',
                  marginLeft: `-${d.s / 2}%`, marginTop: `-${d.s / 2}%`,
                  borderRadius: '50%', background: d.c,
                  mixBlendMode: 'screen',
                  animation: `orbit-${['a','b','c'][i]} ${14 + i * 2}s ease-in-out infinite`,
                }} />
              ))}
            </div>
            <div style={{
              position: 'absolute', top: 20, left: 20,
              fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '.14em',
              color: 'rgba(251,244,240,.8)', textTransform: 'uppercase',
            }}>
              EP. {String(current + 1).padStart(2, '0')} / {String(t.podcast.episodes.length).padStart(2, '0')}
            </div>
            <div style={{
              position: 'absolute', bottom: 20, left: 20, right: 20,
              color: 'var(--ivory)',
            }}>
              <div className="serif" style={{ fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.02em', fontStyle: 'italic', fontWeight: 400 }}>
                {ep.title}
              </div>
              <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-dim)', fontFamily: 'var(--mono)', letterSpacing: '.05em' }}>
                w/ {ep.guest} · {ep.length}
              </div>
            </div>
          </div>

          {/* Player body */}
          <div style={{ padding: 40, display: 'flex', flexDirection: 'column', gap: 24, justifyContent: 'space-between' }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--rose)', textTransform: 'uppercase', marginBottom: 12 }}>
                {t.podcast.featured} · {ep.date}
              </div>
              <h3 className="h3" style={{ marginBottom: 14 }}>
                {ep.title}
              </h3>
              <p style={{ color: 'var(--ink-dim)', fontSize: 15, lineHeight: 1.6, maxWidth: '52ch' }}>
                {ep.desc}
              </p>
            </div>

            {/* Waveform + controls */}
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 14 }}>
                <button onClick={() => setPlaying(p => !p)} style={{
                  width: 54, height: 54, borderRadius: '50%',
                  background: 'var(--gradient)', color: 'var(--bg)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18,
                  flexShrink: 0,
                  boxShadow: '0 10px 30px -10px rgba(232,90,90,.5)',
                }}>
                  {playing ? '❚❚' : '▶'}
                </button>
                <Waveform playing={playing} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-dim)', letterSpacing: '.05em' }}>
                <span>00:42</span>
                <span>{ep.length}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Episode list */}
        <div style={{ marginTop: 64 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
            <span className="eyebrow on-ivory">{t.podcast.allEpisodes}</span>
            <a href="#" style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 2 }}>
              {t.podcast.viewAll} →
            </a>
          </div>
          <div style={{ display: 'grid' }}>
            {t.podcast.episodes.map((e, i) => (
              <button key={i} onClick={() => setCurrent(i)} className={`ep-row reveal d${(i % 3) + 1} ${inView ? 'in' : ''}`} style={{
                display: 'grid',
                gridTemplateColumns: '48px 1fr auto auto',
                gap: 20,
                padding: '22px 0',
                alignItems: 'center',
                textAlign: 'left',
                borderTop: '1px solid var(--rule-ink)',
                borderBottom: i === t.podcast.episodes.length - 1 ? '1px solid var(--rule-ink)' : 'none',
                transition: 'padding-left .35s cubic-bezier(.2,.8,.2,1), color .35s',
                color: current === i ? 'var(--rose)' : 'var(--ink)',
              }}>
                <span className="mono" style={{ fontSize: 12, letterSpacing: '.1em', color: current === i ? 'var(--rose)' : 'var(--ink-dim)' }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span className="serif" style={{ fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.015em', fontWeight: 400 }}>
                  {e.title}
                </span>
                <span style={{ fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--ink-dim)', letterSpacing: '.05em' }}>
                  {e.guest}
                </span>
                <span style={{ fontSize: 12, fontFamily: 'var(--mono)', color: 'var(--ink-dim)' }}>
                  {e.length}
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Podcast = Podcast;