// app.jsx — DropX root

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

  // Apply tweakable accent live
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  // Sincroniza tweak de URL da API com o cliente
  React.useEffect(() => {
    window.setApiBase(t.apiBase || "");
  }, [t.apiBase]);

  return (
    <AuthProvider>
      <CartProvider>
        <Nav />
        <Hero headlineVariant={t.headline} />
        <Marquee />
        <Pitch />
        <Manifesto />
        <Pain />
        <Solution />
        <Benefits />
        <Showcase />
        <Offer />
        <Objections />
        <Guarantee />
        <Urgency />
        <FAQ />
        <Final />
        <PS />
        <Footer />

        <DropCatalog />
        <CartDrawer />
        <CheckoutModal />
        <AccountRouter />

        <TweaksPanel title="Tweaks">
          <TweakSection label="Backend" />
          <TweakText
            label="URL da API"
            value={t.apiBase}
            placeholder="https://dropx-api.onrender.com"
            onChange={(v) => setTweak("apiBase", v)}
          />
          <div style={{ marginTop: 4, padding: "8px 10px", borderRadius: 8, background: "rgba(0,0,0,0.04)", fontFamily: "ui-monospace,monospace", fontSize: 10.5, lineHeight: 1.45, color: "rgba(41,38,27,.72)" }}>
            Vazio = mesmo domínio (produção).<br />
            Localhost = http://localhost:3000<br />
            Render = https://SEU-APP.onrender.com
          </div>

          <TweakSection label="Cor de acento" />
          <TweakColor
            label="Acento"
            value={t.accent}
            options={["#e0a040", "#c97a2b", "#6b3a20", "#f0ede0", "#d8ff3a"]}
            onChange={(v) => setTweak("accent", v)}
          />
          <TweakSection label="Hero" />
          <TweakRadio
            label="Headline"
            value={t.headline}
            options={["A", "B", "C"]}
            onChange={(v) => setTweak("headline", v)}
          />
          <div style={{ marginTop: 6, padding: "8px 10px", borderRadius: 8, background: "rgba(0,0,0,0.04)", fontFamily: "ui-monospace,monospace", fontSize: 10.5, lineHeight: 1.45, color: "rgba(41,38,27,.72)" }}>
            A · Do jeito que deveria ser.<br />
            B · Direto da fábrica. Do jeito que você pode pagar.<br />
            C · O segredo de quem sempre está bem vestido.
          </div>
        </TweaksPanel>
      </CartProvider>
    </AuthProvider>
  );
}

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