function Footer() {
  return (
    <footer style={ftStyles.foot}>
      <div style={ftStyles.top}>
        <div style={ftStyles.brandCol}>
          <div style={ftStyles.brandSmall}>THE</div>
          <div style={ftStyles.brandBig}>DR. LAZAR</div>
          <div style={ftStyles.brandMid}>SHOW</div>
          <div style={ftStyles.tag}>The world deserves you at your best.</div>
        </div>
        <div>
          <div style={ftStyles.colTitle}>Listen</div>
          <ul style={ftStyles.list}>
            <li><a style={ftStyles.link} href="#">Apple Podcasts</a></li>
            <li><a style={ftStyles.link} href="#">Spotify</a></li>
            <li><a style={ftStyles.link} href="#">YouTube</a></li>
            <li><a style={ftStyles.link} href="#">RSS</a></li>
          </ul>
        </div>
        <div>
          <div style={ftStyles.colTitle}>Show</div>
          <ul style={ftStyles.list}>
            <li><a style={ftStyles.link} href="#">All episodes</a></li>
            <li><a style={ftStyles.link} href="#">About Dr. Lazar</a></li>
            <li><a style={ftStyles.link} href="#">Speaking</a></li>
            <li><a style={ftStyles.link} href="#">Contact</a></li>
          </ul>
        </div>
        <div style={ftStyles.subscribeCol}>
          <div style={ftStyles.colTitle}>Newsletter</div>
          <p style={ftStyles.subText}>One email Tuesday. New episode + the one thing worth knowing this week.</p>
          <div style={ftStyles.subRow}>
            <input type="email" placeholder="you@example.com" style={ftStyles.input}/>
            <button className="btn btn-primary" style={{padding:'12px 18px'}}>Subscribe</button>
          </div>
        </div>
      </div>
      <hr className="hairline" style={{margin:'48px 0 24px'}}/>
      <div style={ftStyles.legal}>
        <span>© 2026 The Dr. Lazar Show</span>
        <span>·</span>
        <a style={ftStyles.legalLink} href="#">Privacy</a>
        <span>·</span>
        <a style={ftStyles.legalLink} href="#">Terms</a>
        <span style={{marginLeft:'auto'}}>Recorded in Ann Arbor, MI</span>
      </div>
    </footer>
  );
}

const ftStyles = {
  foot: {padding:'80px 64px 32px',background:'var(--ink)',borderTop:'1px solid var(--line-1)'},
  top: {display:'grid',gridTemplateColumns:'1.4fr 1fr 1fr 1.4fr',gap:48},
  brandCol: {},
  brandSmall: {fontFamily:'var(--font-display)',fontSize:11,color:'var(--accent)',letterSpacing:'.3em'},
  brandBig: {fontFamily:'var(--font-display)',fontSize:36,color:'var(--bone)',marginTop:2,lineHeight:1},
  brandMid: {fontFamily:'var(--font-display)',fontSize:14,color:'var(--bone)',letterSpacing:'.5em',marginTop:2},
  tag: {fontFamily:'var(--font-serif)',fontStyle:'italic',fontSize:14,color:'var(--fg-2)',marginTop:18,maxWidth:240,lineHeight:1.4},
  colTitle: {fontFamily:'var(--font-sans)',fontWeight:700,fontSize:11,letterSpacing:'.18em',textTransform:'uppercase',color:'var(--fg-3)',marginBottom:16},
  list: {listStyle:'none',margin:0,padding:0,display:'flex',flexDirection:'column',gap:10},
  link: {fontFamily:'var(--font-sans)',fontSize:14,color:'var(--fg-1)',textDecoration:'none'},
  subscribeCol: {},
  subText: {fontFamily:'var(--font-sans)',fontSize:13,color:'var(--fg-2)',lineHeight:1.5,margin:'0 0 14px'},
  subRow: {display:'flex',gap:8},
  input: {flex:1,background:'var(--ink-2)',border:'1px solid var(--line-1)',color:'var(--fg-1)',fontFamily:'var(--font-sans)',fontSize:14,padding:'12px 14px',borderRadius:8,outline:'none'},
  legal: {display:'flex',gap:14,fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-3)',alignItems:'center'},
  legalLink: {color:'var(--fg-3)',textDecoration:'none'},
};

window.Footer = Footer;