// logo.jsx — AutoCut wordmark + glyph
//
// Glyph metaphor: a film frame with a play triangle inside, sliced by an
// accent cut line. Reads as "video editor" without being literal.

function AutoCutGlyph({ size = 28, accent = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 28 28" fill="none" style={{ display: "block" }}>
      {/* outer frame */}
      <rect x="2.5" y="4.5" width="23" height="19" rx="2.5"
            stroke="currentColor" strokeWidth="1.4" />
      {/* sprocket holes top/bottom — film feel */}
      <rect x="5" y="2.5" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="9" y="2.5" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="13" y="2.5" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="17" y="2.5" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="21" y="2.5" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="5" y="24.3" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="9" y="24.3" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="13" y="24.3" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="17" y="24.3" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      <rect x="21" y="24.3" width="2" height="1.2" rx="0.4" fill="currentColor" opacity="0.6"/>
      {/* play triangle */}
      <path d="M11 9.5 L18.5 14 L11 18.5 Z" fill="currentColor"/>
      {/* accent cut line — slices across */}
      <line x1="0" y1="14" x2="28" y2="14" stroke={accent} strokeWidth="1.4" strokeDasharray="2 1.5"/>
    </svg>
  );
}

function AutoCutLogo({ size = 28 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--fg-0)" }}>
      <AutoCutGlyph size={size} />
      <div style={{
        fontFamily: "var(--font-sans)",
        fontWeight: 600,
        letterSpacing: "-0.02em",
        fontSize: size * 0.62,
        lineHeight: 1,
        display: "flex",
        alignItems: "baseline",
        gap: 1,
      }}>
        <span>SkilssVideo</span>
        <span style={{ color: "var(--accent)" }}>.AI</span>
        <span style={{
          marginLeft: 4,
          fontFamily: "var(--font-mono)",
          fontWeight: 500,
          fontSize: size * 0.32,
          color: "var(--fg-3)",
          letterSpacing: "0.04em",
          transform: "translateY(-0.4em)",
        }}>v2.4</span>
      </div>
    </div>
  );
}

Object.assign(window, { AutoCutGlyph, AutoCutLogo });