// Success stories / notable work
function SuccessStoriesSection() {
  const stories = [
    {
      name: "King of the Curve",
      tag: "Flagship product",
      role: "Co-founded and built",
      desc: "Gamified, adaptive learning platform now used by 500K+ students. The proof-of-concept for our approach to learning science, AI, and measurement at scale.",
      stats: [
        { v: "500K+", lab: "Students" },
        { v: "4.7★", lab: "App rating" },
        { v: "91%", lab: "Outcome accuracy" },
      ],
      logo: "assets/kotc-logo.webp",
      tone: "pink",
      link: "https://kingofthecurve.org",
    },
    {
      name: "Noteflix",
      tag: "Learning product advisory",
      role: "Strategy & pedagogy",
      desc: "Advised the team on learning model, content structure, and engagement design, turning a content idea into a structured learning product.",
      stats: [
        { v: "Pedagogy", lab: "Design partner" },
        { v: "0 → 1", lab: "Product strategy" },
      ],
      tone: "blue",
    },
    {
      name: "Tiber Health",
      tag: "Med-ed engagement",
      role: "Admin panel & analytics",
      desc: "Designed the institutional admin panel (student progress, cohort analytics, and intervention workflows) for a medical-education platform serving health-sciences programs.",
      stats: [
        { v: "Cohort", lab: "Analytics" },
        { v: "Admin", lab: "Workflow design" },
      ],
      tone: "teal",
    },
  ];
  return (
    <section className="section work" id="work">
      <div className="section__bg">
        <div className="orb" style={{ top:0, right:"10%", width:340, height:340, background:"hsl(var(--brand-pink) / 0.07)" }} />
        <div className="orb" style={{ bottom:0, left:"15%", width:280, height:280, background:"hsl(var(--brand-blue) / 0.07)" }} />
      </div>
      <div className="section__inner">
        <div className="section__head fade-up">
          <div className="tag-pill tag-pill--gold">Success Stories</div>
          <h2 className="section__title">Products we've built, programs we've shaped.</h2>
          <p className="section__lede">A few of the engagements that show how we work, from co-founding learning products to designing institutional tooling.</p>
        </div>
        <div className="work__grid stagger">
          {stories.map((s, i) => (
            <article key={i} className="story-card fade-up" data-tone={s.tone}>
              <div className="story-card__head">
                <div className="story-card__logo" aria-hidden="true">
                  {s.logo
                    ? <img src={s.logo} alt={`${s.name} logo`} />
                    : <span className="story-card__monogram">{s.name.split(" ").map(w => w[0]).join("").slice(0, 2)}</span>}
                </div>
                <div className="story-card__heading">
                  <div className="story-card__tag">{s.tag}</div>
                  <h3 className="story-card__name">{s.name}</h3>
                  <div className="story-card__role">{s.role}</div>
                </div>
              </div>
              <p className="story-card__desc">{s.desc}</p>
              <div className="story-card__stats">
                {s.stats.map((st, j) => (
                  <div key={j} className="story-card__stat">
                    <div className="story-card__stat-v">{st.v}</div>
                    <div className="story-card__stat-lab">{st.lab}</div>
                  </div>
                ))}
              </div>
              {s.link && (
                <a href={s.link} target="_blank" rel="noopener noreferrer" className="story-card__link">
                  Visit {s.name} <span className="arr">→</span>
                </a>
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SuccessStoriesSection = SuccessStoriesSection;