/* Header + Footer */

function Header({ route }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#/', label: 'Início', key: 'home' },
    { href: '#/catalogo', label: 'Banheiros Químicos', key: 'catalogo' },
    { href: '#/vip', label: 'Banheiro VIP', key: 'vip' },
  ];

  return (
    <header className={`site-header ${scrolled ? 'scrolled' : ''}`}>
      <div className="container header-inner">
        <Brand />
        <nav className="nav">
          {links.map(l => (
            <a key={l.key} href={l.href} className={route === l.key ? 'active' : ''}>{l.label}</a>
          ))}
        </nav>
        <div className="header-cta">
          <a className="btn btn-yellow primary-cta" href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener">
            <Icon name="whatsapp" size={16}/> Faça seu Orçamento
          </a>
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <Brand dark={true} />
            <p>Locação de banheiros químicos, chuveiros, containers e estruturas temporárias para obras e eventos no Rio de Janeiro.</p>
            <div style={{display:'flex', gap: 12}}>
              <a href="https://instagram.com/srbanheiro" target="_blank" aria-label="Instagram" style={{color: 'var(--gray-400)'}}>
                <Icon name="instagram" size={22}/>
              </a>
              <a href="https://facebook.com/srbanheiro" target="_blank" aria-label="Facebook" style={{color: 'var(--gray-400)'}}>
                <Icon name="facebook" size={22}/>
              </a>
            </div>
          </div>
          <div className="footer-col">
            <h5>Produtos</h5>
            <ul>
              <li><a href="#/catalogo">Linha Sanitária</a></li>
              <li><a href="#/catalogo">Linha Hidráulica</a></li>
              <li><a href="#/catalogo">Estruturas</a></li>
              <li><a href="#/vip">Banheiro VIP</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Empresa</h5>
            <ul>
              <li><a href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento" target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href="tel:+552141141100">Telefone</a></li>
              <li><a href="mailto:contato@srbanheiro.com.br">E-mail</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contato</h5>
            <ul>
              <li><a href="tel:+552141141100">(21) 4114-1100</a></li>
              <li><a href="https://wa.me/5521971960746?text=Ol%C3%A1!%20Gostaria%20de%20um%20or%C3%A7amento">(21) 97196-0746</a></li>
              <li><a href="mailto:contato@srbanheiro.com.br">contato@srbanheiro.com.br</a></li>
              <li style={{color: 'var(--gray-500)', fontSize: 13}}>Av. Carlos da Silva Rocha, 161 — Pedra de Guaratiba, Rio de Janeiro/RJ</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Sr. Banheiro — Banheiros Químicos. Todos os direitos reservados.</span>
          <span>www.srbanheiro.com.br</span>
        </div>
      </div>
    </footer>
  );
}

window.Header = Header;
window.Footer = Footer;