// Ícones das ferramentas — SVGs inline, renderizados em 16x16 dentro de uma pill colorida

const STACK_TOOLS = [
  { name: 'Figma',    icon: 'figma',    bg: '#0a0a0a' },
  { name: 'Lovable',  icon: 'lovable',  bg: '#ff5a5f' },
  { name: 'Claude',   icon: 'claude',   bg: '#d97757' },
  { name: 'Framer',   icon: 'framer',   bg: '#0a0a0a' },
  { name: 'AWS',      icon: 'aws',      bg: '#ff9900' },
  { name: 'Stripe',   icon: 'stripe',   bg: '#635bff' },
  { name: 'Flutter',  icon: 'flutter',  bg: '#02569b' },
  { name: 'React',    icon: 'react',    bg: '#0a0a0a' },
  { name: 'Laravel',  icon: 'laravel',  bg: '#ff2d20' },
  { name: 'Vercel',   icon: 'vercel',   bg: '#0a0a0a' },
  { name: 'Supabase', icon: 'supabase', bg: '#3ecf8e' },
  { name: 'Railway',  icon: 'railway',  bg: '#0a0a0a' },
  { name: 'ClickUp',  icon: 'clickup',  bg: '#7b68ee' },
  { name: 'GitHub',   icon: 'github',   bg: '#0a0a0a' },
];

function StackIcon({ name }) {
  const s = { width: 14, height: 14, display: 'block' };
  const W = '#fff';
  switch (name) {
    case 'figma': return (
      <svg viewBox="0 0 24 24" style={s} fill="none">
        <path d="M8 2h4v6H8a3 3 0 010-6z" fill="#F24E1E"/>
        <path d="M12 2h4a3 3 0 110 6h-4V2z" fill="#FF7262"/>
        <path d="M12 8h4a3 3 0 110 6h-4V8z" fill="#A259FF"/>
        <path d="M8 8h4v6H8a3 3 0 010-6z" fill="#1ABCFE"/>
        <path d="M8 14h4v3a3 3 0 11-4-3h0z" fill="#0ACF83"/>
      </svg>
    );
    case 'lovable': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M12 21s-7-4.5-7-10a5 5 0 019-3 5 5 0 019 3c0 5.5-7 10-7 10z" opacity="0.95"/>
      </svg>
    );
    case 'claude': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M7 5l3 14h2l1-5h1l1 5h2l3-14h-2.5l-1.5 9-2-9h-2l-2 9-1.5-9z"/>
      </svg>
    );
    case 'framer': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M5 2h14v7h-7l7 7v6H12l-7-7V9h7L5 2z"/>
      </svg>
    );
    case 'aws': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M4 14c2 2 5 3 8 3s6-1 8-3" stroke={W} strokeWidth="1.8" fill="none" strokeLinecap="round"/>
        <circle cx="8" cy="9" r="1.5"/><circle cx="16" cy="9" r="1.5"/>
        <path d="M6.5 11h3v1h-3zM14.5 11h3v1h-3z"/>
      </svg>
    );
    case 'stripe': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M13.5 9.5c-1.5-.3-2-.6-2-1 0-.4.4-.7 1.2-.7 1.1 0 2.3.4 3.2.9V6.1c-.9-.4-2-.6-3.2-.6-2.6 0-4.3 1.3-4.3 3.5 0 3.5 4.8 2.9 4.8 4.5 0 .5-.4.8-1.3.8-1.3 0-2.8-.5-3.8-1.1v2.7c1 .4 2.3.7 3.7.7 2.7 0 4.5-1.3 4.5-3.5 0-3.7-4.8-3-4.8-4.6z"/>
      </svg>
    );
    case 'flutter': return (
      <svg viewBox="0 0 24 24" style={s}>
        <path d="M14 2l-10 10 3 3 13-13z" fill="#54C5F8"/>
        <path d="M14 13l-4 4 4 4h6l-4-4 4-4z" fill="#01579B"/>
        <path d="M10 17l3-3h3l-3 3z" fill="#29B6F6"/>
      </svg>
    );
    case 'react': return (
      <svg viewBox="0 0 24 24" style={s} fill="none" stroke="#61DAFB" strokeWidth="1.2">
        <circle cx="12" cy="12" r="1.8" fill="#61DAFB"/>
        <ellipse cx="12" cy="12" rx="9" ry="3.5"/>
        <ellipse cx="12" cy="12" rx="9" ry="3.5" transform="rotate(60 12 12)"/>
        <ellipse cx="12" cy="12" rx="9" ry="3.5" transform="rotate(120 12 12)"/>
      </svg>
    );
    case 'laravel': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M3 7l4-2 4 2-4 2zM11 9l4-2 4 2-4 2zM7 13l4-2 4 2-4 2zM11 17l4-2 4 2-4 2z" opacity="0.9"/>
      </svg>
    );
    case 'vercel': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M12 4l10 16H2z"/>
      </svg>
    );
    case 'supabase': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M13 2L5 13h7v9l8-11h-7z"/>
      </svg>
    );
    case 'railway': return (
      <svg viewBox="0 0 24 24" style={s} fill="none" stroke={W} strokeWidth="1.6">
        <rect x="4" y="4" width="16" height="12" rx="2"/>
        <path d="M7 16l-2 4M17 16l2 4" strokeLinecap="round"/>
        <circle cx="9" cy="12" r="1" fill={W}/><circle cx="15" cy="12" r="1" fill={W}/>
      </svg>
    );
    case 'clickup': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M3 16l4-3 5 4 5-4 4 3-9 6z"/>
        <path d="M3 10l9-6 9 6-3 2-6-4-6 4z"/>
      </svg>
    );
    case 'github': return (
      <svg viewBox="0 0 24 24" style={s} fill={W}>
        <path d="M12 2a10 10 0 00-3 19.5c.5.1.7-.2.7-.5v-2c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.5-1.3.1-2.7 0 0 .8-.3 2.8 1a9.5 9.5 0 015 0c1.9-1.3 2.8-1 2.8-1 .6 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.6 5 .4.3.7 1 .7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0012 2z"/>
      </svg>
    );
    default: return null;
  }
}

window.STACK_TOOLS = STACK_TOOLS;
window.StackIcon = StackIcon;