// nav-hero.jsx — top nav + hero dobra (1)
const { IconArrowRight, IconHouse, IconHammer, IconChart, IconCoins, IconKey, IconHandshake, IconChat, IconCheck, IconSearch, IconShield, IconDoc, IconCompass, IconBell, IconFolder } = window.Icons;
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);
  return (
    <header className="nav" data-scrolled={scrolled} data-mobile-open={mobileOpen}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/logo-app-icon-blue.png" alt="" />
          <span className="nav-wordmark">Flipper Hub</span>
        </a>
        <nav className="nav-links">
          <a className="nav-link" href="/sobre">Sobre</a>
          <a className="nav-link" href="/conteudo">Conteúdo</a>
          <a className="nav-link" href="/precos">Preços</a>
        </nav>
        <div className="nav-actions">
          <a className="btn btn-ghost" href='https://app.flipperhub.com.br' target="_blank" rel="noopener">Entrar</a>
          <a className="btn btn-primary" href="/precos">
            Ver planos
          </a>
        </div>
        <button
          type="button"
          className="nav-toggle"
          aria-label={mobileOpen ? 'Fechar menu' : 'Abrir menu'}
          aria-expanded={mobileOpen}
          aria-controls="nav-mobile-drawer"
          onClick={() => setMobileOpen(v => !v)}
        >
          <span className="nav-toggle-bar" />
          <span className="nav-toggle-bar" />
          <span className="nav-toggle-bar" />
        </button>
      </div>
      <div className="nav-mobile-drawer" id="nav-mobile-drawer" hidden={!mobileOpen}>
        <nav className="nav-mobile-links" onClick={() => setMobileOpen(false)}>
          <a className="nav-mobile-link" href="/sobre">Sobre</a>
          <a className="nav-mobile-link" href="/conteudo">Conteúdo</a>
          <a className="nav-mobile-link" href="/precos">Preços</a>
        </nav>
        <div className="nav-mobile-actions" onClick={() => setMobileOpen(false)}>
          <a className="btn btn-secondary btn-lg" href='https://app.flipperhub.com.br' target="_blank" rel="noopener">Entrar</a>
          <a className="btn btn-primary btn-lg" href="/precos">Ver planos</a>
        </div>
      </div>
    </header>);

}

function Hero() {
  const sub = "Método, conteúdo e tecnologia para organizar cada imóvel como uma operação completa — da prospecção ao fechamento, da análise ao resultado real.";

  return (
    <section className="hero canvas" id="top" data-layout="split">
      <div className="container">
        <div className="hero-split">
          <div className="hero-grid">
            <h1 className="hero-h1">A inteligência<br />operacional do<br /><span className="accent">flip imobiliário</span><br />no Brasil</h1>
            <p className="hero-sub">{sub}</p>
            <div className="hero-cta">
              <a className="btn btn-primary btn-lg" href="/precos">
                Ver planos <IconArrowRight size={16} />
              </a>
            </div>
          </div>
          <div className="hero-visual">
            <window.HeroOrbitCinematic variant="blackHole" />
          </div>
        </div>
      </div>
    </section>);
}

window.Nav = Nav;
window.Hero = Hero;