/* Custom branded icons for Unstoppables — full nav icon set
   Design language: Trellis framework concept, plum→gold gradients, growth nodes
   Usage: Replace Icon calls in nav/pages with BrandIcon
*/

function BrandIcon({ name, size = 24, stroke = 1.8, color = 'currentColor', style = {} }) {
  const customIcons = {
    dashboard: (
      <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style, fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }}>
        <defs>
          <linearGradient id="dashGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="oklch(0.74 0.12 330)" />
            <stop offset="100%" stopColor="oklch(0.78 0.15 88)" />
          </linearGradient>
        </defs>
        <line x1="5" y1="4" x2="5" y2="20" stroke="url(#dashGrad)" strokeWidth={stroke + 0.5} />
        <line x1="19" y1="4" x2="19" y2="20" stroke="url(#dashGrad)" strokeWidth={stroke + 0.5} />
        <line x1="5" y1="8" x2="19" y2="8" opacity="0.6" />
        <line x1="5" y1="12" x2="19" y2="12" opacity="0.7" />
        <line x1="5" y1="16" x2="19" y2="16" opacity="0.8" />
        <circle cx="12" cy="12" r="1.5" fill="url(#dashGrad)" opacity="0.9" />
        <circle cx="8" cy="8" r="1" fill="url(#dashGrad)" opacity="0.7" />
        <circle cx="16" cy="16" r="1" fill="url(#dashGrad)" opacity="0.7" />
      </svg>
    ),
    sprout: (
      <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style, fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }}>
        <defs>
          <linearGradient id="sproutGrad" x1="50%" y1="100%" x2="50%" y2="0%">
            <stop offset="0%" stopColor="oklch(0.72 0.1 160)" />
            <stop offset="100%" stopColor="oklch(0.78 0.15 88)" />
          </linearGradient>
        </defs>
        {/* Main stem */}
        <path d="M 12 20 Q 12 14, 12 8" stroke="url(#sproutGrad)" strokeWidth={stroke + 0.5} />
        {/* Left leaf cluster */}
        <path d="M 12 14 Q 8 12, 6 14" opacity="0.8" />
        <path d="M 12 11 Q 7 9, 5 11" opacity="0.6" />
        {/* Right leaf cluster */}
        <path d="M 12 14 Q 16 12, 18 14" opacity="0.8" />
        <path d="M 12 11 Q 17 9, 19 11" opacity="0.6" />
        {/* Growth bud at top */}
        <circle cx="12" cy="7" r="1.8" fill="url(#sproutGrad)" />
        {/* Root nodes */}
        <circle cx="11" cy="20" r="0.8" fill="url(#sproutGrad)" opacity="0.7" />
        <circle cx="13" cy="20" r="0.8" fill="url(#sproutGrad)" opacity="0.7" />
      </svg>
    ),
    clients: (
      <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style, fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }}>
        <defs>
          <linearGradient id="clientsGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="oklch(0.72 0.1 330)" />
            <stop offset="100%" stopColor="oklch(0.74 0.12 280)" />
          </linearGradient>
        </defs>
        {/* Three supporting circles (clients) */}
        <circle cx="7" cy="7" r="2.5" stroke="url(#clientsGrad)" strokeWidth={stroke + 0.3} />
        <circle cx="12" cy="12" r="2.5" stroke="url(#clientsGrad)" strokeWidth={stroke + 0.3} />
        <circle cx="17" cy="7" r="2.5" stroke="url(#clientsGrad)" strokeWidth={stroke + 0.3} />
        {/* Connecting lines (trellis) */}
        <line x1="7" y1="9.5" x2="12" y2="10" opacity="0.6" />
        <line x1="17" y1="9.5" x2="12" y2="10" opacity="0.6" />
        {/* Base support */}
        <line x1="5" y1="18" x2="19" y2="18" stroke="url(#clientsGrad)" strokeWidth={stroke} />
        <line x1="7" y1="18" x2="7" y2="9.5" opacity="0.5" />
        <line x1="12" y1="18" x2="12" y2="14.5" opacity="0.5" />
        <line x1="17" y1="18" x2="17" y2="9.5" opacity="0.5" />
      </svg>
    ),
    calendar: (
      <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style, fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }}>
        <defs>
          <linearGradient id="calGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="oklch(0.68 0.11 160)" />
            <stop offset="100%" stopColor="oklch(0.78 0.15 88)" />
          </linearGradient>
        </defs>
        {/* Calendar frame */}
        <rect x="4" y="6" width="16" height="14" rx="2" stroke="url(#calGrad)" strokeWidth={stroke + 0.3} />
        {/* Header bar */}
        <line x1="4" y1="10" x2="20" y2="10" />
        {/* Grid lines */}
        <line x1="4" y1="14" x2="20" y2="14" opacity="0.5" />
        {/* Date nodes */}
        <circle cx="8" cy="12" r="0.7" fill="url(#calGrad)" opacity="0.8" />
        <circle cx="12" cy="12" r="0.7" fill="url(#calGrad)" opacity="0.8" />
        <circle cx="16" cy="12" r="0.7" fill="url(#calGrad)" opacity="0.8" />
        <circle cx="8" cy="16" r="0.7" fill="url(#calGrad)" opacity="0.6" />
        <circle cx="12" cy="16" r="0.7" fill="url(#calGrad)" opacity="0.6" />
      </svg>
    ),
    report: (
      <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style, fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }}>
        <defs>
          <linearGradient id="reportGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="oklch(0.72 0.1 248)" />
            <stop offset="100%" stopColor="oklch(0.78 0.15 88)" />
          </linearGradient>
        </defs>
        {/* Document */}
        <rect x="5" y="3" width="14" height="18" rx="1.5" stroke="url(#reportGrad)" strokeWidth={stroke + 0.3} />
        {/* Lines (content) */}
        <line x1="8" y1="8" x2="16" y2="8" opacity="0.8" />
        <line x1="8" y1="11" x2="16" y2="11" opacity="0.7" />
        <line x1="8" y1="14" x2="14" y2="14" opacity="0.7" />
        <line x1="8" y1="17" x2="16" y2="17" opacity="0.6" />
        {/* Highlight bar */}
        <rect x="7" y="5" width="10" height="2" rx="1" fill="url(#reportGrad)" opacity="0.5" />
      </svg>
    ),
    import: (
      <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style, fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }}>
        <defs>
          <linearGradient id="importGrad" x1="50%" y1="100%" x2="50%" y2="0%">
            <stop offset="0%" stopColor="oklch(0.56 0.11 175)" />
            <stop offset="100%" stopColor="oklch(0.78 0.15 88)" />
          </linearGradient>
        </defs>
        {/* Database cylinder (source) */}
        <ellipse cx="12" cy="6" rx="5" ry="2" stroke="url(#importGrad)" strokeWidth={stroke} />
        <line x1="7" y1="6" x2="7" y2="10" opacity="0.6" />
        <line x1="17" y1="6" x2="17" y2="10" opacity="0.6" />
        <ellipse cx="12" cy="10" rx="5" ry="2" stroke="url(#importGrad)" strokeWidth={stroke} opacity="0.7" />
        {/* Arrow down */}
        <path d="M 12 11 L 12 16" stroke="url(#importGrad)" strokeWidth={stroke + 0.5} />
        <path d="M 10 14 L 12 16 L 14 14" fill="none" stroke="url(#importGrad)" strokeWidth={stroke + 0.3} />
        {/* Nodes below (imported data) */}
        <circle cx="9" cy="20" r="1" fill="url(#importGrad)" opacity="0.8" />
        <circle cx="12" cy="20" r="1" fill="url(#importGrad)" opacity="0.8" />
        <circle cx="15" cy="20" r="1" fill="url(#importGrad)" opacity="0.8" />
      </svg>
    ),
    sliders: (
      <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style, fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' }}>
        <defs>
          <linearGradient id="settingsGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="oklch(0.68 0.11 290)" />
            <stop offset="100%" stopColor="oklch(0.78 0.15 88)" />
          </linearGradient>
        </defs>
        {/* Three sliders */}
        <line x1="5" y1="6" x2="19" y2="6" opacity="0.5" />
        <circle cx="14" cy="6" r="2.2" fill="url(#settingsGrad)" />
        
        <line x1="5" y1="12" x2="19" y2="12" opacity="0.5" />
        <circle cx="10" cy="12" r="2.2" fill="url(#settingsGrad)" />
        
        <line x1="5" y1="18" x2="19" y2="18" opacity="0.5" />
        <circle cx="16" cy="18" r="2.2" fill="url(#settingsGrad)" />
      </svg>
    ),
  };

  return customIcons[name] || (
    <svg viewBox="0 0 24 24" width={size} height={size} style={{ ...style }}>
      <circle cx="12" cy="12" r={size/3} fill="none" stroke={color} strokeWidth={stroke} />
    </svg>
  );
}

Object.assign(window, { BrandIcon });

