// Outcomes, case study cards
function OutcomesSection() {
  const cases = [
    {
      tag: "K–12 District",
      title: "Reading proficiency program redesign",
      metric: "+18%",
      metricLabel: "learning gains in 9 months",
      desc: "Rebuilt assessment and small-group instruction model across grades 3–5.",
      color: "pink",
    },
    {
      tag: "Higher Education",
      title: "First-year retention initiative",
      metric: "+11pts",
      metricLabel: "year-over-year retention",
      desc: "Diagnostic-driven advising redesign with measurable check-ins each semester.",
      color: "blue",
    },
    {
      tag: "Ed-tech",
      title: "Adaptive learning product strategy",
      metric: "30%",
      metricLabel: "faster time-to-proficiency",
      desc: "Pedagogical model and assessment framework for a Series-A learning company.",
      color: "teal",
    },
    {
      tag: "Foundation",
      title: "Grant program impact evaluation",
      metric: "4×",
      metricLabel: "improvement in measurable outcomes",
      desc: "Built the evaluation framework and reporting cadence for a multi-site grant.",
      color: "gold",
    },
  ];
  return (
    <section className="section outcomes outcomes--merged bg-soft-pink-blue" id="outcomes">
      <div className="section__inner">
        <div className="cases__divider fade-up">
          <span className="cases__divider-line" />
          <span className="cases__divider-label">Selected engagements</span>
          <span className="cases__divider-line" />
        </div>
        <div className="cases__grid stagger">
          {cases.map((c, i) => (
            <div key={i} className="case-card fade-up" data-color={c.color}>
              <div className="case-card__tag">{c.tag}</div>
              <h3 className="case-card__title">{c.title}</h3>
              <div className={`case-card__metric outcomes__v outcomes__v--${c.color}`}>{c.metric}</div>
              <div className="case-card__metric-lab">{c.metricLabel}</div>
              <p className="case-card__desc">{c.desc}</p>
            </div>
          ))}
        </div>
        <p className="cases__note fade-up">Placeholder figures shown. Real case detail provided under engagement.</p>
      </div>
    </section>
  );
}
window.OutcomesSection = OutcomesSection;