// Footer
const Footer = () => {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo inverted />
            <p>Educação que faz pensar, criar e transformar. Desde 1978, em SBC e São Paulo.</p>
            <div className="footer-social">
              <a href={`https://instagram.com/${window.ABACO.instagram}`} aria-label="Instagram">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <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>
              </a>
              <a href="#" aria-label="Facebook">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.6 9.9V15h-2.5v-3h2.5V9.8c0-2.5 1.5-3.8 3.7-3.8 1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 3h-2.4v6.9A10 10 0 0 0 22 12z"/></svg>
              </a>
              <a href="#" aria-label="YouTube">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M23 7.5a3 3 0 0 0-2.1-2.1C19 5 12 5 12 5s-7 0-8.9.4A3 3 0 0 0 1 7.5C.6 9.4.6 12 .6 12s0 2.6.4 4.5a3 3 0 0 0 2.1 2.1C5 19 12 19 12 19s7 0 8.9-.4a3 3 0 0 0 2.1-2.1c.4-1.9.4-4.5.4-4.5s0-2.6-.4-4.5zM10 15.5v-7l6 3.5-6 3.5z"/></svg>
              </a>
              <a href="#" aria-label="LinkedIn">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM8.3 18H5.7V9.7h2.6V18zM7 8.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM18.3 18h-2.6v-4c0-1-.4-1.8-1.4-1.8s-1.6.7-1.6 1.7V18h-2.6V9.7h2.5v1.1a2.7 2.7 0 0 1 2.4-1.3c1.8 0 3.3 1.2 3.3 3.8V18z"/></svg>
              </a>
            </div>
          </div>

          <div className="footer-col">
            <strong>Ensino</strong>
            <a href="#ensinos">Educação Infantil</a>
            <a href="#ensinos">Fundamental — Anos Iniciais</a>
            <a href="#ensinos">Fundamental — Anos Finais</a>
            <a href="#ensinos">Ensino Médio</a>
            <a href="#">Pré-Vestibular</a>
          </div>

          <div className="footer-col">
            <strong>O Ábaco</strong>
            <a href="#why">Projeto pedagógico</a>
            <a href="#extras">Extracurriculares</a>
            <a href="#projetos">Projetos</a>
            <a href="#unidades">Unidades</a>
            <a href="#">Trabalhe conosco</a>
          </div>

          <div className="footer-col">
            <strong>Matrículas</strong>
            <a href="#matricula">Matrícula 2026</a>
            <a href="#matricula">Pré-inscrição 2027</a>
            <a href="#">Visita guiada</a>
            <a href="#">Portal do aluno</a>
            <a href="#">Fale conosco</a>
          </div>
        </div>

        <div className="footer-units">
          {window.ABACO.unidades.map((u, i) => (
            <div className="footer-unit" key={i}>
              <strong>{u.tag}</strong>
              <span>{u.address}</span>
              <span>{u.city}</span>
              <a href={`tel:${u.phone.replace(/\D/g,'')}`}>{u.phone}</a>
            </div>
          ))}
        </div>

        <div className="footer-bottom">
          <span>© 2026 Colégio Ábaco · CNPJ 00.000.000/0001-00 · Todos os direitos reservados</span>
          <div className="footer-legal">
            <a href="#">Política de privacidade</a>
            <a href="#">Termos de uso</a>
            <a href="#">LGPD</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;