// =====================================================
// Mobile homepage — entirely separate from desktop.
// Vertical snap-scroll panes, bottom tab bar,
// fullscreen trailer player.
// =====================================================

const SHOWREEL_ID = "-gEu0Jbjp-4";

// ---------- shared bits ----------
function useIsMobile() {
  const [m, setM] = React.useState(
    typeof window !== "undefined" && window.matchMedia("(max-width: 767px)").matches
  );
  React.useEffect(() => {
    const mql = window.matchMedia("(max-width: 767px)");
    const handler = (e) => setM(e.matches);
    if (mql.addEventListener) mql.addEventListener("change", handler);
    else mql.addListener(handler);
    return () => {
      if (mql.removeEventListener) mql.removeEventListener("change", handler);
      else mql.removeListener(handler);
    };
  }, []);
  return m;
}
window.useIsMobile = useIsMobile;

// Lock body scroll while a fullscreen overlay is open
function useBodyLock(active) {
  React.useEffect(() => {
    if (!active) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [active]);
}

// ---------- Wordmark mini ----------
function MobileWordmark() {
  return (
    <div className="mono" style={{
      fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
      color: "#fff", display: "flex", alignItems: "center", gap: 8,
    }}>
      <span style={{
        width: 6, height: 6, background: "#fff", borderRadius: 0,
        transform: "rotate(45deg)",
      }}/>
      <span style={{ fontWeight: 600 }}>Skymotion</span>
    </div>
  );
}

// =====================================================
// Fullscreen trailer player
// =====================================================
function MobileTrailer({ film, onClose }) {
  useBodyLock(!!film);
  const [drag, setDrag] = React.useState(0);
  const startY = React.useRef(null);

  React.useEffect(() => {
    if (!film) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [film, onClose]);

  if (!film) return null;

  const onTouchStart = (e) => { startY.current = e.touches[0].clientY; setDrag(0); };
  const onTouchMove = (e) => {
    if (startY.current == null) return;
    const dy = e.touches[0].clientY - startY.current;
    if (dy > 0) setDrag(dy);
  };
  const onTouchEnd = () => {
    if (drag > 110) onClose();
    else setDrag(0);
    startY.current = null;
  };

  // Resolve URL from either {kind,id} (CREDITS shape) or {trailer} (FILMS shape)
  let url = null;
  if (film.kind === "youtube" && film.id) {
    url = `https://www.youtube-nocookie.com/embed/${film.id}?autoplay=1&playsinline=1&rel=0&modestbranding=1`;
  } else if (film.kind === "vimeo" && film.id) {
    url = `https://player.vimeo.com/video/${film.id}?autoplay=1&autopause=0&playsinline=1`;
  } else if (film.trailer) {
    const sep = film.trailer.includes("?") ? "&" : "?";
    url = `${film.trailer}${sep}autoplay=1&playsinline=1&rel=0&modestbranding=1`;
  }

  return (
    <div
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
      style={{
        position: "fixed", inset: 0, zIndex: 9999,
        background: "#000",
        transform: `translateY(${drag}px)`,
        opacity: 1 - Math.min(drag / 400, 0.6),
        transition: startY.current == null ? "transform 240ms ease, opacity 240ms ease" : "none",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}
    >
      {/* close */}
      <button
        onClick={onClose}
        aria-label="Close"
        style={{
          position: "absolute",
          top: "calc(env(safe-area-inset-top, 0px) + 14px)",
          right: 14,
          width: 44, height: 44, borderRadius: 999,
          background: "rgba(0,0,0,0.55)",
          border: "1px solid rgba(255,255,255,0.18)",
          color: "#fff", display: "grid", placeItems: "center",
          zIndex: 2, backdropFilter: "blur(8px)",
          WebkitBackdropFilter: "blur(8px)",
        }}
      >
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
          <path d="M3 3l12 12M15 3L3 15" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      </button>

      {/* hint */}
      <div className="mono" style={{
        position: "absolute",
        top: "calc(env(safe-area-inset-top, 0px) + 22px)",
        left: 18,
        fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
        color: "rgba(255,255,255,0.55)",
      }}>
        Swipe down to close
      </div>

      {url ? (
        <iframe
          src={url}
          allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
          referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
          frameBorder="0"
          style={{ width: "100vw", height: "100vh", border: 0 }}
          title={film.title}
        />
      ) : (
        <div style={{ color: "#666", fontSize: 12 }} className="mono">No trailer</div>
      )}

      {/* title strip */}
      <div style={{
        position: "absolute", left: 0, right: 0,
        bottom: "calc(env(safe-area-inset-bottom, 0px) + 16px)",
        padding: "0 22px", color: "#fff",
        textShadow: "0 1px 8px rgba(0,0,0,0.6)",
      }}>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.6)", marginBottom: 6,
        }}>{film.year} · {film.category || "Featured"}</div>
        <div className="serif" style={{ fontSize: 28, lineHeight: 1.05, fontStyle: "italic" }}>
          {film.title}
        </div>
      </div>
    </div>
  );
}

// =====================================================
// Pane 1 — Hero (fullscreen showreel)
// =====================================================
function MHero({ paneRef }) {
  // Muted autoplay is allowed on mobile too — start playing immediately.
  const src = `https://www.youtube-nocookie.com/embed/${SHOWREEL_ID}?autoplay=1&mute=1&playsinline=1&rel=0&controls=0&modestbranding=1&loop=1&playlist=${SHOWREEL_ID}`;

  return (
    <section
      ref={paneRef}
      data-pane="home"
      style={{
        scrollSnapAlign: "start",
        height: "100dvh",
        width: "100vw",
        position: "relative",
        background: "#000",
        overflow: "hidden",
      }}
    >
      {/* Video — 16:9 scaled to cover 9:16 */}
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
        pointerEvents: "none",
      }}>
        <div style={{
          width: "100vw",
          aspectRatio: "16 / 9",
          transform: "scale(2)",
          transformOrigin: "center center",
        }}>
          <iframe
            src={src}
            allow="autoplay; encrypted-media; picture-in-picture"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen
            frameBorder="0"
            style={{
              width: "100%", height: "100%", border: 0,
              pointerEvents: "none",
            }}
            title="Showreel"
          />
        </div>
      </div>

      {/* dark vignette */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background:
          "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 100%)",
      }}/>

      {/* Top wordmark */}
      <div style={{
        position: "absolute",
        top: "calc(env(safe-area-inset-top, 0px) + 16px)",
        left: 18, right: 18,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        zIndex: 2,
      }}>
        <MobileWordmark/>
        <div className="mono" style={{
          fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.55)",
        }}>EST. 2009</div>
      </div>

      {/* Center play button removed — video autoplays muted on load. */}

      {/* Bottom strip */}
      <div style={{
        position: "absolute",
        bottom: "calc(56px + env(safe-area-inset-bottom, 0px) + 24px)",
        left: 0, right: 0,
        display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
        zIndex: 2,
      }}>
        <div className="mono" style={{
          fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase",
          color: "#fff",
        }}>
          Aerial Cinematography
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
          <div className="mono" style={{
            fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase",
            color: "rgba(255,255,255,0.5)",
          }}>Scroll</div>
          <svg width="10" height="14" viewBox="0 0 10 14" fill="none" className="cue-line">
            <path d="M5 1V13M1 9L5 13L9 9" stroke="rgba(255,255,255,0.7)" strokeWidth="1"/>
          </svg>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Pane 2 — Equipment (3 stacked tiles, swipe horizontal)
// =====================================================
function MEquipment({ paneRef, lang }) {
  const items = (window.EQUIPMENT || []).slice(0, 3);
  const trackRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  const onScroll = () => {
    const el = trackRef.current; if (!el) return;
    const i = Math.round(el.scrollLeft / el.clientWidth);
    if (i !== active) setActive(i);
  };

  return (
    <section
      ref={paneRef}
      data-pane="equipment"
      style={{
        scrollSnapAlign: "start",
        height: "100dvh", width: "100vw",
        background: "#000", position: "relative",
        display: "flex", flexDirection: "column",
        paddingTop: "calc(env(safe-area-inset-top, 0px) + 56px)",
        paddingBottom: "calc(56px + env(safe-area-inset-bottom, 0px) + 8px)",
      }}
    >
      <div style={{ padding: "0 18px 18px" }}>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
          color: "var(--muted)",
        }}>02 — {lang === "en" ? "What we fly" : "Materiaal"}</div>
        <div className="serif" style={{
          fontSize: 32, lineHeight: 1.0, fontStyle: "italic",
          marginTop: 8, color: "#fff",
        }}>{lang === "en" ? "The hangar." : "De hangar."}</div>
      </div>

      <div
        ref={trackRef}
        onScroll={onScroll}
        style={{
          flex: 1, minHeight: 0,
          display: "flex", overflowX: "auto", overflowY: "hidden",
          scrollSnapType: "x mandatory",
          WebkitOverflowScrolling: "touch",
          scrollbarWidth: "none",
        }}
      >
        <style>{`section[data-pane="equipment"] ::-webkit-scrollbar{display:none}`}</style>
        {items.map((it, i) => {
          const url = it.slug ? `services/${it.slug}.html` : null;
          const Tag = url ? "a" : "div";
          return (
          <Tag key={it.code} href={url || undefined} style={{
            scrollSnapAlign: "center",
            flex: "0 0 100%",
            padding: "0 18px",
            display: "flex", flexDirection: "column",
            textDecoration: "none", color: "inherit",
          }}>
            <div className="striped-strong" style={{
              flex: 1,
              borderRadius: 18,
              border: "1px solid var(--hair)",
              position: "relative",
              overflow: "hidden",
              backgroundImage: it.img ? `url(${it.img})` : undefined,
              backgroundSize: "cover", backgroundPosition: "center",
            }}>
              <div style={{
                position: "absolute", inset: 0,
                background: "linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%)",
              }}/>
              <div style={{
                position: "absolute", top: 14, left: 14,
                fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase",
                color: "rgba(255,255,255,0.7)",
              }} className="mono">{it.code} · {it.cat}</div>
              <div style={{
                position: "absolute", bottom: 18, left: 18, right: 18,
                color: "#fff",
              }}>
                <div className="serif" style={{
                  fontSize: 26, lineHeight: 1.05, fontStyle: "italic",
                }}>{it.name}</div>
                <div className="mono" style={{
                  fontSize: 11, color: "rgba(255,255,255,0.78)",
                  marginTop: 8, letterSpacing: "0.04em",
                }}>{it.spec}</div>
                {url && (
                  <div className="mono" style={{
                    marginTop: 14, paddingTop: 10,
                    borderTop: "1px solid rgba(255,255,255,0.2)",
                    fontSize: 10, letterSpacing: "0.22em",
                    color: "#fff", textTransform: "uppercase",
                  }}>READ MORE →</div>
                )}
              </div>
            </div>
          </Tag>
          );
        })}
      </div>

      {/* dots */}
      <div style={{
        display: "flex", justifyContent: "center", gap: 6, paddingTop: 14,
      }}>
        {items.map((_, i) => (
          <span key={i} style={{
            width: i === active ? 18 : 6, height: 4, borderRadius: 2,
            background: i === active ? "#fff" : "rgba(255,255,255,0.25)",
            transition: "all 240ms ease",
          }}/>
        ))}
      </div>
    </section>
  );
}

// =====================================================
// Pane 3 — Featured (full-bleed posters, horizontal swipe)
// =====================================================
function MFeatured({ paneRef, lang, onOpen }) {
  const films = (window.FILMS || []);
  const trackRef = React.useRef(null);
  const [active, setActive] = React.useState(0);

  const onScroll = () => {
    const el = trackRef.current; if (!el) return;
    const i = Math.round(el.scrollLeft / el.clientWidth);
    if (i !== active) setActive(i);
  };

  return (
    <section
      ref={paneRef}
      data-pane="work"
      style={{
        scrollSnapAlign: "start",
        height: "100dvh", width: "100vw",
        background: "#000", position: "relative",
        display: "flex", flexDirection: "column",
        paddingTop: "calc(env(safe-area-inset-top, 0px) + 56px)",
        paddingBottom: "calc(56px + env(safe-area-inset-bottom, 0px) + 8px)",
      }}
    >
      <div style={{ padding: "0 18px 14px",
        display: "flex", alignItems: "baseline", justifyContent: "space-between",
      }}>
        <div>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
            color: "var(--muted)",
          }}>03 — {lang === "en" ? "Featured Work" : "Geselecteerd Werk"}</div>
          <div className="serif" style={{
            fontSize: 32, lineHeight: 1.0, fontStyle: "italic",
            marginTop: 8, color: "#fff",
          }}>{lang === "en" ? "Selected work." : "Werk."}</div>
        </div>
        <div className="mono" style={{
          fontSize: 11, color: "rgba(255,255,255,0.55)", letterSpacing: "0.08em",
        }}>
          {String(active + 1).padStart(2, "0")} / {String(films.length).padStart(2, "0")}
        </div>
      </div>

      <div
        ref={trackRef}
        onScroll={onScroll}
        style={{
          flex: 1, minHeight: 0,
          display: "flex", overflowX: "auto", overflowY: "hidden",
          scrollSnapType: "x mandatory",
          WebkitOverflowScrolling: "touch",
          scrollbarWidth: "none",
        }}
      >
        <style>{`section[data-pane="work"] ::-webkit-scrollbar{display:none}`}</style>
        {films.map((f, i) => {
          const poster = f.image || (window.posterFromTrailer ? window.posterFromTrailer(f.trailer) : null);
          return (
            <button
              key={f.title}
              onClick={() => onOpen(f)}
              style={{
                scrollSnapAlign: "center",
                flex: "0 0 100%",
                padding: "0 18px",
                background: "none", border: 0, color: "#fff",
                textAlign: "left",
                display: "flex", flexDirection: "column",
              }}
            >
              <div className="striped-strong" style={{
                flex: 1,
                borderRadius: 18,
                border: "1px solid var(--hair)",
                position: "relative",
                overflow: "hidden",
                backgroundImage: poster ? `url(${poster})` : undefined,
                backgroundSize: "cover", backgroundPosition: "center",
              }}>
                <div style={{
                  position: "absolute", inset: 0,
                  background: "linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.85) 100%)",
                }}/>
                {/* play badge */}
                <div style={{
                  position: "absolute", top: 14, right: 14,
                  width: 40, height: 40, borderRadius: 999,
                  background: "rgba(0,0,0,0.45)",
                  border: "1px solid rgba(255,255,255,0.35)",
                  display: "grid", placeItems: "center",
                  backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)",
                }}>
                  <svg width="11" height="13" viewBox="0 0 11 13" fill="none">
                    <path d="M1 1L10 6.5L1 12V1Z" fill="#fff"/>
                  </svg>
                </div>

                <div style={{
                  position: "absolute", top: 14, left: 14,
                  fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase",
                  color: "rgba(255,255,255,0.78)",
                }} className="mono">{f.year} · {f.category || "Featured"}</div>

                <div style={{
                  position: "absolute", bottom: 20, left: 20, right: 20,
                }}>
                  <div className="serif" style={{
                    fontSize: 30, lineHeight: 1.04, fontStyle: "italic",
                  }}>{f.title}</div>
                  {f.role && (
                    <div className="mono" style={{
                      fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase",
                      color: "rgba(255,255,255,0.6)", marginTop: 8,
                    }}>{f.role}</div>
                  )}
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* dots */}
      <div style={{
        display: "flex", justifyContent: "center", gap: 6, paddingTop: 14,
      }}>
        {films.slice(0, Math.min(films.length, 12)).map((_, i) => (
          <span key={i} style={{
            width: i === active ? 18 : 5, height: 4, borderRadius: 2,
            background: i === active ? "#fff" : "rgba(255,255,255,0.22)",
            transition: "all 240ms ease",
          }}/>
        ))}
      </div>

      {/* see all */}
      <div style={{ padding: "12px 18px 0", textAlign: "center" }}>
        <a href="credits.html" className="mono" style={{
          fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.7)",
          borderBottom: "1px solid rgba(255,255,255,0.3)", paddingBottom: 2,
        }}>
          {lang === "en" ? "See all credits →" : "Alle credits →"}
        </a>
      </div>
    </section>
  );
}

// =====================================================
// Pane 4 — About
// =====================================================
function MAbout({ paneRef, lang }) {
  const c = window.COPY[lang].about;
  return (
    <section
      ref={paneRef}
      data-pane="about"
      style={{
        scrollSnapAlign: "start",
        height: "100dvh", width: "100vw",
        background: "#000", position: "relative",
        display: "flex", flexDirection: "column",
        paddingTop: "calc(env(safe-area-inset-top, 0px) + 56px)",
        paddingBottom: "calc(56px + env(safe-area-inset-bottom, 0px) + 24px)",
      }}
    >
      <div style={{ padding: "0 22px 14px" }}>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
          color: "var(--muted)",
        }}>{c.kicker}</div>
      </div>

      {/* portrait BTS */}
      <div className="striped" style={{
        margin: "0 22px",
        height: "32%",
        borderRadius: 16,
        border: "1px solid var(--hair)",
        position: "relative",
        overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(80% 60% at 50% 30%, rgba(255,255,255,0.06), transparent)",
        }}/>
        <div className="mono" style={{
          position: "absolute", bottom: 12, left: 14,
          fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.55)",
        }}>BTS · Hangar</div>
      </div>

      <div style={{ padding: "22px 22px 0" }}>
        <div className="serif" style={{
          fontSize: 30, lineHeight: 1.05, fontStyle: "italic", color: "#fff",
        }}>
          {c.title.join(" ")}
        </div>
        <div style={{
          marginTop: 18, color: "var(--muted)", fontSize: 14, lineHeight: 1.55,
          maxWidth: 480,
        }}>
          {c.body_2}
        </div>

        {/* stats */}
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
          gap: 14, marginTop: 22,
          borderTop: "1px solid var(--hair)", paddingTop: 16,
        }}>
          {[c.stat_a, c.stat_b, c.stat_c].map((s, i) => (
            <div key={i}>
              <div className="serif" style={{ fontSize: 22, color: "#fff", lineHeight: 1.0 }}>{s[0]}</div>
              <div className="mono" style={{
                fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase",
                color: "var(--muted-2)", marginTop: 6,
              }}>{s[1]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Pane 5 — Contact
// =====================================================
function MContact({ paneRef, lang }) {
  const c = window.COPY[lang].contact;
  return (
    <section
      ref={paneRef}
      data-pane="contact"
      style={{
        scrollSnapAlign: "start",
        height: "100dvh", width: "100vw",
        background: "#000", position: "relative",
        display: "flex", flexDirection: "column",
        paddingTop: "calc(env(safe-area-inset-top, 0px) + 56px)",
        paddingBottom: "calc(56px + env(safe-area-inset-bottom, 0px) + 24px)",
      }}
    >
      <div style={{ padding: "0 22px 14px" }}>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
          color: "var(--muted)",
        }}>{c.kicker}</div>
        <div className="serif" style={{
          fontSize: 36, lineHeight: 1.0, fontStyle: "italic",
          marginTop: 10, color: "#fff",
        }}>{c.title.join(" ")}</div>
      </div>

      <div style={{ padding: "0 22px", color: "var(--muted)", fontSize: 14, lineHeight: 1.55 }}>
        {c.lead}
      </div>

      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", padding: "20px 0" }}>
        <a href={`mailto:${c.mail}`} style={{
          display: "block", padding: "22px 22px",
          borderTop: "1px solid var(--hair)",
          borderBottom: "1px solid var(--hair)",
        }}>
          <div className="mono" style={{
            fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase",
            color: "var(--muted-2)",
          }}>{c.mail_label}</div>
          <div className="serif" style={{
            fontSize: 26, fontStyle: "italic", color: "#fff", marginTop: 6,
          }}>{c.mail}</div>
        </a>
        <a href={`tel:${c.phone.replace(/\s/g,'')}`} style={{
          display: "block", padding: "22px 22px",
          borderBottom: "1px solid var(--hair)",
        }}>
          <div className="mono" style={{
            fontSize: 9, letterSpacing: "0.22em", textTransform: "uppercase",
            color: "var(--muted-2)",
          }}>{c.phone_label}</div>
          <div className="serif" style={{
            fontSize: 26, fontStyle: "italic", color: "#fff", marginTop: 6,
          }}>{c.phone}</div>
        </a>
      </div>

      <div style={{ padding: "0 22px",
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14,
        borderTop: "1px solid var(--hair)", paddingTop: 16,
      }}>
        <div>
          <div className="mono" style={{
            fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--muted-2)",
          }}>{c.where_label}</div>
          <div style={{ color: "#fff", fontSize: 13, marginTop: 6 }}>{c.where}</div>
        </div>
        <div>
          <div className="mono" style={{
            fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--muted-2)",
          }}>{c.hours_label}</div>
          <div style={{ color: "#fff", fontSize: 13, marginTop: 6 }}>{c.hours}</div>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// Bottom tab bar
// =====================================================
function MTabBar({ active, onTab, lang, setLang }) {
  const tabs = [
    { id: "home", label: lang === "en" ? "Home" : "Home", icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M3 9L10 3L17 9V16C17 16.5523 16.5523 17 16 17H12V12H8V17H4C3.44772 17 3 16.5523 3 16V9Z"
              stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    )},
    { id: "work", label: lang === "en" ? "Work" : "Werk", icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <rect x="3" y="5" width="14" height="11" rx="1" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M7 5V3.5C7 3.22 7.22 3 7.5 3H12.5C12.78 3 13 3.22 13 3.5V5" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    )},
    { id: "equipment", label: lang === "en" ? "Gear" : "Materiaal", icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <circle cx="10" cy="10" r="3" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M10 3V5M10 15V17M3 10H5M15 10H17M5 5L6.5 6.5M13.5 13.5L15 15M5 15L6.5 13.5M13.5 6.5L15 5"
              stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
      </svg>
    )},
    { id: "contact", label: lang === "en" ? "Contact" : "Contact", icon: (
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <rect x="3" y="4" width="14" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M3 6L10 11L17 6" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
      </svg>
    )},
  ];

  return (
    <nav style={{
      position: "fixed", left: 0, right: 0, bottom: 0,
      zIndex: 50,
      background: "rgba(0,0,0,0.82)",
      backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)",
      borderTop: "1px solid var(--hair)",
      paddingBottom: "env(safe-area-inset-bottom, 0px)",
    }}>
      <div style={{
        height: 56,
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr) 56px",
        alignItems: "stretch",
      }}>
        {tabs.map(t => (
          <button
            key={t.id}
            onClick={() => onTab(t.id)}
            style={{
              display: "flex", flexDirection: "column",
              alignItems: "center", justifyContent: "center", gap: 3,
              color: active === t.id ? "#fff" : "rgba(255,255,255,0.5)",
              position: "relative",
            }}
          >
            {t.icon}
            <span className="mono" style={{
              fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase",
            }}>{t.label}</span>
            {active === t.id && (
              <span style={{
                position: "absolute", bottom: 6, width: 18, height: 1.5,
                background: "#fff",
              }}/>
            )}
          </button>
        ))}
        <button
          onClick={() => setLang(lang === "en" ? "nl" : "en")}
          aria-label="Toggle language"
          style={{
            display: "flex", flexDirection: "column",
            alignItems: "center", justifyContent: "center", gap: 3,
            color: "rgba(255,255,255,0.55)",
            borderLeft: "1px solid var(--hair)",
          }}
        >
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <circle cx="10" cy="10" r="7" stroke="currentColor" strokeWidth="1.4"/>
            <path d="M3 10H17M10 3C12 5 13 7.5 13 10C13 12.5 12 15 10 17C8 15 7 12.5 7 10C7 7.5 8 5 10 3Z"
                  stroke="currentColor" strokeWidth="1.4"/>
          </svg>
          <span className="mono" style={{
            fontSize: 9, letterSpacing: "0.16em", color: "#fff",
          }}>{lang.toUpperCase()}</span>
        </button>
      </div>
    </nav>
  );
}

// =====================================================
// MobileApp root
// =====================================================
function MobileApp() {
  const [lang, setLang] = React.useState("en");
  const [trailer, setTrailer] = React.useState(null);
  const [active, setActive] = React.useState("home");

  const scrollerRef = React.useRef(null);
  const refs = {
    home: React.useRef(null),
    equipment: React.useRef(null),
    work: React.useRef(null),
    about: React.useRef(null),
    contact: React.useRef(null),
  };

  // observe which pane is centered
  React.useEffect(() => {
    const root = scrollerRef.current;
    if (!root) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && e.intersectionRatio > 0.55) {
          const id = e.target.getAttribute("data-pane");
          if (id) setActive(id);
        }
      });
    }, { root, threshold: [0.55, 0.8] });
    Object.values(refs).forEach(r => { if (r.current) io.observe(r.current); });
    return () => io.disconnect();
    // eslint-disable-next-line
  }, []);

  const goTo = (id) => {
    const target = id === "equipment" ? refs.equipment.current
                 : id === "work" ? refs.work.current
                 : id === "contact" ? refs.contact.current
                 : refs.home.current;
    if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <>
      <div
        ref={scrollerRef}
        style={{
          height: "100dvh",
          overflowY: "auto",
          overflowX: "hidden",
          scrollSnapType: "y mandatory",
          WebkitOverflowScrolling: "touch",
        }}
      >
        <MHero paneRef={refs.home}/>
        <MEquipment paneRef={refs.equipment} lang={lang}/>
        <MFeatured paneRef={refs.work} lang={lang} onOpen={setTrailer}/>
        <MAbout paneRef={refs.about} lang={lang}/>
        <MContact paneRef={refs.contact} lang={lang}/>
      </div>

      <MTabBar active={active} onTab={goTo} lang={lang} setLang={setLang}/>
      <MobileTrailer film={trailer} onClose={() => setTrailer(null)}/>
    </>
  );
}

window.MobileApp = MobileApp;