/* BVS Master Deck — REUSABLE CORE
   Vertical scroll-snap deck. Active-slide store drives entrance animations.
   Brand: BVS — electric blue, italic-black Helvetica, warm paper. */

const { useState: useDS, useEffect: useDE, useRef: useDR, useContext: useDC, createContext } = React;

/* ---------- active-slide via React Context (set by the shell) ---------- */
const ActiveCtx = createContext(0);
const SlideIdx = createContext(0);
function useActiveSlide() {return useDC(ActiveCtx);}

/* ---------- Slide wrapper: full-viewport, snap-aligned ---------- */
function Slide({ index, label, bg = "var(--bvs-paper)", grid = false, dark = false, children, style }) {
  return (
    <SlideIdx.Provider value={index}>
      <section data-screen-label={label || `Slide ${index + 1}`} data-dark={dark ? "1" : undefined} style={{
        height: "100%", width: "100%", flex: "none",
        scrollSnapAlign: "start", scrollSnapStop: "always",
        position: "relative", overflow: "hidden", background: bg,
        backgroundImage: grid ? "radial-gradient(circle, rgba(10,10,10,0.05) 1.3px, transparent 1.3px)" : "none",
        backgroundSize: grid ? "44px 44px" : "auto",
        ...style
      }}>
        {children}
      </section>
    </SlideIdx.Provider>);

}

/* ---------- Reveal: entrance when its slide becomes active ---------- */
function Reveal({ delay = 0, from = "up", dist = 30, rot = 0, dur = 0.8, children, style }) {
  const idx = useDC(SlideIdx);
  const active = useActiveSlide();
  const shown = active >= idx;
  const reduced = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  let hidden = "";
  if (from === "up") hidden = `translateY(${dist}px)`;else
  if (from === "down") hidden = `translateY(${-dist}px)`;else
  if (from === "left") hidden = `translateX(${dist}px)`;else
  if (from === "right") hidden = `translateX(${-dist}px)`;else
  if (from === "scale") hidden = `scale(${1 - dist / 100})`;
  if (rot) hidden += ` rotate(${rot}deg)`;
  return (
    <div style={{
      opacity: shown ? 1 : 0,
      transform: shown ? "none" : hidden,
      transition: reduced ? "none" : `opacity ${dur}s cubic-bezier(.2,.7,.2,1) ${delay}s, transform ${dur}s cubic-bezier(.2,.7,.2,1) ${delay}s`,
      willChange: "transform, opacity",
      ...style
    }}>{children}</div>);

}

/* ---------- Float: gentle continuous drift ---------- */
function Float({ amp = 10, dur = 7, delay = 0, rot = 0, children, style }) {
  const id = useDR("fl" + Math.random().toString(36).slice(2, 8)).current;
  return (
    <div style={style}>
      <style>{`@keyframes ${id}{0%,100%{transform:translateY(0) rotate(${rot}deg)}50%{transform:translateY(${-amp}px) rotate(${rot}deg)}}`}</style>
      <div style={{ animation: `${id} ${dur}s ease-in-out ${delay}s infinite`, willChange: "transform" }}>{children}</div>
    </div>);

}

/* ---------- Ghost numeral / word (huge faint figure) ---------- */
function GhostNum({ children, size = 240, color = "rgba(0,23,219,0.10)", style }) {
  return (
    <div style={{
      fontFamily: "var(--bvs-sans)", fontStyle: "italic", fontWeight: 900,
      fontSize: size, lineHeight: 0.8, letterSpacing: "-0.04em",
      color, userSelect: "none", ...style
    }}>{children}</div>);

}

/* ---------- Mono eyebrow with // ---------- */
function DEyebrow({ children, color = "var(--bvs-blue)", slash = true, style }) {
  return (
    <div style={{
      fontFamily: "var(--bvs-mono)", fontSize: 14, fontWeight: 700,
      letterSpacing: "0.22em", textTransform: "uppercase", color, ...style
    }}>{slash ? "// " : ""}{children}</div>);

}

/* ---------- Section eyebrow that sits over a wide tracked label ---------- */
function MicroTag({ children, color = "rgba(10,10,10,0.45)", style }) {
  return <div style={{ fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color, ...style }}>{children}</div>;
}

/* ---------- Headline ---------- */
function H({ size = "clamp(42px, 5vw, 84px)", color = "var(--bvs-ink)", children, style }) {
  return <h2 style={{ margin: 0, fontStyle: "italic", fontWeight: 900, fontSize: size, lineHeight: 0.95, letterSpacing: "-0.03em", color, ...style }}>{children}</h2>;
}

/* ---------- Monogram avatar (for team without photos) ---------- */
function Monogram({ initials, size = 132, photo, alt, style }) {
  if (photo) {
    return <img src={window.__res(photo)} alt={alt || initials} style={{ width: size, height: size, objectFit: "cover", borderRadius: 4, filter: "grayscale(1) contrast(1.04)", display: "block", ...style }} />;
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: 4, background: "var(--bvs-blue)",
      color: "#fff", display: "grid", placeItems: "center",
      fontFamily: "var(--bvs-sans)", fontStyle: "italic", fontWeight: 900,
      fontSize: size * 0.34, letterSpacing: "-0.02em",
      backgroundImage: "linear-gradient(135deg, var(--bvs-blue), #000ea0)",
      ...style
    }}>{initials}</div>);

}

/* ---------- Phase / check list item ---------- */
function PhaseItem({ num, title, sub, kind = "phase", dark = false }) {
  const ink = dark ? "#fff" : "var(--bvs-ink)";
  const mute = dark ? "rgba(255,255,255,0.62)" : "rgba(10,10,10,0.6)";
  const line = dark ? "rgba(255,255,255,0.16)" : "rgba(10,10,10,0.10)";
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 13, padding: "8px 0", borderBottom: "1px solid " + line }}>
      {kind === "phase" ?
      <div style={{
        flex: "none", width: 40, height: 40, borderRadius: 3, background: dark ? "#fff" : "var(--bvs-blue)",
        color: dark ? "var(--bvs-blue)" : "#fff", display: "grid", placeItems: "center",
        fontFamily: "var(--bvs-mono)", fontSize: 14, fontWeight: 700,
        transform: "rotate(-4deg)", boxShadow: dark ? "none" : "0 8px 20px -8px rgba(0,23,219,0.5)"
      }}>{num}</div> :

      <div style={{
        flex: "none", width: 26, height: 26, marginTop: 2, borderRadius: "50%",
        background: dark ? "#fff" : "var(--bvs-blue)", color: dark ? "var(--bvs-blue)" : "#fff", display: "grid", placeItems: "center",
        fontSize: 15, fontWeight: 800
      }}>✓</div>
      }
      <div>
        <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: 20, lineHeight: 1.05, letterSpacing: "-0.01em", color: ink }}>{title}</div>
        {sub && <div style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.35, color: mute, marginTop: 3 }}>{sub}</div>}
      </div>
    </div>);

}

/* ---------- Floating card frame ---------- */
function FloatCard({ w, rot = 0, children, style, pad = 0 }) {
  return (
    <div style={{
      width: w, background: "#fff", border: "1px solid rgba(10,10,10,0.10)",
      borderRadius: 8, padding: pad,
      boxShadow: "0 40px 80px -36px rgba(0,23,219,0.32), 0 8px 24px -16px rgba(0,0,0,0.18)",
      transform: `rotate(${rot}deg)`, ...style
    }}>{children}</div>);

}

/* ---------- Chip / tag ---------- */
function Chip({ children, tone = "blue", style }) {
  const tones = {
    blue: { bg: "rgba(0,23,219,0.08)", fg: "var(--bvs-blue)" },
    ink: { bg: "rgba(10,10,10,0.06)", fg: "rgba(10,10,10,0.7)" },
    green: { bg: "rgba(22,163,74,0.12)", fg: "var(--bvs-green-deep)" },
    onblue: { bg: "rgba(255,255,255,0.12)", fg: "#fff" },
    outline: { bg: "transparent", fg: "var(--bvs-blue)", border: "1px solid rgba(0,23,219,0.3)" }
  };
  const t = tones[tone] || tones.blue;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 7,
      fontFamily: "var(--bvs-mono)", fontSize: 11, fontWeight: 700,
      letterSpacing: "0.08em", textTransform: "uppercase",
      padding: "6px 11px", borderRadius: 3, background: t.bg, color: t.fg,
      border: t.border || "none", ...style
    }}>{children}</span>);

}

/* ---------- Big stat ---------- */
function StatBig({ value, label, color = "var(--bvs-ink)", labelColor = "rgba(10,10,10,0.55)", size = 64, style }) {
  return (
    <div style={style}>
      <div style={{ fontStyle: "italic", fontWeight: 900, fontSize: size, lineHeight: 0.9, letterSpacing: "-0.03em", color }}>{value}</div>
      <div style={{ fontSize: 15, fontWeight: 500, lineHeight: 1.35, color: labelColor, marginTop: 10, maxWidth: 240 }}>{label}</div>
    </div>);

}

/* ---------- corner footer mark on a slide ---------- */
function CornerMark({ dark = false }) {
  const c = dark ? "rgba(255,255,255,0.55)" : "rgba(10,10,10,0.38)";
  return (
    <div style={{ position: "absolute", left: "8vw", bottom: 36, display: "flex", alignItems: "center", gap: 10, color: c, zIndex: 2 }}>
      <span style={{ width: 14 }} dangerouslySetInnerHTML={{ __html: VMARK_SVG }} />
      <span style={{ fontFamily: "var(--bvs-mono)", fontSize: 10.5, fontWeight: 700, letterSpacing: "0.28em", textTransform: "lowercase" }}>globalizing you</span>
    </div>);

}

const VMARK_SVG = `<svg viewBox="0 0 200 200" fill="none" style="width:100%;height:auto;display:block"><path fill="currentColor" fill-rule="evenodd" d="M2.0 6.6 L43.7 19.0 L45.2 23.6 L48.3 39.0 L28.2 32.9 L25.1 32.9 L23.6 37.5 L48.3 162.5 L157.9 76.1 L153.2 71.4 L137.8 66.8 L153.2 54.5 L198.0 66.8 L37.5 193.4 L3.5 8.2 Z"></path></svg>`;

/* ---------- StyledAvatar: deterministic monogram "pfp" ----------
   Bold, readable initials on a per-person brand gradient with a subtle
   ghost letter + accent. Used for team members without a photo. */
function hashStr(s) {let h = 0;for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) >>> 0;return h;}
function StyledAvatar({ name = "", initials = "", size = 150, style }) {
  const h = hashStr(name || initials);
  const palettes = [
  { a: "#0017DB", b: "#000ea0", fg: "#ffffff", ghost: "rgba(255,255,255,0.12)", accent: "#4ade5b" },
  { a: "#0a0a0a", b: "#1a1736", fg: "#ffffff", ghost: "rgba(90,162,255,0.18)", accent: "#5aa2ff" },
  { a: "#f5f3ee", b: "#e6e3da", fg: "#0017DB", ghost: "rgba(0,23,219,0.10)", accent: "#0017DB" },
  { a: "#1f12c4", b: "#3b1edb", fg: "#ffffff", ghost: "rgba(255,255,255,0.13)", accent: "#fff35a" },
  { a: "#16163a", b: "#0017DB", fg: "#ffffff", ghost: "rgba(255,255,255,0.12)", accent: "#4ade5b" }];

  const p = palettes[h % palettes.length];
  const gid = "ag" + h % 100000;
  const corner = (h >> 4) % 2 === 0;
  const fs = typeof size === "number" ? size * 0.4 : "clamp(30px,5vh,62px)";
  const ghostFs = typeof size === "number" ? size * 0.92 : "clamp(70px,11.5vh,145px)";
  return (
    <div style={{ width: size, height: size, borderRadius: 4, overflow: "hidden", position: "relative", background: `linear-gradient(135deg, ${p.a}, ${p.b})`, ...style }}>
      {/* ghost initial */}
      <div style={{ position: "absolute", right: "-8%", bottom: "-22%", fontFamily: "var(--bvs-sans)", fontStyle: "italic", fontWeight: 900, fontSize: ghostFs, lineHeight: 1, color: p.ghost, letterSpacing: "-0.05em", userSelect: "none" }}>{initials[0] || ""}</div>
      {/* accent corner tick */}
      <div style={{ position: "absolute", top: 10, [corner ? "right" : "left"]: 10, width: 16, height: 4, background: p.accent, borderRadius: 1 }} />
      {/* readable initials */}
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
        <span style={{ fontFamily: "var(--bvs-sans)", fontStyle: "italic", fontWeight: 900, fontSize: fs, letterSpacing: "-0.03em", color: p.fg, textShadow: p.fg === "#ffffff" ? "0 2px 12px rgba(0,0,0,0.25)" : "none" }}>{initials}</span>
      </div>
    </div>);

}

Object.assign(window, {
  ActiveCtx, useActiveSlide, SlideIdx,
  Slide, Reveal, Float, GhostNum, DEyebrow, MicroTag, H,
  Monogram, StyledAvatar, PhaseItem, FloatCard, Chip, StatBig, CornerMark, VMARK_SVG
});