// ============================================
// ALBUINI ADVOGADOS — Main App
// ============================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "B",
  "showSimulator": true,
  "accent": "#2e3f7e"
}/*EDITMODE-END*/;

function App() {
  const [modalOpen, setModalOpen] = React.useState(false);
  const [tweaks, setTweak] = (window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}]);

  // Apply accent live
  React.useEffect(() => {
    document.documentElement.style.setProperty("--blue", tweaks.accent || "#2e3f7e");
    // derive a slightly deeper accent for hovers
    const c = tweaks.accent || "#2e3f7e";
    document.documentElement.style.setProperty("--blue-deep", shade(c, -0.18));
    document.documentElement.style.setProperty("--blue-soft", shade(c, 0.18));
  }, [tweaks.accent]);

  const openModal = React.useCallback(() => setModalOpen(true), []);
  const closeModal = React.useCallback(() => setModalOpen(false), []);

  return (
    <>
      <Header openModal={openModal} />

      <main>
        <Hero openModal={openModal} headlineVariant={tweaks.headline || "B"} />
        <Proposition openModal={openModal} />
        <Pain />
        <Solution />
        <Benefits />
        <Proof />
        {tweaks.showSimulator !== false && <Simulator openModal={openModal} />}
        <Offer />
        <Objections />
        <Commitments />
        <Urgency openModal={openModal} />
        <FAQSection />
        <FinalCTA openModal={openModal} />
        <PS openModal={openModal} />
      </main>

      <Footer />

      <FloatingWA />

      <LeadModal open={modalOpen} onClose={closeModal} />

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Headline">
            <window.TweakRadio
              label="Variação"
              value={tweaks.headline}
              onChange={(v) => setTweak("headline", v)}
              options={[
                { value: "A", label: "A" },
                { value: "B", label: "B" },
                { value: "C", label: "C" }
              ]}
            />
            <p style={{ fontSize: 12, color: "rgba(244,241,234,0.55)", marginTop: 8, lineHeight: 1.5, fontStyle: "italic" }}>
              A — desconto · B — juros · C — autoridade
            </p>
          </window.TweakSection>

          <window.TweakSection title="Cor de acento">
            <window.TweakColor
              label="Azul Albuini"
              value={tweaks.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#2e3f7e", "#1c2858", "#3b5bdb", "#2d5a3d", "#7a5a2e"]}
            />
          </window.TweakSection>

          <window.TweakSection title="Seções">
            <window.TweakToggle
              label="Mostrar simulador"
              value={tweaks.showSimulator !== false}
              onChange={(v) => setTweak("showSimulator", v)}
            />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
}

// Tiny color shading helper
function shade(hex, amt) {
  let c = hex.replace("#", "");
  if (c.length === 3) c = c.split("").map((x) => x + x).join("");
  const num = parseInt(c, 16);
  let r = (num >> 16) & 0xff;
  let g = (num >> 8) & 0xff;
  let b = num & 0xff;
  r = Math.max(0, Math.min(255, Math.round(r + (amt < 0 ? r * amt : (255 - r) * amt))));
  g = Math.max(0, Math.min(255, Math.round(g + (amt < 0 ? g * amt : (255 - g) * amt))));
  b = Math.max(0, Math.min(255, Math.round(b + (amt < 0 ? b * amt : (255 - b) * amt))));
  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
}

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