function Hero() {
  return (
    <section style={heroStyles.section}>
      <div style={heroStyles.left}>
        <img src="./assets/host-portrait.png" alt="Dr. Jonathan Lazar" style={heroStyles.portrait}/>
        <div style={heroStyles.scrim}/>
        <div style={heroStyles.bar}/>
      </div>
      <div style={heroStyles.text}>
        <span className="pill" style={{marginBottom:28}}>Episode 142 · Out Today</span>
        <h1 style={heroStyles.title}>What your<br/>migraines are<br/>telling you.</h1>
        <p style={heroStyles.lede}>A board-certified chiropractic neurologist sits down with the patients medicine forgot. New episode every Tuesday.</p>
        <div style={heroStyles.ctas}>
          <a href="#" className="btn btn-primary">Listen now</a>
          <a href="#" className="btn btn-ghost">Watch the trailer</a>
        </div>
        <div style={heroStyles.foot}>
          <div><div style={heroStyles.kLbl}>Runtime</div><div style={heroStyles.kVal}>2:14:55</div></div>
          <div><div style={heroStyles.kLbl}>Released</div><div style={heroStyles.kVal}>May 14, 2026</div></div>
          <div><div style={heroStyles.kLbl}>Lane</div><div style={heroStyles.kVal}>Longevity</div></div>
        </div>
      </div>
    </section>
  );
}

const heroStyles = {
  section: {position:'relative',minHeight:720,display:'grid',gridTemplateColumns:'minmax(420px, 540px) 1fr',background:'#1F1F22'},
  left: {position:'relative',background:'#1F1F22',overflow:'hidden',minHeight:720},
  // photo moved 10% higher: object-position-y went from 18% → 8%
  portrait: {position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',objectPosition:'center 8%',display:'block'},
  scrim: {position:'absolute',inset:0,background:'linear-gradient(180deg, rgba(14,14,16,0) 55%, rgba(14,14,16,.65) 100%)',pointerEvents:'none'},
  bar: {position:'absolute',right:0,top:0,bottom:0,width:4,background:'var(--bone)',zIndex:2},
  text: {padding:'96px 80px',display:'flex',flexDirection:'column',justifyContent:'center',background:'var(--ink)'},
  title: {fontFamily:'var(--font-display)',fontSize:'clamp(56px, 8vw, 112px)',lineHeight:.95,letterSpacing:'-0.02em',textTransform:'uppercase',color:'var(--bone)',margin:'0 0 28px'},
  lede: {fontFamily:'var(--font-serif)',fontSize:22,lineHeight:1.45,color:'var(--fg-2)',maxWidth:560,margin:'0 0 36px',fontStyle:'italic'},
  ctas: {display:'flex',gap:14,flexWrap:'wrap',marginBottom:48},
  foot: {display:'flex',gap:48,paddingTop:24,borderTop:'1px solid var(--line-1)'},
  kLbl: {fontFamily:'var(--font-sans)',fontSize:10,fontWeight:700,letterSpacing:'.18em',textTransform:'uppercase',color:'var(--fg-3)',marginBottom:6},
  kVal: {fontFamily:'var(--font-mono)',fontSize:14,color:'var(--fg-1)'},
};

window.Hero = Hero;