function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo">
          <span className="mark"><img src={ASSET("logoImg","assets/logo-mind-opt.png")} alt="MIND Odontologia Legal" /></span>
          <span className="lo">
            <b className="wm" style={{fontWeight:400, color:"#776C49", fontSize:"15px"}}>MIND - Odontologia Legal</b>
            <small style={{color:"#8994A4"}}>Odontologia Legal · Assistência técnica · documentação</small>
          </span>
        </a>
        <div className="nav-links">
          <a href="#servicos">Serviços</a>
          <a href="#sobre">Sobre</a>
          <a href="atendimento.html">Contato</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-primary" href="atendimento.html">
            <span className="btn-label-full">Fale conosco</span><span className="arr">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ mesh }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true">
        <img src={ASSET("justiceBg","assets/justice-bg.jpg")} alt="" />
        <div className="hero-bg-fade"></div>
      </div>
      <div className="hero-mesh" data-mesh={mesh ? "on" : "off"}></div>
      <div className="container">
        <div className="hero-grid hero-grid-solo">
          <div>
            <Reveal delay={80}>
              <h1 className="hero-title">Cuide dos seus pacientes, nós cuidamos de <em>você</em>.</h1>
            </Reveal>
            <Reveal delay={160}>
              <p className="hero-lede">Oferecemos respaldo técnico especializado para que sua prática clínica esteja sempre fundamentada e protegida.</p>
            </Reveal>
            <Reveal delay={240}>
              <div className="hero-ctas">
                <a className="btn btn-primary" href="atendimento.html">
                  Quero proteger minha clínica <span className="arr">→</span>
                </a>
                <a className="btn btn-ghost" href="#servicos">
                  Conhecer os serviços <span className="arr">↓</span>
                </a>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const words = [
    "Prontuário","TCLE","CFO","Prontuário","Assistência Técnica",
    "Parecer Odontolegal","Quesitos Periciais","Auditoria Documental","Deontologia",
    "Responsabilidade Civil","Odontologia Legal","Perícia Criminal","Compliance Odontológico","Gestão de Risco"
  ];
  const seq = [...words, ...words];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {seq.map((w, i) => (
          <React.Fragment key={i}>
            <span>{w}</span>
            <span className="b">·</span>
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Marquee });