/* TitleVerifi — Mark explorations v2

   Three marks, one shape language: rectilinear + one curved accent.
   Each hides a T in the geometry. Each animates through the same six
   product states as the canonical "Nodes" mark.

   Exports (to window):
     MarkFolio       — Folio seal: corner peeled to reveal T inside
     MarkVolume      — Volume & page: two offset rects, T in the gap
     MarkSection     — Section corner: a true T with one boundary-arc

   Common API (all three):
     size?:    number    px
     color?:   string    primary stroke / fill
     accent?:  string    one-curve accent color (vermilion by default)
     animate?: boolean
     state?:   'idle' | 'processing' | 'connecting' | 'resolving' | 'complete' | 'error'
*/

if (typeof document !== 'undefined' && !document.getElementById('tv-mark-v2-anim')) {
  const s = document.createElement('style');
  s.id = 'tv-mark-v2-anim';
  s.textContent = `
    /* ---- shared keyframes for all three v2 marks ---- */
    @keyframes m2-arc-pulse {
      0%, 100% { stroke-opacity: 0.55; }
      50%      { stroke-opacity: 1; }
    }
    @keyframes m2-arc-trace {
      0%   { stroke-dashoffset: var(--m2-arc-len, 40); }
      60%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 0; }
    }
    @keyframes m2-stem-grow {
      0%   { transform: scaleY(0); }
      100% { transform: scaleY(1); }
    }
    @keyframes m2-spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes m2-bloom {
      0%   { transform: scale(0.4); opacity: 0.9; }
      100% { transform: scale(2.6); opacity: 0; }
    }
    @keyframes m2-error-shake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-0.6px); }
      40%, 80% { transform: translateX(0.6px); }
    }
    @keyframes m2-scan-row {
      0%, 100% { transform: translateY(0); opacity: 0; }
      20%, 80% { opacity: 0.8; }
      50%      { transform: translateY(14px); }
    }
    @keyframes m2-page-lift {
      0%, 100% { transform: translate(0, 0); }
      50%      { transform: translate(0.6px, -0.6px); }
    }
    @keyframes m2-arc-rotate-segment {
      0%   { stroke-dasharray: 0 80; }
      50%  { stroke-dasharray: 24 80; }
      100% { stroke-dasharray: 0 80; stroke-dashoffset: -80; }
    }
  `;
  document.head.appendChild(s);
}

/* ============================================================
   MARK A — FOLIO SEAL
   A square plate. Top-right corner peeled back along a curved
   accent, revealing a thin T inside. Reads as "officially recorded,
   opened for inspection."
   ============================================================ */
const MarkFolio = ({
  size = 32, color = 'currentColor', accent = 'var(--accent)',
  animate = true, state = 'idle',
}) => {
  const eff = animate ? state : 'static';
  const c = eff === 'idle' ? 4.5 : 2.4;

  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      {/* Plate — a square recorder's seal, with corner cut */}
      <path
        d="M 5 5 H 22 L 27 10 V 27 H 5 Z"
        stroke={color} strokeWidth="1.6" strokeLinejoin="miter"
        fill="none"
        style={eff === 'error' ? { animation: `m2-error-shake 0.5s ease-in-out 2` } : undefined}
      />

      {/* Hidden T inside the plate — bar at top quarter, stem to bottom */}
      <g stroke={color} strokeWidth="1.4" strokeLinecap="square">
        <line x1="9"  y1="12" x2="22" y2="12"
          style={eff === 'processing' ? { animation: `m2-arc-pulse ${c/2}s ease-in-out infinite` } : undefined}/>
        <line x1="15.5" y1="12" x2="15.5" y2="23"
          style={eff === 'connecting' ? {
            transformOrigin: '15.5px 12px',
            animation: `m2-stem-grow ${c}s ease-out infinite`,
          } : undefined}/>
      </g>

      {/* The peeled corner — accent curve from notch tip back to plate */}
      <path
        d="M 22 5 Q 22 10 27 10"
        stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round"
        style={
          eff === 'idle'      ? { strokeDasharray: '14', strokeDashoffset: 14, animation: `m2-arc-trace ${c}s ease-in-out infinite`, '--m2-arc-len': 14 } :
          eff === 'resolving' ? { transformOrigin: '16px 16px', animation: `m2-spin ${c}s cubic-bezier(.65,.05,.35,1) infinite` } :
          eff === 'complete'  ? { strokeOpacity: 1 } :
          undefined
        }
      />

      {/* Complete — bloom from the peel anchor */}
      {eff === 'complete' && (
        <circle cx="24.5" cy="7.5" r="2" fill={accent} fillOpacity="0.5"
          style={{ transformOrigin: '24.5px 7.5px', animation: `m2-bloom 1.6s ease-out infinite` }}/>
      )}
    </svg>
  );
};

/* ============================================================
   MARK B — VOLUME & PAGE
   Two rectangles offset like a bound volume with a page lifted
   forward. The vertical gutter of the front page is the T-stem;
   its top edge is the T-bar. A small curved tab (bookmark) hangs
   from the top — the single curved accent.
   ============================================================ */
const MarkVolume = ({
  size = 32, color = 'currentColor', accent = 'var(--accent)',
  animate = true, state = 'idle',
}) => {
  const eff = animate ? state : 'static';
  const c = eff === 'idle' ? 4.5 : 2.4;

  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      {/* Back volume */}
      <rect x="4" y="6" width="20" height="22"
        stroke={color} strokeWidth="1.5" fill="none"/>

      {/* Front page — slightly lifted, contains the T */}
      <g style={eff === 'idle' ? { animation: `m2-page-lift ${c}s ease-in-out infinite`, transformOrigin: 'center' } : undefined}>
        <rect x="8" y="10" width="20" height="22"
          fill="var(--paper, #fff)" stroke={color} strokeWidth="1.5"/>
        {/* T-bar — top inset of the page */}
        <line x1="11" y1="14" x2="25" y2="14"
          stroke={color} strokeWidth="1.4"
          style={eff === 'processing' ? { animation: `m2-arc-pulse ${c/2}s ease-in-out infinite` } : undefined}/>
        {/* T-stem — center spine of the page */}
        <line x1="18" y1="14" x2="18" y2="28"
          stroke={color} strokeWidth="1.4"
          style={eff === 'connecting' ? {
            transformOrigin: '18px 14px',
            animation: `m2-stem-grow ${c}s ease-out infinite`,
          } : undefined}/>

        {/* Scanning processing row */}
        {eff === 'processing' && (
          <line x1="11" y1="17" x2="25" y2="17"
            stroke={accent} strokeWidth="0.8" strokeOpacity="0"
            style={{ animation: `m2-scan-row ${c}s ease-in-out infinite` }}/>
        )}
      </g>

      {/* Curved bookmark — accent */}
      <path
        d="M 22 10 Q 23.5 12 22 14 L 22 10 Z"
        fill={accent}
        style={
          eff === 'resolving' ? { transformOrigin: '16px 16px', animation: `m2-spin ${c}s cubic-bezier(.65,.05,.35,1) infinite` } :
          eff === 'error'     ? { animation: `m2-error-shake 0.5s ease-in-out 2` } :
          undefined
        }/>

      {eff === 'complete' && (
        <circle cx="22" cy="12" r="1.5" fill={accent} fillOpacity="0.5"
          style={{ transformOrigin: '22px 12px', animation: `m2-bloom 1.6s ease-out infinite` }}/>
      )}
    </svg>
  );
};

/* ============================================================
   MARK C — SECTION CORNER
   A true T with one boundary-arc closing the lower-right quadrant —
   the way a surveyor caps a section corner. The vertical is the
   T-stem; the horizontal is the T-bar; the arc is the single curved
   accent. Most legible at small sizes.
   ============================================================ */
const MarkSection = ({
  size = 32, color = 'currentColor', accent = 'var(--accent)',
  animate = true, state = 'idle',
}) => {
  const eff = animate ? state : 'static';
  const c = eff === 'idle' ? 4.5 : 2.4;
  // Arc from (24, 8) sweeping down to (16, 24) — a quarter ellipse.
  const arcPath = "M 24 8 A 16 16 0 0 1 16 24";
  const ARC_LEN = 25;

  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <g style={eff === 'error' ? { animation: `m2-error-shake 0.5s ease-in-out 2` } : undefined}>
        {/* T-bar */}
        <line x1="8" y1="8" x2="24" y2="8"
          stroke={color} strokeWidth="2" strokeLinecap="square"
          style={eff === 'processing' ? { animation: `m2-arc-pulse ${c/2}s ease-in-out infinite` } : undefined}/>
        {/* T-stem */}
        <line x1="16" y1="8" x2="16" y2="26"
          stroke={color} strokeWidth="2" strokeLinecap="square"
          style={eff === 'connecting' ? {
            transformOrigin: '16px 8px',
            animation: `m2-stem-grow ${c}s ease-out infinite`,
          } : undefined}/>

        {/* Tiny corner ticks — surveyor monuments at bar ends + stem foot */}
        <circle cx="8"  cy="8"  r="1.4" fill={color}/>
        <circle cx="16" cy="26" r="1.4" fill={color}/>

        {/* The single curved accent — quarter-arc closing the SE quadrant */}
        <path
          d={arcPath}
          stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round"
          style={
            eff === 'idle'      ? { strokeDasharray: ARC_LEN, strokeDashoffset: ARC_LEN, animation: `m2-arc-trace ${c}s ease-in-out infinite`, '--m2-arc-len': ARC_LEN } :
            eff === 'resolving' ? { transformOrigin: '16px 16px', animation: `m2-spin ${c}s cubic-bezier(.65,.05,.35,1) infinite` } :
            eff === 'connecting'? { strokeDasharray: ARC_LEN, strokeDashoffset: ARC_LEN, animation: `m2-arc-trace ${c}s ease-out infinite`, '--m2-arc-len': ARC_LEN } :
            eff === 'complete'  ? { strokeOpacity: 1 } :
            undefined
          }
        />
        {/* Endpoint dot of the arc — emphasizes the closure */}
        <circle cx="24" cy="8" r="1.6" fill={accent}/>
      </g>

      {eff === 'complete' && (
        <circle cx="24" cy="8" r="2.2" fill={accent} fillOpacity="0.5"
          style={{ transformOrigin: '24px 8px', animation: `m2-bloom 1.6s ease-out infinite` }}/>
      )}
    </svg>
  );
};

Object.assign(window, { MarkFolio, MarkVolume, MarkSection });