const Footer = () => {
  const ft = L('footer');
  return (
    <footer style={{ borderTop:'1px solid var(--line)', padding:'70px 0 40px', position:'relative' }}>
      <div className="container">
        <div style={{
          display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:40, marginBottom:60
        }} className="ft-grid">
          <div>
            <Logo size={32}/>
            <p style={{ marginTop:18, color:'var(--ink-2)', fontSize:14, lineHeight:1.55, maxWidth:280 }}>
              {ft.tagline}
            </p>
            <div style={{ display:'flex', gap:8, marginTop:20 }}>
              {[
                { ic:'linkedin',  href:'https://linkedin.com/company/zapflux' },
                { ic:'instagram', href:'https://instagram.com/zapflux.app' },
                { ic:'youtube',   href:'https://youtube.com/@zapfluxbr' },
                { ic:'whatsapp',  href:'https://wa.me/5548996485048?text=Ol%C3%A1%20gostaria%20de%20saber%20mais%20sobre%20a%20zapflux' },
              ].map(s => (
                <a key={s.ic} href={s.href} target="_blank" rel="noopener" style={{
                  width:36, height:36, borderRadius:10, border:'1px solid var(--line)',
                  display:'grid', placeItems:'center', color:'var(--ink-3)'
                }}>
                  <Icon name={s.ic} size={15}/>
                </a>
              ))}
            </div>
          </div>

          {[
            { title:ft.colProduct, links:[
              [ft.product[0],'#features'],
              [ft.product[1],'#how'],
              [ft.product[2],'#tech'],
              [ft.product[3],'#roi'],
              [ft.product[4],'#pricing'],
              [ft.product[5],'#faq'],
            ]},
            { title:ft.colCompany, links:[
              [ft.company[0],'/auth'],
              [ft.company[1],'/signup'],
              [ft.company[2],'https://wa.me/5548996485048?text=Ol%C3%A1%20gostaria%20de%20saber%20mais%20sobre%20a%20zapflux'],
              [ft.company[3],'mailto:contato@zapflux.com.br'],
            ]},
            { title:ft.colResources, links:[
              [ft.resources[0],'/terms'],
              [ft.resources[1],'/privacy'],
              [ft.resources[2],'/privacy'],
              [ft.resources[3],'https://wa.me/5548996485048?text=Ol%C3%A1%20gostaria%20de%20saber%20mais%20sobre%20a%20zapflux'],
            ]},
          ].map(col => (
            <div key={col.title}>
              <div className="eyebrow" style={{ marginBottom:18 }}>{col.title}</div>
              <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10 }}>
                {col.links.map(([label, href], li) => {
                  const ext = /^(https?:|mailto:)/.test(href);
                  return (
                    <li key={li}>
                      <a
                        href={href}
                        target={ext ? '_blank' : undefined}
                        rel={ext ? 'noopener' : undefined}
                        style={{ fontSize:14, color:'var(--ink-2)' }}
                      >{label}</a>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>

        <div className="divider"/>

        <div style={{
          marginTop:32, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:14
        }}>
          <div style={{ fontSize:13, color:'var(--ink-3)' }}>
            {ft.copyright}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width:900px){ .ft-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width:520px){ .ft-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
};

window.Footer = Footer;