// ── CIRA Labs — Logo mark + geometric icon set ──────────────────────────
const { useRef, useEffect, useState } = React;

// Aperture / iris mark — "seeing inside intelligence"
function Logo({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <defs>
        <linearGradient id="lg-mark" x1="0" y1="0" x2="32" y2="32">
          <stop offset="0" stopColor="var(--accent-from)" />
          <stop offset="1" stopColor="var(--accent-to)" />
        </linearGradient>
      </defs>
      <circle cx="16" cy="16" r="14.2" stroke="url(#lg-mark)" strokeWidth="1.4" opacity="0.55" />
      {/* aperture blades */}
      {[0, 60, 120, 180, 240, 300].map((a) => (
        <line
          key={a}
          x1="16" y1="16"
          x2={16 + 11 * Math.cos((a * Math.PI) / 180)}
          y2={16 + 11 * Math.sin((a * Math.PI) / 180)}
          stroke="url(#lg-mark)" strokeWidth="1.3" opacity="0.5"
        />
      ))}
      <circle cx="16" cy="16" r="5.4" fill="none" stroke="url(#lg-mark)" strokeWidth="1.6" />
      <circle cx="16" cy="16" r="2.1" fill="url(#lg-mark)" />
    </svg>
  );
}

function Wordmark({ size = 30 }) {
  const p = window.location.pathname.split('/').pop();
  const isHome = !p || p === '' || p === 'index.html' || p === 'index';
  return (
    <a href={isHome ? '#top' : '/'} className="flex items-center gap-2.5 group">
      <span className="transition-transform duration-500 group-hover:rotate-90" style={{ display: 'inline-flex' }}>
        <Logo size={size} />
      </span>
      <span className="font-display font-semibold tracking-tight text-soft text-[19px] leading-none">
        CIRA<span className="text-muted font-normal"> Labs</span>
      </span>
    </a>
  );
}

// Geometric line icons — stroke uses currentColor
const iconBase = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };

function IconExplain(p) {
  return (
    <svg viewBox="0 0 40 40" width={p.size || 30} height={p.size || 30} {...iconBase}>
      <circle cx="20" cy="20" r="13" />
      <path d="M20 20 L20 7" /><path d="M20 20 L31 26" /><path d="M20 20 L9 26" />
      <circle cx="20" cy="7" r="1.6" fill="currentColor" stroke="none" />
      <circle cx="31" cy="26" r="1.6" fill="currentColor" stroke="none" />
      <circle cx="9" cy="26" r="1.6" fill="currentColor" stroke="none" />
    </svg>
  );
}
function IconSafety(p) {
  return (
    <svg viewBox="0 0 40 40" width={p.size || 30} height={p.size || 30} {...iconBase}>
      <path d="M20 5 L32 10 V20 C32 28 26 33 20 35 C14 33 8 28 8 20 V10 Z" />
      <path d="M15 20 l3.5 3.5 L26 16" />
    </svg>
  );
}
function IconAgents(p) {
  return (
    <svg viewBox="0 0 40 40" width={p.size || 30} height={p.size || 30} {...iconBase}>
      <rect x="11" y="14" width="18" height="14" rx="3" />
      <path d="M20 14 V8" /><circle cx="20" cy="6.4" r="1.8" fill="currentColor" stroke="none" />
      <circle cx="16" cy="21" r="1.7" fill="currentColor" stroke="none" />
      <circle cx="24" cy="21" r="1.7" fill="currentColor" stroke="none" />
      <path d="M8 19 v4" /><path d="M32 19 v4" />
    </svg>
  );
}
function IconMulti(p) {
  return (
    <svg viewBox="0 0 40 40" width={p.size || 30} height={p.size || 30} {...iconBase}>
      <circle cx="14" cy="14" r="6.5" /><rect x="20" y="20" width="13" height="13" rx="3" />
      <path d="M14 20.5 V26 a3 3 0 0 0 3 3 h3" />
    </svg>
  );
}
function IconInterpret(p) {
  return (
    <svg viewBox="0 0 40 40" width={p.size || 30} height={p.size || 30} {...iconBase}>
      <path d="M5 20 C10 11 30 11 35 20 C30 29 10 29 5 20 Z" />
      <circle cx="20" cy="20" r="4.4" />
      <circle cx="20" cy="20" r="1.4" fill="currentColor" stroke="none" />
    </svg>
  );
}
function IconCollab(p) {
  return (
    <svg viewBox="0 0 40 40" width={p.size || 30} height={p.size || 30} {...iconBase}>
      <circle cx="13" cy="15" r="5" /><path d="M5 31 c0-5 4-8 8-8 s8 3 8 8" />
      <circle cx="27" cy="18" r="4" /><path d="M22.5 31 c0-4 2.5-6.5 4.5-6.5 s4.5 2 5 6" />
    </svg>
  );
}

// Small UI glyphs
function ArrowRight(p) {
  return (
    <svg viewBox="0 0 24 24" width={p.size || 16} height={p.size || 16} fill="none" stroke="currentColor" strokeWidth={p.sw || 1.6} strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14" /><path d="M13 6l6 6-6 6" />
    </svg>
  );
}
function IconLinkedIn(p){return(<svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 0 5 8.5a2.5 2.5 0 0 0-.02-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.76V21h-4v-5.3c0-1.26-.02-2.9-1.77-2.9-1.77 0-2.04 1.38-2.04 2.8V21h-4z"/></svg>);}
function IconGitHub(p){return(<svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="currentColor"><path d="M12 2C6.48 2 2 6.58 2 12.25c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.49v-1.7c-2.78.62-3.37-1.22-3.37-1.22-.46-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.57 2.36 1.12 2.94.85.09-.66.35-1.12.63-1.38-2.22-.26-4.55-1.14-4.55-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.27 2.75 1.05a9.4 9.4 0 0 1 5 0c1.91-1.32 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.05.36.32.68.94.68 1.9v2.81c0 .27.18.6.69.49A10.26 10.26 0 0 0 22 12.25C22 6.58 17.52 2 12 2z"/></svg>);}
function IconX(p){return(<svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="currentColor"><path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.21-6.82-5.96 6.82H1.69l7.73-8.84L1.25 2.25h6.82l4.71 6.23zM17.08 19.77h1.83L7.01 4.13H5.05z"/></svg>);}

Object.assign(window, {
  Logo, Wordmark,
  IconExplain, IconSafety, IconAgents, IconMulti, IconInterpret, IconCollab,
  ArrowRight, IconLinkedIn, IconGitHub, IconX,
});
