// Section 8 — Enrolment / pricing. £197/mo × 3 (total £591). 15 places only.
const PLAN_FEATURES = [
  'Twelve 90-minute live cohort sessions',
  '1:1 30-minute strategy call with Christi',
  'Applied weekly assignments with personal feedback',
  'Private cohort channel',
  'Capstone AI practice document',
  'Recordings of every live session',
];

const SPOTS_TOTAL = 15;
const SPOTS_TAKEN = 3;
const SPOTS_LEFT = SPOTS_TOTAL - SPOTS_TAKEN;
const STRIPE_MONTHLY = 'https://form.jotform.com/261244735080049';
const STRIPE_ONETIME = 'https://form.jotform.com/261244735080049';
const CALENDLY_URL = 'https://calendly.com/cpark-gnosis-learning/book-a-consultation';

const SpotsBar = () => (
  <div style={{marginTop:24}}>
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline',
                  fontSize:12, fontWeight:700, color:'#2E5C8A',
                  textTransform:'uppercase', letterSpacing:1.2, marginBottom:10}}>
      <span>{SPOTS_LEFT} of {SPOTS_TOTAL} spots remaining</span>
      <span style={{color:'#6B7E92'}}>Spring 2026</span>
    </div>
    <div style={{height:8, background:'#E1ECF7', borderRadius:999, overflow:'hidden'}}>
      <div style={{height:'100%', width:`${(SPOTS_TAKEN/SPOTS_TOTAL)*100}%`,
                    background:'linear-gradient(to right, #E8B225, #F5D26A)'}} />
    </div>
    <div style={{display:'flex', gap:6, marginTop:12, flexWrap:'wrap'}}>
      {Array.from({length:SPOTS_TOTAL}).map((_,i)=>{
        const taken = i < SPOTS_TAKEN;
        return (
          <div key={i} style={{
            width:28, height:28, borderRadius:'50%',
            background: taken ? '#0E1B2E' : '#FFFFFF',
            border: taken ? 'none' : '1.5px dashed #A8C8E6',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            {taken && <i data-lucide="check" style={{width:14, height:14, color:'#E8B225'}}></i>}
          </div>
        );
      })}
    </div>
  </div>
);

const Enrolment = ({ variant = 'side-by-side' }) => {
  return (
    <section id="enrolment" style={{padding:'96px 0', background:'#E1ECF7'}}>
      <div className="container">
        <div style={{display:'inline-flex', alignItems:'center', gap:10,
                      padding:'8px 14px', borderRadius:999,
                      background:'#FFFFFF', border:'1.5px solid #E8B225',
                      color:'#0E1B2E', fontSize:12, fontWeight:700,
                      textTransform:'uppercase', letterSpacing:1.4, marginBottom:20}}>
          <span style={{display:'inline-block', width:6, height:6, borderRadius:'50%',
                          background:'#E8B225'}}/>
          Limited launch · Only 10 spots
        </div>
        <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(32px, 4vw, 48px)',
                     fontWeight:600, color:'#0E1B2E', margin:0,
                     lineHeight:1.1, letterSpacing:'-1px', maxWidth:760}}>
          Twelve weeks. Fifteen places. One simple price.
        </h2>
        <p style={{fontSize:17, color:'#3F5670', marginTop:16, maxWidth:620, lineHeight:1.55}}>
          Small on purpose. Fifteen educators is the size at which a cohort actually
          becomes a working group, not an audience.
        </p>

        <div style={{display:'grid', gridTemplateColumns:'minmax(0, 480px)', gap:24, marginTop:40, justifyContent:'center'}}
              className="enrol-grid">
          {[
            {tag:'Enrolment', name:'Pay monthly', price:'£197', per:'/ month',
             sub:'Three months · total £591', accent:'#E8B225',
             bg:'#FBF9F4', highlighted:true, badge:null,
             url: STRIPE_MONTHLY},
          ].map(p => (
            <div key={p.tag} style={{
              background:p.bg, borderRadius:14, padding:40, position:'relative',
              border: p.highlighted ? '1.5px solid #0E1B2E' : '1px solid #DCE4EC',
              boxShadow: p.highlighted
                ? 'rgba(14,27,46,0.16) 0px 16px 40px'
                : 'rgba(46,92,138,0.08) 0px 4px 16px',
              display:'flex', flexDirection:'column',
            }}>
              {p.badge && (
                <div style={{position:'absolute', top:-12, right:24,
                              background:'#E8B225', color:'#0E1B2E',
                              fontSize:11, fontWeight:700, textTransform:'uppercase',
                              letterSpacing:1.2, padding:'5px 12px', borderRadius:999}}>
                  {p.badge}
                </div>
              )}
              <div style={{fontSize:11, fontWeight:700, color:p.accent,
                            textTransform:'uppercase', letterSpacing:1.6}}>
                {p.tag} · {p.name}
              </div>
              <div style={{display:'flex', alignItems:'baseline', gap:8, marginTop:16}}>
                <span style={{fontFamily:'"Space Grotesk"', fontSize:64, fontWeight:700,
                               color:'#0E1B2E', letterSpacing:'-2px', lineHeight:1}}>
                  {p.price}
                </span>
                <span style={{fontSize:16, color:'#6B7E92', fontWeight:500}}>{p.per}</span>
              </div>
              <div style={{fontSize:14, color:'#3F5670', marginTop:6}}>{p.sub}</div>

              <a href={p.url} target="_blank" rel="noopener noreferrer" style={{
                marginTop:'auto', paddingTop:32,
              }}>
                <span style={{
                  background: p.highlighted ? '#0E1B2E' : '#FFFFFF',
                  color: p.highlighted ? '#FFFFFF' : '#2E5C8A',
                  border: p.highlighted ? 'none' : '1.5px solid #2E5C8A',
                  fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:0.6,
                  padding:'14px 24px', borderRadius:13,
                  display:'inline-flex', alignItems:'center', gap:10, width:'100%',
                  justifyContent:'center', boxSizing:'border-box',
                }}>
                  Apply for the spring cohort
                  <i data-lucide="arrow-right" style={{width:16, height:16}}></i>
                </span>
              </a>
            </div>
          ))}
        </div>

        {/* Spots tracker */}
        <div style={{marginTop:24, padding:'24px 32px', background:'#FFFFFF',
                      border:'1px solid #DCE4EC', borderRadius:14}}>
          <SpotsBar />
        </div>

        {/* Shared features */}
        <div style={{marginTop:16, padding:32, background:'#FFFFFF',
                      border:'1px solid #DCE4EC', borderRadius:14}}>
          <div style={{fontSize:11, fontWeight:700, color:'#2E5C8A',
                        textTransform:'uppercase', letterSpacing:1.4}}>
            Every place includes
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:12,
                        marginTop:20}} className="enrol-features">
            {PLAN_FEATURES.map(f => (
              <div key={f} style={{display:'flex', gap:10, fontSize:14, color:'#0E1B2E',
                                    lineHeight:1.5}}>
                <i data-lucide="check" style={{width:16, height:16, color:'#E8B225',
                    flexShrink:0, marginTop:3}}></i>
                {f}
              </div>
            ))}
          </div>
        </div>

        {/* 1:1 consultation row */}
        <div style={{marginTop:16, padding:'24px 32px', background:'#0E1B2E',
                      borderRadius:14, color:'#FFFFFF',
                      display:'flex', alignItems:'center', justifyContent:'space-between',
                      gap:24, flexWrap:'wrap'}}>
          <div style={{flex:'1 1 300px'}}>
            <div style={{fontSize:11, fontWeight:700, color:'#E8B225',
                          textTransform:'uppercase', letterSpacing:1.4}}>
              Need something more bespoke?
            </div>
            <div style={{fontSize:15, color:'#DDE2EA', marginTop:6, lineHeight:1.5,
                          maxWidth:540}}>
              If you want a tailored AI implementation programme — for you, your
              department, or your school — book a consultation and we'll design it
              together.
            </div>
          </div>
          <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" style={{
            background:'#E8B225', color:'#0E1B2E', textDecoration:'none',
            fontSize:13, fontWeight:700, textTransform:'uppercase', letterSpacing:0.6,
            padding:'14px 22px', borderRadius:13,
            display:'inline-flex', alignItems:'center', gap:10,
          }}>
            Book a consultation
            <i data-lucide="arrow-up-right" style={{width:16, height:16}}></i>
          </a>
        </div>

        <div style={{marginTop:24, fontSize:13, color:'#6B7E92', lineHeight:1.5,
                      maxWidth:680}}>
          We are looking for fit, not credentials. Once the fifteen places fill,
          enrolment closes until the autumn cohort. Refundable in full within the
          first session if the cohort is not the right shape for you.
        </div>

        <style>{`
          @media (max-width: 880px) {
            .enrol-grid { grid-template-columns: 1fr !important; }
            .enrol-features { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
};

window.Enrolment = Enrolment;