// Founder section (Our Story page). Drop a headshot at assets/team/joe-mk.jpg
// and it replaces the branded placeholder automatically.
function FounderPhoto() {
  const [ok, setOk] = React.useState(true);
  return (
    <div className="jmk-zoom" style={{ position: "relative", aspectRatio: "4/5", borderRadius: "var(--radius-md)", overflow: "hidden", background: "linear-gradient(140deg, #6d28d9, #db2777)" }}>
      {ok ? (
        <img src="assets/team/joe-mk.jpg" alt="Joe MK, Founder of JMK Studios" onError={() => setOk(false)}
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top center", display: "block" }} />
      ) : (
        <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, textAlign: "center", padding: 24 }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(56px,9vw,110px)", color: "#ffffff", lineHeight: 1 }}>Joe MK</span>
          <span style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "rgba(255,255,255,0.85)" }}>Photo coming soon</span>
        </div>
      )}
    </div>
  );
}

function Founder() {
  const { Reveal, useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 768px)");
  const eyebrow = { fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--color-secondary)", fontWeight: 600, marginBottom: 20 };

  return (
    <section id="founder" className="jmk-stage" style={{ background: "#ffffff", padding: "clamp(80px,12vw,140px) clamp(20px,5vw,64px)", overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.15fr", gap: isMobile ? 40 : 72, alignItems: "center", width: "100%" }}>
        <Reveal from={isMobile ? "up" : "left"} distance={48}>
          <FounderPhoto />
        </Reveal>
        <Reveal from={isMobile ? "up" : "right"} distance={48} delay={120}>
          <div>
            <div style={eyebrow}>The Founder</div>
            <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(44px,7vw,96px)", lineHeight: 0.98, margin: "0 0 8px", color: "var(--ink-900)" }}>Joe MK</h2>
            <div style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", color: "var(--ink-500)", marginBottom: 28 }}>Founder, JMK Studios</div>
            <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-700)", maxWidth: 560, margin: "0 0 20px" }}>
              JMK Studios started with a stubborn belief — that creativity and data don't have to fight. Joe founded the studio in 2015 to prove it: a place where bold ideas are measured, not just admired, and where every project is treated like a masterpiece in the making.
            </p>
            <p style={{ fontFamily: "var(--font-editorial)", fontStyle: "italic", fontSize: "clamp(22px,3vw,34px)", lineHeight: 1.25, color: "var(--ink-900)", maxWidth: 560, margin: 0 }}>
              &ldquo;I've never been interested in work that only looks good. I want work that moves people &mdash; and moves the numbers.&rdquo;
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Founder = Founder;