function Podcast() {
  const episodes = [
    { num: 'EP · 04', title: 'Making Robots Matter', guest: 'Guest episode', dur: '42 min' },
    { num: 'EP · 03', title: "Making Women's Health Matter", guest: 'Guest episode', dur: '45 min' },
    { num: 'EP · 01', title: 'Making Financial Education Matter', guest: 'Guest episode', dur: '38 min' },
  ];

  return (
    <section id="podcast">
      <div className="container">
        <div className="podcast-block">
          <div style={{ position: 'absolute', top: -40, right: -40, fontSize: 380, fontFamily: "'Playfair Display', serif", fontStyle: 'italic', color: 'rgba(199, 198, 234, 0.05)', lineHeight: 0.8, pointerEvents: 'none' }} aria-hidden>M.</div>

          <div style={{ position: 'relative', zIndex: 2 }}>
            <div className="podcast-head">
              <div>
                <div className="eyebrow">The podcast</div>
                <h2 style={{ fontSize: 'clamp(40px, 5.2vw, 72px)', color: '#fff' }}>
                  <span className="serif-it">Making It Matter<span style={{ color: '#c7c6ea' }}>.</span></span>
                </h2>
                <p style={{ color: '#c7c6ea', fontSize: 18, marginTop: 24, maxWidth: 520 }}>
                  <span className="serif-it" style={{ color: '#fff' }}>Making It Matter</span> is also a podcast. I talk to founders and leaders about what actually matters in the work they do, how they built businesses with purpose, and what they've learned along the way. New episodes regularly.
                </p>
              </div>
              <div className="podcast-head-cta">
                <a href="https://www.youtube.com/@making.it.matter" target="_blank" rel="noopener noreferrer" className="btn" style={{ background: '#fff', color: 'var(--ink)' }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M4 2v10l8-5z"/></svg>
                  Watch on YouTube
                </a>
                <a href="https://open.spotify.com/show/0ZLEtfcyLw3fc4rFHux5OF" target="_blank" rel="noopener noreferrer" className="btn" style={{ background: '#fff', color: 'var(--ink)' }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.56.3z"/></svg>
                  Listen on Spotify
                </a>
              </div>
            </div>

            <div>
              {episodes.map((ep, i) => (
                <div className="episode-card" key={i}>
                  <div className="ep-num">{ep.num}</div>
                  <div className="ep-title">
                    Making <span style={{ color: '#c7c6ea' }}>{ep.title.replace('Making ', '').replace(' Matter', '')}</span> Matter
                  </div>
                  <div className="ep-dur">{ep.dur}</div>
                  <div className="ep-play">
                    <svg width="12" height="12" viewBox="0 0 14 14" fill="currentColor"><path d="M4 2v10l8-5z"/></svg>
                  </div>
                </div>
              ))}
            </div>

            {/* Featured video */}
            <div style={{ marginTop: 56, paddingTop: 56, borderTop: '1px solid rgba(255,255,255,0.12)' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }} className="video-feature">
                <div>
                  <div className="eyebrow" style={{ color: '#c7c6ea' }}>Featured episode</div>
                  <h3 style={{ fontFamily: "'Playfair Display', serif", fontSize: 'clamp(26px, 3vw, 36px)', color: '#fff', lineHeight: 1.2, letterSpacing: '-0.01em', marginTop: 10, marginBottom: 16 }}>
                    Making Robots Matter<span style={{ color: '#c7c6ea' }}>.</span>
                  </h3>
                  <p style={{ color: '#c7c6ea', fontSize: 15, lineHeight: 1.65 }}>
                    A conversation with the people building businesses and solutions driven by a want to make a difference.
                  </p>
                </div>
                <div style={{ position: 'relative', aspectRatio: '16/9', borderRadius: 4, overflow: 'hidden', background: '#000' }}>
                  <iframe
                    src="https://www.youtube.com/embed/3V7FDrtNL-c?rel=0"
                    title="Making Robots Matter"
                    frameBorder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowFullScreen
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
                  />
                </div>
              </div>
            </div>

            <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
              <div style={{ color: '#c7c6ea', fontSize: 14 }}>Available on all major platforms</div>
              <a href="https://www.youtube.com/@making.it.matter" target="_blank" rel="noopener noreferrer" className="btn-link" style={{ color: '#fff', borderColor: '#fff' }}>
                All episodes
                <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m0 0L7 3m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Podcast = Podcast;