function Hero() {
  const { useScrollY, useMediaQuery, Magnetic } = window.JMK;
  const { Button } = window.JMKStudiosDesignSystem_f6070b;
  const y = useScrollY();
  const isMobile = useMediaQuery("(max-width: 768px)");
  const px = isMobile ? 0 : 1; // disable horizontal parallax on mobile so big type never clips
  const stackedWords = ["Think", "Outside", "The"];
  const speeds = [0.18, 0.32, 0.24];

  // "Box." paints on like it's being hand-drawn — once per session (first load),
  // started the moment the splash screen lifts so it's never missed.
  const drawBox = React.useMemo(() => {
    try { return !sessionStorage.getItem("jmk_box_drawn"); } catch (e) { return false; }
  }, []);
  const [playBox, setPlayBox] = React.useState(false);
  React.useEffect(() => {
    if (!drawBox) return;
    try { sessionStorage.setItem("jmk_box_drawn", "1"); } catch (e) {}
    if (window.__jmkSplashHidden) { setPlayBox(true); return; }
    const onReveal = () => setPlayBox(true);
    window.addEventListener("jmk:splash-hidden", onReveal);
    const fallback = window.setTimeout(() => setPlayBox(true), 4000);
    return () => { window.removeEventListener("jmk:splash-hidden", onReveal); window.clearTimeout(fallback); };
  }, [drawBox]);

  return (
    <section id="home" style={{ position: "relative", minHeight: "100vh", height: "100dvh", background: "#111111", overflow: "hidden", display: "flex", flexDirection: "column", justifyContent: "center", padding: "140px clamp(20px,5vw,64px) 80px" }}>
      {/* NYC skyline GIF backdrop — full-bleed cover on any device */}
      <img
        src="assets/hero-nyc.gif"
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center",
          transform: `translateY(${y * 0.18}px) scale(1.08)`, willChange: "transform",
        }}
      />
      {/* Readability overlay: darken + vignette so white type always reads */}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(17,17,17,0.62) 0%, rgba(17,17,17,0.45) 40%, rgba(17,17,17,0.78) 100%)" }} />
      <div style={{ position: "absolute", top: "18%", right: "8%", width: 340, height: 340, borderRadius: "50%", background: "var(--color-primary)", opacity: 0.22, filter: "blur(48px)", animation: "heroDrift1 16s ease-in-out infinite", transform: `translateY(${y * 0.15}px)` }} />
      <div style={{ position: "absolute", bottom: "10%", left: "6%", width: 220, height: 220, borderRadius: "50%", background: "var(--color-secondary)", opacity: 0.2, filter: "blur(48px)", animation: "heroDrift2 13s ease-in-out infinite", transform: `translateY(${-y * 0.1}px)` }} />

      <h1 aria-label="JMK Studios — Think Outside The Box." style={{ margin: 0, fontWeight: 500, position: "relative", zIndex: 2, display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: isMobile ? "flex-start" : "center", gap: isMobile ? 0 : 24 }}>
        <div>
          {stackedWords.map((w, i) => (
            <div key={w} className="jmk-rise" style={{ animationDelay: `${240 + i * 130}ms` }}>
              <div
                style={{
                  fontFamily: "var(--font-editorial)",
                  fontWeight: 500,
                  fontSize: "clamp(52px, 11vw, 160px)",
                  lineHeight: 0.92,
                  color: "var(--white)",
                  transform: `translateX(${-y * speeds[i] * px}px)`,
                  transition: "transform 60ms linear",
                  whiteSpace: "nowrap",
                }}
              >
                {w}
              </div>
            </div>
          ))}
        </div>
        <div
          className={drawBox ? "jmk-draw-on" : "jmk-rise"}
          style={drawBox
            ? { animationPlayState: playBox ? "running" : "paused" }
            : { animationDelay: "640ms" }}
        >
          <div
            style={{
              fontFamily: "var(--font-hand)",
              fontWeight: 400,
              fontSize: "clamp(64px, 14vw, 210px)",
              lineHeight: 1,
              color: "var(--color-primary)",
              transform: `translateX(${y * 0.3 * px}px) rotate(-4deg)`,
              transformOrigin: "center",
              transition: "transform 60ms linear",
              whiteSpace: "nowrap",
              flexShrink: 0,
            }}
          >
            Box.
          </div>
        </div>
      </h1>

      <div className="jmk-rise" style={{ position: "relative", zIndex: 2, marginTop: 56, animationDelay: "820ms", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 32, flexWrap: "wrap" }}>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-lg)", color: "rgba(255,255,255,0.72)", maxWidth: 460, margin: 0 }}>
          An independent creative, strategy and digital studio. We blend art with data — creating work that resonates, not just reaches.
        </p>
        <Magnetic strength={0.5}>
          <a href="#contact-us" data-cursor="link" style={{ textDecoration: "none" }}>
            <Button variant="primary" size="lg">Let's Create Magic&hellip;</Button>
          </a>
        </Magnetic>
      </div>

      <div style={{ position: "absolute", bottom: 32, left: "50%", transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
        <span style={{
          display: "block", width: 14, height: 14,
          borderRight: "2px solid rgba(255,255,255,0.6)", borderBottom: "2px solid rgba(255,255,255,0.6)",
          transform: "rotate(45deg)",
          animation: "heroArrowBounce 1.8s ease-in-out infinite",
        }} />
      </div>
    </section>
  );
}
window.JMK = window.JMK || {};
window.JMK.Hero = Hero;