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>
  );
}

function PartnersBand() {
  const PARTNERS = [
    { name:"Conselho Federal de Odontologia", img:"assets/logo-cfo.png", url:"https://website.cfo.org.br/", h:30, w:99 },
    { name:"Asaas", img:"assets/logo-asaas.png", url:"https://www.asaas.com/", h:28, w:95 },
    { name:"OdontoHive", img:"assets/logo-odontohive.png", url:"https://odontohive.com.br/", h:50, w:87 },
    { name:"Dentista Tricks", img:"assets/logo-dentistatricks.png", url:"https://www.instagram.com/dentistatricks/?hl=pt-br", h:54, w:40 },
  ];
  const seq = [];
  for (let r = 0; r < 6; r++) PARTNERS.forEach((p, i) => seq.push({ ...p, key: r + "-" + i }));
  return (
    <div className="partners">
      <div className="partners-label">Parcerias</div>
      <div className="partners-viewport">
        <div className="partners-track">
          {seq.map(p => (
            <a className="partner-logo" key={p.key} href={p.url} target="_blank" rel="noopener noreferrer" title={p.name} aria-label={p.name}>
              <img src={p.img} alt={p.name} width={p.w} height={p.h} style={{height:p.h, width:p.w}} />
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

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