// Services, five practices with inline engagement examples
function ServicesSection() {
  const items = [
    {
      letter: "SA", title: "Strategy & advisory", color: "pink",
      desc: "Diagnose what's actually happening, decide what to build, and stage it into a workable plan.",
      ex: { tag: "Higher Education", title: "First-year retention initiative",
            metric: "+11pts", metricLabel: "year-over-year retention",
            note: "Diagnostic-driven advising redesign with measurable check-ins each semester." }
    },
    {
      letter: "CD", title: "Curriculum & program design", color: "coral",
      desc: "Course sequences, scope and standards, and learning models that hold up in real classrooms.",
      ex: { tag: "K–12 District", title: "Reading proficiency program redesign",
            metric: "+18%", metricLabel: "learning gains in 9 months",
            note: "Rebuilt assessment and small-group instruction model across grades 3–5." }
    },
    {
      letter: "LA", title: "Learning analytics & assessment", color: "blue",
      desc: "Define the right metrics, build the instruments, and report results leaders can act on.",
      ex: { tag: "Foundation", title: "Grant program impact evaluation",
            metric: "4×", metricLabel: "improvement in measurable outcomes",
            note: "Built the evaluation framework and reporting cadence for a multi-site grant." }
    },
    {
      letter: "AI", title: "Responsible AI for educators", color: "teal",
      desc: "Practical, classroom-grounded guidance on where AI helps, where it doesn't, and how to deploy it safely.",
      ex: { tag: "Ed-tech", title: "Adaptive learning product strategy",
            metric: "30%", metricLabel: "faster time-to-proficiency",
            note: "Pedagogical model and assessment framework for a Series-A learning company." }
    },
    {
      letter: "PD", title: "Professional development", color: "purple",
      desc: "Workshops and coaching for teachers, faculty, and academic leaders, with content built around your context.",
      ex: { tag: "Independent School", title: "Faculty coaching program",
            metric: "92%", metricLabel: "faculty reporting changed practice",
            note: "Cohort-based coaching tied to specific instructional moves, measured term over term." }
    },
  ];
  return (
    <section className="section bg-soft-teal-orange" id="services">
      <div className="section__bg">
        <div className="orb" style={{ top:"33%", right:0, width:320, height:320, background:"hsl(var(--brand-pink) / 0.08)", transform:"translate(33%, 0)" }} />
        <div className="orb" style={{ bottom:"33%", left:0, width:288, height:288, background:"hsl(var(--brand-teal) / 0.08)", transform:"translate(-33%, 0)" }} />
      </div>
      <div className="section__inner">
        <div className="section__head fade-up">
          <div className="tag-pill tag-pill--teal">Services & Engagements</div>
          <h2 className="section__title">Five practices, one engagement model.</h2>
          <p className="section__lede">Each practice is shown alongside a representative engagement from our work across the sector.</p>
        </div>
        <div className="services__grid stagger">
          {items.map((p, i) => (
            <div key={i} className="service-row fade-up" data-color={p.color}>
              <div className="service-row__lead">
                <div className="service-row__head">
                  <div className="service-row__icon">{p.letter}</div>
                  <h3 className="service-row__title">{p.title}</h3>
                </div>
                <p className="service-row__desc">{p.desc}</p>
              </div>
              <div className="service-row__example">
                <div className="case-card__tag">{p.ex.tag}</div>
                <div className="service-row__ex-title">{p.ex.title}</div>
                <div className={`case-card__metric outcomes__v outcomes__v--${p.color}`}>{p.ex.metric}</div>
                <div className="case-card__metric-lab">{p.ex.metricLabel}</div>
                <p className="service-row__ex-note">{p.ex.note}</p>
              </div>
            </div>
          ))}
        </div>
        <p className="cases__note fade-up">Placeholder figures shown. Real case detail provided under engagement.</p>
      </div>
    </section>
  );
}
window.ServicesSection = ServicesSection;