// app.jsx — Reforzza LP root

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1B4FB0",
  "headline": "A",
  "display": "instrument",
  "heroLayout": "split",
  "showFloatingWA": true,
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENTS = {
  "#1B4FB0": "Azul Reforzza",
  "#B85C3E": "Terracota italiana",
  "#1B3A5B": "Azul de canteiro",
  "#2D4A2B": "Verde florentino",
  "#1A1814": "Tinta",
};

const DISPLAY_FONTS = {
  instrument: { name: "Instrument Serif", css: "'Instrument Serif', serif" },
  dmserif: { name: "DM Serif Display", css: "'DM Serif Display', serif" },
  cormorant: { name: "Cormorant Garamond", css: "'Cormorant Garamond', serif" },
};

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

  // Install global IntersectionObserver for [data-reveal] elements once
  React.useEffect(() => { installGlobalReveal(); }, []);

  // apply theme tokens to :root
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--display", DISPLAY_FONTS[t.display]?.css || DISPLAY_FONTS.instrument.css);
  }, [t.accent, t.display]);

  return (
    <>
      <ReadProgress />
      <Nav />
      <main>
        <Hero t={t} />
        <TrustStrip />
        <PainPoints />
        <Specialties />
        <Process />
        <Proof />
        <BeforeAfter />
        <RecentWorks />
        <FAQ />
        <Guarantee />
        <FinalCTA />
      </main>
      <Footer />
      {t.showFloatingWA && <FloatingWA />}

      <TweaksPanel>
        <TweakSection label="Headline" />
        <TweakRadio
          label="Variação"
          value={t.headline}
          options={["A", "B", "C"]}
          onChange={(v) => setTweak("headline", v)}
        />
        <div style={{ fontSize: 10.5, color: "rgba(41,38,27,0.55)", marginTop: -4, lineHeight: 1.4 }}>
          {t.headline === "A" && "Autoridade · padrão internacional"}
          {t.headline === "B" && "Prova social peso pesado"}
          {t.headline === "C" && "Dor + benefício técnico"}
        </div>

        <TweakSection label="Cor de acento" />
        <TweakColor
          label="Acento"
          value={t.accent}
          options={Object.keys(ACCENTS)}
          onChange={(v) => setTweak("accent", v)}
        />
        <div style={{ fontSize: 10.5, color: "rgba(41,38,27,0.55)", marginTop: -4 }}>
          {ACCENTS[t.accent] || "Personalizado"}
        </div>

        <TweakSection label="Tipografia display" />
        <TweakSelect
          label="Fonte display"
          value={t.display}
          options={Object.entries(DISPLAY_FONTS).map(([value, f]) => ({ value, label: f.name }))}
          onChange={(v) => setTweak("display", v)}
        />

        <TweakSection label="Layout do hero" />
        <TweakRadio
          label="Disposição"
          value={t.heroLayout}
          options={["split", "centered"]}
          onChange={(v) => setTweak("heroLayout", v)}
        />

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

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