// ═══════════════════════════════════════════════════════════════════
// app.jsx — Application root.
//
// Responsibilities:
//   1. Hold tweak state and apply CSS custom-property overrides.
//   2. Hold mobile-menu open/close state.
//   3. Initialize the reveal scroll observer.
//   4. Compose all sections in page order.
//
// This file should NOT contain business logic, static data, or
// component implementations — those live in src/.
// ═══════════════════════════════════════════════════════════════════

const { useState, useEffect } = React;

// ── CSS custom-property application ──────────────────────────────────
function applyTweaks(t) {
  const root   = document.documentElement;
  const palKey = Array.isArray(t.palette) ? t.palette[0] : t.palette;
  const pal    = PALETTES[palKey] || PALETTES["#1b4332"];
  const rad    = RADII[t.radius]  || RADII.regular;

  Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v));

  root.style.setProperty("--r-xs", rad.xs);
  root.style.setProperty("--r-sm", rad.sm);
  root.style.setProperty("--r-md", rad.md);
  root.style.setProperty("--r-lg", rad.lg);
  root.style.setProperty("--r-xl", rad.xl);

  // typeScale adjusts the base font size; components using em/rem inherit it
  document.body.style.fontSize = (16 * t.typeScale) + "px";
}

// ── App ───────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [menuOpen, setMenuOpen] = useState(false);

  useReveal();

  // Apply design-token overrides whenever tweaks change
  useEffect(() => { applyTweaks(t); }, [t]);

  // Toggle surprise-pattern class
  useEffect(() => {
    document.documentElement.classList.toggle("surprise-pattern", !!t.pattern);
  }, [t.pattern]);

  return (
    <>
      <Nav
        onMenuToggle={() => setMenuOpen((prev) => !prev)}
        menuOpen={menuOpen}
      />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)}/>

      <main>
        <Hero          heroVariant={t.heroVariant}/>
        <Servicos/>
        <Diferenciais/>
        <BeforeAfter/>
        <Testimonials/>
        <FAQ/>
        <Local/>
        <CtaForm/>
      </main>

      <Footer/>

      {/* Persistent WhatsApp shortcut */}
      <a href={CONTACT.waLink} className="wa-float"
         aria-label="Falar no WhatsApp"
         target="_blank" rel="noopener noreferrer">
        <Icon.whatsapp/>
      </a>

      {/* Design-tweak panel — activated by host postMessage */}
      <TweaksPanel title="Tweaks · OdontoPro">
        <TweakSection label="Cantos arredondados"/>
        <TweakRadio
          label="Raio"
          value={t.radius}
          options={["sharp", "regular", "soft"]}
          onChange={(v) => setTweak("radius", v)}
        />
        <TweakSection label="Surpreenda-me"/>
        <TweakColor
          label="Paleta"
          value={t.palette}
          options={PALETTE_OPTIONS}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakRadio
          label="Hero"
          value={t.heroVariant}
          options={["elegant", "minimal"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakSlider
          label="Escala da tipografia"
          value={t.typeScale}
          min={0.9} max={1.15} step={0.05}
          onChange={(v) => setTweak("typeScale", v)}
        />
        <TweakToggle
          label="Padrão de fundo"
          value={t.pattern}
          onChange={(v) => setTweak("pattern", v)}
        />
      </TweaksPanel>
    </>
  );
}

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