/* global React */
function SocialsSection() {
  const items = [
    { name: 'Instagram', href: '#', svg: (
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <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="currentColor"/>
      </svg>
    ) },
    { name: 'Spotify', href: '#', svg: (
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="9"/>
        <path d="M7 9.5c3.5-1 7.5-.5 10 1"/>
        <path d="M7.5 13c3-.7 6.5-.3 8.5 1"/>
        <path d="M8 16c2.5-.5 5-.2 6.5.8"/>
      </svg>
    ) },
    { name: 'TikTok', href: '#', svg: (
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5"/>
        <path d="M14 4c.4 2.5 2.4 4.4 5 4.6"/>
      </svg>
    ) },
    { name: 'LinkedIn', href: '#', svg: (
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="3"/>
        <path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 17v-7"/>
      </svg>
    ) },
    { name: 'YouTube', href: '#', svg: (
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="2.5" y="6" width="19" height="12" rx="3"/>
        <path d="m10.5 9.5 5 2.5-5 2.5z" fill="currentColor"/>
      </svg>
    ) },
  ];
  return (
    <section className="acmp-socials">
      <div className="acmp-socials-wrap">
        <div className="eyebrow">SEGUINOS</div>
        <div className="acmp-socials-row">
          {items.map(it => (
            <a key={it.name} className="acmp-social-link" href={it.href} aria-label={it.name}>
              <span className="acmp-social-ico">{it.svg}</span>
              <span className="acmp-social-name">{it.name}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { SocialsSection });