/* ==========================================
   ICONS — Yohann Escher (estilo: linhas 2px, cantos arredondados)
   ========================================== */

const Icon = ({ name, size = 22, color = 'currentColor', className = '', strokeWidth = 1.7 }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
    className,
  };
  switch (name) {
    case 'arrow-right':
      return <svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'arrow-up-right':
      return <svg {...props}><path d="M7 17 17 7M9 7h8v8"/></svg>;
    case 'arrow-down':
      return <svg {...props}><path d="M12 5v14M6 13l6 6 6-6"/></svg>;
    case 'plus':
      return <svg {...props}><path d="M12 5v14M5 12h14"/></svg>;
    case 'minus':
      return <svg {...props}><path d="M5 12h14"/></svg>;
    case 'check':
      return <svg {...props}><path d="m5 12 4 4L19 6"/></svg>;
    case 'check-circle':
      return <svg {...props}><circle cx="12" cy="12" r="9.5"/><path d="m8 12 3 3 5-6"/></svg>;
    case 'x-circle':
      return <svg {...props}><circle cx="12" cy="12" r="9.5"/><path d="m9 9 6 6M15 9l-6 6"/></svg>;
    case 'play':
      return <svg {...props}><circle cx="12" cy="12" r="10"/><path d="M10 8.5v7l6-3.5z" fill={color}/></svg>;
    case 'search':
      return <svg {...props}><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.3-4.3"/></svg>;
    case 'whatsapp':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color} className={className}><path d="M19.05 4.91A10.27 10.27 0 0 0 12.05 2C6.5 2 2 6.5 2 12.06c0 1.95.51 3.78 1.4 5.42L2 22l4.66-1.36a10.04 10.04 0 0 0 5.39 1.46h.01c5.55 0 10.05-4.5 10.05-10.06 0-2.69-1.05-5.21-2.95-7.13zM12.06 20.41h-.01a8.34 8.34 0 0 1-4.25-1.16l-.3-.18-2.77.81.83-2.7-.2-.31a8.34 8.34 0 0 1-1.27-4.41c0-4.62 3.76-8.38 8.39-8.38 2.24 0 4.34.87 5.92 2.46a8.32 8.32 0 0 1 2.45 5.93c0 4.62-3.76 8.38-8.39 8.38zm4.6-6.27c-.25-.13-1.49-.74-1.72-.82-.23-.08-.4-.13-.57.13-.17.25-.65.82-.8.99-.15.17-.3.19-.55.06-.25-.13-1.07-.39-2.04-1.25a7.57 7.57 0 0 1-1.41-1.75c-.15-.25 0-.39.11-.51.11-.11.25-.3.37-.45.12-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.13-.57-1.37-.78-1.88-.21-.5-.42-.43-.57-.44h-.49c-.17 0-.45.06-.68.31-.23.25-.89.87-.89 2.13 0 1.26.91 2.47 1.04 2.64.13.17 1.79 2.74 4.34 3.84.61.26 1.08.42 1.45.54.61.19 1.16.17 1.6.1.49-.07 1.49-.61 1.7-1.2.21-.59.21-1.1.15-1.2-.06-.1-.23-.17-.48-.3z"/></svg>;
    case 'menu':
      return <svg {...props}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case 'mail':
      return <svg {...props}><rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="m3 6 9 7 9-7"/></svg>;
    case 'phone':
      return <svg {...props}><path d="M5 4h3l2 5-2 1.5a11 11 0 0 0 5 5L14.5 13l5 2v3a2 2 0 0 1-2 2A14 14 0 0 1 4 6a2 2 0 0 1 2-2"/></svg>;
    case 'calendar':
      return <svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    case 'send':
      return <svg {...props}><path d="m22 2-11 11M22 2l-7 19-3-9-9-3z"/></svg>;
    case 'user':
      return <svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'users':
      return <svg {...props}><circle cx="9" cy="8" r="3.5"/><circle cx="17" cy="9" r="3"/><path d="M2 20a7 7 0 0 1 14 0M14 20a6 6 0 0 1 8-1"/></svg>;
    case 'rocket':
      return <svg {...props}><path d="M14 5c4 0 6 2 6 6 0 5-5 9-5 9l-3-3-3 3s-1-1-1-2 1-2 1-2L6 13s2 0 3-1l-3-3s4-4 8-4z"/><circle cx="14" cy="9" r="1.5"/></svg>;
    case 'target':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill={color}/></svg>;
    case 'eye':
      return <svg {...props}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'doc':
      return <svg {...props}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></svg>;
    case 'chart':
      return <svg {...props}><path d="M3 21V3M3 21h18M7 14l4-4 3 3 6-7"/></svg>;
    case 'chart-up':
      return <svg {...props}><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>;
    case 'cube':
      return <svg {...props}><path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5 12 12l9-4.5M12 12v9"/></svg>;
    case 'box':
      return <svg {...props}><path d="M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z"/><path d="M3 7.5 12 12l9-4.5M12 12v9M7.5 5.25l9 4.5"/></svg>;
    case 'cog':
      return <svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19 12c0 .5 0 1-.1 1.4l2 1.6-2 3.4-2.4-1a7 7 0 0 1-2.4 1.4l-.4 2.5h-4l-.4-2.5a7 7 0 0 1-2.4-1.4l-2.4 1-2-3.4 2-1.6c-.1-.4-.1-.9-.1-1.4s0-1 .1-1.4l-2-1.6 2-3.4 2.4 1a7 7 0 0 1 2.4-1.4L10 3h4l.4 2.5a7 7 0 0 1 2.4 1.4l2.4-1 2 3.4-2 1.6c.1.4.1.9.1 1.4z"/></svg>;
    case 'zap':
      return <svg {...props}><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>;
    case 'shield':
      return <svg {...props}><path d="M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'lock':
      return <svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case 'database':
      return <svg {...props}><ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>;
    case 'globe':
      return <svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case 'workflow':
      return <svg {...props}><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><path d="M9 6h7a3 3 0 0 1 3 3v6"/></svg>;
    case 'sparkles':
      return <svg {...props}><path d="m12 3 1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6z"/><path d="M19 5v3M21 6.5h-4M5 17v3M6.5 18.5h-3"/></svg>;
    case 'star':
      return <svg {...props}><path d="m12 3 2.7 6.3L21 10l-5 4 1.5 7-5.5-3.5L6.5 21 8 14l-5-4 6.3-.7z"/></svg>;
    case 'message':
      return <svg {...props}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    case 'quote':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color} className={className}><path d="M7 7h4v3H8v3H6v-3a3 3 0 0 1 1-3zm9 0h4v3h-3v3h-2v-3a3 3 0 0 1 1-3z"/></svg>;
    case 'briefcase':
      return <svg {...props}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 12h18"/></svg>;
    case 'monitor':
      return <svg {...props}><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>;
    case 'megaphone':
      return <svg {...props}><path d="M3 11v3l9 4V7zM12 7l9-4v18l-9-4M16 11v3"/></svg>;
    case 'headphones':
      return <svg {...props}><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><rect x="3" y="14" width="5" height="7" rx="2"/><rect x="16" y="14" width="5" height="7" rx="2"/></svg>;
    case 'puzzle':
      return <svg {...props}><path d="M9 3h6a1 1 0 0 1 1 1v3h2a3 3 0 0 1 0 6h-2v3a1 1 0 0 1-1 1h-3v-2a3 3 0 1 0-6 0v2H4a1 1 0 0 1-1-1v-6h2a3 3 0 1 0 0-6H3V4a1 1 0 0 1 1-1h5z"/></svg>;
    case 'compass':
      return <svg {...props}><circle cx="12" cy="12" r="9.5"/><path d="m15 9-3 6-3-3z" fill={color} stroke="none"/></svg>;
    case 'lightbulb':
      return <svg {...props}><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.8c.7.6 1.5 1.2 1.5 2.2v1h4v-1c0-1 .8-1.6 1.5-2.2A6 6 0 0 0 12 3z"/></svg>;
    case 'linkedin':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color} className={className}><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5C0 2.12 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8h4.55v14H.22zM7.5 8h4.36v1.92h.06c.61-1.15 2.1-2.36 4.32-2.36 4.62 0 5.48 3.04 5.48 7v9.44h-4.55v-8.36c0-2 0-4.56-2.78-4.56-2.78 0-3.2 2.16-3.2 4.4V22H7.5z"/></svg>;
    case 'youtube':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill={color} className={className}><path d="M23.5 6.5c-.3-1-1.1-1.8-2.1-2.1C19.5 4 12 4 12 4s-7.5 0-9.4.4C1.6 4.7.8 5.5.5 6.5.1 8.4.1 12 .1 12s0 3.6.4 5.5c.3 1 1.1 1.8 2.1 2.1 1.9.4 9.4.4 9.4.4s7.5 0 9.4-.4c1-.3 1.8-1.1 2.1-2.1.4-1.9.4-5.5.4-5.5s0-3.6-.4-5.5zM9.6 15.5v-7l6.4 3.5z"/></svg>;
    case 'instagram':
      return <svg {...props}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill={color}/></svg>;
    case 'chevron-down':
      return <svg {...props}><path d="m6 9 6 6 6-6"/></svg>;
    case 'chevron-right':
      return <svg {...props}><path d="m9 6 6 6-6 6"/></svg>;
    case 'chevron-left':
      return <svg {...props}><path d="m15 6-6 6 6 6"/></svg>;
    case 'home':
      return <svg {...props}><path d="m3 11 9-8 9 8M5 10v10h14V10"/></svg>;
    case 'grid':
      return <svg {...props}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>;
    case 'book':
      return <svg {...props}><path d="M4 4a2 2 0 0 1 2-2h12v18H6a2 2 0 0 0-2 2zM4 4v18"/></svg>;
    case 'brain':
      return <svg {...props}><path d="M12 5a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 0 5 3 3 0 0 0 1 5 3 3 0 0 0 4 1 3 3 0 0 0 6 0 3 3 0 0 0 4-1 3 3 0 0 0 1-5 3 3 0 0 0 0-5 3 3 0 0 0-2-5 3 3 0 0 0-3-3 3 3 0 0 0-3 3z"/><path d="M12 5v15M9 8h3M15 8h-3M9 14h3M15 14h-3"/></svg>;
    default:
      return null;
  }
};

// The signature spark / sun starburst SVG (logo accent)
const SparkStar = ({ size = 28, color = '#FF6B1A', className = '' }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={className}>
    <g stroke={color} strokeWidth="1.6" strokeLinecap="round">
      <line x1="16" y1="2" x2="16" y2="9"/>
      <line x1="16" y1="23" x2="16" y2="30"/>
      <line x1="2" y1="16" x2="9" y2="16"/>
      <line x1="23" y1="16" x2="30" y2="16"/>
      <line x1="6" y1="6" x2="11" y2="11"/>
      <line x1="21" y1="21" x2="26" y2="26"/>
      <line x1="26" y1="6" x2="21" y2="11"/>
      <line x1="11" y1="21" x2="6" y2="26"/>
    </g>
    <circle cx="16" cy="16" r="3.4" fill={color}/>
  </svg>
);

// Decorative radial sun (bigger, more rays)
const SunBurst = ({ size = 220, color = '#FF6B1A', className = '', opacity = 0.6 }) => {
  const rays = [];
  for (let i = 0; i < 32; i++) {
    const angle = (i * 360) / 32;
    rays.push(
      <line key={i}
        x1="100" y1="20" x2="100" y2="44"
        stroke={color} strokeWidth="0.8" strokeLinecap="round"
        transform={`rotate(${angle} 100 100)`}
      />
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" fill="none" className={className} style={{ opacity }}>
      {rays}
      <circle cx="100" cy="100" r="6" fill={color}/>
    </svg>
  );
};

// Logo component
const LOGO_URL = 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/6259afa0-1014-47a4-2683-3398c81df200/public';
const Logo = ({ size = 50, dark = false }) => (
  <div className="logo-wordmark" style={{ color: dark ? 'white' : 'inherit' }}>
    <img src={LOGO_URL} alt="Yohann Escher" style={{ height: size + 14, width: 'auto', display: 'block', filter: dark ? 'brightness(0) invert(1)' : 'none' }}/>
  </div>
);

window.Icon = Icon;
window.SparkStar = SparkStar;
window.SunBurst = SunBurst;
window.Logo = Logo;