// Founders, Heath Rutledge-Jukes & William Kelly
function FoundersSection() {
  const founders = [
    {
      name: "Heath Rutledge-Jukes",
      role: "Co-founder",
      bio: "Technical Co-Founder of King of the Curve, a medical education software company building adaptive and gamified tools for high-stakes exam preparation. MD candidate at Washington University School of Medicine. Works across product, mobile, content, and clinical education, combining medical training with hands-on startup execution.",
      tone: "pink",
      links: [
        { label: "LinkedIn", href: "https://linkedin.com/in/heath-rutledge-jukes-11a02b187" },
        { label: "heathrutledgejukes.com", href: "https://www.heathrutledgejukes.com" },
      ],
    },
    {
      name: "William Kelly",
      role: "Co-founder",
      bio: "Co-Founder of King of the Curve, where he leads finance, operations, logistics, growth strategy, and digital marketing. Background as a forensic accountant in financial services, investigations, litigation support, and risk assessment, paired with a Master's in Accounting from Cornell University.",
      tone: "blue",
      links: [],
    },
  ];
  return (
    <section className="section founders" id="founders">
      <div className="section__bg">
        <div className="orb" style={{ top:0, right:"25%", width:288, height:288, background:"hsl(var(--brand-orange) / 0.08)" }} />
        <div className="orb" style={{ bottom:0, left:"25%", width:256, height:256, background:"hsl(var(--brand-blue) / 0.08)" }} />
      </div>
      <div className="section__inner">
        <div className="section__head fade-up">
          <div className="tag-pill tag-pill--gold">Founders</div>
          <h2 className="section__title">A small firm. The founders do the work.</h2>
          <p className="section__lede">When you engage LearnLytx, you work directly with us, not a delivery team you've never met. That's the point of a boutique practice.</p>
          <div style={{ marginTop: 18 }}>
            <a href="/founders" className="ll-btn ll-btn--hero ll-btn--lg">Meet the founders <span className="arr">→</span></a>
          </div>
        </div>
        <div className="founders__grid stagger">
          {founders.map((f, i) => (
            <div key={i} className="founder-card fade-up" data-tone={f.tone}>
              <div className="founder-card__photo" aria-label={`Photo of ${f.name}`}>
                <span className="founder-card__initials">
                  {f.name.split(" ").map(n => n[0]).slice(0, 2).join("")}
                </span>
                <span className="founder-card__placeholder">Photo</span>
              </div>
              <div className="founder-card__body">
                <div className="founder-card__role">{f.role}</div>
                <h3 className="founder-card__name">{f.name}</h3>
                <p className="founder-card__bio">{f.bio}</p>
                {f.links && f.links.length > 0 && (
                  <div className="founder-card__links">
                    {f.links.map((l, j) => (
                      <a key={j} className="founder-card__link" href={l.href} target="_blank" rel="noopener noreferrer">
                        {l.label} <span aria-hidden="true">↗</span>
                      </a>
                    ))}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FoundersSection = FoundersSection;