// app.jsx — main app + reveal-on-scroll
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "years": 26,
  "projects": 84,
  "sqm": 12500,
  "palette": ["#0A1F44", "#C5A059", "#F4F1EC"]
}/*EDITMODE-END*/;

function useReveal() {
  useEffect(() => {
    const items = document.querySelectorAll(
      ".intro h2, .intro p, .numbers, .portfolio-head, .filters, .proj, .about-photo, .about h2, .about p, .about-skills, .about-quote, .testi-head, .testi-card, .blog-head, .blog-row, .cta h2, .cta p, .cta-buttons, .ai-left, .ai-chat-wrap"
    );
    items.forEach((el) => el.classList.add("reveal"));
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    items.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modal, setModal] = useState(null);

  // apply palette tweaks
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--navy", t.palette[0]);
    r.style.setProperty("--gold", t.palette[1]);
    r.style.setProperty("--paper", t.palette[2]);
  }, [t.palette]);

  useReveal();

  return (
    <>
      <Nav />
      <Hero />
      <Intro stats={{ years: t.years, projects: t.projects, sqm: t.sqm }} />
      <Portfolio onOpen={(p) => setModal(p)} />
      <About />
      <AIConsultant />
      <Testimonials />
      <Blog />
      <CTA />
      <Footer />
      <FloatingWhatsApp />
      <ProjectModal project={modal} onClose={() => setModal(null)} />

      <TweaksPanel title="Tweaks · Denis Moriama">
        <TweakSection label="Números do escritório" />
        <TweakSlider label="Anos de experiência" value={t.years} min={1} max={40} unit=" anos"
                     onChange={(v) => setTweak("years", v)} />
        <TweakSlider label="Projetos entregues" value={t.projects} min={5} max={200} unit=""
                     onChange={(v) => setTweak("projects", v)} />
        <TweakSlider label="Metragem total (m²)" value={t.sqm} min={500} max={30000} step={100} unit=" m²"
                     onChange={(v) => setTweak("sqm", v)} />
        <TweakSection label="Paleta" />
        <TweakColor label="Brand palette"
                    value={t.palette}
                    options={[
                      ["#0A1F44", "#C5A059", "#F4F1EC"],
                      ["#1A1A1A", "#C5A059", "#F4F1EC"],
                      ["#23241F", "#A88A52", "#EDE7DC"],
                      ["#0E2A2A", "#B58A52", "#F1ECE3"],
                      ["#2E2A24", "#D4B886", "#F7F2EA"],
                    ]}
                    onChange={(v) => setTweak("palette", v)} />
      </TweaksPanel>
    </>
  );
}

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