// app-ledger.jsx — MCDolar (sistema Ledger) entry

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "density": "compact",
  "accent": "#D5A248"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = [
  { id: "oxblood", name: "Oxblood",   value: "#7A241A" },
  { id: "ledger",  name: "Verde",     value: "#2C4A38" },
  { id: "ink",     name: "Tinta",     value: "#2A2118" },
  { id: "rust",    name: "Ferrugem",  value: "#A8521F" },
  { id: "navy",    name: "Marinho",   value: "#234063" },
];

function hexToRgba(hex, a) {
  const h = hex.replace("#", "");
  const full = h.length === 3 ? h.split("").map(c => c + c).join("") : h;
  const r = parseInt(full.slice(0,2), 16);
  const g = parseInt(full.slice(2,4), 16);
  const b = parseInt(full.slice(4,6), 16);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.theme);
    r.setAttribute("data-density", t.density);
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-soft", hexToRgba(t.accent, t.theme === "dark" ? 0.18 : 0.10));
  }, [t.theme, t.density, t.accent]);

  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Proposta />
      <Pain />
      <Principle />
      <OneDirection />
      <Method />
      <Benefits />
      <Privacy />
      <Plan />
      <Objections />
      <GuaranteeAndScarcity />
      <Faq />
      <FinalCta />
      <PS />
      <Footer />
      <StickyCta />

      <TweaksPanel>
        <TweakSection label="Aparência" />
        <TweakRadio label="Tema" value={t.theme} options={["light", "dark"]} onChange={(v) => setT("theme", v)} />
        <TweakRadio label="Densidade" value={t.density} options={["compact", "regular", "spacious"]} onChange={(v) => setT("density", v)} />

        <TweakSection label="Cor de destaque" />
        <div style={{display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap: 8}}>
          {ACCENT_PRESETS.map(p => (
            <button key={p.id} onClick={() => setT("accent", p.value)} title={p.name}
              style={{appearance:"none", border: t.accent === p.value ? "2px solid #29261b" : "1px solid rgba(0,0,0,0.12)", background: p.value, height: 28, borderRadius: 6, cursor: "default", padding: 0}} />
          ))}
        </div>
        <TweakColor label="Personalizada" value={t.accent} onChange={(v) => setT("accent", v)} />
      </TweaksPanel>
    </>
  );
}

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