// icons.jsx — SVG icons used throughout. Dragon mark, feature icons, install icons.

// Stylized Kali dragon — original geometric interpretation (NOT the official logo).
// Triangular dragon head pattern with circuit-board accents — a "hacker dragon".
function DragonMark({ size = 320, glow = true }) {
  const id = React.useId();
  return (
    <svg viewBox="0 0 320 320" width={size} height={size} aria-hidden="true">
      <defs>
        <linearGradient id={`g-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="#9bffaf" />
          <stop offset="50%" stopColor="#00ff41" />
          <stop offset="100%" stopColor="#00b82e" />
        </linearGradient>
        <filter id={`glow-${id}`} x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="3.5" result="b" />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      {/* Outer rotating ring of ticks */}
      <g transform="translate(160 160)" opacity="0.5" style={{ transformOrigin: 'center', animation: 'spin-slow 60s linear infinite' }}>
        {Array.from({ length: 48 }).map((_, i) => {
          const a = (i / 48) * Math.PI * 2;
          const r1 = 148, r2 = i % 4 === 0 ? 138 : 143;
          const x1 = Math.cos(a) * r1, y1 = Math.sin(a) * r1;
          const x2 = Math.cos(a) * r2, y2 = Math.sin(a) * r2;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(0,255,65,.4)" strokeWidth="1" />;
        })}
      </g>
      {/* Mid ring */}
      <circle cx="160" cy="160" r="125" fill="none" stroke="rgba(0,255,65,.18)" strokeDasharray="2 5" />
      <circle cx="160" cy="160" r="115" fill="none" stroke="rgba(0,255,65,.32)" />

      <g filter={glow ? `url(#glow-${id})` : undefined}>
        {/* Dragon head silhouette — geometric triangles forming a snarling profile */}
        <g transform="translate(160 160)" fill={`url(#g-${id})`}>
          {/* Lower jaw */}
          <polygon points="-78,30 -20,38 30,52 70,30 50,55 -20,68 -70,55" opacity="0.92" />
          {/* Upper head */}
          <polygon points="-80,-10 -55,-50 -10,-65 45,-60 78,-30 80,5 50,15 -10,0 -50,10" />
          {/* Snout */}
          <polygon points="-90,-5 -78,-22 -55,-18 -50,8 -75,12" />
          {/* Eye triangle (dark cutout) */}
          <polygon points="10,-32 30,-32 22,-18" fill="#050706" />
          {/* Eye glow */}
          <circle cx="20" cy="-26" r="3" fill="#fff" />
          {/* Horns / spikes */}
          <polygon points="-10,-65 -2,-95 10,-67" />
          <polygon points="20,-65 35,-92 42,-65" />
          <polygon points="50,-58 70,-82 65,-55" />
          {/* Teeth */}
          <polygon points="-60,8 -55,22 -50,10" fill="#050706" />
          <polygon points="-40,9 -36,24 -32,11" fill="#050706" />
          <polygon points="-22,10 -18,26 -14,12" fill="#050706" />
          {/* Neck plates / scales — small triangles trailing back */}
          <polygon points="-78,55 -110,75 -90,65" opacity="0.7" />
          <polygon points="-90,75 -118,98 -98,82" opacity="0.55" />
          <polygon points="-100,95 -125,118 -105,102" opacity="0.4" />
          {/* Decorative circuit lines coming off head */}
        </g>
        {/* Circuit traces */}
        <g stroke="rgba(0,255,65,.5)" strokeWidth="1.1" fill="none">
          <path d="M40 200 L 70 200 L 75 195 L 95 195" />
          <path d="M280 130 L 250 130 L 245 135 L 225 135" />
          <path d="M60 100 L 90 100 L 95 105" />
          <path d="M260 220 L 230 220 L 225 215" />
          <circle cx="38" cy="200" r="2.5" fill="rgba(0,255,65,.8)" />
          <circle cx="282" cy="130" r="2.5" fill="rgba(0,255,65,.8)" />
          <circle cx="58" cy="100" r="2" fill="rgba(0,255,65,.6)" />
          <circle cx="262" cy="220" r="2" fill="rgba(0,255,65,.6)" />
        </g>
      </g>

      {/* Reticle corners */}
      <g stroke="rgba(0,255,65,.65)" strokeWidth="1.4" fill="none">
        <path d="M20 36 L 20 20 L 36 20" />
        <path d="M284 20 L 300 20 L 300 36" />
        <path d="M300 284 L 300 300 L 284 300" />
        <path d="M36 300 L 20 300 L 20 284" />
      </g>
      {/* Coordinates */}
      <text x="20" y="312" fill="rgba(0,255,65,.55)" fontFamily="monospace" fontSize="9">
        LAT 47.6062°N · LON 122.3321°W
      </text>
      <text x="300" y="312" fill="rgba(0,255,65,.55)" fontFamily="monospace" fontSize="9" textAnchor="end">
        KALI-2026.1 · KERNEL 6.12
      </text>
      <text x="160" y="20" fill="rgba(0,255,65,.65)" fontFamily="monospace" fontSize="9" textAnchor="middle" letterSpacing="2">
        ◢ TARGET ACQUIRED ◣
      </text>
    </svg>
  );
}

// Small inline SVG icons for features and installs.
function Icon({ name, size = 32 }) {
  const props = { width: size, height: size, viewBox: '0 0 32 32', fill: 'none',
                   stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'rolling':
      return (
        <svg {...props}>
          <circle cx="16" cy="16" r="11" />
          <path d="M16 5v6l4 2" />
          <path d="M5 16h3M24 16h3M16 24v3" />
        </svg>
      );
    case 'kernel':
      return (
        <svg {...props}>
          <rect x="8" y="8" width="16" height="16" rx="1" />
          <rect x="12" y="12" width="8" height="8" />
          <path d="M16 4v4M16 24v4M4 16h4M24 16h4M8 8L5 5M27 5l-3 3M24 24l3 3M5 27l3-3" />
        </svg>
      );
    case 'tools':
      return (
        <svg {...props}>
          <path d="M21 6l4 4-9 9-4-4 9-9z" />
          <path d="M7 24l4-1 8-8" />
          <path d="M4 28l3-4M22 9l1 1" />
        </svg>
      );
    case 'multi':
      return (
        <svg {...props}>
          <rect x="4" y="7" width="12" height="9" rx="1" />
          <rect x="18" y="14" width="10" height="14" rx="1" />
          <path d="M4 19h12M10 16v6M6 22h8" />
        </svg>
      );
    case 'undercover':
      return (
        <svg {...props}>
          <path d="M6 12c2-3 6-4 10-4s8 1 10 4" />
          <circle cx="10" cy="18" r="4" />
          <circle cx="22" cy="18" r="4" />
          <path d="M14 18h4" />
        </svg>
      );
    case 'free':
      return (
        <svg {...props}>
          <circle cx="16" cy="16" r="11" />
          <path d="M11 11l10 10M16 8v2M16 22v2M8 16h2M22 16h2" />
        </svg>
      );
    case 'pi':
      return (
        <svg {...props}>
          <rect x="5" y="9" width="22" height="14" rx="1" />
          <rect x="9" y="13" width="6" height="6" />
          <rect x="17" y="13" width="3" height="6" />
          <rect x="22" y="13" width="3" height="6" />
          <path d="M9 9V6M14 9V6M19 9V6" />
        </svg>
      );
    case 'cloud':
      return (
        <svg {...props}>
          <path d="M9 21h14a4 4 0 100-8 6 6 0 00-11.6-1 4 4 0 00-2.4 7.5z" />
          <path d="M14 17l2 2 4-4" />
        </svg>
      );
    case 'vm':
      return (
        <svg {...props}>
          <rect x="4" y="6" width="24" height="16" rx="1" />
          <rect x="8" y="10" width="10" height="8" />
          <path d="M20 14h4M20 18h2M4 25h24M10 25v2M22 25v2" />
        </svg>
      );
    case 'docker':
      return (
        <svg {...props}>
          <rect x="6" y="14" width="4" height="4" />
          <rect x="11" y="14" width="4" height="4" />
          <rect x="16" y="14" width="4" height="4" />
          <rect x="11" y="9" width="4" height="4" />
          <path d="M4 19c0 4 4 6 10 6s12-3 14-9c-2 1-4 1-5-1" />
        </svg>
      );
    case 'usb':
      return (
        <svg {...props}>
          <path d="M16 4v16" />
          <path d="M16 8l-3 4h6l-3-4z" fill="currentColor" />
          <rect x="12" y="20" width="8" height="8" rx="1" />
          <path d="M16 12v8M14 24h4" />
        </svg>
      );
    case 'phone':
      return (
        <svg {...props}>
          <rect x="9" y="3" width="14" height="26" rx="2" />
          <path d="M14 26h4M9 7h14M9 23h14" />
        </svg>
      );
    case 'metal':
      return (
        <svg {...props}>
          <rect x="4" y="9" width="24" height="14" rx="1" />
          <path d="M8 23v3M24 23v3M11 13h10M11 17h6" />
        </svg>
      );
    case 'wsl':
      return (
        <svg {...props}>
          <rect x="4" y="6" width="11" height="11" />
          <rect x="17" y="6" width="11" height="11" />
          <rect x="4" y="19" width="11" height="11" />
          <rect x="17" y="19" width="11" height="11" />
        </svg>
      );
    default:
      return null;
  }
}

window.DragonMark = DragonMark;
window.Icon = Icon;