const { useState, useEffect, useRef } = React;
const CHECKOUT_URL = "https://hotm.io/ebook-terapiacommandalas";

const PAGE_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "showStickyCta": true,
  "headlineStyle": "italic",
  "ctaCopy": "Sim, quero acalmar minha mente"
} /*EDITMODE-END*/;

const ACCENTS = {
  indigo: { ink: "#1A365D", inkSoft: "#2A4A78", gold: "#B89968", goldSoft: "#D4AF37" },
  midnight: { ink: "#0F2A4A", inkSoft: "#1F3F66", gold: "#C9A961", goldSoft: "#E0C078" },
  sage: { ink: "#2E4A3F", inkSoft: "#456558", gold: "#B89968", goldSoft: "#D4AF37" },
  plum: { ink: "#3D2B4F", inkSoft: "#5A4470", gold: "#C9A961", goldSoft: "#D4AF37" }
};

function App() {
  const [t, setTweak] = useTweaks(PAGE_DEFAULTS);
  const accent = ACCENTS[t.accent] || ACCENTS.indigo;
  const [format, setFormat] = useState("ebook"); // ebook | printed
  const [openFaq, setOpenFaq] = useState(0);
  const [scrolled, setScrolled] = useState(false);
  const [showSticky, setShowSticky] = useState(false);
  const offerRef = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      // Show sticky CTA after first viewport, hide near offer (it has its own buy button)
      const offer = offerRef.current;
      const y = window.scrollY;
      const past = y > window.innerHeight * 0.6;
      let nearOffer = false;
      if (offer) {
        const r = offer.getBoundingClientRect();
        nearOffer = r.top < window.innerHeight && r.bottom > 0;
      }
      setShowSticky(past && !nearOffer);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const scrollToOffer = () => {
    offerRef.current?.scrollTo ?
    offerRef.current.scrollTo({ top: 0, behavior: "smooth" }) :
    window.scrollTo({ top: offerRef.current.offsetTop - 60, behavior: "smooth" });
  };

  return (
    <div className="page" style={{ "--ink": accent.ink, "--ink-soft": accent.inkSoft, "--gold": accent.gold, "--gold-soft": accent.goldSoft }}>
      <TopBar scrolled={scrolled} onCta={scrollToOffer} ctaCopy={t.ctaCopy} />
      <Hero onCta={scrollToOffer} headlineStyle={t.headlineStyle} ctaCopy={t.ctaCopy} />
      <PainSection />
      <BigIdea />
      <HowItWorks />
      <Testimonials />
      <div ref={offerRef}><Offer format={format} setFormat={setFormat} ctaCopy={t.ctaCopy} /></div>
      <Guarantee />
      <FAQ openFaq={openFaq} setOpenFaq={setOpenFaq} />
      <FinalCta onCta={scrollToOffer} ctaCopy={t.ctaCopy} />
      <Footer />

      {t.showStickyCta && showSticky &&
      <StickyCta onCta={scrollToOffer} ctaCopy={t.ctaCopy} />
      }

      <Tweaks t={t} setTweak={setTweak} />
    </div>);

}

/* ───────── TOP BAR ───────── */
function TopBar({ scrolled, onCta, ctaCopy }) {
  return (
    <header className={"topbar " + (scrolled ? "topbar--scrolled" : "")}>
      <div className="topbar__inner">
        <div className="brand">
          <span className="brand__mark" aria-hidden>
            <svg viewBox="0 0 32 32" width="22" height="22">
              <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1" />
              <circle cx="16" cy="16" r="9" fill="none" stroke="currentColor" strokeWidth="1" />
              <circle cx="16" cy="16" r="4" fill="none" stroke="currentColor" strokeWidth="1" />
              <circle cx="16" cy="16" r="1.5" fill="currentColor" />
            </svg>
          </span>
          <span className="brand__name">Caminho Azul<span className="brand__dot">·</span><em>Mandalas</em></span>
        </div>
        <nav className="topbar__nav">
          <a href="#como-funciona">Como funciona</a>
          <a href="#depoimentos">Depoimentos</a>
          <a href="#faq">Dúvidas</a>
        </nav>
        <a className="btn btn--ghost btn--sm" href={CHECKOUT_URL} target="_blank" rel="noopener">Quero meu exemplar</a>
      </div>
    </header>);

}

/* ───────── HERO ───────── */
function Hero({ onCta, headlineStyle, ctaCopy }) {
  return (
    <section className="hero">
      <div className="hero__grid">
        <div className="hero__copy">
          <div className="eyebrow">
            <span className="eyebrow__line" />
            por Leila Pekelman <span className="eyebrow__sep">·</span> in memoriam
          </div>
          <h1 className={"display " + (headlineStyle === "italic" ? "display--italic" : "")} style={{ fontWeight: "500", lineHeight: "1.05" }}>
            <span style={{ fontSize: "68px", lineHeight: "0.95", display: "inline-block" }}>Sua mente <em>não desliga?</em></span>
            <br />
            <span style={{ fontSize: "46px" }}>Descubra o ritual sagrado que transforma o cansaço mental em <span className="ink-gold">clareza</span> e paz interior.</span>
          </h1>
          <p className="lede">
            Mais do que um livro de colorir: uma arquitetura da alma que recalibra
            sua energia, acalma o overthinking e devolve seu foco natural.
          </p>
          <div className="hero__ctaRow">
            <a className="btn btn--primary" href={CHECKOUT_URL} target="_blank" rel="noopener">
              {ctaCopy} <span className="btn__arrow">→</span>
            </a>
            <div className="hero__trust">
              <div className="trust__stars" aria-hidden>★★★★★</div>
              <div className="trust__text">+2.400 leitoras<br /><span>em todo o Brasil</span></div>
            </div>
          </div>
          <ul className="hero__strip">
            <li><span className="dot" /> 64 mandalas exclusivas</li>
            <li><span className="dot" /> Garantia de 7 dias</li>
            <li><span className="dot" /> Bônus inclusos</li>
          </ul>
        </div>
        <div className="hero__media">
          <div className="hero__mediaInner">
            <img src="assets/book-front.png" alt="Capa do livro Mandalas Mágicas do Caminho Azul" />
          </div>
          <div className="hero__badge">
            <div className="hero__badge__top">edição</div>
            <div className="hero__badge__big">2026</div>
            <div className="hero__badge__bot">de lançamento</div>
          </div>
          <div className="hero__floatNote">
            <span className="hero__floatNote__num">64</span>
            <span className="hero__floatNote__txt">chaves de<br />geometria sagrada</span>
          </div>
        </div>
      </div>
      <div className="hero__rule" aria-hidden />
    </section>);

}

/* ───────── PAIN / IDENTIFICATION ───────── */
function PainSection() {
  const pains = [
  { t: "Mente acelerada", s: "que não para nem no descanso" },
  { t: "Sono raso", s: "que não repara o cansaço do dia" },
  { t: "Vazio silencioso", s: "e bloqueio criativo persistente" },
  { t: "Foco fragmentado", s: "entre mil abas e nenhuma presença" }];

  return (
    <section className="pain">
      <div className="container">
        <div className="section-head">
          <span className="kicker">Você se reconhece?</span>
          <h2 className="h2">
            Você não está <em>quebrada</em>.
            <br />
            Só está usando ferramentas rasas para dores profundas.
          </h2>
        </div>
        <div className="pain__grid">
          {pains.map((p, i) =>
          <div key={i} className="pain__card">
              <div className="pain__num">0{i + 1}</div>
              <div className="pain__title">{p.t}</div>
              <div className="pain__sub">{p.s}</div>
            </div>
          )}
        </div>
        <div className="pain__bridge">
          <div className="pain__bridgeRule" />
          <p>
            Aplicativos de meditação, podcasts, mais um livro de autoajuda.
            <br />
            Você já tentou. E o ruído continua. <strong>Existe outro caminho.</strong>
          </p>
        </div>
      </div>
    </section>);

}

/* ───────── BIG IDEA ───────── */
function BigIdea() {
  return (
    <section className="bigidea">
      <div className="container bigidea__grid">
        <div className="bigidea__media">
          <img src="assets/woman-mandala.png" alt="Mulher segurando mandala finalizada" />
          <div className="bigidea__caption">Maria, 38 — após 21 dias de prática</div>
        </div>
        <div className="bigidea__copy">
          <span className="kicker kicker--gold">A grande ideia</span>
          <h2 className="h2">
            64 chaves de <em>geometria sagrada</em> que sincronizam os hemisférios do seu cérebro.
          </h2>
          <p className="body">
            Enquanto livros comuns de colorir são analgésicos temporários — distraem, mas
            não tratam — <strong>Cura pelas Mandalas</strong> é um centro de regeneração que
            atualiza, ciclo a ciclo, o seu sistema operacional interno.
          </p>
          <div className="bigidea__pillars">
            <div className="pillar">
              <div className="pillar__icon">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" />
                </svg>
              </div>
              <div>
                <div className="pillar__t">Geometria sagrada</div>
                <div className="pillar__s">padrões que o inconsciente reconhece como ordem</div>
              </div>
            </div>
            <div className="pillar">
              <div className="pillar__icon">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <path d="M12 2 L12 22 M2 12 L22 12 M5 5 L19 19 M19 5 L5 19" />
                </svg>
              </div>
              <div>
                <div className="pillar__t">Ativação dimensional</div>
                <div className="pillar__s">cada mandala trabalha um plano específico</div>
              </div>
            </div>
            <div className="pillar">
              <div className="pillar__icon">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.2">
                  <path d="M3 12 Q 9 4, 12 12 T 21 12" /><path d="M3 12 Q 9 20, 12 12 T 21 12" />
                </svg>
              </div>
              <div>
                <div className="pillar__t">Sincronia cerebral</div>
                <div className="pillar__s">hemisférios direito e esquerdo em ressonância</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ───────── HOW IT WORKS ───────── */
function HowItWorks() {
  const steps = [
  {
    n: "01",
    t: "Prepare o espaço",
    d: "Celular longe. Luz suave. Quinze minutos seus, sem culpa, sem performance.",
    img: "assets/coloring-step1.png"
  },
  {
    n: "02",
    t: "Fixe o centro por 15 min",
    d: "Seu cérebro começa a reorganizar padrões. A mente acelerada encontra um eixo.",
    img: "assets/hands-coloring.png"
  },
  {
    n: "03",
    t: "Pinte e apenas observe",
    d: "Permita que a geometria atue como um filtro silencioso do inconsciente.",
    img: "assets/coloring-step2.png"
  }];

  return (
    <section id="como-funciona" className="how">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="kicker">O ritual</span>
          <h2 className="h2">Três passos. <em>Quinze minutos.</em><br />Uma vida com mais centro.</h2>
        </div>
        <div className="how__grid">
          {steps.map((s) =>
          <article key={s.n} className="how__card">
              <div className="how__media">
                <img src={s.img} alt="" />
                <span className="how__num">{s.n}</span>
              </div>
              <h3 className="how__title">{s.t}</h3>
              <p className="how__desc">{s.d}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ───────── TESTIMONIALS ───────── */
function Testimonials() {
  const items = [
  {
    n: "Camila R.",
    r: "São Paulo, SP",
    q: "Comecei pela quinta mandala. Na terceira noite, dormi sem o celular pela primeira vez em meses. O barulho interno baixou."
  },
  {
    n: "Renata M.",
    r: "Florianópolis, SC",
    q: "Não sou de produto terapeutico. Mas o livro me devolveu a sensação de fazer uma coisa só por vez — e foi isso que faltava."
  },
  {
    n: "Patrícia G.",
    r: "Belo Horizonte, MG",
    q: "Em duas semanas, parei de acordar às 4 da manhã com a cabeça acelerada. Continuo pintando todo domingo de manhã."
  }];

  return (
    <section id="depoimentos" className="quotes">
      <div className="container">
        <div className="section-head">
          <span className="kicker">Depoimentos</span>
          <h2 className="h2">Quem praticou, voltou para contar.</h2>
        </div>
        <div className="quotes__grid">
          {items.map((it, i) =>
          <figure key={i} className="quote">
              <div className="quote__mark" aria-hidden>"</div>
              <blockquote>{it.q}</blockquote>
              <figcaption>
                <div className="quote__name">{it.n}</div>
                <div className="quote__role">{it.r}</div>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

/* ───────── OFFER ───────── */
function Offer({ format, setFormat, ctaCopy }) {
  const printed = format === "printed";
  return (
    <section className="offer">
      <div className="container offer__grid">
        <div className="offer__media">
          <div className={"offer__stage " + (printed ? "offer__stage--printed" : "offer__stage--ebook")}>
            <img
              src={printed ? "assets/book-angled.png" : "assets/ebook-tablet.png"}
              alt={printed ? "Livro impresso" : "Versão ebook"}
              className="offer__hero" />
            
          </div>
          <div className="offer__toggle" role="tablist" aria-label="Formato">
            <button
              role="tab"
              aria-selected={!printed}
              className={"offer__toggleBtn " + (!printed ? "is-active" : "")}
              onClick={() => setFormat("ebook")}>
              
              <span className="offer__toggleIcon" aria-hidden>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <rect x="4" y="3" width="16" height="18" rx="2" /><circle cx="12" cy="18" r="0.6" fill="currentColor" />
                </svg>
              </span>
              eBook
              <span className="offer__toggleNote">acesso imediato</span>
            </button>
            <button
              role="tab"
              aria-selected={printed}
              className={"offer__toggleBtn " + (printed ? "is-active" : "")}
              onClick={() => setFormat("printed")}>
              
              <span className="offer__toggleIcon" aria-hidden>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.4">
                  <path d="M4 4 h11 a3 3 0 0 1 3 3 v14 H7 a3 3 0 0 1 -3 -3 z" /><path d="M7 18 h11" />
                </svg>
              </span>
              Impresso
              <span className="offer__toggleNote">+ frete</span>
            </button>
          </div>
        </div>
        <div className="offer__panel">
          <span className="kicker">A oferta completa</span>
          <h2 className="h2 offer__title">
            <em>Cura pelas</em> Mandalas
            <span className="offer__sub">Mágicas do Caminho Azul</span>
          </h2>
          <ul className="offer__list">
            <li><Check /> Livro completo com 64 mandalas em geometria sagrada</li>
            <li><Check /> Guia de exercícios — uma intenção para cada mandala</li>
            <li><Check /> Garantia incondicional de 7 dias</li>
          </ul>

          <div className="price">
            <div className="price__row">
              <div className="price__crossed">de R$ 197</div>
              <div className="price__tag">
                <span className="price__cur">R$</span>
                <span className="price__big">{printed ? "147" : "97"}</span>
                <span className="price__cents">,00</span>
              </div>
            </div>
            <div className="price__line">
              ou <strong>12×</strong> no cartão
            </div>
            <div className="price__hint">Lote atual com preço de lançamento. Reajuste em breve.</div>
          </div>

          <a className="btn btn--primary btn--xl btn--full" href={CHECKOUT_URL} target="_blank" rel="noopener">
            {ctaCopy}
            <span className="btn__arrow">→</span>
          </a>

          <div className="offer__footRow">
            <span className="offer__footItem"><Lock /> compra 100% segura</span>
            <span className="offer__footItem"><Star /> +2.400 praticantes</span>
            <span className="offer__footItem"><Shield /> 7 dias de garantia</span>
          </div>
        </div>
      </div>
    </section>);

}

const Check = () =>
<span className="ico ico--check" aria-hidden>
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 12 l5 5 L20 6" />
    </svg>
  </span>;

const Lock = () =>
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.4">
    <rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11 V7 a4 4 0 0 1 8 0 v4" />
  </svg>;

const Star = () =>
<svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor">
    <path d="M12 2 l2.6 6.6 L21.5 9.4 l-5.3 4.6 L17.8 21 L12 17.5 L6.2 21 l1.6 -7 L2.5 9.4 l6.9 -0.8 z" />
  </svg>;

const Shield = () =>
<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="1.4">
    <path d="M12 2 l8 3 v6 c0 5 -3.5 9 -8 11 c -4.5 -2 -8 -6 -8 -11 V5 z" /><path d="M9 12 l2 2 l4 -4" />
  </svg>;


/* ───────── GUARANTEE ───────── */
function Guarantee() {
  return (
    <section className="guarantee">
      <div className="container guarantee__inner">
        <div className="guarantee__seal" aria-hidden>
          <svg viewBox="0 0 120 120" width="120" height="120">
            <circle cx="60" cy="60" r="56" fill="none" stroke="currentColor" strokeWidth="1" />
            <circle cx="60" cy="60" r="48" fill="none" stroke="currentColor" strokeWidth="1" strokeDasharray="2 4" />
            <text x="60" y="50" textAnchor="middle" fontSize="9" fontFamily="Inter" letterSpacing="2" fill="currentColor">GARANTIA</text>
            <text x="60" y="74" textAnchor="middle" fontSize="32" fontFamily="Cormorant Garamond" fontStyle="italic" fill="currentColor">7</text>
            <text x="60" y="90" textAnchor="middle" fontSize="8" fontFamily="Inter" letterSpacing="2" fill="currentColor">DIAS</text>
          </svg>
        </div>
        <div className="guarantee__copy">
          <span className="kicker">Inversão de risco</span>
          <h3 className="h3">Sete dias para sentir, no corpo, o que estas páginas fazem.</h3>
          <p>
            Se até o sétimo dia você não sentir mais leveza, mais foco e uma noite
            de sono mais funda — devolvemos cada centavo. Sem perguntas, sem formulário longo,
            sem atrito. O risco é nosso, não seu.
          </p>
          <div className="guarantee__signature">— Equipe Caminho Azul</div>
        </div>
      </div>
    </section>);

}

/* ───────── FAQ ───────── */
function FAQ({ openFaq, setOpenFaq }) {
  const items = [
  {
    q: "Preciso saber desenhar ou pintar bem?",
    a: "Não. O foco está na fixação visual e na intenção, não na técnica. As mandalas vêm em traço limpo — você só preenche, observa ou reflete. A prática é antes de tudo um ritual, não um exercício de arte."
  },
  {
    q: "Funciona para quem tem insônia ou ansiedade?",
    a: "Sim. A prática regular recalibra o ritmo mental antes do sono e cria um marcador de transição entre o dia produtivo e o descanso real. Muitas leitoras relatam dormir mais fundo já na primeira semana."
  },
  {
    q: "É um livro religioso?",
    a: "Não. É geometria sagrada aplicada ao autoconhecimento e ao equilíbrio energético. Você não precisa professar nenhuma fé — basta abrir o livro com presença."
  },
  {
    q: "Quanto tempo por dia preciso dedicar?",
    a: "De 10 a 20 minutos. O suficiente para o cérebro entrar em outro ritmo, sem virar mais uma obrigação na sua agenda."
  },
  {
    q: "Qual a diferença entre eBook e versão impressa?",
    a: "O eBook chega em segundos no seu e-mail e pode ser impresso em casa. A versão impressa é um objeto premium — papel encorpado, espiral discreta, capa fosca — feita para durar anos sobre a mesa de cabeceira."
  }];

  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="kicker">Dúvidas frequentes</span>
          <h2 className="h2">Antes de continuar.</h2>
        </div>
        <div className="faq__list">
          {items.map((it, i) => {
            const open = openFaq === i;
            return (
              <div key={i} className={"faq__item " + (open ? "is-open" : "")}>
                <button className="faq__q" onClick={() => setOpenFaq(open ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq__icon" aria-hidden>{open ? "−" : "+"}</span>
                </button>
                <div className="faq__a"><p>{it.a}</p></div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ───────── FINAL CTA ───────── */
function FinalCta({ onCta, ctaCopy }) {
  return (
    <section className="finalcta">
      <div className="container finalcta__inner">
        <div className="finalcta__ornament" aria-hidden>
          <svg viewBox="0 0 200 60" width="200" height="60">
            <line x1="0" y1="30" x2="80" y2="30" stroke="currentColor" />
            <circle cx="100" cy="30" r="6" fill="none" stroke="currentColor" />
            <circle cx="100" cy="30" r="2" fill="currentColor" />
            <line x1="120" y1="30" x2="200" y2="30" stroke="currentColor" />
          </svg>
        </div>
        <h2 className="display display--center">
          A mente <em>quieta</em> não é um lugar distante.
          <br />
          É uma prática que cabe entre dois cafés.
        </h2>
        <a className="btn btn--primary btn--xl" href={CHECKOUT_URL} target="_blank" rel="noopener">
          {ctaCopy} <span className="btn__arrow">→</span>
        </a>
        <div className="finalcta__note">
          R$ 97 · 12× no cartão · 7 dias de garantia incondicional
        </div>
      </div>
    </section>);

}

/* ───────── FOOTER ───────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <em>Caminho Azul</em> · Mandalas
          <div className="footer__copy">
            Em memória de Leila Pekelman, que ensinou que toda mandala é um caminho de volta para si.
          </div>
        </div>
        <div className="footer__meta">
          <div>contato@caminhoazul.com.br</div>
          <div>© 2026 Caminho Azul · Todos os direitos reservados</div>
          <div className="footer__legal"><a href="#">Termos</a> · <a href="#">Privacidade</a> · <a href="#">Reembolso</a></div>
        </div>
      </div>
    </footer>);

}

/* ───────── STICKY CTA ───────── */
function StickyCta({ onCta, ctaCopy }) {
  return (
    <div className="sticky">
      <div className="sticky__inner">
        <div className="sticky__price">
          <span className="sticky__priceCur">R$</span>
          <span className="sticky__priceBig">97</span>
          <span className="sticky__priceMeta">ou 12× no cartão</span>
        </div>
        <a className="btn btn--primary" href={CHECKOUT_URL} target="_blank" rel="noopener">
          {ctaCopy} <span className="btn__arrow">→</span>
        </a>
      </div>
    </div>);

}

/* ───────── TWEAKS ───────── */
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Paleta">
        <TweakSelect
          label="Acento"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
          { value: "indigo", label: "Indigo (padrão)" },
          { value: "midnight", label: "Midnight azul" },
          { value: "sage", label: "Sage verde" },
          { value: "plum", label: "Plum violeta" }]
          } />
        
      </TweakSection>
      <TweakSection label="Headline">
        <TweakRadio
          label="Estilo"
          value={t.headlineStyle}
          onChange={(v) => setTweak("headlineStyle", v)}
          options={[
          { value: "italic", label: "Itálico" },
          { value: "upright", label: "Reto" }]
          } />
        
        <TweakText label="CTA" value={t.ctaCopy} onChange={(v) => setTweak("ctaCopy", v)} />
      </TweakSection>
      <TweakSection label="Conversão">
        <TweakToggle label="Sticky CTA flutuante" value={t.showStickyCta} onChange={(v) => setTweak("showStickyCta", v)} />
      </TweakSection>
    </TweaksPanel>);

}

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