// =====================================================
// HERO
// =====================================================
function Hero({ lang }) {
  const c = window.COPY[lang].hero;
  const [muted, setMuted] = React.useState(true);
  const iframeRef = React.useRef(null);

  // Send YouTube postMessage commands (mute/unmute).
  const sendYT = React.useCallback((func, args = []) => {
    const iframe = iframeRef.current;
    if (!iframe || !iframe.contentWindow) return;
    iframe.contentWindow.postMessage(JSON.stringify({ event: "command", func, args }), "*");
  }, []);

  const toggle = () => {
    setMuted((m) => {
      const next = !m;
      sendYT(next ? "mute" : "unMute");
      return next;
    });
  };

  // Subtle parallax for the foreground type
  const titleRef = React.useRef(null);
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        if (!titleRef.current) return;
        const y = Math.min(window.scrollY * 0.35, 240);
        titleRef.current.style.transform = `translate3d(0, ${y}px, 0)`;
        titleRef.current.style.opacity = String(Math.max(0, 1 - window.scrollY / 700));
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);

  const VIDEO_ID = "-gEu0Jbjp-4";
  // Muted autoplay is allowed by Chrome — video starts immediately on load.
  // loop=1 requires playlist=<videoid> to actually loop on YouTube.
  // allow="autoplay" on the iframe is required for modern browsers to honor autoplay.
  const src =
    `https://www.youtube-nocookie.com/embed/${VIDEO_ID}` +
    `?autoplay=1&mute=1&loop=1&playlist=${VIDEO_ID}` +
    `&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1` +
    `&iv_load_policy=3&disablekb=1&fs=0&enablejsapi=1`;

  return (
    <section style={{ position: "relative", height: "100vh", minHeight: 720, width: "100vw", overflow: "hidden", background: "#000" }}>
      {/* Poster — sits behind the iframe so something is visible while it loads */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        backgroundImage: `url("https://i.ytimg.com/vi/${VIDEO_ID}/maxresdefault.jpg")`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        filter: "saturate(0.85) contrast(1.05)",
      }} />

      {/* 16:9 cover-fit YouTube iframe — wrapped in breathing div */}
      <div className="hero-breath" style={{
        position: "absolute",
        top: "50%", left: "50%",
        width: "177.78vh",
        height: "100vh",
        minWidth: "100vw",
        minHeight: "56.25vw",
        pointerEvents: "none",
      }}>
        <iframe
          ref={iframeRef}
          id="heroVideo"
          src={src}
          title="Skymotion Showreel"
          frameBorder="0"
          referrerPolicy="strict-origin-when-cross-origin"
          allow="autoplay; encrypted-media; picture-in-picture"
          allowFullScreen
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            border: 0,
            pointerEvents: "none",
          }}
        />
      </div>

      {/* Vignettes */}
      <div style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(120% 80% at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%), " +
          "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 18%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.85) 100%)",
        pointerEvents: "none",
      }} />
      {/* Subtle film grain via repeating noise */}
      <div style={{
        position: "absolute", inset: 0,
        background:
          "repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px)",
        mixBlendMode: "overlay",
        pointerEvents: "none",
      }} />

      {/* Top hairline + frame ticks */}
      <div style={{ position: "absolute", top: 80, left: 32, right: 32, height: 1, background: "rgba(255,255,255,0.16)" }} />
      <div style={{ position: "absolute", bottom: 110, left: 32, right: 32, height: 1, background: "rgba(255,255,255,0.16)" }} />

      {/* Foreground type */}
      <div ref={titleRef} style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column", justifyContent: "center",
        padding: "0 48px",
        willChange: "transform, opacity",
      }}>
        <div className="container" style={{ width: "100%" }}>
          <div className="micro" style={{ marginBottom: 36, color: "rgba(255,255,255,0.78)" }}>{c.eyebrow}</div>
          <h1 data-hero-title="1" style={{
            margin: 0,
            fontFamily: "Inter Tight, sans-serif",
            fontWeight: 700,
            fontSize: "clamp(64px, 11vw, 200px)",
            letterSpacing: "-0.045em",
            lineHeight: 0.88,
            textTransform: "none",
          }}>
            <span style={{ display: "block" }} data-hero-line="1">{c.title[0]}</span>
            <span style={{ display: "block", fontStyle: "italic", fontFamily: "Instrument Serif, serif", fontWeight: 400, letterSpacing: "-0.02em" }} data-hero-line="1">{c.title[1]}</span>
            <span style={{ display: "block" }} data-hero-line="1">{c.title[2]}</span>
          </h1>
          <p className="hero-sub-fade" style={{
            marginTop: 36, marginBottom: 0,
            maxWidth: 620,
            color: "rgba(255,255,255,0.82)",
            fontSize: 18, lineHeight: 1.45, fontWeight: 300,
          }}>{c.sub}</p>
        </div>
      </div>

      {/* Bottom-left meta + sound toggle */}
      <div style={{
        position: "absolute", left: 32, bottom: 36,
        display: "flex", alignItems: "center", gap: 24,
        zIndex: 5,
      }}>
        <div className="micro" style={{ color: "rgba(255,255,255,0.7)" }}>
          <span style={{ display: "inline-block", width: 8, height: 8, background: "#ff3b30", borderRadius: "50%", marginRight: 10, verticalAlign: "middle" }} />
          REC · {c.reel}
        </div>
      </div>
      <div data-magnetic="1" style={{ position: "absolute", right: 32, bottom: 36, zIndex: 5 }}>
        <SoundToggle muted={muted} onToggle={toggle} onLabel={c.sound_on} offLabel={c.sound_off} />
      </div>

      <ScrollCue label={c.scroll} />
    </section>
  );
}

// =====================================================
// SERVICES — six tiles with hover-reveal
// =====================================================
function Services({ lang }) {
  const c = window.COPY[lang].services;
  return (
    <section id="services" style={{ position: "relative", background: "#000" }}>
      <SectionHead kicker={c.kicker} title={c.title} lead={c.lead} />
      <div className="container" style={{ paddingBottom: 160 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          borderTop: "1px solid var(--hair)",
          borderLeft: "1px solid var(--hair)",
        }}>
          {c.items.map((it, i) => <ServiceTile key={it.n} item={it} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function ServiceTile({ item, index }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      className="rv"
      style={{ transitionDelay: `${(index % 3) * 80}ms` }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div style={{
        position: "relative",
        borderRight: "1px solid var(--hair)",
        borderBottom: "1px solid var(--hair)",
        aspectRatio: "4/5",
        overflow: "hidden",
        background: "#070706",
      }}>
        {/* Still — uses real photo if present */}
        <div style={{
          position: "absolute", inset: 0,
          transform: hover ? "scale(1.04)" : "scale(1)",
          transition: "transform 1200ms cubic-bezier(.2,.6,.2,1), filter 800ms ease",
          filter: hover ? "brightness(0.95) saturate(0.85)" : "brightness(0.55) saturate(0.75)",
        }}>
          {item.img ? (
            <img
              src={item.img}
              alt={item.name}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
            />
          ) : (
            <ImagePlaceholder
              label={`${item.name} still`}
              code={`SVC / ${item.n}`}
              ratio="auto"
              strong
            />
          )}
        </div>
        {/* gradient floor */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%)",
          pointerEvents: "none",
        }} />
        {/* number top-left */}
        <div className="micro" style={{ position: "absolute", top: 16, left: 16, color: "rgba(255,255,255,0.7)" }}>
          {item.n} / 06
        </div>
        {/* category top-right */}
        <div className="micro" style={{ position: "absolute", top: 16, right: 16, color: "rgba(255,255,255,0.45)" }}>
          Platform
        </div>
        {/* name + line bottom */}
        <div style={{
          position: "absolute", bottom: 0, left: 0, right: 0,
          padding: "24px 22px",
          color: "#fff",
        }}>
          <div style={{
            fontFamily: "Inter Tight, sans-serif",
            fontSize: "clamp(28px, 2.4vw, 40px)",
            fontWeight: 600,
            letterSpacing: "-0.025em",
            lineHeight: 1,
          }}>{item.name}</div>
          <div style={{
            maxHeight: hover ? 80 : 0,
            opacity: hover ? 1 : 0,
            overflow: "hidden",
            transition: "max-height 700ms cubic-bezier(.2,.6,.2,1), opacity 500ms ease, margin-top 400ms ease",
            marginTop: hover ? 14 : 0,
            color: "var(--muted)",
            fontSize: 14, lineHeight: 1.45, fontWeight: 300,
            maxWidth: 360,
          }}>
            {item.line}
          </div>
        </div>
        {/* corner tick */}
        <span style={{
          position: "absolute", right: 16, bottom: 16,
          width: 22, height: 22,
          borderRight: "1px solid rgba(255,255,255,0.5)",
          borderBottom: "1px solid rgba(255,255,255,0.5)",
          opacity: hover ? 1 : 0.35,
          transition: "opacity 400ms ease",
        }} />
      </div>
    </div>
  );
}

// =====================================================
// FEATURED WORK — typography-driven credit cards + lightbox
// =====================================================
function FeaturedWork({ lang }) {
  const c = window.COPY[lang].work;
  const [open, setOpen] = React.useState(null); // film object or null

  // ESC to close
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(null); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open]);

  return (
    <section id="work" style={{ position: "relative", background: "#000" }}>
      <SectionHead kicker={c.kicker} title={c.title} lead={c.lead} />

      <div className="container" style={{ paddingBottom: 56 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 20,
        }}>
          {window.FILMS.map((f, i) => (
            <CreditCard key={f.title} film={f} index={i} onOpen={() => setOpen(f)} c={c} />
          ))}
        </div>
      </div>

      {/* CTA */}
      <div className="container" style={{ paddingBottom: 160 }}>
        <a href="credits.html" className="micro rv" style={{
          display: "inline-flex", alignItems: "center", gap: 14,
          borderBottom: "1px solid var(--hair-strong)", paddingBottom: 6,
        }}>
          {c.cta} <span aria-hidden="true">→</span>
        </a>
      </div>

      {open && <TrailerLightbox film={open} onClose={() => setOpen(null)} c={c} />}
    </section>
  );
}

function CreditCard({ film, index, onOpen, c }) {
  const [hover, setHover] = React.useState(false);
  const hasTrailer = !!film.trailer;
  // Prefer explicit film.image, fall back to derived poster from trailer thumbnail
  const poster = film.image || (window.posterFromTrailer ? window.posterFromTrailer(film.trailer) : null);
  // Parse trailer URL into {kind, id} for data attributes
  const trailerKind = hasTrailer
    ? (film.trailer.includes("vimeo") ? "vimeo" : "youtube")
    : "";
  const trailerId = hasTrailer
    ? ((film.trailer.match(/embed\/([\w-]+)/) || film.trailer.match(/video\/(\d+)/) || [])[1] || "")
    : "";
  // Click behaviour:
  //  - has trailer  → open lightbox
  //  - no trailer + has external link → open link in new tab
  //  - no trailer, no link → no-op
  const handleClick = () => {
    if (hasTrailer) onOpen();
    else if (film.link) window.open(film.link, "_blank", "noopener,noreferrer");
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="rv credit-card"
      data-trailer-kind={trailerKind}
      data-trailer-id={trailerId}
      data-trailer-url={hasTrailer ? film.trailer : ""}
      data-trailer-link={!hasTrailer && film.link ? film.link : ""}
      style={{
        transitionDelay: `${(index % 3) * 80}ms`,
        position: "relative",
        aspectRatio: "4/5",
        background: "#000",
        border: `1px solid ${hover ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.1)"}`,
        cursor: "pointer",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        transition: "transform 500ms cubic-bezier(.2,.6,.2,1), border-color 350ms ease",
        overflow: "hidden",
        WebkitTapHighlightColor: "transparent",
        padding: 0,
        font: "inherit",
        color: "inherit",
        textAlign: "left",
        appearance: "none",
        outline: "none",
      }}
    >
      {/* Poster image — full bleed background */}
      {poster && (
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: `url("${poster}")`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          transform: hover ? "scale(1.05)" : "scale(1)",
          transition: "transform 600ms cubic-bezier(.2,.6,.2,1)",
          zIndex: 0,
        }} />
      )}
      {/* Gradient overlay — only when poster present */}
      {poster && (
        <div style={{
          position: "absolute", inset: 0,
          background: hover
            ? "linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.85) 100%)"
            : "linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.92) 100%)",
          transition: "background 350ms ease",
          zIndex: 1,
        }} />
      )}
      {/* Year chip top-right */}
      <div className="mono" style={{
        position: "absolute", top: 20, right: 20, zIndex: 2,
        fontSize: 11,
        letterSpacing: "0.08em",
        padding: "5px 9px",
        border: "1px solid rgba(255,255,255,0.25)",
        background: poster ? "rgba(0,0,0,0.55)" : "transparent",
        backdropFilter: poster ? "blur(4px)" : "none",
        WebkitBackdropFilter: poster ? "blur(4px)" : "none",
        color: "rgba(255,255,255,0.95)",
      }}>{film.year}</div>

      {/* Index marker top-left */}
      <div className="micro" style={{
        position: "absolute", top: 22, left: 22, zIndex: 2,
        color: poster ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,0.35)",
        padding: poster ? "5px 9px" : "0",
        border: poster ? "1px solid rgba(255,255,255,0.2)" : "none",
        background: poster ? "rgba(0,0,0,0.55)" : "transparent",
        backdropFilter: poster ? "blur(4px)" : "none",
        WebkitBackdropFilter: poster ? "blur(4px)" : "none",
      }}>{String(index + 1).padStart(2, "0")} / {String(window.FILMS.length).padStart(2, "0")}</div>

      {/* CASE info button → detail page (only when this film has a matching credit page) */}
      {(() => {
        const url = window.creditUrl ? window.creditUrl(film) : null;
        if (!url) return null;
        return (
          <a
            href={url}
            onClick={(e) => e.stopPropagation()}
            className="mono"
            style={{
              position: "absolute",
              top: 56, right: 20,
              zIndex: 3,
              fontSize: 9.5,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              padding: "6px 10px 5px 10px",
              background: poster ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.06)",
              border: "1px solid rgba(255,255,255,0.28)",
              backdropFilter: poster ? "blur(6px)" : "none",
              WebkitBackdropFilter: poster ? "blur(6px)" : "none",
              color: "rgba(255,255,255,0.95)",
              textDecoration: "none",
              opacity: hover ? 1 : 0.78,
              transform: hover ? "translateY(0)" : "translateY(-2px)",
              transition: "opacity 250ms ease, transform 350ms ease, background 250ms ease, border-color 250ms ease",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = "#fff";
              e.currentTarget.style.color = "#000";
              e.currentTarget.style.borderColor = "#fff";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = poster ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.06)";
              e.currentTarget.style.color = "rgba(255,255,255,0.95)";
              e.currentTarget.style.borderColor = "rgba(255,255,255,0.28)";
            }}
            aria-label={`Open case: ${film.title}`}
          >
            <span style={{ borderBottom: "1px solid currentColor", paddingBottom: 1 }}>CASE</span>
          </a>
        );
      })()}

      {/* Title block — bottom-left when poster, vertically centered when no poster */}
      {poster ? (
        <div style={{
          position: "absolute",
          left: 24, right: 24, bottom: 76,
          zIndex: 2,
        }}>
          <h3 style={{
            margin: 0,
            fontFamily: "Inter Tight, sans-serif",
            fontWeight: 600,
            fontSize: "clamp(22px, 2.1vw, 34px)",
            letterSpacing: "-0.02em",
            lineHeight: 1.0,
            textTransform: "uppercase",
            color: "#fff",
            textWrap: "balance",
            textShadow: "0 2px 18px rgba(0,0,0,0.5)",
          }}>{film.title}</h3>
        </div>
      ) : (
        <div style={{
          position: "absolute",
          left: 24, right: 24,
          top: "50%",
          transform: "translateY(-58%)",
          zIndex: 2,
        }}>
          <h3 style={{
            margin: 0,
            fontFamily: "Inter Tight, sans-serif",
            fontWeight: 600,
            fontSize: "clamp(28px, 2.6vw, 44px)",
            letterSpacing: "-0.02em",
            lineHeight: 0.98,
            textTransform: "uppercase",
            color: "#fff",
            textWrap: "balance",
          }}>{film.title}</h3>
        </div>
      )}

      {/* Role + play reveal — bottom */}
      <div style={{
        position: "absolute", left: 24, right: 24, bottom: 22,
        zIndex: 2,
      }}>
        <div className="micro" style={{
          color: poster ? "rgba(255,255,255,0.7)" : "var(--muted)",
          marginBottom: 12,
        }}>
          {film.role}
        </div>
        <div className="micro" style={{
          color: "#fff",
          opacity: hover ? 1 : 0.45,
          transform: `translateX(${hover ? 6 : 0}px)`,
          transition: "opacity 350ms ease, transform 450ms cubic-bezier(.2,.6,.2,1)",
          display: "inline-flex", alignItems: "center", gap: 10,
          paddingTop: 14,
          borderTop: "1px solid rgba(255,255,255,0.18)",
          width: "100%",
        }}>
          <span>{hasTrailer ? c.play : c.no_trailer}</span>
          {(hasTrailer || film.link) && <span aria-hidden="true">→</span>}
        </div>
      </div>
    </button>
  );
}

function TrailerLightbox({ film, onClose, c }) {
  // ESC + body lock
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);

  // Detect provider for autoplay param + build "open on platform" link
  const u = film.trailer || "";
  const isYT = u.includes("youtube.com/embed") || u.includes("youtube-nocookie.com/embed");
  const isVimeo = u.includes("player.vimeo.com");
  const ytId = isYT ? (u.match(/embed\/([\w-]+)/) || [])[1] : null;
  const vimeoId = isVimeo ? (u.match(/video\/(\d+)/) || [])[1] : null;
  const externalUrl = ytId
    ? `https://www.youtube.com/watch?v=${ytId}`
    : vimeoId
    ? `https://vimeo.com/${vimeoId}`
    : u;

  // Always rebuild from the parsed ID using the nocookie domain — agency standard.
  const src = (() => {
    if (ytId)    return `https://www.youtube-nocookie.com/embed/${ytId}?autoplay=1&rel=0&modestbranding=1&playsinline=1`;
    if (vimeoId) return `https://player.vimeo.com/video/${vimeoId}?autoplay=1&autopause=0`;
    return null;
  })();

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 99999,
        background: "rgba(0,0,0,0.95)",
        backdropFilter: "blur(20px)",
        WebkitBackdropFilter: "blur(20px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: "5vh 5vw",
        animation: "fadeIn 350ms ease",
      }}
    >
      <style>{`@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`}</style>

      {/* close button */}
      <button
        onClick={onClose}
        className="micro"
        style={{
          position: "absolute", top: 28, right: 32,
          color: "#fff",
          display: "inline-flex", alignItems: "center", gap: 12,
          padding: "10px 14px",
          border: "1px solid rgba(255,255,255,0.25)",
          background: "transparent",
        }}
      >
        Close
        <svg width="12" height="12" viewBox="0 0 12 12">
          <line x1="1" y1="1" x2="11" y2="11" stroke="#fff" />
          <line x1="11" y1="1" x2="1" y2="11" stroke="#fff" />
        </svg>
      </button>

      {/* meta top-left */}
      <div style={{ position: "absolute", top: 28, left: 32, color: "#fff" }}>
        <div className="micro" style={{ color: "var(--muted)", marginBottom: 8 }}>{film.role} · {film.year}</div>
        <div style={{
          fontFamily: "Inter Tight, sans-serif",
          fontWeight: 600,
          fontSize: 22,
          letterSpacing: "-0.01em",
          textTransform: "uppercase",
        }}>{film.title}</div>
      </div>

      {/* player */}
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "100%",
        maxWidth: 1400,
        aspectRatio: "16/9",
        background: "#000",
        border: "1px solid rgba(255,255,255,0.1)",
      }}>
        {src ? (
          <iframe
            src={src}
            title={film.title}
            referrerPolicy="strict-origin-when-cross-origin"
            allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
            allowFullScreen
            frameBorder="0"
            style={{ width: "100%", height: "100%", display: "block" }}
          />
        ) : (
          <div style={{
            width: "100%", height: "100%",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--muted)",
          }} className="micro">
            {c.no_trailer}
          </div>
        )}
      </div>
    </div>
  );
}

// =====================================================
// EQUIPMENT
// =====================================================
function Equipment({ lang }) {
  const c = window.COPY[lang].equipment;
  return (
    <section id="equipment" style={{ background: "#000" }}>
      <SectionHead kicker={c.kicker} title={c.title} lead={c.lead} />
      <div className="container" style={{ paddingBottom: 160 }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
        }}>
          {window.EQUIPMENT.map((e, i) => <EquipmentCard key={e.code} item={e} index={i} />)}
        </div>
      </div>
    </section>
  );
}

function EquipmentCard({ item, index }) {
  const url = item.slug ? `services/${item.slug}.html` : null;
  const inner = (
    <>
      <ImagePlaceholder
        label={`${item.cat} · photo`}
        code={item.code}
        ratio="4/5"
        src={item.img}
      />
      <div style={{ paddingTop: 18 }}>
        <div className="micro" style={{ color: "var(--muted)", marginBottom: 8 }}>
          {item.cat}
        </div>
        <div style={{
          fontFamily: "Inter Tight, sans-serif",
          fontSize: 22,
          fontWeight: 600,
          letterSpacing: "-0.02em",
          lineHeight: 1.1,
        }}>{item.name}</div>
        <div className="mono" style={{
          marginTop: 10,
          fontSize: 12,
          color: "var(--muted)",
          lineHeight: 1.5,
        }}>{item.spec}</div>
        {url && (
          <div className="micro" style={{
            marginTop: 16,
            paddingTop: 14,
            borderTop: "1px solid var(--hair)",
            display: "inline-flex", alignItems: "center", gap: 8,
            color: "rgba(255,255,255,0.85)",
          }}>
            <span style={{ borderBottom: "1px solid currentColor", paddingBottom: 1 }}>READ MORE</span>
            <span aria-hidden="true">→</span>
          </div>
        )}
      </div>
    </>
  );

  if (url) {
    return (
      <a href={url} className="rv eq-card" style={{
        transitionDelay: `${(index % 4) * 80}ms`,
        textDecoration: "none", color: "inherit",
        display: "block",
      }}>
        <style>{`
          .eq-card { transition: transform 500ms cubic-bezier(.2,.6,.2,1); }
          .eq-card:hover { transform: translateY(-4px); }
        `}</style>
        {inner}
      </a>
    );
  }

  return (
    <div className="rv" style={{ transitionDelay: `${(index % 4) * 80}ms` }}>
      {inner}
    </div>
  );
}

// =====================================================
// ABOUT
// =====================================================
function About({ lang }) {
  const c = window.COPY[lang].about;
  return (
    <section id="about" style={{ background: "#000" }}>
      <div className="container" style={{ paddingTop: 160, paddingBottom: 160 }}>
        <div className="micro rv" style={{ marginBottom: 56 }}>{c.kicker}</div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.05fr 0.95fr",
          gap: 96,
          alignItems: "start",
        }}>
          <div>
            <h2 className="rv" style={{
              margin: 0,
              fontFamily: "Inter Tight, sans-serif",
              fontWeight: 500,
              fontSize: "clamp(48px, 6.4vw, 108px)",
              letterSpacing: "-0.04em",
              lineHeight: 0.94,
            }}>
              <span style={{ display: "block" }}>{c.title[0]}</span>
              <span style={{ display: "block", fontFamily: "Instrument Serif, serif", fontStyle: "italic", fontWeight: 400, letterSpacing: "-0.02em" }}>{c.title[1]}</span>
              <span style={{ display: "block" }}>{c.title[2]}</span>
            </h2>

            <div className="rv rv-2" style={{ marginTop: 56, display: "grid", gap: 24, maxWidth: 520 }}>
              <p style={{ margin: 0, color: "var(--muted)", fontSize: 17, lineHeight: 1.55, fontWeight: 300 }}>{c.body_1}</p>
              <p style={{ margin: 0, color: "var(--muted)", fontSize: 17, lineHeight: 1.55, fontWeight: 300 }}>{c.body_2}</p>
            </div>

            {/* stat row */}
            <div className="rv rv-3" style={{
              marginTop: 80,
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
              borderTop: "1px solid var(--hair)",
              paddingTop: 28,
            }}>
              {[c.stat_a, c.stat_b, c.stat_c].map(([num, lbl], i) => (
                <div key={i}>
                  <div data-counter={num} style={{ fontFamily: "Inter Tight, sans-serif", fontSize: 44, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1 }}>{num}</div>
                  <div className="micro" style={{ marginTop: 12, color: "var(--muted)" }}>{lbl}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="rv rv-2" style={{ position: "sticky", top: 100 }}>
            <ImagePlaceholder
              label="Behind-the-scenes / portrait"
              code="ABT / 01"
              ratio="3/4"
              strong
              src="assets/about-portrait.jpg"
              objectPosition="center 35%"
            />
            <div className="micro" style={{ marginTop: 12, color: "var(--muted)", display: "flex", justifyContent: "space-between" }}>
              <span>Thijm Huybrechtse — Senior Operator</span>
              <span>Hangar, NL</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =====================================================
// CONTACT
// =====================================================
function Contact({ lang }) {
  const c = window.COPY[lang].contact;
  return (
    <section id="contact" style={{ background: "#000", borderTop: "1px solid var(--hair)" }}>
      <div className="container" style={{ paddingTop: 160, paddingBottom: 80 }}>
        <div className="micro rv" style={{ marginBottom: 48 }}>{c.kicker}</div>
        <h2 className="rv rv-2" style={{
          margin: 0,
          fontFamily: "Inter Tight, sans-serif",
          fontWeight: 600,
          fontSize: "clamp(72px, 12vw, 220px)",
          letterSpacing: "-0.05em",
          lineHeight: 0.86,
        }}>
          <span style={{ display: "block" }}>{c.title[0]}</span>
          <span style={{ display: "block", fontFamily: "Instrument Serif, serif", fontStyle: "italic", fontWeight: 400, letterSpacing: "-0.025em" }}>{c.title[1]}</span>
        </h2>

        <p className="rv rv-3" style={{ marginTop: 40, maxWidth: 620, color: "var(--muted)", fontSize: 18, lineHeight: 1.5, fontWeight: 300 }}>
          {c.lead}
        </p>

        {/* CTA */}
        <a href={`mailto:${c.mail}`} data-magnetic="1" className="rv rv-3" style={{
          display: "inline-flex", alignItems: "center", gap: 18,
          marginTop: 56,
          border: "1px solid #fff",
          padding: "22px 28px 22px 32px",
          fontFamily: "Inter Tight, sans-serif",
          fontWeight: 500,
          fontSize: 18,
          letterSpacing: "-0.01em",
          background: "transparent",
          color: "#fff",
          transition: "background 350ms ease, color 350ms ease",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "#fff"; e.currentTarget.style.color = "#000"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#fff"; }}
        >
          {c.cta}
          <svg width="22" height="14" viewBox="0 0 22 14" fill="none">
            <line x1="0" y1="7" x2="20" y2="7" stroke="currentColor" />
            <polyline points="14,1 20,7 14,13" stroke="currentColor" fill="none" />
          </svg>
        </a>

        {/* Detail grid */}
        <div className="rv rv-4" style={{
          marginTop: 120,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 32,
          borderTop: "1px solid var(--hair)",
          paddingTop: 28,
        }}>
          <ContactItem label={c.mail_label}  value={c.mail}  href={`mailto:${c.mail}`} />
          <ContactItem label={c.phone_label} value={c.phone} href={c.phone_href || `tel:${c.phone.replace(/\s+/g, "")}`} />
          <ContactItem label={c.where_label} value={c.where} />
          <ContactItem label={c.hours_label} value={c.hours} />
        </div>
      </div>
    </section>
  );
}

function ContactItem({ label, value, href }) {
  const Inner = (
    <>
      <div className="micro" style={{ color: "var(--muted)", marginBottom: 12 }}>{label}</div>
      <div style={{
        fontFamily: "Inter Tight, sans-serif",
        fontSize: 18,
        letterSpacing: "-0.01em",
        lineHeight: 1.35,
      }}>{value}</div>
    </>
  );
  return href ? (
    <a href={href} style={{ display: "block", borderBottom: "1px solid transparent", transition: "border-color 250ms ease" }}
       onMouseEnter={(e) => e.currentTarget.style.borderBottomColor = "rgba(255,255,255,0.4)"}
       onMouseLeave={(e) => e.currentTarget.style.borderBottomColor = "transparent"}>
      {Inner}
    </a>
  ) : (
    <div>{Inner}</div>
  );
}

// =====================================================
// FOOTER
// =====================================================
function Footer({ lang }) {
  const c = window.COPY[lang].footer;
  return (
    <footer style={{ background: "#000", borderTop: "1px solid var(--hair)" }}>
      <div className="container" style={{
        paddingTop: 56, paddingBottom: 40,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 32, flexWrap: "wrap",
      }}>
        <Wordmark size={14} />
        <div className="micro" style={{ color: "var(--muted)" }}>{c.colophon}</div>
        <div className="micro" style={{ color: "var(--muted-2)" }}>{c.rights}</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Services, FeaturedWork, Equipment, About, Contact, Footer });