// ============================================================
// Acqua Riacho Verde — Site chrome: Header + Footer
// ============================================================
const { useState, useEffect } = React;

function SiteHeader({ onNav }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Sobre", "sobre"],
    ["Diferenciais", "diferenciais"],
    ["Galeria", "galeria"],
    ["Localização", "localizacao"],
  ];

  return (
    <header className={"arv-header" + (scrolled ? " is-solid" : "")}>
      <div className="arv-header-inner">
        <a className="arv-logo" onClick={() => onNav("top")}>
          <img src="./assets/logo-principal.svg" alt="Acqua Riacho Verde" />
        </a>
        <nav className="arv-nav">
          {links.map(([label, id]) => (
            <a key={id} className="arv-nav-link" onClick={() => onNav(id)}>{label}</a>
          ))}
        </nav>
        <button className="arv-header-cta" onClick={() => onNav("contato")}>
          Agende sua visita
        </button>
        <button className="arv-burger" onClick={() => setOpen(!open)} aria-label="Menu">
          <i className={"ph " + (open ? "ph-x" : "ph-list")}></i>
        </button>
      </div>
      {open && (
        <div className="arv-mobile-nav">
          {links.map(([label, id]) => (
            <a key={id} onClick={() => { onNav(id); setOpen(false); }}>{label}</a>
          ))}
          <button className="arv-header-cta solid" onClick={() => { onNav("contato"); setOpen(false); }}>Agende sua visita</button>
        </div>
      )}
    </header>
  );
}

function SiteFooter({ onNav }) {
  return (
    <footer className="arv-footer">
      <div className="arv-footer-inner">
        <div className="arv-footer-brand">
          <img src="./assets/logo-branco-transp.svg" alt="Acqua Riacho Verde" />
          <p>Condomínio fechado com Riacho Natural.<br/>Barreirinhas · Maranhão · Brasil</p>
        </div>
        <div className="arv-footer-col">
          <h4>Navegação</h4>
          <a onClick={() => onNav("sobre")}>Sobre o empreendimento</a>
          <a onClick={() => onNav("diferenciais")}>Diferenciais</a>
          <a onClick={() => onNav("galeria")}>Galeria</a>
          <a onClick={() => onNav("localizacao")}>Localização</a>
        </div>
        <div className="arv-footer-col">
          <h4>Contato</h4>
          <a><i className="ph ph-phone"></i> (98) 98826-2156</a>
          <a><i className="ph ph-envelope-simple"></i> contato@acquariachoverde.com.br</a>
          <a><i className="ph ph-map-pin"></i> Barreirinhas, MA</a>
          <div className="arv-footer-social">
            <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i className="ph ph-instagram-logo"></i></a>
            <a href="https://wa.me/5598988262156?text=Olá!%20Gostaria%20de%20saber%20mais%20sobre%20o%20Acqua%20Riacho%20Verde." target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><i className="ph ph-whatsapp-logo"></i></a>
            <a
              aria-label="Compartilhar"
              onClick={() => {
                if (navigator.share) {
                  navigator.share({
                    title: "Acqua Riacho Verde",
                    text: "Condomínio fechado com riacho natural em Barreirinhas, MA.",
                    url: "https://acquariachoverde.com.br"
                  });
                } else {
                  navigator.clipboard.writeText("https://acquariachoverde.com.br");
                  alert("Link copiado!");
                }
              }}
              style={{ cursor: "pointer" }}
            >
              <i className="ph ph-share-network"></i>
            </a>
          </div>
        </div>
      </div>
<div className="arv-footer-base">
        <span>© 2026 Acqua Riacho Verde. Todos os direitos reservados.</span>
        <span>acquariachoverde.com.br</span>
      </div>
    </footer>
  );
}

function WhatsAppButton() {
  const [hovered, setHovered] = React.useState(false);
  return (
    <a
      href="https://wa.me/5598988262156?text=Olá!%20Tenho%20interesse%20no%20Condomínio%20Acqua%20Riacho%20Verde."
      target="_blank"
      rel="noopener noreferrer"
      className="arv-wa-float"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      aria-label="Falar no WhatsApp"
    >
      {hovered && <span className="arv-wa-tooltip">Falar no WhatsApp</span>}
      <i className="ph ph-whatsapp-logo"></i>
    </a>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, WhatsAppButton });