/* NexGen Builders — geometric icon set
   All icons built from simple shapes: circles, rects, lines.
   currentColor for theming. */

const Icon = {
  // Brand mark — stylized "NX" arrow motif from the logo (up-blue, down-coral)
  NXMark: ({ size = 38 }) => (
    <svg className="nx-mark" viewBox="0 0 48 48" width={size} height={size} aria-hidden="true">
      <defs>
        <linearGradient id="nxA" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5B9CFF"/>
          <stop offset="100%" stopColor="#3D7EFF"/>
        </linearGradient>
        <linearGradient id="nxB" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FF6B6B"/>
          <stop offset="100%" stopColor="#FF5757"/>
        </linearGradient>
      </defs>
      {/* Left up-arrow */}
      <path d="M10 30 L10 18 L6 18 L13 8 L20 18 L16 18 L16 30 Z" fill="url(#nxA)"/>
      {/* Right down-arrow */}
      <path d="M32 18 L32 30 L36 30 L29 40 L22 30 L26 30 L26 18 Z" fill="url(#nxB)"/>
    </svg>
  ),

  // Robotics — circuit node grid (4 dots + lines)
  Robotics: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
      <rect x="4" y="4" width="6" height="6" rx="1.5"/>
      <rect x="14" y="4" width="6" height="6" rx="1.5"/>
      <rect x="4" y="14" width="6" height="6" rx="1.5"/>
      <rect x="14" y="14" width="6" height="6" rx="1.5"/>
      <line x1="10" y1="7" x2="14" y2="7"/>
      <line x1="10" y1="17" x2="14" y2="17"/>
      <line x1="7" y1="10" x2="7" y2="14"/>
      <line x1="17" y1="10" x2="17" y2="14"/>
      <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
    </svg>
  ),

  // Programming — code brackets
  Code: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M8 6 L3 12 L8 18"/>
      <path d="M16 6 L21 12 L16 18"/>
      <line x1="13.5" y1="4" x2="10.5" y2="20"/>
    </svg>
  ),

  // STEM — flask / beaker outline
  Flask: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 3 L9 9 L4.5 18 A2 2 0 0 0 6.3 21 L17.7 21 A2 2 0 0 0 19.5 18 L15 9 L15 3 Z"/>
      <line x1="8" y1="3" x2="16" y2="3"/>
      <circle cx="11" cy="15" r="0.8" fill="currentColor"/>
      <circle cx="14" cy="17" r="0.6" fill="currentColor"/>
    </svg>
  ),

  // Computational thinking — branching nodes
  Logic: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
      <circle cx="12" cy="5" r="2.2"/>
      <circle cx="5.5" cy="18" r="2.2"/>
      <circle cx="12" cy="18" r="2.2"/>
      <circle cx="18.5" cy="18" r="2.2"/>
      <line x1="11" y1="7" x2="6.5" y2="16"/>
      <line x1="12" y1="7.2" x2="12" y2="15.8"/>
      <line x1="13" y1="7" x2="17.5" y2="16"/>
    </svg>
  ),

  // Competition — trophy (geometric)
  Trophy: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 4 L17 4 L17 10 A5 5 0 0 1 7 10 Z"/>
      <path d="M7 6 L4 6 L4 8 A3 3 0 0 0 7 11"/>
      <path d="M17 6 L20 6 L20 8 A3 3 0 0 1 17 11"/>
      <line x1="12" y1="14" x2="12" y2="18"/>
      <line x1="8" y1="20" x2="16" y2="20"/>
      <line x1="9" y1="18" x2="15" y2="18"/>
    </svg>
  ),

  // Intensive — lightning bolt (geometric)
  Bolt: ({ size = 24 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 3 L5 13 L11 13 L10 21 L19 11 L13 11 Z"/>
    </svg>
  ),

  // Generic utility icons
  Phone: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92 L22 19.92 A2 2 0 0 1 19.78 21.93 A19.79 19.79 0 0 1 11.21 18.93 A19.5 19.5 0 0 1 5.21 12.93 A19.79 19.79 0 0 1 2.21 4.32 A2 2 0 0 1 4.21 2.32 L7.21 2.32 A2 2 0 0 1 9.21 4 A12.84 12.84 0 0 0 9.92 6.59 A2 2 0 0 1 9.45 8.73 L8.18 10 A16 16 0 0 0 14 15.82 L15.27 14.55 A2 2 0 0 1 17.41 14.08 A12.84 12.84 0 0 0 20 14.79 A2 2 0 0 1 21.72 16.79 Z"/>
    </svg>
  ),
  Mail: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <polyline points="3,7 12,13 21,7"/>
    </svg>
  ),
  Web: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/>
      <line x1="3" y1="12" x2="21" y2="12"/>
      <path d="M12 3 A12 12 0 0 1 12 21 A12 12 0 0 1 12 3"/>
    </svg>
  ),
  Arrow: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="13,6 19,12 13,18"/>
    </svg>
  ),
  Menu: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round">
      <line x1="4" y1="8" x2="20" y2="8"/>
      <line x1="4" y1="16" x2="20" y2="16"/>
    </svg>
  ),
  Close: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round">
      <line x1="6" y1="6" x2="18" y2="18"/>
      <line x1="18" y1="6" x2="6" y2="18"/>
    </svg>
  ),
  Spark: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2 L13.5 9.5 L21 11 L13.5 12.5 L12 20 L10.5 12.5 L3 11 L10.5 9.5 Z"/>
    </svg>
  ),
  TrophyFilled: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M7 3 L17 3 L17 9 A5 5 0 0 1 7 9 Z"/>
      <rect x="10" y="13" width="4" height="5" rx="0.5"/>
      <rect x="7" y="19" width="10" height="2" rx="1"/>
    </svg>
  ),
  Chevron: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="6,9 12,15 18,9"/>
    </svg>
  ),
  Lock: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="5" y="11" width="14" height="9" rx="2"/>
      <path d="M8 11 V7 A4 4 0 0 1 16 7 V11"/>
    </svg>
  ),
  Upload: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15 V19 A2 2 0 0 1 19 21 H5 A2 2 0 0 1 3 19 V15"/>
      <polyline points="17,8 12,3 7,8"/>
      <line x1="12" y1="3" x2="12" y2="15"/>
    </svg>
  ),
  Check: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="5,12.5 10,17.5 19,7.5"/>
    </svg>
  ),
};

window.Icon = Icon;
