// Minimal custom SVG icons — geometric, no hand-drawn imagery
const Icon = {
  Arrow: () => (
    <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M3 7h8M7.5 3.5L11 7l-3.5 3.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  ArrowDown: () => (
    <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M7 3v8M3.5 7.5L7 11l3.5-3.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Plus: () => (
    <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M7 3v8M3 7h8" strokeLinecap="round"/>
    </svg>
  ),
  Chip: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="7" y="7" width="14" height="14" rx="1"/>
      <rect x="10" y="10" width="8" height="8" fill="currentColor" opacity="0.15"/>
      <path d="M11 7V4M14 7V4M17 7V4M11 24v-3M14 24v-3M17 24v-3M7 11H4M7 14H4M7 17H4M24 11h-3M24 14h-3M24 17h-3"/>
    </svg>
  ),
  Node: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="14" cy="14" r="3"/>
      <circle cx="14" cy="5" r="2"/>
      <circle cx="5" cy="20" r="2"/>
      <circle cx="23" cy="20" r="2"/>
      <path d="M14 7v4M12 16l-6 3M16 16l6 3"/>
    </svg>
  ),
  Cloud: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M8 18h13a4 4 0 000-8 6 6 0 00-11.5-1A4 4 0 008 18z"/>
    </svg>
  ),
  Lock: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="7" y="13" width="14" height="10" rx="1"/>
      <path d="M10 13V9a4 4 0 018 0v4"/>
    </svg>
  ),
  Braces: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M11 5c-3 0-3 3-3 5s0 4-3 4c3 0 3 2 3 4s0 5 3 5M17 5c3 0 3 3 3 5s0 4 3 4c-3 0-3 2-3 4s0 5-3 5"/>
    </svg>
  ),
  Spark: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M14 4l2.5 7.5L24 14l-7.5 2.5L14 24l-2.5-7.5L4 14l7.5-2.5L14 4z"/>
    </svg>
  ),
  Stack: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M4 8l10-4 10 4-10 4-10-4z"/>
      <path d="M4 14l10 4 10-4M4 20l10 4 10-4"/>
    </svg>
  ),
  Flow: () => (
    <svg viewBox="0 0 28 28" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="6" cy="6" r="3"/>
      <circle cx="22" cy="6" r="3"/>
      <circle cx="6" cy="22" r="3"/>
      <circle cx="22" cy="22" r="3"/>
      <path d="M9 6h10M6 9v10M22 9v10M9 22h10" strokeDasharray="2 2"/>
    </svg>
  ),
};

// Aztec-inspired geometric fret pattern (step-fret motif)
const FretBorder = ({ color = 'var(--copper)' }) => (
  <svg viewBox="0 0 120 12" width="120" height="12" style={{ display: 'block' }}>
    {[0, 24, 48, 72, 96].map(x => (
      <path key={x}
        d={`M${x} 11 L${x} 5 L${x+6} 5 L${x+6} 1 L${x+18} 1 L${x+18} 5 L${x+24} 5 L${x+24} 11 Z`}
        fill="none" stroke={color} strokeWidth="1"/>
    ))}
  </svg>
);

// Circuit trace overlay for hero
const CircuitTraces = () => (
  <svg className="circuit-lines" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
    <defs>
      <linearGradient id="trace1" x1="0" x2="1">
        <stop offset="0" stopColor="#2B8B93" stopOpacity="0"/>
        <stop offset="0.5" stopColor="#2B8B93" stopOpacity="0.6"/>
        <stop offset="1" stopColor="#2B8B93" stopOpacity="0"/>
      </linearGradient>
      <linearGradient id="trace2" x1="0" x2="1">
        <stop offset="0" stopColor="#B5562E" stopOpacity="0"/>
        <stop offset="0.5" stopColor="#B5562E" stopOpacity="0.5"/>
        <stop offset="1" stopColor="#B5562E" stopOpacity="0"/>
      </linearGradient>
    </defs>
    <g fill="none" strokeWidth="1">
      <path d="M10 80 L60 80 L80 100 L140 100" stroke="url(#trace1)"/>
      <path d="M390 120 L340 120 L320 140 L260 140" stroke="url(#trace2)"/>
      <path d="M20 300 L80 300 L100 280 L160 280" stroke="url(#trace1)"/>
      <path d="M380 320 L330 320 L310 340 L260 340" stroke="url(#trace2)"/>
      <circle cx="60" cy="80" r="2" fill="#2B8B93"/>
      <circle cx="340" cy="120" r="2" fill="#B5562E"/>
      <circle cx="80" cy="300" r="2" fill="#2B8B93"/>
      <circle cx="330" cy="320" r="2" fill="#B5562E"/>
    </g>
  </svg>
);

Object.assign(window, { Icon, FretBorder, CircuitTraces });
