// Who fits — cohort-only
const WhoFits = () => {
  const yes = [
    'You have already had some exposure to AI and the basics no longer scare you',
    'You teach, coach, or lead in an educational setting',
    'You want method and applied practice, not another tool tour',
    'You can commit to one 90-minute session a week and a small piece of applied work between',
  ];
  const no = [
    'You want to binge a self-paced course over a weekend',
    'You are looking for a list of prompts to download',
    'You are still deciding whether AI matters at all',
    'Your needs are too bespoke for a group — book a 1:1 consultation instead',
  ];

  return (
    <section id="who-fits" style={{padding:'96px 0', background:'#FFFFFF'}}>
      <div className="container">
        <div className="eyebrow">Who fits</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}}>
          Who this cohort is for.
        </h2>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginTop:48}}
              className="who-grid">
          <div style={{background:'#FBF9F4', border:'1px solid #DCE4EC', borderRadius:14,
                        padding:32}}>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:24}}>
              <div style={{width:32, height:32, borderRadius:8, background:'#FFF6DC',
                            display:'flex', alignItems:'center', justifyContent:'center',
                            color:'#E8B225'}}>
                <i data-lucide="check" style={{width:18, height:18}}></i>
              </div>
              <h3 style={{fontFamily:'Rubik', fontSize:18, fontWeight:600,
                           color:'#0E1B2E', margin:0}}>This is for you if…</h3>
            </div>
            <ul style={{listStyle:'none', padding:0, margin:0,
                         display:'flex', flexDirection:'column', gap:14}}>
              {yes.map(t => (
                <li key={t} style={{display:'flex', gap:12, fontSize:15, color:'#0E1B2E',
                                     lineHeight:1.5}}>
                  <span style={{minWidth:6, height:6, marginTop:9, borderRadius:'50%',
                                 background:'#E8B225', flexShrink:0}}/>
                  {t}
                </li>
              ))}
            </ul>
          </div>

          <div style={{background:'#FFFFFF', border:'1px solid #DCE4EC', borderRadius:14,
                        padding:32}}>
            <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:24}}>
              <div style={{width:32, height:32, borderRadius:8, background:'#E1ECF7',
                            display:'flex', alignItems:'center', justifyContent:'center',
                            color:'#2E5C8A'}}>
                <i data-lucide="x" style={{width:18, height:18}}></i>
              </div>
              <h3 style={{fontFamily:'Rubik', fontSize:18, fontWeight:600,
                           color:'#0E1B2E', margin:0}}>This is not for you if…</h3>
            </div>
            <ul style={{listStyle:'none', padding:0, margin:0,
                         display:'flex', flexDirection:'column', gap:14}}>
              {no.map(t => (
                <li key={t} style={{display:'flex', gap:12, fontSize:15, color:'#3F5670',
                                     lineHeight:1.5}}>
                  <span style={{minWidth:6, height:6, marginTop:9, borderRadius:'50%',
                                 background:'#A8C8E6', flexShrink:0}}/>
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>

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

window.WhoFits = WhoFits;