// app.jsx — Butter Cream Doces · assembly + tweaks
const { useEffect: useEffectA } = React;

const ACCENTS = {
  "Dourado":  { a: "#C9A24B", d: "#B08C36", ink: "#2B2724" },
  "Caramelo": { a: "#7C4A3A", d: "#653A2D", ink: "#FFFFFF" },
  "Rosé":     { a: "#C58A8A", d: "#A86E6E", ink: "#FFFFFF" },
  "Grafite":  { a: "#2B2724", d: "#000000", ink: "#FFFFFF" },
};
const FONTS = {
  "Cormorant": "'Cormorant Garamond', Georgia, serif",
  "Playfair":  "'Playfair Display', Georgia, serif",
  "Marcellus": "'Marcellus', Georgia, serif",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "split",
  "accent": "Dourado",
  "serif": "Cormorant",
  "reveal": true
}/*EDITMODE-END*/;

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

  // apply accent + font tokens
  useEffectA(() => {
    const r = document.documentElement;
    const ac = ACCENTS[t.accent] || ACCENTS["Dourado"];
    r.style.setProperty("--accent", ac.a);
    r.style.setProperty("--accent-deep", ac.d);
    r.style.setProperty("--accent-ink", ac.ink);
    r.style.setProperty("--serif", FONTS[t.serif] || FONTS["Cormorant"]);
  }, [t.accent, t.serif]);

  // re-run reveal when hero variant changes / on mount
  useReveal();
  useEffectA(() => {
    if (!t.reveal) document.querySelectorAll(".reveal").forEach((el) => el.classList.add("in"));
  }, [t.reveal, t.hero]);

  return (
    <React.Fragment>
      <Header heroVariant={t.hero} />
      <main>
        <Hero variant={t.hero} />
        <Diferenciais />
        <Portfolio />
        <Processo />
        <Depoimentos />
        <Instagram />
        <Faq />
        <CtaFinal />
      </main>
      <Footer />

      <a className="wa-float" href={waLink()} target="_blank" rel="noreferrer" aria-label="Falar no WhatsApp">
        <span className="pulse" />
        <Icon.whatsapp />
      </a>

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect label="Layout do Hero" value={t.hero}
          options={[["split","Editorial (lado a lado)"],["fullbleed","Foto full-bleed"],["layered","Camadas sobrepostas"]]}
          onChange={(v) => setTweak("hero", v)} />
        <TweakSection label="Identidade" />
        <TweakColor label="Cor de acento" value={ACCENTS[t.accent].a}
          options={Object.values(ACCENTS).map((x) => x.a)}
          onChange={(v) => {
            const name = Object.keys(ACCENTS).find((k) => ACCENTS[k].a === v) || "Dourado";
            setTweak("accent", name);
          }} />
        <TweakRadio label="Fonte de título" value={t.serif}
          options={Object.keys(FONTS)} onChange={(v) => setTweak("serif", v)} />
        <TweakSection label="Movimento" />
        <TweakToggle label="Animações ao rolar" value={t.reveal} onChange={(v) => setTweak("reveal", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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