// footer.jsx
const SocialIcon = ({ name }) => {
  const props = { width: 20, height: 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
  if (name === '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="0.6" fill="currentColor" stroke="none"/>
    </svg>
  );
  if (name === 'LinkedIn') return (
    <svg {...props}>
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <line x1="8" y1="10" x2="8" y2="17"/>
      <circle cx="8" cy="7" r="0.8" fill="currentColor" stroke="none"/>
      <path d="M12 17v-4a2.5 2.5 0 0 1 5 0v4"/>
      <line x1="12" y1="10" x2="12" y2="17"/>
    </svg>
  );
  if (name === 'YouTube') return (
    <svg {...props}>
      <rect x="2.5" y="5.5" width="19" height="13" rx="3"/>
      <path d="M10.5 9.5v5l4.5-2.5z" fill="currentColor" stroke="none"/>
    </svg>
  );
  return null;
};

const Footer = () => {
  const { t, lang } = useLang();
  const f = t.footer;
  return (
    <footer className="site-footer">
      <div className="footer-grid">
        <div className="footer-col">
          <LogoMark size={48}/>
          <p className="footer-tag">{f.tag}</p>
        </div>
        <div className="footer-col">
          <h5>{f.colContact}</h5>
          <ul className="footer-social">
            {f.links.social.map((s,i)=>(
              <li key={i}>
                <a href={s.url} aria-label={s.name} target="_blank" rel="noopener noreferrer">
                  <SocialIcon name={s.name}/>
                  <span>{s.name}</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <span>{f.rights}</span>
        <span className="footer-legal-links">
          <a href="#privacy" data-legal="privacy">{lang === 'pt' ? 'Política de Privacidade' : 'Privacy Policy'}</a>
          <span className="footer-legal-sep" aria-hidden="true">·</span>
          <a href="#terms" data-legal="terms">{lang === 'pt' ? 'Termos de Uso' : 'Terms of Use'}</a>
        </span>
      </div>
    </footer>
  );
};

window.Footer = Footer;
