const EPISODES = [
  {n:'142', cat:'LONGEVITY', title:'What your migraines are telling you', dur:'2:14:55', date:'May 2026', tone:'#2A1F18'},
  {n:'141', cat:'FAMILY', title:'Why kids stopped sleeping', dur:'1:48:10', date:'Apr 2026', tone:'#3A2A1A'},
  {n:'140', cat:'PERFORMANCE', title:'The case against managing symptoms', dur:'2:02:33', date:'Apr 2026', tone:'#1F1A2A'},
  {n:'139', cat:'FAITH', title:'A doctor on prayer, presence, and the nervous system', dur:'1:55:08', date:'Apr 2026', tone:'#2A1A1A'},
];

function EpisodeStrip() {
  return (
    <section style={epStyles.section}>
      <div style={epStyles.head}>
        <div>
          <div className="t-eyebrow" style={{marginBottom:8}}>NEW THIS MONTH</div>
          <h2 className="t-h2" style={{margin:0}}>Latest episodes.</h2>
        </div>
        <a href="#" style={{fontFamily:'var(--font-sans)',fontSize:13,fontWeight:600,letterSpacing:'.06em',textTransform:'uppercase',color:'var(--fg-1)',textDecoration:'none',borderBottom:'1px solid var(--line-2)',paddingBottom:2}}>All episodes →</a>
      </div>
      <div style={epStyles.row}>
        {EPISODES.map(ep => <EpisodeCard key={ep.n} ep={ep}/>)}
      </div>
    </section>
  );
}

function EpisodeCard({ep}) {
  return (
    <article style={epStyles.card} onMouseEnter={e=>e.currentTarget.style.borderColor='var(--line-2)'} onMouseLeave={e=>e.currentTarget.style.borderColor='var(--line-1)'}>
      <div style={{...epStyles.cover, background:`linear-gradient(135deg, ${ep.tone}, #0E0E10)`}}>
        <div style={epStyles.coverNum}>EP {ep.n}</div>
        <div style={epStyles.coverTitle}>{ep.title.split(' ').slice(0,3).join(' ')}</div>
      </div>
      <div style={epStyles.meta}>
        <div style={epStyles.cat}>{ep.cat}</div>
        <h3 style={epStyles.title}>{ep.title}</h3>
        <div style={epStyles.foot}>{ep.dur} · {ep.date}</div>
      </div>
    </article>
  );
}

const epStyles = {
  section: {padding:'96px 64px',background:'var(--ink)'},
  head: {display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:48},
  row: {display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',gap:18},
  card: {background:'var(--ink-2)',border:'1px solid var(--line-1)',borderRadius:8,overflow:'hidden',transition:'border-color .22s',cursor:'pointer'},
  cover: {aspectRatio:'16/9',position:'relative',overflow:'hidden'},
  coverNum: {position:'absolute',top:14,left:14,fontFamily:'var(--font-display)',fontSize:13,letterSpacing:'.2em',color:'var(--accent)'},
  coverTitle: {position:'absolute',bottom:14,left:14,right:14,fontFamily:'var(--font-display)',fontSize:30,lineHeight:.95,color:'var(--bone)',textTransform:'uppercase',letterSpacing:'-0.01em'},
  meta: {padding:18},
  cat: {fontFamily:'var(--font-sans)',fontSize:10,fontWeight:700,letterSpacing:'.18em',color:'var(--fg-3)',marginBottom:8},
  title: {fontFamily:'var(--font-serif)',fontWeight:600,fontSize:18,lineHeight:1.25,color:'var(--fg-1)',margin:'0 0 10px'},
  foot: {fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-3)'},
};

window.EpisodeStrip = EpisodeStrip;