const footerStyles = {
  wrap: { background: 'var(--navy-900)', color: 'rgba(255,255,255,.75)', paddingTop: 56, paddingBottom: 32 },
  grid: {
    display: 'grid', gridTemplateColumns: '1fr', gap: 32,
    paddingBottom: 40, borderBottom: '1px solid rgba(255,255,255,.1)',
  },
  brand: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 },
  logoImg: { width: 56, height: 56, objectFit: 'contain', background: 'white', borderRadius: 10, padding: 4 },
  brandName: { fontFamily: 'Archivo', fontWeight: 800, fontSize: 22, color: 'white' },
  brandSub: { fontSize: 12, color: 'rgba(255,255,255,.5)', fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase' },
  tagline: { fontSize: 15, lineHeight: 1.6, marginTop: 14, maxWidth: 320 },
  socialLink: {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    marginTop: 18, width: 42, height: 42, borderRadius: 12,
    color: 'rgba(255,255,255,.86)',
    background: 'rgba(255,255,255,.06)',
    border: '1px solid rgba(255,255,255,.12)',
    transition: 'transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease',
  },
  colTitle: { fontFamily: 'Archivo', fontSize: 15, fontWeight: 700, color: 'white', marginBottom: 18, textTransform: 'uppercase', letterSpacing: '.08em' },
  link: { display: 'block', padding: '6px 0', color: 'rgba(255,255,255,.7)', fontSize: 14, cursor: 'pointer', transition: 'color .15s' },
  contactRow: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, fontSize: 14, color: 'rgba(255,255,255,.85)' },
  bottom: {
    paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    flexWrap: 'wrap', gap: 16, fontSize: 13, color: 'rgba(255,255,255,.5)',
  },
};

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer style={footerStyles.wrap}>
      <div className="container">
        <div className="footer-grid" style={footerStyles.grid}>
          <div>
            <div style={footerStyles.brand}>
              <img src="assets/pitertech-logo-assistencia-tecnica-marica-rj.webp" alt="PiterTech - assistência técnica em Maricá-RJ" style={footerStyles.logoImg}/>
              <div>
                <div style={footerStyles.brandName}>PiterTech</div>
                <div style={footerStyles.brandSub}>Assistência em TI</div>
              </div>
            </div>
            <div style={footerStyles.tagline}>
              Assistência técnica especializada em Maricá-RJ. Diagnóstico claro, execução cuidadosa e atendimento em domicílio.
            </div>
            <a href="https://www.instagram.com/piter.tech/" target="_blank" rel="noopener" className="footer-social" style={footerStyles.socialLink} aria-label="Abrir Instagram da PiterTech" title="Instagram da PiterTech">
              <IconInstagram size={21} color="currentColor"/>
            </a>
          </div>

          <div>
            <div style={footerStyles.colTitle}>Serviços</div>
            <a className="foot-link" style={footerStyles.link}>Montagem e manutenção</a>
            <a className="foot-link" style={footerStyles.link}>Upgrade de PC</a>
            <a className="foot-link" style={footerStyles.link}>Remoção de vírus</a>
            <a className="foot-link" style={footerStyles.link}>Formatação / Windows</a>
            <a className="foot-link" style={footerStyles.link}>Backup e recuperação</a>
            <a className="foot-link" style={footerStyles.link}>TI para empresas</a>
          </div>

          <div>
            <div style={footerStyles.colTitle}>Navegar</div>
            <a href="#hero" className="foot-link" style={footerStyles.link}>Início</a>
            <a href="#servicos" className="foot-link" style={footerStyles.link}>Serviços</a>
            <a href="#como" className="foot-link" style={footerStyles.link}>Como funciona</a>
            <a href="#diferenciais" className="foot-link" style={footerStyles.link}>Diferenciais</a>
            <a href="#faq" className="foot-link" style={footerStyles.link}>Perguntas frequentes</a>
            <a href="#contato" className="foot-link" style={footerStyles.link}>Contato</a>
          </div>

          <div>
            <div style={footerStyles.colTitle}>Contato</div>
            <a href={waLink()} target="_blank" rel="noopener" style={footerStyles.contactRow}>
              <IconWhatsApp size={18} color="#25D366"/>
              <span>{WHATSAPP_DISPLAY}</span>
            </a>
            <div style={footerStyles.contactRow}>
              <IconMapPin size={18} color="#8EB5FF"/>
              <span>Estrada Henfil, 125 — Itapeba, Maricá/RJ</span>
            </div>
            <div style={footerStyles.contactRow}>
              <IconClock size={18} color="#8EB5FF"/>
              <span>Seg-Sáb • 8h às 20h</span>
            </div>

            <a href={waLink()} target="_blank" rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              background: 'var(--whatsapp)', color: 'white',
              padding: '11px 18px', borderRadius: 10, fontWeight: 700, fontSize: 14,
              marginTop: 14,
            }}>
              <IconWhatsApp size={16} color="white"/>
              Chamar agora
            </a>
          </div>
        </div>

        <div style={footerStyles.bottom}>
          <div>© {year} PiterTech — Todos os direitos reservados.</div>
          <div>Feito com cuidado para quem precisa de tecnologia sem dor de cabeça.</div>
        </div>
      </div>
      <style>{`
        .foot-link:hover { color: white !important; }
        .footer-social:hover {
          transform: translateY(-2px);
          color: white !important;
          background: rgba(142,181,255,.14) !important;
          border-color: rgba(142,181,255,.35) !important;
          box-shadow: 0 12px 26px rgba(0,0,0,.22);
        }

        @media (min-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }
        @media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; gap: 40px !important; } }
      `}</style>
    </footer>
  );
}

/* Floating WhatsApp button */
function WhatsAppFloat() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href={waLink()} target="_blank" rel="noopener" aria-label="Abrir WhatsApp" style={{
      position: 'fixed', bottom: 22, right: 22, zIndex: 100,
      width: 60, height: 60, borderRadius: 50,
      background: 'var(--whatsapp)', color: 'white',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 10px 30px rgba(37,211,102,.5)',
      transform: show ? 'scale(1)' : 'scale(0)',
      transition: 'transform .3s cubic-bezier(.34,1.56,.64,1)',
    }}>
      <span style={{ position: 'absolute', inset: 0, borderRadius: 50, background: 'rgba(37,211,102,.5)', animation: 'waPulse 2s ease-out infinite' }}></span>
      <IconWhatsApp size={30} color="white"/>
      <style>{`
        @keyframes waPulse {
          0% { transform: scale(1); opacity: .8; }
          100% { transform: scale(1.6); opacity: 0; }
        }
      `}</style>
    </a>
  );
}

Object.assign(window, { Footer, WhatsAppFloat });