// SLIDE 15 — REACH OUT (For questions, reach out to: …)
function ReachOutSlide() {
  return (
    <Slide eyebrow={null} logo={null} style={{label:"15 Reach Out"}}>
      {/* Black side ~48% — Mont stacked above TAN, each with breathing room */}
      <div style={{position:'absolute', top:0, left:0, bottom:0, width:'48%', background: R.black, padding:'110px 56px'}}>
        <div style={{fontFamily:'var(--font-sans)', fontWeight:700, fontSize: 50, lineHeight:1.05, letterSpacing:'-.015em', color:'#fff'}}>For<br/>questions,<br/>reach out</div>
        <div style={{fontFamily:'var(--font-display)', fontWeight:400, fontSize: 52, lineHeight:1.0, marginTop:20, padding:'0 .08em', color:'#fff'}}>to:</div>
        <img src="../assets/logo-horizontal-whitepink.png" alt="Client logo placeholder" style={{position:'absolute', bottom:56, left:56, height:36}}/>
      </div>

      {/* White side — headshot + details */}
      <div style={{position:'absolute', top:0, right:0, bottom:0, width:'52%', background:'#fff', color: R.ink, display:'flex', alignItems:'center', padding:'60px'}}>
        <div style={{display:'flex', gap:36, alignItems:'center'}}>
          <img src="../assets/photos/laptop-meeting-pink-blazer.jpg" alt="" style={{width: 180, height: 220, objectFit:'cover', borderRadius: 4, flexShrink:0}}/>
          <div>
            <div style={{fontWeight:700, fontSize: 30, lineHeight:1.15, letterSpacing:'-.005em'}}>Liv Myers</div>
            <div style={{fontSize: 18, marginTop: 8, fontWeight:500, color:'#333'}}>Customer Success<br/>Specialist</div>
            <div style={{marginTop: 32, fontSize: 14, lineHeight:1.7}}>
              <a href="mailto:liv.myers@chatterkick.com" style={{color:R.ink, textDecoration:'underline'}}>liv.myers@chatterkick.com</a><br/>
              <a href="https://chatterkick.com" style={{color:R.ink, textDecoration:'underline'}}>chatterkick.com</a>
            </div>
          </div>
        </div>
      </div>
    </Slide>
  );
}

window.ReachOutSlide = ReachOutSlide;