function Story() {
  const { Reveal, useParallax, useMediaQuery } = window.JMK;
  const isMobile = useMediaQuery("(max-width: 768px)");
  const [imgRef, imgY] = useParallax(0.16);

  const eyebrow = (color) => ({ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color, fontWeight: 600 });

  return (
    <section id="our-story" className="jmk-stage" style={{ background: "#ffffff", padding: "clamp(80px,12vw,140px) clamp(20px,5vw,64px)", overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr", gap: isMobile ? 40 : 64, alignItems: "center", marginBottom: isMobile ? 72 : 120 }}>
        <Reveal from={isMobile ? "up" : "left"} distance={48}>
          <div>
            <div style={{ ...eyebrow("var(--color-secondary)"), marginBottom: 20 }}>
              Our Story
            </div>
            <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(36px,5vw,64px)", lineHeight: 1.02, margin: "0 0 28px", color: "var(--ink-900)" }}>
              Our Vision
            </h2>
            <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-700)", maxWidth: 520, margin: "0 0 20px" }}>
              Since our inception in 2015, JMK Studios has been on a relentless journey, pushing the boundaries in the pursuit of harmonizing art and data to craft visually stunning masterpieces. Our unwavering vision is to inspire and empower our clients to 'Think Outside the Box,' unlocking the full spectrum of creative possibilities.
            </p>
            <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)", maxWidth: 520 }}>
              We're here to orchestrate magic through our distinctive blend of creativity and data-driven solutions. At JMK Studios, we don't just tell stories; we craft experiences that leave a lasting impact, making every project a masterpiece and every collaboration a transformative journey.
            </p>
          </div>
        </Reveal>
        <Reveal from={isMobile ? "up" : "right"} distance={48} delay={120}>
          <div ref={imgRef} style={{ position: "relative", aspectRatio: "4/5", overflow: "hidden", borderRadius: "var(--radius-md)" }}>
            <img src="assets/photography/photo-story-team.jpg" alt="JMK Studios on set" style={{
              position: "absolute", inset: "-12% -10%", width: "120%", height: "124%",
              objectFit: "cover",
              transform: `translateY(${imgY}px)`,
              willChange: "transform",
            }} />
          </div>
        </Reveal>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 40, borderTop: "1px solid var(--color-border)", paddingTop: isMobile ? 40 : 64 }}>
        <Reveal distance={44}>
          <div style={{ ...eyebrow("var(--color-primary)"), marginBottom: 16 }}>Our Mission</div>
          <h3 style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", margin: "0 0 16px", color: "var(--ink-900)" }}>Unlocking Creativity at Scale</h3>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)" }}>
            We believe creativity knows no bounds, and our mission is to unlock it on a grand scale — inspiring and guiding individuals and businesses to think outside the box, with the tools, expertise and vision to turn ideas into masterpieces.
          </p>
        </Reveal>
        <Reveal distance={44} delay={120}>
          <div style={{ ...eyebrow("var(--color-primary)"), marginBottom: 16 }}>Purpose</div>
          <h3 style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", margin: "0 0 16px", color: "var(--ink-900)" }}>Stories That Matter</h3>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)" }}>
            Beyond commercial services, our original projects and documentaries shine a light on overlooked issues and amplify voices that need to be heard — storytelling with the power to drive change.
          </p>
        </Reveal>
        <Reveal distance={44} delay={240}>
          <div style={{ ...eyebrow("var(--color-primary)"), marginBottom: 16 }}>Approach</div>
          <h3 style={{ fontFamily: "var(--font-editorial)", fontSize: "var(--text-2xl)", margin: "0 0 16px", color: "var(--ink-900)" }}>When Art Meets Science</h3>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)" }}>
            We reverse-engineer from the outcomes we seek — deconstructing goals and aligning them with data-driven strategy, so imaginative concepts deliver tangible results.
          </p>
        </Reveal>
      </div>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Story = Story;