// sales-app.jsx — Sales page main app.
// Mobile-first canvas wrapped in a centered viewport. Sticky purchase
// bar appears after the hero. Tweaks panel toggles price strategy.

const SALES_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "priceMode": "discount",
  "showBonus": true
}/*EDITMODE-END*/;

// Kiwify checkout URL (produto Eixo Pharma · Pacote de 5 PDFs).
const KIWIFY_URL = "https://pay.kiwify.com.br/sHX564L";

function SalesApp() {
  const [t, setTweak] = useTweaks(SALES_TWEAK_DEFAULTS);
  const clinico = useDirection("clinico");
  const noturno = useDirection("noturno");

  // Show sticky bar after scrolling past hero.
  const heroRef = React.useRef(null);
  const [stickyVisible, setStickyVisible] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => setStickyVisible(!entry.isIntersecting),
      { rootMargin: "-40% 0px 0px 0px" }
    );
    if (heroRef.current) obs.observe(heroRef.current);
    return () => obs.disconnect();
  }, []);

  // CTA — Meta Pixel InitiateCheckout, then Kiwify checkout in a new tab.
  const onCTA = React.useCallback(() => {
    if (typeof window !== "undefined" && typeof window.fbq === "function") {
      window.fbq("track", "InitiateCheckout", { value: 67.00, currency: "BRL" });
    }
    window.open(KIWIFY_URL, "_blank", "noopener,noreferrer");
  }, []);

  return (
    <div style={{
      minHeight: "100vh",
      background: `${clinico.bgGradient}, ${clinico.bg}`,
      color: clinico.ink, fontFamily: clinico.body,
      display: "flex", justifyContent: "center",
    }}>
      {/* The page is rendered inside a mobile-width column so the user sees
          exactly what a phone visitor sees. On desktop, there's a wide
          neutral gutter on either side. */}
      <main style={{
        width: "100%", maxWidth: 460, position: "relative",
        boxShadow: window.innerWidth > 600
          ? "0 0 0 0.5px rgba(0,0,0,0.08), 0 30px 80px -20px rgba(0,0,0,0.18)"
          : "none",
        background: clinico.bg,
      }}>
        <SalesTopBar dir={clinico} />
        <div ref={heroRef}>
          <SalesHero dir={clinico} priceMode={t.priceMode} onCTA={onCTA} />
        </div>
        <SecParaQuem    dir={clinico} />
        <SecDor         dir={clinico} />
        <SecDentro      dir={clinico} />
        <SecStack       dir={clinico} priceMode={t.priceMode} onCTA={onCTA} />
        <SecObjecao     dir={clinico} />
        {t.showBonus && <SecBonus dir={clinico} dirNoturno={noturno} />}
        <SecAutor       dir={clinico} />
        <SecAntesDepois dir={clinico} />
        <SecDepoimentos dir={clinico} />
        <SecGarantia    dir={clinico} />
        <SecFAQ         dir={clinico} />
        <SecFinalCTA    dir={clinico} priceMode={t.priceMode} onCTA={onCTA} />
        <SalesFooter    dir={clinico} />

        <StickyBar
          dir={clinico}
          priceMode={t.priceMode}
          onCTA={onCTA}
          visible={stickyVisible}
        />
      </main>

      <TweaksPanel title="Tweaks · Página de venda">
        <TweakSection label="Estratégia de preço" />
        <TweakSelect
          label="Modo de preço"
          value={t.priceMode}
          options={[
            { value: "clean",    label: "Preço cheio · sem desconto" },
            { value: "discount", label: "Com preço riscado (recomendado)" },
          ]}
          onChange={(v) => setTweak("priceMode", v)}
        />
        <TweakSection label="Bônus" />
        <TweakToggle
          label="Mostrar bloco do Telegram"
          value={t.showBonus}
          onChange={(v) => setTweak("showBonus", v)}
        />

        <div style={{
          fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace", fontSize: 10,
          opacity: 0.55, marginTop: 6, lineHeight: 1.5,
        }}>
          Botões abrem Kiwify em nova aba. Troque <code>KIWIFY_URL</code> e
          <code>SEU_PIXEL_ID</code> em <code>sales.html</code> quando os reais estiverem prontos.
        </div>
      </TweaksPanel>
    </div>
  );
}

const __salesRoot = ReactDOM.createRoot(document.getElementById("root"));
__salesRoot.render(<SalesApp />);