// Main app — wires everything together
const { useEffect: useEffApp } = React;

function App() {
  // Hooks declared in liquid-bg.jsx
  useSmoothScroll();
  useReveal();

  useEffApp(() => {
    // anchor smooth scroll override (since native smooth can stutter under nav offset)
    const onClick = (e) => {
      // Email links: copy address + toast, and still let the mail app open if any
      const mail = e.target.closest('a[href^="mailto:"]');
      if (mail) {
        const email = mail.getAttribute("href").replace("mailto:", "").split("?")[0];
        if (navigator.clipboard) { navigator.clipboard.writeText(email).catch(() => {}); }
        const t = document.createElement("div");
        t.textContent = "Email copiado: " + email;
        t.style.cssText = "position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#111;color:#fff;padding:12px 18px;border-radius:10px;font:600 14px/1 Inter,system-ui,sans-serif;z-index:99999;box-shadow:0 8px 30px rgba(0,0,0,.4);opacity:0;transition:opacity .2s";
        document.body.appendChild(t);
        requestAnimationFrame(() => { t.style.opacity = "1"; });
        setTimeout(() => { t.style.opacity = "0"; setTimeout(() => t.remove(), 300); }, 2200);
        return; // no preventDefault: deja que el mailto abra el correo si hay cliente
      }
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const href = a.getAttribute("href");
      // Bare "#" or empty: prevent the browser jumping to top, do nothing.
      if (href === "#" || href === "") { e.preventDefault(); return; }
      const id = href.slice(1);
      const el = document.getElementById(id);
      if (!el) { e.preventDefault(); return; }
      e.preventDefault();
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <React.Fragment>
      <LiquidBackground />
      <MagneticCursor />
      <Nav />
      <main>
        <Hero />
        <ManifestoSection />
        <StatsSection />
        <NichesSection />
        <ServicesSection />
        <ProcessSection />
        <TrustSection />
        <FounderSection />
        <TimeCloseSection />
        <ContactSection />
      </main>
      <Footer />
      <FloatingSocials />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);