// Section 9 — Testimonials
const Testimonials = () => {
  const items = [
    {
      quote: "If I'd had this when I was a full-time teacher, I would have spent a tenth of the time creating resources. The frameworks alone changed how I think about prompting.",
      who: 'Steven, Former full-time teacher',
      role: '30+ years experience',
    },
    {
      quote: "This is the first AI training I've done that treats teachers like the professionals they are. It's specific, it's practical, and it doesn't waste your time.",
      who: 'Lisa, Secondary head of department',
      role: 'English · UK',
    },
    {
      quote: "I came in skeptical. By week three I was using AI in my planning every single day, and my lessons were sharper for it.",
      who: 'James, Curriculum lead',
      role: 'International school · Year 9–13',
    },
    {
      quote: "The shift wasn't about new tools. It was about finally understanding what the tools are doing — and where my judgment still has to lead.",
      who: 'Richard, Instructional coach',
      role: 'Independent school · K-8',
    },
  ];

  return (
    <section style={{padding:'96px 0', background:'#FFFFFF'}}>
      <div className="container">
        <div className="eyebrow">From educators we have already worked with</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 changes when AI finally makes sense.
        </h2>
        <div style={{fontSize:13, color:'#6B7E92', marginTop:14, fontStyle:'italic'}}>
          Quotes from educators we have already worked with. Cohort-specific testimonials replace these after Spring 2026.
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:20,
                      marginTop:48}} className="testimonials-grid">
          {items.map((t, i) => (
            <figure key={i} style={{
              margin:0, padding:32, borderRadius:14,
              background: i===0 ? '#FBF9F4' : '#FFFFFF',
              border:'1px solid #DCE4EC',
            }}>
              <i data-lucide="quote" style={{width:24, height:24,
                  color: i===0 ? '#E8B225' : '#A8C8E6'}}></i>
              <blockquote style={{margin:'18px 0 0', fontSize:17, color:'#0E1B2E',
                                  lineHeight:1.55, fontWeight:400}}>
                "{t.quote}"
              </blockquote>
              <figcaption style={{marginTop:24, paddingTop:20,
                                    borderTop:'1px solid #E1ECF7'}}>
                <div style={{fontSize:14, fontWeight:600, color:'#0E1B2E'}}>{t.who}</div>
                <div style={{fontSize:13, color:'#6B7E92', marginTop:2}}>{t.role}</div>
              </figcaption>
            </figure>
          ))}
        </div>

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

window.Testimonials = Testimonials;