// Bold SVG iconography + animated primitives for Hero & integrations.

// Animated compass: rotating needle + pulsing N-E-S-W + subtle orbits
const CompassVisual = ({ size = 420 }) => (
  <svg viewBox="0 0 400 400" width={size} height={size} className="block" aria-hidden="true">
    <defs>
      <radialGradient id="cg1" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor="rgb(var(--primary))" stopOpacity=".22" />
        <stop offset="55%" stopColor="rgb(var(--primary))" stopOpacity=".04" />
        <stop offset="100%" stopColor="rgb(var(--primary))" stopOpacity="0" />
      </radialGradient>
      <linearGradient id="nl" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="rgb(var(--primary))" />
        <stop offset="100%" stopColor="rgb(var(--primary))" stopOpacity=".2" />
      </linearGradient>
      <linearGradient id="sl" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="rgb(var(--fg))" stopOpacity=".15" />
        <stop offset="100%" stopColor="rgb(var(--fg))" stopOpacity=".5" />
      </linearGradient>
    </defs>

    {/* glow */}
    <circle cx="200" cy="200" r="180" fill="url(#cg1)" />

    {/* Orbits */}
    <g stroke="rgb(var(--border))" fill="none">
      <circle cx="200" cy="200" r="170" strokeDasharray="1 7" />
      <circle cx="200" cy="200" r="132" strokeDasharray="2 6" />
      <circle cx="200" cy="200" r="96"  />
      <circle cx="200" cy="200" r="66"  />
    </g>

    {/* Rotating ring with ticks */}
    <g style={{ transformOrigin: "200px 200px", animation: "spinSlow 60s linear infinite" }} stroke="rgb(var(--fg))" opacity=".35">
      {Array.from({length: 48}).map((_,i)=>{
        const a = (i * 360/48) * Math.PI/180;
        const r1 = 160, r2 = i%4===0 ? 150 : 155;
        return <line key={i} x1={200+r1*Math.cos(a)} y1={200+r1*Math.sin(a)} x2={200+r2*Math.cos(a)} y2={200+r2*Math.sin(a)} />;
      })}
    </g>

    {/* Cardinal points */}
    <g fontFamily="Geist, Inter, sans-serif" fontWeight="600" fill="rgb(var(--fg))" opacity=".55" textAnchor="middle" fontSize="11">
      <text x="200" y="38">N</text>
      <text x="368" y="204">E</text>
      <text x="200" y="372">S</text>
      <text x="32"  y="204">W</text>
    </g>

    {/* Data dots traveling along inner orbit */}
    <g>
      <circle cx="0" cy="-96" r="3.5" fill="rgb(var(--primary))">
        <animateTransform attributeName="transform" type="rotate" from="0 200 200" to="360 200 200" dur="8s" repeatCount="indefinite" />
      </circle>
      <circle cx="0" cy="-96" r="2.5" fill="rgb(var(--primary))" opacity=".6">
        <animateTransform attributeName="transform" type="rotate" from="120 200 200" to="480 200 200" dur="11s" repeatCount="indefinite" />
      </circle>
      <circle cx="0" cy="-132" r="2" fill="rgb(var(--fg))" opacity=".45">
        <animateTransform attributeName="transform" type="rotate" from="240 200 200" to="-120 200 200" dur="14s" repeatCount="indefinite" />
      </circle>
    </g>

    {/* Needle */}
    <g style={{ transformOrigin: "200px 200px", animation: "needleSwing 7s ease-in-out infinite" }}>
      <polygon points="200,100 212,200 200,210 188,200" fill="url(#nl)" />
      <polygon points="200,300 212,200 200,190 188,200" fill="url(#sl)" />
      <circle cx="200" cy="200" r="9" fill="rgb(var(--bg))" stroke="rgb(var(--primary))" strokeWidth="2" />
      <circle cx="200" cy="200" r="3" fill="rgb(var(--primary))" />
    </g>
  </svg>
);

// Inline integration logo — stylized text chips (original — no real logos)
const IntLogo = ({ label, mono=true, subtle=false }) => (
  <span className={`inline-flex items-center gap-1.5 whitespace-nowrap ${subtle?"opacity-55":"opacity-90"}`}>
    <span className="h-1.5 w-1.5 rounded-full bg-primary/70" />
    <span className={`text-[12px] font-medium tracking-tight ${mono?"font-mono":""}`}>{label}</span>
  </span>
);

// Infinite-scrolling integrations ticker
const IntegrationsTicker = () => {
  const items = [
    "1С:Бухгалтерия","1С:УТ","1С:ERP","Диадок","СБИС","1С-ЭДО",
    "СберБизнес","Т-Банк","ВТБ","Альфа","Открытие","Росбанк",
    "Контур.Фокус","СПАРК","Rusprofile","ЕГРЮЛ","ЕФРСБ","ФССП","kad.arbitr"
  ];
  const Row = ({ speed="40s", dir="normal" }) => (
    <div className="flex gap-10 whitespace-nowrap"
      style={{ animation: `marquee ${speed} linear infinite`, animationDirection: dir }}>
      {[...items, ...items].map((l,i)=>(
        <span key={i} className="inline-flex items-center gap-2 text-[13px] font-medium text-foreground/70">
          <span className="h-1 w-1 rounded-full bg-primary/70" />
          {l}
        </span>
      ))}
    </div>
  );
  return (
    <div className="relative overflow-hidden py-2" style={{maskImage:"linear-gradient(to right, transparent, #000 10%, #000 90%, transparent)", WebkitMaskImage:"linear-gradient(to right, transparent, #000 10%, #000 90%, transparent)"}}>
      <Row />
    </div>
  );
};

// Rich icons with internal micro-animation
const RichIcon = {
  ShieldPulse: ({ size=22 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <path d="M12 3 4 6v6c0 4.5 3.2 8 8 9 4.8-1 8-4.5 8-9V6l-8-3z" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M8 12l3 3 5-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
        strokeDasharray="18" strokeDashoffset="18" style={{ animation: "drawStroke 1.4s ease .2s forwards" }} />
    </svg>
  ),
  ZapPulse: ({ size=22 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" />
      <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" fill="currentColor" opacity=".15">
        <animate attributeName="opacity" values=".05;.35;.05" dur="2.2s" repeatCount="indefinite"/>
      </path>
    </svg>
  ),
  ServerPulse: ({ size=22 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <rect x="3" y="4"  width="18" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.6"/>
      <rect x="3" y="13" width="18" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="7" cy="7.5" r="1" fill="currentColor">
        <animate attributeName="opacity" values="1;.2;1" dur="1.6s" repeatCount="indefinite"/>
      </circle>
      <circle cx="7" cy="16.5" r="1" fill="currentColor">
        <animate attributeName="opacity" values=".2;1;.2" dur="1.6s" repeatCount="indefinite"/>
      </circle>
    </svg>
  ),
  PlugFlow: ({ size=22 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <path d="M9 2v4M15 2v4M7 10h10v4a5 5 0 1 1-10 0v-4zM12 19v3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
      <circle r="1" fill="currentColor">
        <animateMotion dur="2s" repeatCount="indefinite" path="M12 10 V22" />
      </circle>
    </svg>
  ),
  ClockTick: ({ size=22 }) => (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" aria-hidden="true">
      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="12" y1="12" x2="12" y2="7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="12s" repeatCount="indefinite"/>
      </line>
      <line x1="12" y1="12" x2="15" y2="12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
        <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1.5s" repeatCount="indefinite"/>
      </line>
    </svg>
  ),
  FlowArrow: ({ size=22 }) => (
    <svg viewBox="0 0 48 24" width={size*2} height={size} fill="none" aria-hidden="true">
      <path d="M2 12h40" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
      <path d="M36 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <circle r="2" fill="currentColor">
        <animateMotion dur="2.2s" repeatCount="indefinite" path="M2 12 H40" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.1;.9;1" dur="2.2s" repeatCount="indefinite" />
      </circle>
    </svg>
  ),
};

Object.assign(window, { CompassVisual, IntegrationsTicker, RichIcon, IntLogo });
