/* ============================================================
   Header + Hero (full-bleed cinematográfica)
   ============================================================ */

const NAV = [
  { t: "Início", href: "#top" },
  { t: "Como funciona", href: "#como-funciona" },
  { t: "Regiões", href: "#regioes" },
  { t: "Depoimentos", href: "#depoimentos" },
  { t: "Sobre", href: "#sobre" },
  { t: "Dúvidas", href: "#objecoes" },
];

function Header() {
  const [solid, setSolid] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`hdr ${solid ? "solid" : ""}`}>
      <div className="wrap hdr-inner">
        <a href="#top" className="brand" aria-label="Cruz Consultoria Imobiliária">
          <CruzLogo height={solid ? 56 : 96} marginBlock={solid ? "0px" : "-6px -48px"} />
        </a>

        <nav className="hdr-nav">
          {NAV.map((n) => (
            <a key={n.t} href={n.href}>{n.t}</a>
          ))}
        </nav>

        <a className="btn btn-wa hdr-cta" href={waLink(WA_DEFAULT)} target="_blank" rel="noopener">
          <span style={{ width: 17, height: 17 }}>{Icons.whats}</span>
          Falar no WhatsApp
        </a>

        <button className={`hdr-burger ${open ? "x" : ""}`} onClick={() => setOpen((o) => !o)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>

      <div className={`hdr-mobile ${open ? "show" : ""}`}>
        {NAV.map((n) => (
          <a key={n.t} href={n.href} onClick={() => setOpen(false)}>{n.t}</a>
        ))}
        <a className="btn btn-wa btn-block" href={waLink(WA_DEFAULT)} target="_blank" rel="noopener" onClick={() => setOpen(false)}>
          <span style={{ width: 17, height: 17 }}>{Icons.whats}</span>
          Falar no WhatsApp
        </a>
      </div>
    </header>
  );
}

function Hero() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 80);
    return () => clearTimeout(t);
  }, []);
  return (
    <section className={`hero ${loaded ? "ready" : ""}`} id="top">
      {/* Layered visual */}
      <div className="hero-skyline">
        <image-slot
          id="hero-skyline"
          src="assets/skyline-sp.png"
          fit="cover"
          radius="0"
          placeholder="Foto panorâmica · skyline de São Paulo (Ponte Estaiada)"
        ></image-slot>
      </div>

      <div className="hero-overlay" aria-hidden="true"></div>

      <div className="hero-person">
        <image-slot
          id="hero-person-v2"
          src="assets/wanderson-hero.png"
          fit="contain"
          position="right bottom"
          radius="0"
          placeholder="Foto do Wanderson · recorte PNG (fundo transparente)"
        ></image-slot>
      </div>

      <div className="hero-vignette" aria-hidden="true"></div>

      {/* Content */}
      <div className="wrap hero-content">
        <div className="hero-left">
          <span className="hero-badge">
            <span className="hb-dot" />
            Corretor especialista em Minha Casa Minha Vida
          </span>

          <h1 className="hero-title">
            Seu imóvel em <span className="hero-gold">São Paulo</span> pode estar mais perto do que você imagina.
          </h1>

          <p className="hero-sub">
            Ajudamos você a conquistar o primeiro imóvel com segurança,
            clareza e acompanhamento em todas as etapas.
          </p>

          <div className="hero-creci">
            <img className="creci-logo" src="assets/creci-logo.png" alt="CRECI" />
            CRECI <strong>299734-F</strong>
          </div>

          <div className="hero-cta">
            <a className="btn btn-wa btn-lg" href={waLink(WA_DEFAULT)} target="_blank" rel="noopener">
              <span style={{ width: 19, height: 19 }}>{Icons.whats}</span>
              Falar com Wanderson
            </a>
            <a className="btn btn-outline btn-lg" href="#analise">
              Quero simular meu financiamento
            </a>
          </div>
        </div>
      </div>

      {/* Floating social proof */}
      <div className="hero-proof-card">
        <div className="hpc-avatars">
          <img className="hpc-av" src="assets/cliente-1.jpg?v=2" alt="Cliente" />
          <img className="hpc-av" src="assets/cliente-2.jpg?v=2" alt="Cliente" />
          <img className="hpc-av" src="assets/cliente-3.jpg?v=2" alt="Cliente" />
        </div>
        <p>
          <strong>+320 famílias</strong> realizaram o sonho do primeiro imóvel
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero });