// Pied de page de la boutique: marque + liens vers les réseaux sociaux
function Footer() {
  const links = [
    { key: 'twitch', label: 'Twitch', href: 'https://twitch.tv/wenyn', svg: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M4 3h17v11l-4 4h-4l-3 3H8v-3H4V3zm3 2v10h3v3l3-3h4l3-3V5H7zm8 7h2V7h-2v5zm-5 0h2V7H10v5z"/>
      </svg>
    ) },
    { key: 'discord', label: 'Discord', href: 'https://discord.gg/KNVMhgHkhu', svg: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M20 4a16 16 0 0 0-4-.99l-.2.39A13.1 13.1 0 0 1 12 4c-1.25 0-2.47-.17-3.8-.6l-.2-.39C5.52 3.2 4 3.6 4 3.6A16.02 16.02 0 0 0 2 12c0 7 5 8 5 8l.6-.8c-1.2-.4-2.2-1.2-2.2-1.2.2.1.5.2.8.3 1 .4 2 .6 2.8.8A11 11 0 0 0 12 19c.8 0 1.8-.1 3-.3.8-.2 1.8-.4 2.8-.8.3-.1.6-.2.8-.3 0 0-1 .8-2.2 1.2l.6.8s5-1 5-8c0-3.38-1.02-5.7-2-7zM9.5 13c-.8 0-1.5-.9-1.5-2s.7-2 1.5-2 1.5.9 1.5 2-.7 2-1.5 2zm5 0c-.8 0-1.5-.9-1.5-2s.7-2 1.5-2 1.5.9 1.5 2-.7 2-1.5 2z"/>
      </svg>
    ) },
    { key: 'instagram', label: 'Instagram', href: 'https://www.instagram.com/wenyngaming/', svg: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.2A2.8 2.8 0 1 0 12 16.8 2.8 2.8 0 0 0 12 9.2zM18 6.5a1 1 0 1 1 0 2.001 1 1 0 0 1 0-2z"/>
      </svg>
    ) },
  ];

  // Structure du footer: marque à gauche, icônes cliquables (nouvel onglet) à droite
  return (
    <footer className="site-footer">
      <div className="container footer-inner">
        <div className="footer-brand">La boutique de Wenyn</div>
        <nav className="footer-links" aria-label="Réseaux sociaux">
          {links.map(l => (
            <a key={l.key} href={l.href} className="footer-icon" title={l.label} aria-label={l.label} target="_blank" rel="noreferrer noopener">
              {l.svg}
            </a>
          ))}
        </nav>
      </div>
    </footer>
  );
}

window.Components = window.Components || {};
window.Components.Footer = Footer;