function Founders() {
  // Three founders — one card each, with space for a real portrait.
  const founders = [
    {
      name: "Josiah Stendel",
      role: "CEO",
      bio: <>Built a viral media firm to 1B+ organic views. Creative Strategy at 5&amp;2 Studios (<em>The Chosen</em>).</>,
      photo: "assets/founder-josiah.jpg",
      hasPhoto: true,
      initials: "JS",
      tilt: -1.5,
    },
    {
      name: "Luke Thompson",
      role: "COO",
      bio: <>Built ActionVFX (<em>The Avengers</em>, <em>Stranger Things</em>, <em>The Mandalorian</em>) into a global powerhouse serving major studios.</>,
      photo: "assets/founder-luke.jpg",
      hasPhoto: true,
      initials: "LT",
      tilt: 1.2,
    },
    {
      name: "Jacob Windle",
      role: "CTO",
      bio: "Ex-Amazon engineer with 11+ years of early-stage product building and deep AI/ML expertise.",
      photo: "assets/founder-jacob-v2.jpg",
      hasPhoto: true,
      initials: "JW",
      tilt: -0.8,
    },
  ];

  return (
    <section className="section founders-section" id="team" style={{padding: '50px 0px 80px'}}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow-row"><i className="dot"></i>Founders</span>
          <h2>This isn't our first production.</h2>
        </div>

        <div className="founders-grid reveal">
          {founders.map((f, i) => (
            <figure key={i} className="founder-card" style={{'--tilt': `${f.tilt}deg`, '--role-label': `"${f.role}"`}}>
              <div className="founder-portrait">
                {f.hasPhoto ? (
                  <img src={f.photo} alt={f.name} />
                ) : (
                  <span className="founder-portrait-fallback" aria-hidden="true">
                    <span className="founder-portrait-initials">{f.initials}</span>
                    <span className="founder-portrait-label">portrait</span>
                  </span>
                )}
                <span className="founders-tape tape" />
              </div>
              <figcaption className="founder-meta">
                <div className="founder-name-row">
                  <span className="founder-name">{f.name}</span>
                  <span className="founder-role">{f.role}</span>
                </div>
                <p className="founder-bio">{f.bio}</p>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Founders = Founders;