// Section 2 — Why a Cohort + the 4-stat grid + pull quote
const WhyCohort = () => {
  const stats = [
    { n:'86%', l:'of students globally use AI for their studies',
      src:'Digital Education Council, 2025' },
    { n:'68%', l:'of teachers have received zero AI training',
      src:'CDT Report, 2025' },
    { n:'10%', l:'of schools have any AI guidelines in place',
      src:'UNESCO, 2025' },
    { n:'6 wks', l:'reclaimed per year with a consistent AI workflow',
      src:'Gallup, 2025' },
  ];

  return (
    <section style={{padding:'96px 0', background:'#E1ECF7'}}>
      <div className="container">
        <div className="eyebrow">A different shape of learning</div>
        <h2 style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(32px, 4vw, 48px)',
                     fontWeight:600, color:'#0E1B2E', margin:'12px 0 0',
                     lineHeight:1.12, letterSpacing:'-1px', maxWidth:880}}>
          Most AI training teaches you about AI.{' '}
          <span style={{color:'#2E5C8A'}}>This teaches you to teach with it.</span>
        </h2>

        <p style={{fontSize:18, color:'#3F5670', lineHeight:1.6,
                    marginTop:28, maxWidth:760}}>
          Courses give you exposure. Communities give you company. A cohort gives
          you the third thing neither can: structured application to your real
          practice, with a small group, every week for twelve weeks. You leave
          with prompts you wrote, workflows you tested in your own classroom,
          and a clear answer to the question your colleagues are about to start asking you.
        </p>

        {/* Stats grid */}
        <div style={{
          marginTop:64, display:'grid', gridTemplateColumns:'repeat(4, 1fr)',
          gap:0, background:'#DCE4EC',
          border:'1px solid #DCE4EC', borderRadius:14, overflow:'hidden',
        }} className="stats-grid">
          {stats.map((s, i) => (
            <div key={s.n} style={{
              background:'#FFFFFF', padding:'32px 28px',
              display:'flex', flexDirection:'column', justifyContent:'space-between',
              minHeight:200,
            }}>
              <div style={{fontFamily:'"Space Grotesk"', fontSize:'clamp(40px, 4.5vw, 60px)',
                            fontWeight:700, color:'#0E1B2E', lineHeight:1,
                            letterSpacing:'-1.5px'}}>
                {s.n}
              </div>
              <div>
                <div style={{fontSize:14, color:'#3F5670', lineHeight:1.45,
                              marginTop:18}}>{s.l}</div>
                <div style={{fontSize:11, color:'#6B7E92', marginTop:10,
                              fontWeight:500}}>{s.src}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Pull quote */}
        <figure style={{margin:'72px 0 0', padding:'40px 48px',
                         background:'#FFFFFF',
                         borderLeft:'4px solid #E8B225',
                         borderRadius:'0 12px 12px 0', maxWidth:720}}>
          <blockquote style={{margin:0, fontFamily:'"Space Grotesk"',
                              fontSize:'clamp(22px, 2.4vw, 32px)', fontWeight:500,
                              color:'#0E1B2E', lineHeight:1.25, letterSpacing:'-0.5px'}}>
            "AI is part of the workflow,<br/>not the authority."
          </blockquote>
          <figcaption style={{marginTop:18, fontSize:12, fontWeight:700, color:'#2E5C8A',
                                textTransform:'uppercase', letterSpacing:1.4}}>
            Christi Park · Founder, Gnosis Academy
          </figcaption>
        </figure>

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

window.WhyCohort = WhyCohort;