/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTitle": "A"
}/*EDITMODE-END*/;

function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);
  const [showFab, setShowFab] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setShowFab(window.scrollY > window.innerHeight * 0.7);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Nav />
      <Hero titleVariant={t.heroTitle} />
      <Cases />
      <ComoFunciona />
      <Ocasioes />
      <QuemSomos />
      <Personalizacao />
      <ProvaSocial />
      <Depoimento />
      <Faq />
      <CTAFinal />
      <Footer />

      <a
        href="https://wa.me/5519982365579"
        className={"fab-whatsapp" + (showFab ? "" : " is-hidden")}
        target="_blank"
        rel="noopener"
        aria-label="Falar no WhatsApp"
      >
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M16.52 13.94c-.27-.13-1.6-.79-1.85-.88-.25-.09-.43-.13-.61.13-.18.27-.7.88-.86 1.06-.16.18-.32.21-.59.07-.27-.13-1.13-.42-2.16-1.33-.8-.71-1.34-1.59-1.5-1.86-.16-.27-.02-.41.12-.55.12-.12.27-.32.4-.48.13-.16.18-.27.27-.45.09-.18.04-.34-.02-.48-.07-.13-.61-1.46-.83-2-.22-.53-.45-.46-.61-.46h-.52c-.18 0-.46.07-.7.34-.24.27-.92.9-.92 2.18 0 1.29.94 2.53 1.07 2.71.13.18 1.85 2.83 4.49 3.97.62.27 1.11.43 1.49.55.62.2 1.19.17 1.64.1.5-.07 1.6-.65 1.83-1.29.23-.63.23-1.18.16-1.29-.07-.11-.25-.18-.52-.32M12.04 21.41h-.01c-1.6 0-3.16-.43-4.52-1.24l-.32-.19-3.36.88.9-3.27-.21-.34a9.27 9.27 0 0 1-1.42-4.93c0-5.13 4.18-9.31 9.31-9.31 2.49 0 4.82.97 6.58 2.74a9.24 9.24 0 0 1 2.72 6.59c0 5.13-4.18 9.31-9.31 9.31m7.92-17.23A11.04 11.04 0 0 0 12.04 1C5.94 1 1 5.94 1 12.04a11 11 0 0 0 1.48 5.51L1 23l5.59-1.46a11.06 11.06 0 0 0 5.45 1.39h.01c6.1 0 11.04-4.94 11.04-11.04 0-2.95-1.15-5.72-3.13-7.71"/>
        </svg>
        <span className="fab-label">WhatsApp</span>
      </a>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero · A/B test do título">
          <TweakRadio
            label="Título principal"
            value={t.heroTitle}
            options={[
              { value: "A", label: "A · Feitos à mão" },
              { value: "B", label: "B · Vai querer assinar" },
              { value: "C", label: "C · Carregam o nome" },
            ]}
            onChange={(v) => setT("heroTitle", v)}
          />
          <div style={{ fontFamily: "var(--sans)", fontSize: 12, color: "#5A4448", lineHeight: 1.5, marginTop: 8 }}>
            <strong>A:</strong> Presentes corporativos <em>feitos à mão</em><br/>
            <strong>B:</strong> O presente que sua empresa <em>vai querer assinar</em><br/>
            <strong>C:</strong> Doces autorais que <em>carregam o nome da sua marca</em>
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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