// Section 11 — Closing CTA
const ClosingCTA = () => (
  <section style={{
    padding:'120px 0', background:'#0E1B2E', color:'#FFFFFF',
    position:'relative', overflow:'hidden',
  }}>
    {/* subtle radial accent */}
    <div aria-hidden="true" style={{
      position:'absolute', inset:0, pointerEvents:'none',
      background:'radial-gradient(circle at 80% 30%, rgba(232,178,37,0.18), transparent 50%), radial-gradient(circle at 20% 80%, rgba(111,168,220,0.12), transparent 50%)',
    }} />
    <div className="container" style={{position:'relative', textAlign:'center'}}>
      <div style={{fontSize:12, fontWeight:700, color:'#E8B225',
                    textTransform:'uppercase', letterSpacing:1.6}}>
        The next cohort
      </div>
      <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(40px, 6vw, 80px)',
                   fontWeight:700, color:'#FFFFFF', margin:'20px 0 0',
                   lineHeight:1, letterSpacing:'-2px', maxWidth:900,
                   marginLeft:'auto', marginRight:'auto'}}>
        Apply AI in your practice.<br/>
        <span style={{fontStyle:'italic', fontWeight:500, color:'#E8B225'}}>
          Not just learn about it.
        </span>
      </h2>
      <p style={{fontSize:18, color:'#A8C8E6', marginTop:28, lineHeight:1.6,
                  maxWidth:600, margin:'28px auto 0'}}>
        Spring 2026 cohort starts week of 24 May. 15 places. Apply by 20 May.
      </p>

      <div style={{marginTop:40, display:'flex', gap:16, justifyContent:'center',
                    flexWrap:'wrap'}}>
        <a href="https://form.jotform.com/261244735080049" target="_blank" rel="noopener noreferrer" style={{
          background:'#E8B225', color:'#0E1B2E',
          fontSize:15, fontWeight:700, textTransform:'uppercase', letterSpacing:0.6,
          padding:'18px 32px', borderRadius:13,
          display:'inline-flex', alignItems:'center', gap:10,
          transition:'background 160ms, transform 160ms',
        }}
        onMouseEnter={e=>{e.currentTarget.style.background='#F5D26A';}}
        onMouseLeave={e=>{e.currentTarget.style.background='#E8B225';}}>
          Apply for the spring cohort
          <i data-lucide="arrow-right" style={{width:18, height:18}}></i>
        </a>
      </div>

      <div style={{marginTop:24, fontSize:14, color:'#A8C8E6'}}>
        Need bespoke 1:1 work instead?{' '}
        <a href="https://calendly.com/cpark-gnosis-learning/book-a-consultation" target="_blank" rel="noopener noreferrer" style={{color:'#FFFFFF', borderBottom:'1px solid #E8B225',
                             paddingBottom:1}}>
          Book a consultation →
        </a>
      </div>
    </div>
  </section>
);

window.ClosingCTA = ClosingCTA;