// app.jsx — assembles the page + Tweaks
const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "estilo": "raizes",
  "accent": "#b06a45",
  "headline": "Seu pedaço de *Minas*, cercado de *verde*.",
  "sub": "Lotes em meio à natureza, com ruas pavimentadas e amplas áreas verdes — o lugar ideal para construir a casa própria ou o seu refúgio de fim de semana em Santa Maria do Itabira.",
  "overlay": 0.55,
  "mapStyle": "satGoogle",
  "pinColor": "#b06a45",
  "waFloat": true
}/*EDITMODE-END*/;

// Phone shown on the page / used for WhatsApp deep link (digits only, with country code)
const CONTACT = {
  phone: "(31) 90000-0000",
  email: "contato@loteamentopanorama.com.br",
  whatsapp: "5531900000000",
};

function useReveal() {
  useE(() => {
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const els = Array.from(document.querySelectorAll(".reveal"));
    if (reduce || !("IntersectionObserver" in window)) return; // stays visible
    const vh = window.innerHeight || 800;
    // Arm the animation, then immediately reveal anything already on screen.
    els.forEach((el) => {
      el.classList.add("armed");
      if (el.getBoundingClientRect().top < vh * 0.92) {
        requestAnimationFrame(() => requestAnimationFrame(() => el.classList.add("in")));
      }
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
    }, { threshold: 0.08, rootMargin: "0px 0px -6% 0px" });
    els.forEach((el) => { if (!el.classList.contains("in")) io.observe(el); });
    const t = setTimeout(() => els.forEach((el) => el.classList.add("in")), 1600);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  useE(() => { document.documentElement.setAttribute("data-style", t.estilo); }, [t.estilo]);
  useE(() => { document.documentElement.style.setProperty("--accent", t.accent); }, [t.accent]);
  useE(() => { document.documentElement.style.setProperty("--hero-overlay", t.overlay); }, [t.overlay]);

  return (
    <>
      <Header wa={CONTACT.whatsapp} />
      <main>
        <Hero headline={t.headline} sub={t.sub} />
        <Diferenciais />
        <Galeria />
        <Localizacao mapStyle={t.mapStyle} pinColor={t.pinColor} />
        <Condicoes />
        <LeadForm contact={CONTACT} />
      </main>
      <Footer contact={CONTACT} />

      {t.waFloat && (
        <a className="wa-float" href={`https://wa.me/${CONTACT.whatsapp}`} target="_blank" rel="noopener" aria-label="WhatsApp">
          <Ic.wa />
        </a>
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Estilo visual" />
        <TweakRadio label="Direção" value={t.estilo}
          options={[{ value: "raizes", label: "Raízes" }, { value: "horizonte", label: "Horizonte" }, { value: "refugio", label: "Refúgio" }]}
          onChange={(v) => setTweak("estilo", v)} />
        <TweakColor label="Cor de acento" value={t.accent}
          options={["#b06a45", "#4a7c52", "#c08a3e", "#9c5a3c"]}
          onChange={(v) => setTweak("accent", v)} />

        <TweakSection label="Conteúdo do hero" />
        <TweakText label="Título (use *palavra* para destacar)" value={t.headline} onChange={(v) => setTweak("headline", v)} />
        <TweakText label="Subtítulo" value={t.sub} onChange={(v) => setTweak("sub", v)} />
        <TweakSlider label="Degradê do hero" value={t.overlay} min={0.2} max={0.9} step={0.05}
          onChange={(v) => setTweak("overlay", v)} />

        <TweakSection label="Mapa" />
        <TweakSelect label="Estilo do mapa" value={t.mapStyle}
          options={[
            { value: "voyager", label: "Voyager (colorido suave)" },
            { value: "positron", label: "Positron (claro minimalista)" },
            { value: "osm", label: "OpenStreetMap (padrão)" },
            { value: "terrain", label: "Terreno / relevo" },
            { value: "satGoogle", label: "Satélite Google (mais nítido)" },
            { value: "satGoogleHybrid", label: "Satélite Google + ruas" },
            { value: "satClarity", label: "Satélite Esri Clarity" },
            { value: "satellite", label: "Satélite Esri (padrão)" },
            { value: "satEsriHybrid", label: "Satélite Esri + nomes" },
            { value: "dark", label: "Escuro" },
            { value: "google", label: "Google Maps" },
            { value: "osmEmbed", label: "OpenStreetMap (embed)" },
          ]}
          onChange={(v) => setTweak("mapStyle", v)} />
        <TweakColor label="Cor do pin" value={t.pinColor}
          options={["#b06a45","#1faa57","#2A6FDB","#e53e3e","#7c3aed"]}
          onChange={(v) => setTweak("pinColor", v)} />

        <TweakSection label="Conversão" />
        <TweakToggle label="Botão flutuante WhatsApp" value={t.waFloat} onChange={(v) => setTweak("waFloat", v)} />
      </TweaksPanel>
    </>
  );
}

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