// Section: Why a cohort — FOMO/scarcity reframe. Variants: columns | table | ledger
const LabVsCohort = ({ variant = 'columns' }) => {

  // Shared "why now / why this" data — drives all three variants
  const reasons = [
    {
      tag:'Right now',
      title:'AI is happening to your classroom whether you choose it or not.',
      body:'86% of students globally are using AI in their studies. Your colleagues are figuring it out in private. The gap between teachers who can teach with AI and teachers who cannot is opening this year.',
    },
    {
      tag:'Why a cohort',
      title:'Solo doesn\'t stick. A group of fifteen does.',
      body:'You already have the YouTube tutorials open in another tab. They\'re not going to fix this. Twelve weeks, ten educators, weekly applied work in your real classroom — this is the format that actually changes how you teach, not just what you know.',
    },
    {
      tag:'Why now',
      title:'15 places. Twice a year. Then it closes.',
      body:'The cohort is small on purpose. When the fifteen places fill, enrolment closes until autumn. Spring 2026 starts the week of 24 May. Apply by 20 May.',
    },
  ];

  // Scarcity stats (the urgency layer)
  const stats = [
    { n:'10', l:'places · spring cohort' },
    { n:'12', l:'weeks · structured' },
    { n:'2x', l:'a year · then it closes' },
  ];

  if (variant === 'table') {
    // "Status table" — your situation right now vs after the cohort
    const rows = [
      ['Where you are now',                              'Twelve weeks from now'],
      ['Reading about AI but not applying it',           'Using AI weekly in your real classroom'],
      ['Generic prompts copied from a thread',           'Prompts you wrote, for your subject, that work'],
      ['Trying to figure it out alone',                  'A group of fifteen educators thinking with you'],
      ['Anxious your colleagues are ahead',              'You are the colleague others are asking'],
      ['Vague intentions, sliding off the week',         'A finished AI practice document you keep using'],
    ];
    return (
      <section id="lab-vs-cohort" style={{padding:'96px 0', background:'#FFFFFF'}}>
        <div className="container">
          <div className="eyebrow">Why a cohort, why now</div>
          <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(32px, 4vw, 48px)',
                       fontWeight:600, color:'#0E1B2E', margin:'12px 0 0',
                       lineHeight:1.1, letterSpacing:'-1px', maxWidth:760}}>
            The gap between you now and you in May is twelve weeks.
          </h2>

          <div style={{marginTop:48, border:'1px solid #DCE4EC', borderRadius:14,
                       overflow:'hidden', boxShadow:'rgba(46,92,138,0.06) 0px 4px 16px'}}>
            <div className="lvc-table-head" style={{display:'grid', gridTemplateColumns:'1fr 1fr',
                          background:'#0E1B2E', color:'#FFFFFF',
                          padding:'24px 32px', gap:24}}>
              <div>
                <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase',
                             letterSpacing:1.4, color:'#A8C8E6'}}>Today</div>
                <div style={{fontFamily:'"Space Grotesk"', fontSize:22, fontWeight:600,
                              marginTop:4}}>Where you are</div>
              </div>
              <div>
                <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase',
                             letterSpacing:1.4, color:'#E8B225'}}>By August</div>
                <div style={{fontFamily:'"Space Grotesk"', fontSize:22, fontWeight:600,
                              color:'#E8B225', marginTop:4}}>Where you could be</div>
              </div>
            </div>
            {rows.slice(1).map(([before, after], i) => (
              <div key={before} className="lvc-table-row" style={{
                display:'grid', gridTemplateColumns:'1fr 1fr',
                padding:'22px 32px', gap:24, alignItems:'center',
                background: i%2 ? '#FBF9F4' : '#FFFFFF',
                fontSize:15,
              }}>
                <div style={{color:'#6B7E92'}}>{before}</div>
                <div style={{color:'#0E1B2E', fontWeight:600,
                              display:'flex', alignItems:'center', gap:10}}>
                  <i data-lucide="arrow-right" style={{width:14, height:14, color:'#E8B225',
                      flexShrink:0}}></i>
                  {after}
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:24, fontSize:14, color:'#6B7E92'}}>
            Apply by 20 May · 15 places · cohort starts week of 24 May.
          </div>
          <style>{`
            @media (max-width: 760px) {
              .lvc-table-head, .lvc-table-row {
                grid-template-columns: 1fr !important;
                padding: 20px !important;
                gap: 14px !important;
              }
            }
          `}</style>
        </div>
      </section>
    );
  }

  if (variant === 'ledger') {
    return (
      <section id="lab-vs-cohort" style={{padding:'96px 0', background:'#FFFFFF'}}>
        <div className="container">
          <div className="eyebrow">Why a cohort, why now</div>
          <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(32px, 4vw, 48px)',
                       fontWeight:600, color:'#0E1B2E', margin:'12px 0 48px',
                       lineHeight:1.1, letterSpacing:'-1px', maxWidth:760}}>
            The reason teachers don't change<br/>
            <span style={{color:'#E8B225', fontStyle:'italic', fontWeight:500}}>
              is that they try alone.
            </span>
          </h2>

          <div style={{display:'grid', gridTemplateColumns:'1fr', gap:1, background:'#DCE4EC',
                        border:'1px solid #DCE4EC', borderRadius:14, overflow:'hidden'}}>
            {reasons.map((r, i) => (
              <div key={r.tag} className="lvc-ledger-row" style={{
                background: i === 1 ? '#FBF9F4' : '#FFFFFF',
                padding:'40px 48px',
                display:'grid', gridTemplateColumns:'1fr 2fr', gap:40, alignItems:'baseline',
              }}>
                <div>
                  <div style={{fontSize:11, fontWeight:700,
                                color: i === 1 ? '#E8B225' : '#2E5C8A',
                                textTransform:'uppercase', letterSpacing:1.6}}>
                    {r.tag}
                  </div>
                </div>
                <div>
                  <div style={{fontFamily:'"Space Grotesk"', fontSize:22, fontWeight:600,
                                color:'#0E1B2E', lineHeight:1.25, letterSpacing:'-0.4px'}}>
                    {r.title}
                  </div>
                  <p style={{fontSize:16, color:'#3F5670', lineHeight:1.6,
                              marginTop:12, marginBottom:0}}>{r.body}</p>
                </div>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 760px) {
              .lvc-ledger-row {
                grid-template-columns: 1fr !important;
                padding: 28px 24px !important;
                gap: 16px !important;
              }
            }
          `}</style>
        </div>
      </section>
    );
  }

  // DEFAULT: 3 reasons + scarcity strip
  return (
    <section id="lab-vs-cohort" style={{padding:'96px 0', background:'#FFFFFF'}}>
      <div className="container">
        <div className="eyebrow">Why a cohort, why now</div>
        <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(32px, 4vw, 48px)',
                     fontWeight:600, color:'#0E1B2E', margin:'12px 0 0',
                     lineHeight:1.1, letterSpacing:'-1px', maxWidth:820}}>
          The teachers who figure AI out this year{' '}
          <span style={{color:'#E8B225', fontStyle:'italic', fontWeight:500}}>
            won't be the ones who try alone.
          </span>
        </h2>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20,
                      marginTop:48}} className="lvc-grid">
          {reasons.map((r, i) => (
            <div key={r.tag} style={{
              background: i === 1 ? '#FBF9F4' : '#FFFFFF',
              border: i === 1 ? '1.5px solid #0E1B2E' : '1px solid #DCE4EC',
              borderRadius:14, padding:32,
              boxShadow: i === 1
                ? 'rgba(14,27,46,0.10) 0px 12px 24px'
                : 'rgba(46,92,138,0.04) 0px 2px 8px',
              position:'relative',
            }}>
              {i === 1 && (
                <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}}>
                  This page
                </div>
              )}
              <div style={{fontSize:11, fontWeight:700,
                            color: i === 1 ? '#E8B225' : '#2E5C8A',
                            textTransform:'uppercase', letterSpacing:1.6}}>
                {r.tag}
              </div>
              <div style={{fontFamily:'"Space Grotesk"', fontSize:22, fontWeight:600,
                            color:'#0E1B2E', marginTop:14, lineHeight:1.25,
                            letterSpacing:'-0.3px'}}>
                {r.title}
              </div>
              <p style={{fontSize:14, color:'#3F5670', marginTop:14, marginBottom:0,
                          lineHeight:1.6}}>{r.body}</p>
            </div>
          ))}
        </div>

        {/* Scarcity strip */}
        <div style={{marginTop:32, padding:'28px 40px',
                      background:'#0E1B2E', color:'#FFFFFF', borderRadius:14,
                      display:'grid', gridTemplateColumns:'repeat(3, 1fr) auto',
                      gap:32, alignItems:'center'}} className="lvc-strip">
          {stats.map(s => (
            <div key={s.l}>
              <div style={{fontFamily:'"Space Grotesk"', fontSize:48, fontWeight:700,
                            color:'#E8B225', lineHeight:1, letterSpacing:'-1.5px'}}>
                {s.n}
              </div>
              <div style={{fontSize:13, color:'#A8C8E6', marginTop:8,
                            textTransform:'uppercase', letterSpacing:1, fontWeight:500}}>
                {s.l}
              </div>
            </div>
          ))}
          <a href="https://form.jotform.com/261244735080049" target="_blank" rel="noopener noreferrer" style={{
            background:'#E8B225', color:'#0E1B2E',
            fontSize:13, fontWeight:700, textTransform:'uppercase', letterSpacing:0.6,
            padding:'16px 22px', borderRadius:13,
            display:'inline-flex', alignItems:'center', gap:10, whiteSpace:'nowrap',
          }}>
            Apply now
            <i data-lucide="arrow-right" style={{width:16, height:16}}></i>
          </a>
        </div>

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

window.LabVsCohort = LabVsCohort;