// logo.jsx — Vital brand mark, brand lockup, and loading splash
// Pure SVG components. Loaded via Babel before auth.jsx / nav.jsx / app.jsx.
//
// VitalLogo — bare mark (heartbeat in a ring). Pass size + color.
// VitalBrand — mark + wordmark + tagline. Horizontal or vertical.
// VitalSplash — full-stage animated splash for the initial loading state.

function VitalLogo({ size = 22, stroke = 1.4, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-label="Vital">
      <circle
        cx="20" cy="20" r="18.4"
        stroke={color} strokeWidth={stroke}
        fill="none" />
      {/* heartbeat: flat baseline → small dip → tall spike → small bounce → flat */}
      <path
        d="M5.5 20 L13 20 L15.2 14 L19 27 L22.5 15.5 L24.8 20 L34.5 20"
        stroke={color}
        strokeWidth={stroke + 0.4}
        strokeLinecap="round"
        strokeLinejoin="round"
        fill="none" />
    </svg>
  );
}

// Horizontal brand lockup with optional `compact` (mark only).
function VitalBrand({ markSize = 36, compact = false, vertical = false }) {
  if (compact) {
    return (
      <div className="vital-brand-mark" style={{ width: markSize, height: markSize }}>
        <VitalLogo size={markSize - 8} color="var(--primary)" />
      </div>
    );
  }
  if (vertical) {
    return (
      <div className="vital-brand vital-brand-v">
        <div className="vital-brand-mark" style={{ width: markSize + 6, height: markSize + 6 }}>
          <VitalLogo size={markSize - 2} color="var(--primary)" />
        </div>
        <div className="vital-brand-text">
          <div className="vital-brand-name serif">Vital</div>
          <div className="vital-brand-tag mono">CNE · Hong Kong</div>
        </div>
      </div>
    );
  }
  return (
    <div className="vital-brand">
      <div className="vital-brand-mark" style={{ width: markSize, height: markSize }}>
        <VitalLogo size={markSize - 8} color="var(--primary)" />
      </div>
      <div className="vital-brand-text">
        <div className="vital-brand-name serif">Vital</div>
        <div className="vital-brand-tag mono">CNE · Hong Kong</div>
      </div>
    </div>
  );
}

// Animated full-stage splash used while AuthAPI.getSession() resolves.
// The ring breathes; the heartbeat draws across, holds, and sweeps off,
// looping every 2.4s. Respects prefers-reduced-motion.
function VitalSplash({ label }) {
  return (
    <div className="vital-splash" role="status" aria-busy="true">
      <div className="vital-splash-stage" aria-hidden="true">
        <svg width="84" height="84" viewBox="0 0 40 40" fill="none">
          <circle
            cx="20" cy="20" r="18.4"
            className="vs-ring"
            stroke="var(--primary)" strokeWidth="1.1"
            fill="none" />
          {/* dim baseline ECG (always visible) */}
          <path
            d="M5.5 20 L13 20 L15.2 14 L19 27 L22.5 15.5 L24.8 20 L34.5 20"
            className="vs-pulse-bg"
            stroke="var(--primary)" strokeWidth="1.5"
            strokeLinecap="round" strokeLinejoin="round"
            fill="none" />
          {/* bright pulse that sweeps across via a CSS mask */}
          <path
            d="M5.5 20 L13 20 L15.2 14 L19 27 L22.5 15.5 L24.8 20 L34.5 20"
            className="vs-pulse"
            stroke="var(--primary)" strokeWidth="2"
            strokeLinecap="round" strokeLinejoin="round"
            fill="none" />
        </svg>
      </div>
      <div className="vital-splash-name serif">Vital</div>
      <div className="vital-splash-label mono">{label || 'Loading'}</div>
    </div>
  );
}

Object.assign(window, { VitalLogo, VitalBrand, VitalSplash });