// Argus visual graphics, eye motif, geometric marks
// Exposes to window for cross-script use

const ArgusEye = ({ size = 540, variant = 'hero' }) => {
  // Stylized geometric eye, fan of rays + central iris
  const cx = 270, cy = 270;
  const rays = 18;
  const goldRays = [2, 5, 9, 13, 16];
  return (
    <svg viewBox="0 0 540 540" width={size} height={size} fill="none" xmlns="http://www.w3.org/2000/svg" style={{maxWidth: '100%'}}>
      <defs>
        <radialGradient id="iris" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#0E1A3A" />
          <stop offset="60%" stopColor="#0E1A3A" />
          <stop offset="100%" stopColor="#14224A" />
        </radialGradient>
        <radialGradient id="pupilGlow" cx="0.4" cy="0.4" r="0.6">
          <stop offset="0%" stopColor="#1B2C5A" />
          <stop offset="100%" stopColor="#000511" />
        </radialGradient>
      </defs>

      {/* Outer ray fan, 18 rays radiating out (hundred-eyes/Argus motif) */}
      {Array.from({length: rays}).map((_, i) => {
        const ang = (i / rays) * Math.PI * 2 - Math.PI / 2;
        const len = 230 + (i % 3) * 14;
        const innerR = 110;
        const x1 = cx + Math.cos(ang) * innerR;
        const y1 = cy + Math.sin(ang) * innerR;
        const x2 = cx + Math.cos(ang) * len;
        const y2 = cy + Math.sin(ang) * len;
        const isGold = goldRays.includes(i);
        return (
          <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
            stroke={isGold ? '#C8A961' : '#0E1A3A'}
            strokeWidth={isGold ? 1.2 : 0.9}
            strokeLinecap="round"
            opacity={isGold ? 0.85 : 0.55}
          />
        );
      })}

      {/* Concentric arcs, almond eye shape */}
      <ellipse cx={cx} cy={cy} rx="180" ry="92" stroke="#0E1A3A" strokeWidth="2.2" fill="none" />
      <ellipse cx={cx} cy={cy} rx="158" ry="78" stroke="#C8A961" strokeWidth="1" fill="none" opacity="0.7" />
      <ellipse cx={cx} cy={cy} rx="128" ry="62" stroke="#0E1A3A" strokeWidth="0.6" fill="none" opacity="0.4" />

      {/* Iris */}
      <circle cx={cx} cy={cy} r="62" fill="url(#iris)" />
      <circle cx={cx} cy={cy} r="62" stroke="#C8A961" strokeWidth="1.4" fill="none" opacity="0.8" />

      {/* Iris radial striations */}
      {Array.from({length: 36}).map((_, i) => {
        const ang = (i / 36) * Math.PI * 2;
        const x1 = cx + Math.cos(ang) * 24;
        const y1 = cy + Math.sin(ang) * 24;
        const x2 = cx + Math.cos(ang) * 58;
        const y2 = cy + Math.sin(ang) * 58;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#C8A961" strokeWidth="0.4" opacity="0.35" />;
      })}

      {/* Pupil */}
      <circle cx={cx} cy={cy} r="22" fill="url(#pupilGlow)" />
      <circle cx={cx - 6} cy={cy - 6} r="4" fill="#F7F3EC" opacity="0.6" />

      {/* Decorative outer ring with tick marks */}
      <circle cx={cx} cy={cy} r="252" stroke="#0E1A3A" strokeWidth="0.5" fill="none" opacity="0.18" strokeDasharray="1 6" />
    </svg>
  );
};

const EyeMark = ({ size = 28, color = '#0E1A3A', goldColor = '#C8A961' }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <ellipse cx="16" cy="16" rx="13" ry="6.5" stroke={color} strokeWidth="1.4"/>
    <ellipse cx="16" cy="16" rx="10" ry="5" stroke={goldColor} strokeWidth="0.8" opacity="0.7"/>
    <circle cx="16" cy="16" r="4" fill={color}/>
    <circle cx="16" cy="16" r="1.6" fill="#000"/>
    <line x1="2" y1="16" x2="6" y2="16" stroke={goldColor} strokeWidth="1"/>
    <line x1="26" y1="16" x2="30" y2="16" stroke={goldColor} strokeWidth="1"/>
  </svg>
);

// Geometric glyphs for the four pillars
const PillarGlyphs = {
  identity: (
    <svg viewBox="0 0 56 56" width="56" height="56" fill="none">
      <circle cx="28" cy="20" r="8" />
      <path d="M12 48c0-8.8 7.2-16 16-16s16 7.2 16 16" />
      <line x1="6" y1="48" x2="50" y2="48" />
    </svg>
  ),
  security: (
    <svg viewBox="0 0 56 56" width="56" height="56" fill="none">
      <path d="M28 6 L46 14 V28 C46 39 38 47 28 50 C18 47 10 39 10 28 V14 Z" />
      <path d="M22 28 L26 32 L34 22" strokeWidth="1.4" />
    </svg>
  ),
  ai: (
    <svg viewBox="0 0 56 56" width="56" height="56" fill="none">
      <rect x="14" y="14" width="28" height="28" rx="2" />
      <circle cx="28" cy="28" r="4" />
      <line x1="28" y1="6" x2="28" y2="14" />
      <line x1="28" y1="42" x2="28" y2="50" />
      <line x1="6" y1="28" x2="14" y2="28" />
      <line x1="42" y1="28" x2="50" y2="28" />
      <line x1="20" y1="20" x2="14" y2="14" />
      <line x1="36" y1="36" x2="42" y2="42" />
      <line x1="36" y1="20" x2="42" y2="14" />
      <line x1="20" y1="36" x2="14" y2="42" />
    </svg>
  ),
  intelligence: (
    <svg viewBox="0 0 56 56" width="56" height="56" fill="none">
      <circle cx="28" cy="28" r="20" />
      <circle cx="28" cy="28" r="12" />
      <circle cx="28" cy="28" r="4" />
      <line x1="28" y1="4" x2="28" y2="14" />
      <line x1="28" y1="42" x2="28" y2="52" />
      <line x1="4" y1="28" x2="14" y2="28" />
      <line x1="42" y1="28" x2="52" y2="28" />
    </svg>
  )
};

Object.assign(window, { ArgusEye, EyeMark, PillarGlyphs });
