// Section 6 — What you leave with (6 outcomes)
const Outcomes = () => {
  const items = [
    { n:'01', title:'A library of prompts you wrote yourself',
      body:'For your subject, your students, your year — not generic templates.' },
    { n:'02', title:'A working AI workflow',
      body:'For planning, feedback, or assessment — that fits your real week.' },
    { n:'03', title:'A custom AI assistant',
      body:'Built for your teaching context. Yours to keep.', spark:true },
    { n:'04', title:'A short AI practice document',
      body:'Share with colleagues or your head. Plain language. Defensible.' },
    { n:'05', title:'The judgment to know',
      body:'When to trust AI output and when to override it.' },
    { n:'06', title:'A cohort of 9 other educators',
      body:'Figuring this out alongside you. Long after week 12.' },
  ];

  return (
    <section style={{padding:'96px 0', background:'#FBF9F4'}}>
      <div className="container">
        <div className="eyebrow">Outcomes you can name</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}}>
          What you leave with, named precisely.
        </h2>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0,
                      marginTop:48, background:'#DCE4EC',
                      border:'1px solid #DCE4EC', borderRadius:14, overflow:'hidden'}}
              className="outcomes-grid">
          {items.map(it => (
            <div key={it.n} style={{
              background:'#FFFFFF', padding:'32px 28px', minHeight:200,
              display:'flex', flexDirection:'column', gap:14,
              transition:'background 200ms',
            }}
            onMouseEnter={e=>{e.currentTarget.style.background='#FBF9F4';}}
            onMouseLeave={e=>{e.currentTarget.style.background='#FFFFFF';}}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
                <span style={{fontFamily:'"Space Grotesk"', fontSize:14, fontWeight:600,
                               color: it.spark ? '#E8B225' : '#9BA4D4',
                               letterSpacing:'0.5px'}}>{it.n}</span>
                {it.spark && (
                  <i data-lucide="sparkles" style={{width:18, height:18, color:'#E8B225'}}></i>
                )}
              </div>
              <h3 style={{fontFamily:'Rubik', fontSize:19, fontWeight:600, color:'#0E1B2E',
                           margin:0, lineHeight:1.3}}>{it.title}</h3>
              <p style={{fontSize:14, color:'#3F5670', lineHeight:1.55, margin:0}}>
                {it.body}
              </p>
            </div>
          ))}
        </div>

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

window.Outcomes = Outcomes;