// Shared mock editor + small UI atoms used by all three variations.
// Loaded as a Babel script BEFORE each variation file.

const TABS = [
  { key: "cut",       label: "Cut",       hint: "AI auto-cut" },
  { key: "caption",   label: "Caption",   hint: "Auto-captions" },
  { key: "translate", label: "Translate", hint: "30+ languages" },
  { key: "enhance",   label: "Enhance",   hint: "BG remove + resize" },
];

// A reusable mock video editor canvas. Visual style adapts via theme prop.
// theme: { bg, panel, panelLine, text, textDim, accent, accentText, frame }
function MockEditor({ theme, autoCycle = true, height = 420, label = "Untitled.mov", initialTab = "cut", showHint = false }) {
  const [tab, setTab] = React.useState(initialTab);
  const [scrub, setScrub] = React.useState(0.32); // 0..1
  const [hovered, setHovered] = React.useState(false);
  const [dragging, setDragging] = React.useState(false);
  React.useEffect(() => {
    if (!autoCycle || hovered || dragging) return;
    const id = setInterval(() => {
      setTab(prev => {
        const i = TABS.findIndex(t => t.key === prev);
        return TABS[(i + 1) % TABS.length].key;
      });
    }, 2800);
    return () => clearInterval(id);
  }, [autoCycle, hovered, dragging]);

  const t = theme;
  return (
    <div onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)} style={{
      background: t.panel, borderRadius: 18, border: `1px solid ${t.panelLine}`,
      padding: 14, color: t.text, boxShadow: t.shadow || "0 30px 80px rgba(0,0,0,0.25)",
      width: "100%", boxSizing: "border-box", overflow: "hidden", position: "relative",
    }}>
      {showHint && !hovered && (
        <div style={{
          position: "absolute", top: -14, right: 14, padding: "4px 10px",
          background: t.accent, color: t.accentText, fontSize: 10, fontWeight: 800,
          letterSpacing: 1.4, borderRadius: 4, textTransform: "uppercase",
          boxShadow: `0 6px 18px ${t.accent}55`, zIndex: 3,
          fontFamily: "ui-monospace, Menlo, monospace",
        }}>
          ▶ Click tabs · drag scrubber
        </div>
      )}
      {/* Window chrome */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
        <span style={{ width: 10, height: 10, borderRadius: 99, background: "#ff5f57" }} />
        <span style={{ width: 10, height: 10, borderRadius: 99, background: "#febc2e" }} />
        <span style={{ width: 10, height: 10, borderRadius: 99, background: "#28c840" }} />
        <div style={{ flex: 1, textAlign: "center", fontSize: 12, color: t.textDim, fontFamily: "ui-monospace, Menlo, monospace" }}>
          {label} · vlstudio
        </div>
        <span style={{ fontSize: 11, color: t.textDim }}>1080p · 30fps</span>
      </div>

      {/* Tab bar */}
      <div style={{ display: "flex", gap: 6, padding: 4, background: t.tabsBg, borderRadius: 12, marginBottom: 12 }}>
        {TABS.map(x => {
          const active = x.key === tab;
          return (
            <button key={x.key} onClick={() => setTab(x.key)} style={{
              flex: 1, padding: "10px 10px", borderRadius: 9, border: "none",
              cursor: "pointer", fontWeight: 600, fontSize: 13,
              background: active ? t.accent : "transparent",
              color: active ? t.accentText : t.text,
              transition: "all .25s ease",
              fontFamily: "inherit",
            }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <TabIcon name={x.key} active={active} accentText={t.accentText} text={t.text} />
                {x.label}
              </span>
            </button>
          );
        })}
      </div>

      {/* Preview area */}
      <div style={{
        position: "relative", aspectRatio: "16/9", borderRadius: 12, overflow: "hidden",
        background: t.frame, marginBottom: 12,
      }}>
        <FilmstripBg color={t.accent} dim={t.textDim} />
        {/* Tab-specific overlay */}
        <PreviewOverlay tab={tab} t={t} />
        {/* Top right badge */}
        <div style={{
          position: "absolute", top: 12, right: 12, padding: "6px 10px",
          background: "rgba(0,0,0,0.55)", color: "#fff", borderRadius: 99,
          fontSize: 11, fontWeight: 600, letterSpacing: 0.3,
          backdropFilter: "blur(6px)",
        }}>
          ● REC · 00:42
        </div>
        {/* Play button */}
        <div style={{
          position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)",
          width: 64, height: 64, borderRadius: 99, background: "rgba(255,255,255,0.95)",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 12px 30px rgba(0,0,0,0.35)",
        }}>
          <div style={{ width: 0, height: 0, borderLeft: "18px solid #111", borderTop: "12px solid transparent", borderBottom: "12px solid transparent", marginLeft: 4 }} />
        </div>
      </div>

      {/* Timeline */}
      <Timeline t={t} tab={tab} scrub={scrub} setScrub={setScrub} setDragging={setDragging} />
    </div>
  );
}

function TabIcon({ name, active, accentText, text }) {
  const c = active ? accentText : text;
  const s = { width: 14, height: 14, stroke: c, fill: "none", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "cut")       return <svg viewBox="0 0 24 24" style={s}><circle cx="6" cy="7" r="3"/><circle cx="6" cy="17" r="3"/><path d="M8.5 8.5L20 17M8.5 15.5L20 7"/></svg>;
  if (name === "caption")   return <svg viewBox="0 0 24 24" style={s}><rect x="3" y="6" width="18" height="14" rx="2"/><path d="M7 13h3M14 13h3M7 17h6"/></svg>;
  if (name === "translate") return <svg viewBox="0 0 24 24" style={s}><path d="M3 6h11M9 4v2M5 6c0 5 4 8 8 8M14 13l-3-3M21 21l-5-12-5 12M13 18h6"/></svg>;
  if (name === "enhance")   return <svg viewBox="0 0 24 24" style={s}><path d="M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3zM5 17l.8 2.2L8 20l-2.2.8L5 23l-.8-2.2L2 20l2.2-.8L5 17z"/></svg>;
  return null;
}

function FilmstripBg({ color, dim }) {
  // Stylised abstract video frame placeholder
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(60% 40% at 50% 50%, ${color}33, transparent 70%), linear-gradient(135deg, #0e1320 0%, #1a2238 50%, #0e1320 100%)`,
      }}/>
      {/* horizontal scan lines */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.35,
        backgroundImage: `repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.04) 3px 4px)`,
      }}/>
      {/* faux subject silhouette */}
      <div style={{
        position: "absolute", left: "50%", bottom: 0, transform: "translateX(-50%)",
        width: "55%", height: "65%",
        background: `radial-gradient(ellipse at 50% 30%, ${color}66 0%, transparent 60%)`,
        filter: "blur(2px)",
      }}/>
      <div style={{
        position: "absolute", left: "50%", bottom: "8%", transform: "translateX(-50%)",
        width: 110, height: 110, borderRadius: "50%",
        background: "linear-gradient(180deg, #d9c2a8, #a87f5b)",
        boxShadow: "inset -10px -16px 24px rgba(0,0,0,0.4)",
      }}/>
    </div>
  );
}

function PreviewOverlay({ tab, t }) {
  if (tab === "cut") {
    return (
      <>
        <DashedBox left="14%" top="22%" w="72%" h="56%" color={t.accent} label="AUTO-CUT · 4 silences removed"/>
      </>
    );
  }
  if (tab === "caption") {
    return (
      <div style={{
        position: "absolute", left: 0, right: 0, bottom: 28, textAlign: "center",
        fontSize: 22, fontWeight: 800, color: "#fff",
        textShadow: "0 2px 8px rgba(0,0,0,0.6)", letterSpacing: 0.2,
      }}>
        <span style={{
          background: t.accent, color: t.accentText, padding: "4px 10px", borderRadius: 6,
          boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone",
        }}>
          we ship every single week.
        </span>
      </div>
    );
  }
  if (tab === "translate") {
    return (
      <>
        <FlagPill t={t} top="14%" left="6%"  flag="🇺🇸" text="EN · source"/>
        <FlagPill t={t} top="14%" right="6%" flag="🇪🇸" text="ES"/>
        <FlagPill t={t} top="40%" right="6%" flag="🇯🇵" text="JA"/>
        <FlagPill t={t} top="66%" right="6%" flag="🇫🇷" text="FR"/>
      </>
    );
  }
  if (tab === "enhance") {
    return (
      <>
        <DashedBox left="50%" top="0" w="50%" h="100%" color={t.accent} label="" dashed={false}/>
        <div style={{
          position: "absolute", left: "50%", top: 0, bottom: 0, width: 2,
          background: t.accent,
        }}/>
        <div style={{
          position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)",
          width: 32, height: 32, borderRadius: 99, background: t.accent, color: t.accentText,
          display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800,
          boxShadow: "0 6px 18px rgba(0,0,0,0.4)",
        }}>↔</div>
        <div style={{
          position: "absolute", left: 12, top: 12, padding: "4px 8px", borderRadius: 6,
          background: "rgba(0,0,0,0.55)", color: "#fff", fontSize: 10, fontWeight: 700, letterSpacing: 0.4,
        }}>BEFORE</div>
        <div style={{
          position: "absolute", right: 12, top: 12, padding: "4px 8px", borderRadius: 6,
          background: t.accent, color: t.accentText, fontSize: 10, fontWeight: 800, letterSpacing: 0.4,
        }}>BG REMOVED</div>
      </>
    );
  }
  return null;
}

function DashedBox({ left, top, w, h, color, label, dashed = true }) {
  return (
    <div style={{
      position: "absolute", left, top, width: w, height: h,
      border: `2px ${dashed ? "dashed" : "solid"} ${color}`, borderRadius: 8,
    }}>
      {label && (
        <div style={{
          position: "absolute", top: -10, left: 10, padding: "2px 8px",
          background: color, color: "#0a0d12", fontSize: 10, fontWeight: 800, borderRadius: 4, letterSpacing: 0.4,
        }}>{label}</div>
      )}
    </div>
  );
}

function FlagPill({ t, top, left, right, flag, text }) {
  return (
    <div style={{
      position: "absolute", top, left, right,
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "4px 10px", borderRadius: 99, background: "rgba(0,0,0,0.55)",
      color: "#fff", fontSize: 11, fontWeight: 600, backdropFilter: "blur(4px)",
    }}>
      <span style={{ fontSize: 13 }}>{flag}</span>{text}
    </div>
  );
}

function Timeline({ t, tab, scrub, setScrub, setDragging }) {
  const tracks = [
    { key: "cut",       label: "V1 · video",    segs: [[0,30],[34,55],[60,100]] },
    { key: "caption",   label: "T1 · captions", segs: [[2,28],[34,52],[60,98]] },
    { key: "translate", label: "A1 · audio",    segs: [[0,100]] },
  ];
  const ref = React.useRef(null);
  const onPointer = (e) => {
    const r = ref.current.getBoundingClientRect();
    const x = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
    setScrub(x);
  };
  const startDrag = (e) => {
    setDragging(true); onPointer(e);
    const move = (ev) => onPointer(ev);
    const up = () => { setDragging(false); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", up);
  };
  const totalSec = 84;
  const cur = scrub * totalSec;
  const fmt = (s) => `${String(Math.floor(s/60)).padStart(2,"0")}:${String(Math.floor(s%60)).padStart(2,"0")}`;
  return (
    <div style={{ background: t.tabsBg, borderRadius: 10, padding: 10, fontSize: 11, color: t.textDim, fontFamily: "ui-monospace, Menlo, monospace" }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
        <span>00:00</span>
        <span style={{ color: t.accent, fontWeight: 700 }}>▶ {fmt(cur)}</span>
        <span>{fmt(totalSec)}</span>
      </div>
      <div ref={ref} onPointerDown={startDrag} style={{ position: "relative", display: "flex", flexDirection: "column", gap: 6, cursor: "ew-resize", touchAction: "none" }}>
        {tracks.map(tr => {
          const hot = tr.key === tab || (tab === "enhance" && tr.key === "cut");
          return (
            <div key={tr.key} style={{ position: "relative", height: 18, borderRadius: 6, background: "rgba(255,255,255,0.04)" }}>
              {tr.segs.map(([a,b], i) => (
                <div key={i} style={{
                  position: "absolute", left: a + "%", width: (b-a) + "%", top: 2, bottom: 2,
                  background: hot ? t.accent : "rgba(255,255,255,0.18)",
                  borderRadius: 4, transition: "background .25s ease",
                }}/>
              ))}
              <span style={{ position: "absolute", left: 6, top: "50%", transform: "translateY(-50%)", color: hot ? t.accentText : t.textDim, fontSize: 10, fontWeight: 700 }}>
                {tr.label}
              </span>
            </div>
          );
        })}
        {/* Playhead */}
        <div style={{
          position: "absolute", left: `${scrub*100}%`, top: -4, bottom: -4, width: 2,
          background: t.accent, boxShadow: `0 0 12px ${t.accent}`, pointerEvents: "none",
        }}>
          <div style={{ position: "absolute", top: -6, left: -5, width: 12, height: 12, borderRadius: 99, background: t.accent, boxShadow: `0 0 12px ${t.accent}` }}/>
        </div>
      </div>
    </div>
  );
}

// --- Logo strip placeholders ---
function LogoStrip({ items, color }) {
  return (
    <div style={{ display: "flex", gap: 48, alignItems: "center", flexWrap: "wrap", justifyContent: "center", opacity: 0.7 }}>
      {items.map((name, i) => (
        <div key={i} style={{
          fontFamily: "ui-monospace, Menlo, monospace", fontSize: 14, fontWeight: 700,
          color, letterSpacing: 1, textTransform: "uppercase",
        }}>
          {name}
        </div>
      ))}
    </div>
  );
}

// --- Tiny VLStudio mark ---
function VLMark({ color = "#7CFF6B", size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="14" stroke={color} strokeWidth="2"/>
      <path d="M9 11 L13 22 L16 16 M16 16 L19 22 L23 11" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Use-case card visuals — abstract 9:16 / 16:9 phone-like frames
function UseCaseFrame({ ratio = "9/16", label, t, accent, ratioLabel }) {
  const ac = accent || t.accent;
  return (
    <div style={{
      aspectRatio: ratio, background: t.frame, borderRadius: 14, position: "relative",
      overflow: "hidden", border: `1px solid ${t.panelLine}`,
    }}>
      {/* Abstract creator-vlog placeholder */}
      <div style={{ position: "absolute", inset: 0,
        background: `radial-gradient(70% 50% at 50% 30%, ${ac}26, transparent 70%), linear-gradient(180deg, #0e1320 0%, #1a2238 60%, #0e1320 100%)`,
      }}/>
      <div style={{ position: "absolute", inset: 0, opacity: 0.25,
        backgroundImage: `repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.05) 3px 4px)`,
      }}/>
      {/* Striped placeholder block */}
      <div style={{ position: "absolute", left: "12%", right: "12%", top: "22%", bottom: "32%",
        borderRadius: 8, border: `1px dashed ${ac}88`,
        backgroundImage: `repeating-linear-gradient(135deg, ${ac}11 0 8px, transparent 8px 16px)`,
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "ui-monospace, Menlo, monospace", fontSize: 10, color: ac, letterSpacing: 1.4, textTransform: "uppercase",
      }}>
        creator clip
      </div>
      {/* Captions */}
      <div style={{ position: "absolute", left: 16, right: 16, bottom: 56, textAlign: "center" }}>
        <span style={{ background: ac, color: t.accentText || "#000", padding: "3px 8px", borderRadius: 4, fontSize: 11, fontWeight: 800, letterSpacing: 0.3, fontFamily: "ui-monospace, Menlo, monospace" }}>
          we ship every week.
        </span>
      </div>
      {/* Top-left label */}
      <div style={{
        position: "absolute", top: 10, left: 10, padding: "4px 9px",
        background: "rgba(0,0,0,0.6)", color: "#fff", fontSize: 11, fontWeight: 700,
        borderRadius: 6, letterSpacing: 0.4, backdropFilter: "blur(4px)",
        fontFamily: "ui-monospace, Menlo, monospace",
      }}>{label}</div>
      {/* Top-right ratio chip */}
      {ratioLabel && (
        <div style={{
          position: "absolute", top: 10, right: 10, padding: "4px 8px",
          background: ac, color: t.accentText || "#000", fontSize: 10, fontWeight: 800,
          borderRadius: 4, letterSpacing: 1, fontFamily: "ui-monospace, Menlo, monospace",
        }}>{ratioLabel}</div>
      )}
      {/* Bottom controls bar to feel like a real social UI */}
      <div style={{
        position: "absolute", left: 12, right: 12, bottom: 12, height: 28, borderRadius: 8,
        background: "rgba(255,255,255,0.08)", backdropFilter: "blur(6px)",
        display: "flex", alignItems: "center", padding: "0 10px", gap: 8,
        fontSize: 9, color: "#fff", fontFamily: "ui-monospace, Menlo, monospace", letterSpacing: 1, textTransform: "uppercase",
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 99, background: ac }}/>
        <span>{label}</span>
        <span style={{ flex: 1, textAlign: "right", opacity: 0.7 }}>00:42</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  MockEditor, LogoStrip, VLMark, UseCaseFrame, TABS,
});