// Who We Serve
function WhoWeServeSection() {
  const groups = [
    { letter: "K12", title: "K–12 districts & schools", desc: "Public districts, charter networks, and individual schools tackling curriculum, assessment, and program design.", color: "pink" },
    { letter: "IS", title: "Independent schools", desc: "Day and boarding schools refining academic strategy, learning models, and measurement.", color: "coral" },
    { letter: "HE", title: "Higher education", desc: "Colleges, universities, and graduate programs working on retention, instruction, and student success.", color: "blue" },
    { letter: "ET", title: "Ed-tech companies", desc: "Founders and product teams building learning products that need pedagogical rigor and proof.", color: "teal" },
    { letter: "FN", title: "Foundations & nonprofits", desc: "Education funders and mission-driven organizations designing programs and evaluating impact.", color: "purple" },
  ];
  return (
    <section className="section bg-soft-pink-blue" id="who">
      <div className="section__bg">
        <div className="orb" style={{ top:0, right:0, width:320, height:320, background:"hsl(var(--brand-coral) / 0.08)", transform:"translate(33%, -33%)" }} />
        <div className="orb" style={{ bottom:0, left:0, width:288, height:288, background:"hsl(var(--brand-purple) / 0.08)", transform:"translate(-33%, 33%)" }} />
      </div>
      <div className="section__inner">
        <div className="section__head fade-up">
          <div className="tag-pill tag-pill--coral">Who We Serve</div>
          <h2 className="section__title">We work across the education sector.</h2>
          <p className="section__lede">From a single school to a national funder, we bring the same rigor: understand the problem, design the program, measure the result.</p>
        </div>
        <div className="who__grid stagger">
          {groups.map((g, i) => (
            <div key={i} className="feature-card fade-up" data-color={g.color}>
              <div className="feature-card__icon">{g.letter}</div>
              <div>
                <h3>{g.title}</h3>
                <p>{g.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhoWeServeSection = WhoWeServeSection;