/* Oqiva Labs — shared icon + mark components */

const Mark = ({ size = 22, animated = false }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
    <defs>
      <linearGradient id="oq-grad" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse">
        <stop offset="0" stopColor="var(--accent)" />
        <stop offset="1" stopColor="var(--accent-deep)" />
      </linearGradient>
    </defs>
    {/* Outer rounded square — represents container */}
    <rect x="1.25" y="1.25" width="29.5" height="29.5" rx="8" stroke="currentColor" strokeWidth="1.25" opacity="0.85" />
    {/* Inner orbit — operations layer */}
    <circle cx="16" cy="16" r="9" stroke="url(#oq-grad)" strokeWidth="1.5" />
    {/* Center dot — node */}
    <circle cx="16" cy="16" r="3" fill="url(#oq-grad)" />
    {/* Tick on orbit — agent */}
    <circle cx="25" cy="16" r="1.5" fill="var(--accent-deep)">
      {animated && (
        <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="6s" repeatCount="indefinite" />
      )}
    </circle>
  </svg>
);

const Wordmark = ({ size = 22, animated = false }) => (
  <span className="wordmark">
    <span className="mark" style={{ color: "var(--ink)" }}>
      <Mark size={size} animated={animated} />
    </span>
    <span>Oqiva Labs</span>
  </span>
);

const ArrowRight = ({ size = 14 }) => (
  <svg className="arr" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const ArrowUpRight = ({ size = 14 }) => (
  <svg className="arr" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M5 11L11 5M6 5h5v5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Plus = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
    <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
  </svg>
);

const Check = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Spark = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
    <path d="M8 1v4M8 11v4M1 8h4M11 8h4M3.5 3.5l2.5 2.5M10 10l2.5 2.5M3.5 12.5L6 10M10 6l2.5-2.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
  </svg>
);

const ChevDown = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden="true">
    <path d="M3 4.5L6 7.5l3-3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

Object.assign(window, { Mark, Wordmark, ArrowRight, ArrowUpRight, Plus, Check, Spark, ChevDown });
