// sections.jsx. All landing page sections
const WHATSAPP_URL = "https://api.whatsapp.com/send?phone=5512982340551";
const CHECKOUT_URL = "https://hub.la/r/metododtd";
const { useState: useStateS, useEffect: useEffectS } = React;

/* ──────────────────────────────────────────────────────────────
   Header
   ────────────────────────────────────────────────────────────── */
function SiteHeader({ onCta }) {
  return (
    <header className="site-header">
      <div className="site-nav">
        <a href="#top" className="brand">
          <div className="brand-mark">$</div>
          <div className="brand-word">Método <em>DTD</em></div>
        </a>
        <div className="nav-meta">
          <span className="live"><span className="dot" /><span className="live-text">89 alunos ativos</span></span>
          <a className="nav-cta" href={CHECKOUT_URL} target="_blank" rel="noopener">Quero entrar</a>
        </div>
      </div>
    </header>
  );
}

/* ──────────────────────────────────────────────────────────────
   Ticker marquee
   ────────────────────────────────────────────────────────────── */
function Marquee() {
  const items = [
    { p: "USDC/SOL", v: "+2.8%", k: "up" },
    { p: "CAKE/BNB", v: "+1.4%", k: "up" },
    { p: "USDT/SOL", v: "+3.1%", k: "up" },
    { p: "ETH/USDT", v: "+0.9%", k: "up" },
    { p: "BTC/USDT", v: "+1.2%", k: "up" },
    { p: "SOL/USDC", v: "+4.6%", k: "up" },
    { p: "BNB/USDT", v: "+1.1%", k: "up" },
    { p: "USDC/USDT", v: "+0.4%", k: "up" },
  ];
  const set = (
    <>
      {items.map((it, i) => (
        <span key={i}>
          <strong style={{ color: "var(--text)", fontWeight: 600 }}>{it.p}</strong>
          <span className={it.k}>{it.v} APR/dia</span>
          <span className="sep">·</span>
        </span>
      ))}
    </>
  );
  return (
    <div className="marquee" aria-hidden>
      <div className="marquee-track">
        {set}{set}
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   HostCard — Zulu's photo + credentials
   ────────────────────────────────────────────────────────────── */
function HostCard() {
  return (
    <div className="host-card">
      <div className="host-badge">
        <span className="dot" /> Seu professor
      </div>
      <div className="host-photo-wrap">
        <img
          src="assets/zulu.png"
          alt="Zulu Martimiano"
          className="host-photo"
          loading="eager"
        />
      </div>
      <div className="host-meta">
        <div className="who">
          <span className="name">Zulu Martimiano</span>
          <span className="role">Criador do Método DTD</span>
        </div>
        <div className="creds">
          <div>
            <span className="v">89</span>
            <span className="l">Alunos</span>
          </div>
          <div>
            <span className="v">$10K</span>
            <span className="l">Pool atual</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────────── */
function Hero({ headlineVariant, onCta, showCalculator = true, ctaLabel }) {
  const headlines = {
    A: (
      <>
        Ganhe <span className="accent">dólares</span><br />
        todos os dias.<br />
        Direto do seu celular.
      </>
    ),
    B: (
      <>
        De uma pool de <span className="accent">$100</span><br />
        a uma pool de <span className="accent">$10.000</span>.<br />
        O método replicável.
      </>
    ),
    C: (
      <>
        Pare de ver o dólar subir<br />
        e o seu salário <span className="strike">parado</span>.<br />
        <span className="accent">Receba em dólar.</span>
      </>
    ),
  };

  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <h1>{headlines[headlineVariant] || headlines.A}</h1>
            <p className="hero-sub">
              O passo a passo testado por <strong>89 alunos</strong> pra montar pools de liquidez seguras na Solana e PancakeSwap e ganhar de <strong>1% a 10% ao dia em taxas</strong>. Mesmo começando com pouco. Mesmo sem entender nada de cripto.
            </p>

            <div className="hero-cta">
              <div className="row">
                <a className="btn btn--primary btn--lg" href={CHECKOUT_URL} target="_blank" rel="noopener">Quero começar agora</a>
                <a href="#metodo" className="btn btn--ghost btn--lg">Como funciona</a>
              </div>
              <div className="cta-microcopy">
                <span><Check /> Acesso imediato</span>
                <span><Check /> 12x de R$ 89,70</span>
                <span><Check /> Garantia 7 dias</span>
              </div>
            </div>
          </div>

          <div className="hero-aside">
            <HostCard />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Pool strip — horizontal calculator below hero
   ────────────────────────────────────────────────────────────── */
function PoolStrip({ onCta }) {
  return (
    <section className="pool-strip" aria-label="Simulador de pool">
      <div className="container">
        <PoolCalculator onCta={onCta} variant="horizontal" />
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Stats strip
   ────────────────────────────────────────────────────────────── */
function StatsStrip() {
  return (
    <section style={{ padding: 0 }}>
      <div className="container" style={{ padding: 0, maxWidth: "100%" }}>
        <div className="stats">
          <div className="stat">
            <div className="stat-val"><AnimatedNumber value={89} /></div>
            <div className="stat-lbl">Alunos formados</div>
            <div className="stat-note">Operando pools reais com método validado.</div>
          </div>
          <div className="stat">
            <div className="stat-val">
              $<AnimatedNumber value={100} />
              <span style={{ color: "var(--text-3)", margin: "0 8px" }}>→</span>
              $<AnimatedNumber value={10} />
              <span style={{ color: "var(--accent)" }}>K</span>
            </div>
            <div className="stat-lbl">Trajetória pessoal do Zulu</div>
            <div className="stat-note">Da primeira pool ao patamar atual.</div>
          </div>
          <div className="stat">
            <div className="stat-val">
              <AnimatedNumber value={1} />–<AnimatedNumber value={10} /><span className="accent">%</span>
            </div>
            <div className="stat-lbl">Taxa real diária nas pools</div>
            <div className="stat-note">Range observado. Varia por par e mercado.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Pain
   ────────────────────────────────────────────────────────────── */
function Pain() {
  const items = [
    "Você vê o dólar subir todo mês e seu salário em real fica parado, sente que tá ficando pra trás.",
    "Já tentou aprender cripto pelo YouTube, mas se perdeu num oceano de tutoriais soltos.",
    "Acha que pool de liquidez é coisa só pra quem tem 10 mil dólares sobrando, e nem cogita começar.",
    "Tem medo de colocar dinheiro e perder pra impermanent loss sem entender o que aconteceu.",
    "Quer renda em dólar, mas tá paralisado pela complexidade técnica.",
    "Vê outras pessoas postando ganhos em dólar e pensa: \"o que elas sabem que eu não sei?\"",
  ];
  return (
    <section id="dor" className="reveal">
      <div className="container">
        <div className="sect-head">
          <h2>Enquanto o real <span className="accent">derrete</span>,<br />outras pessoas recebem em dólar.</h2>
          <p>Se você chegou até aqui, é bem provável que…</p>
        </div>
        <div className="pain-list">
          {items.map((t, i) => (
            <div className="pain-item" key={i}>
              <span className="x">✕</span>
              <span>{t}</span>
            </div>
          ))}
        </div>
        <p style={{ textAlign: "center", marginTop: 28, color: "var(--text-2)", fontSize: 15, fontStyle: "italic" }}>
          Se você se reconheceu em pelo menos 2 dessas frases, continua lendo.
        </p>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Solution
   ────────────────────────────────────────────────────────────── */
function Solution() {
  const learn = [
    { t: "Como abrir sua carteira", e: "do zero, sem mistério" },
    { t: "Teoria das pools", e: "explicada como se você fosse leigo total" },
    { t: "Riscos REAIS das pools", e: "e como blindar seu dinheiro antes de entrar" },
    { t: "Primeira pool conservadora", e: "começa gerando dólar com pouco" },
    { t: "Estratégias avançadas", e: "potencial de 1% a 10% ao dia em taxas" },
    { t: "Solana e PancakeSwap", e: "as duas redes que mais geram resultado" },
    { t: "Mentalidade de investidor", e: "o que separa quem ganha de quem se desespera" },
    { t: "Tudo pelo celular", e: "sem precisar de computador" },
  ];

  return (
    <section id="metodo" className="reveal">
      <div className="container">
        <div className="solution">
          <div>
            <h2 style={{ marginTop: 14, marginBottom: 20 }}>
              O caminho exato<br />que percorri pra sair de uma<br />pool de <span className="accent">$100</span> a uma de <span className="accent">$10K</span>.
            </h2>
            <p style={{ color: "var(--text-2)", fontSize: 16, marginBottom: 14, maxWidth: 480 }}>
              <strong style={{ color: "var(--text)" }}>Método DTD</strong>: pensado pra quem não entende nada de cripto, opera do celular e quer um caminho linear: do absoluto zero até escolher sua próxima pool com confiança.
            </p>
            <p style={{ color: "var(--text-2)", fontSize: 16, maxWidth: 480 }}>
              Não é teoria de palestra. É o que eu faço todos os dias, replicado pra você.
            </p>
          </div>
          <ul className="solution-list">
            {learn.map((l, i) => (
              <li key={i}>
                <span className="n">{String(i + 1).padStart(2, "0")}</span>
                <span className="t"><strong>{l.t}</strong>: {l.e}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Benefits
   ────────────────────────────────────────────────────────────── */
function Benefits() {
  const list = [
    { i: "₿", h: "Renda em dólar todo dia", p: "Final de semana, feriado e enquanto você dorme. O dinheiro não tira folga." },
    { i: "↗", h: "Independência do real", p: "Para de torcer pro dólar não subir. Passa a se beneficiar dele subindo." },
    { i: "☎", h: "Controle pelo celular", p: "Opera no ônibus, no trabalho, no sofá. Sem computador, sem tempo livre." },
    { i: "◐", h: "Começa com pouco", p: "Sem milhares pra começar. Entra com o que tem e escala junto com a pool." },
    { i: "◆", h: "Visão de risco", p: "Enxerga cada pool com critério profissional. Decide com clareza, não na sorte." },
    { i: "◍", h: "Comunidade VIP", p: "Grupo no WhatsApp, calls semanais ao vivo, suporte direto. Não trilha sozinho." },
    { i: "✦", h: "Oportunidades reais", p: "Acesso a pools com taxas altas que não aparecem em tutorial gratuito." },
    { i: "◉", h: "Mentalidade nova", p: "Para de ser refém de um salário. Ganha uma fonte que trabalha 24/7 em paralelo." },
  ];
  return (
    <section id="beneficios" className="reveal">
      <div className="container">
        <div className="sect-head">
          <h2>Quando você aplica<br />o <span className="accent">Método DTD</span>, você ganha:</h2>
        </div>
        <div className="benefits-grid">
          {list.map((b, i) => (
            <div className="benefit" key={i}>
              <div className="ico" style={{ fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: 16 }}>{b.i}</div>
              <h3>{b.h}</h3>
              <p>{b.p}</p>
            </div>
          ))}
        </div>
        <p style={{ textAlign: "center", marginTop: 40, fontSize: 17, color: "var(--text-2)" }}>
          Isso aqui não é sobre cripto.<br />
          É sobre <strong style={{ color: "var(--text)" }}>mudar sua relação com o dinheiro</strong>.
        </p>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Social proof
   ────────────────────────────────────────────────────────────── */
function SocialProof() {
  const testis = [
    { q: "Esse aluno fez a 3ª turma do Método DTD e ficou impressionado com as pools de liquidez. Olha o que ele falou:", name: "Mario", role: "3ª turma DTD", src: "assets/testimonial-01.mp4" },
    { q: "Paulo entrou na 2ª turma do DTD e esse foi o resultado:", name: "Paulo Edson", role: "2ª turma DTD", img: "assets/testimonial-02.jpg" },
    { q: "Aluno da última turma montou sua primeira pool e já pagou o curso com as taxas. Esse é o poder do Método DTD.", name: "Davi", role: "Última turma DTD", src: "assets/testimonial-03.mp4" },
  ];
  return (
    <section id="provas" className="reveal">
      <div className="container">
        <div className="sect-head">
          <h2>Alunos falando<br />do <span className="accent">Método DTD</span></h2>
          <p>Depoimentos em vídeo. Resultados individuais, não há promessa de rendimento.</p>
        </div>
        <div className="testi-row">
          {testis.map((t, i) => (
            <div className="testi" key={i}>
              {t.src ? (
                <div className="testi-video testi-video--real">
                  <video src={t.src} controls preload="metadata" playsInline />
                  <span className="corner">DEPOIMENTO 0{i + 1}</span>
                </div>
              ) : t.img ? (
                <a
                  href={t.img}
                  target="_blank"
                  rel="noopener"
                  className="testi-video testi-video--img"
                  aria-label="Abrir print em tamanho cheio"
                >
                  <img src={t.img} alt={`Print do depoimento de ${t.name}`} loading="lazy" />
                  <span className="corner">DEPOIMENTO 0{i + 1} · PRINT</span>
                </a>
              ) : (
                <div className="testi-video">
                  <span className="corner">DEPOIMENTO 0{i + 1}</span>
                  <div className="play">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
                  </div>
                </div>
              )}
              <div className="testi-body">
                <p className="q">{t.q}</p>
                <div className="by">
                  <div className="av" />
                  <div>
                    <strong>{t.name}</strong> <span style={{ color: "var(--text-3)" }}>· {t.role}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Offer
   ────────────────────────────────────────────────────────────── */
function Offer({ onCta, ctaLabel = "Quero ganhar em dólar todo dia" }) {
  const items = [
    { t: "Curso completo Pool de Liquidez do Zero ao Avançado", v: "R$ 1.997", kind: "core" },
    { t: "Módulo de Empréstimo com Cripto", v: "R$ 697", kind: "core" },
    { t: "Módulo Pools 1% a 10% ao Dia", v: "R$ 697", kind: "core" },
    { t: "Módulo Como Operar Pelo Celular", v: "R$ 297", kind: "core" },
    { t: "Módulo Mentalidade de Investidor em Dólar", v: "R$ 297", kind: "core" },
    { t: "Grupo VIP no WhatsApp com Zulu + alunos", v: "R$ 497", kind: "bonus" },
    { t: "Calls semanais ao vivo sobre pools", v: "R$ 997", kind: "bonus" },
    { t: "Suporte direto com nossa equipe", v: "R$ 297", kind: "bonus" },
  ];

  return (
    <section id="oferta" className="reveal">
      <div className="container">
        <div className="sect-head">
          <h2>Tudo o que você leva<br />ao entrar <span className="accent">hoje</span></h2>
        </div>

        <div className="offer-wrap">
          <div className="offer-card">
            <div className="offer-ribbon">⚡ Oferta de lançamento</div>
            <h3 className="offer-title">Acesso completo ao Método DTD<br />+ 3 bônus exclusivos</h3>

            <div className="stack">
              {items.map((it, i) => (
                <div className="stack-row" key={i}>
                  <span className="label">
                    <span className={`tag ${it.kind === "bonus" ? "bonus" : ""}`}>
                      {it.kind === "bonus" ? "BÔNUS" : `MÓD ${String(i + 1).padStart(2, "0")}`}
                    </span>
                    <span>{it.t}</span>
                  </span>
                  <span className="price">{it.v}</span>
                </div>
              ))}
              <div className="stack-total">
                <span>Valor total se comprasse separado</span>
                <span className="total">R$ 5.776</span>
              </div>
            </div>

            <div className="price-box">
              <div className="price-label">Acesso vitalício por</div>
              <div className="price-big"><span className="currency">R$</span>867,35</div>
              <div className="price-installments">ou <strong>12x de R$ 89,70</strong> no cartão sem juros</div>
              <div className="price-methods">
                <span>● Pix</span><span>● Cartão</span><span>● Boleto</span>
              </div>
            </div>

            <a className="btn btn--primary btn--block btn--lg" style={{ marginTop: 18 }} href={CHECKOUT_URL} target="_blank" rel="noopener">
              {ctaLabel}
            </a>

            <div className="cta-microcopy" style={{ marginTop: 18 }}>
              <span><Check /> Acesso imediato</span>
              <span><Check /> Acesso vitalício</span>
              <span><Check /> Garantia 7 dias</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Objections
   ────────────────────────────────────────────────────────────── */
function Objections() {
  const objs = [
    {
      q: "Mas parece difícil pra quem não entende nada de cripto…",
      a: <>A primeira parte do método trata o aluno como se nunca tivesse aberto uma carteira, porque é a realidade da maioria. <strong>Se você sabe usar WhatsApp, você consegue seguir o passo a passo.</strong></>,
    },
    {
      q: "Eu não tenho tempo pra olhar gráfico o dia todo…",
      a: <>Pool de liquidez <strong>não é trade</strong>. Você monta, deixa rendendo, e checa quando quiser, direto do celular. Tem aluno operando nos intervalos do trabalho.</>,
    },
    {
      q: "Tenho medo de colocar dinheiro e perder tudo…",
      a: <>Por isso o curso começa pela parte que ninguém ensina no YouTube: <strong>gestão de risco em pools</strong>. Identifica os riscos ANTES e começa com valores pequenos. Mais a garantia de 7 dias.</>,
    },
    {
      q: "Pra começar não preciso de muito dinheiro?",
      a: <>Não. Esse é o maior mito da DeFi. <strong>Eu comecei com 100 dólares.</strong> O método ensina a escalar de pouco pra muito, não a entrar com muito do zero.</>,
    },
  ];
  return (
    <section id="duvidas" className="reveal">
      <div className="container">
        <div className="sect-head">
          <h2>Sei o que tá passando<br />pela sua cabeça agora.</h2>
        </div>
        <div className="obj-grid">
          {objs.map((o, i) => (
            <div className="obj" key={i}>
              <div className="q">{o.q}</div>
              <div className="a">{o.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Guarantee
   ────────────────────────────────────────────────────────────── */
function Guarantee() {
  return (
    <section id="garantia" className="reveal">
      <div className="container">
        <div className="guarantee">
          <div className="seal" aria-hidden>
            <div className="seal-inner">
              <div className="seal-num">7</div>
              <div className="seal-lbl">Dias</div>
            </div>
          </div>
          <div>
            <h3 style={{ marginTop: 8 }}>Garantia incondicional<br />· Art. 49 do CDC</h3>
            <p>Entra, assiste as primeiras aulas, monta sua primeira pool. Se em até 7 dias você sentir que <strong>isso não é pra você</strong>, por qualquer motivo, manda mensagem e devolvo 100% do valor. <strong>Sem perguntar. Sem burocracia.</strong></p>
            <p><strong>Quem assume o risco aqui sou eu.</strong> Você só precisa decidir se quer testar.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   FAQ wrapper
   ────────────────────────────────────────────────────────────── */
function FAQSection() {
  const items = [
    { q: "Sou totalmente leigo em cripto. Vou conseguir acompanhar?", a: "Sim. O curso começa abrindo a carteira do zero, passo a passo. Se você nunca mexeu com cripto, vai sair montando pool. Se já mexe, pula direto pra parte avançada." },
    { q: "Quanto tempo preciso dedicar por dia?", a: "Pra estudar: o que você quiser, no seu ritmo. Pra operar depois: alguns minutos por dia checando, do celular. Pool não é trade, não exige você grudado na tela." },
    { q: "Preciso de quanto dinheiro pra começar?", a: "Você monta sua primeira pool com pouco. Eu mesmo comecei com 100 dólares. O curso ensina a escalar de pouco pra muito, não a entrar com muito do zero." },
    { q: "E se eu não gostar do curso?", a: "Você tem 7 dias pra testar tudo. Se não fizer sentido, devolvo 100% do valor, sem precisar justificar nada. Art. 49 do CDC." },
    { q: "Como funciona o acesso?", a: "Depois do pagamento, você recebe acesso imediato à plataforma com todas as aulas + entrada no grupo VIP do WhatsApp. Computador ou celular. Acesso é vitalício: uma vez dentro, você sempre vai receber informações e assistir às atualizações do método." },
    { q: "As pools rendem mesmo 1% a 10% ao dia?", a: "Esse é o range REALISTA das pools que eu opero. Depende da pool, da liquidez, do momento de mercado. Não é fixo nem garantido. É o que acontece na prática quando você sabe escolher e gerenciar." },
    { q: "Tem suporte se eu travar?", a: "Tem. Grupo VIP no WhatsApp, calls semanais ao vivo e suporte direto da equipe durante todo o tempo de acesso." },
    { q: "Quais formas de pagamento?", a: "Cartão (em até 12x de R$ 89,70), Pix à vista ou boleto bancário." },
  ];
  return (
    <section id="faq" className="reveal">
      <div className="container-narrow">
        <div className="sect-head">
          <h2>Tudo que você precisa saber<br />antes de entrar.</h2>
        </div>
        <FAQ items={items} />
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Final CTA
   ────────────────────────────────────────────────────────────── */
function FinalCTA({ onCta, ctaLabel = "Quero entrar pro Método DTD" }) {
  return (
    <section className="final reveal" id="final">
      <div className="container">
        <h2 className="final-h">Você tem duas escolhas<br />a partir de agora.</h2>
        <p className="final-p">
          A primeira: fechar essa página, continuar recebendo só em real, ver o dólar subir mais um pouco e voltar daqui 6 meses pensando "se eu tivesse entrado naquele dia…".
        </p>
        <p className="final-p">
          A segunda: entrar pro <strong style={{ color: "var(--gold)" }}>Método DTD</strong> hoje, abrir sua primeira pool nessa semana e começar a receber em dólar, todos os dias, enquanto a sua vida segue normal.
        </p>
        <p className="final-p" style={{ fontWeight: 600, color: "var(--text)", marginTop: 18, marginBottom: 32 }}>
          A diferença entre quem assiste e quem ganha é <span className="accent">uma decisão</span>.
        </p>

        <a className="btn btn--primary btn--lg" href={CHECKOUT_URL} target="_blank" rel="noopener">
          {ctaLabel} →
        </a>

        <div className="cta-microcopy" style={{ marginTop: 18, justifyContent: "center" }}>
          <span><Check /> Acesso imediato</span>
          <span><Check /> 12x de R$ 89,70</span>
          <span><Check /> Garantia 7 dias</span>
        </div>

        <div className="ps">
          <strong className="tag">PS</strong><br /><br />
          Esse curso <em>não vai te transformar em milionário da noite pro dia</em>. Quem te promete isso tá te enganando. O que o Método DTD faz é te entregar <em>o caminho real</em>, o mesmo que eu trilhei de uma pool de 100 dólares até uma pool de 10 mil, e uma comunidade pra você não fazer sozinho.<br /><br />
          Quem entra hoje, paga <em>R$ 867,35</em>. Quem deixa pra depois, paga mais caro ou perde a oferta.<br />
          A decisão é sua. A renda em dólar, também.
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="grid">
          <div>
            <a href="#top" className="brand" style={{ marginBottom: 14 }}>
              <div className="brand-mark">$</div>
              <div className="brand-word">Método <em>DTD</em></div>
            </a>
            <p style={{ marginTop: 14, maxWidth: 320, color: "var(--text-3)", fontSize: 13 }}>
              Dólares Todos os Dias · pools de liquidez na prática.<br />
              Por Zulu Martimiano.
            </p>
          </div>
          <div>
            <h5>Navegação</h5>
            <ul>
              <li><a href="#metodo">O método</a></li>
              <li><a href="#beneficios">Benefícios</a></li>
              <li><a href="#oferta">Oferta</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h5>Suporte</h5>
            <ul>
              <li><a href={WHATSAPP_URL} target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href="politica-privacidade.html">Política de privacidade</a></li>
              <li><a href="termos-de-uso.html">Termos de uso</a></li>
              <li><a href={WHATSAPP_URL} target="_blank" rel="noopener">Contato</a></li>
            </ul>
          </div>
        </div>
        <div className="disclaimer">
          <strong>Aviso legal.</strong> Os resultados apresentados são individuais e não constituem promessa de rendimento. Pools de liquidez envolvem risco de mercado, impermanent loss e variação de preço de ativos digitais. As taxas de "1% a 10% ao dia" referem-se ao range realista observado pelo autor e dependem de par, liquidez e condições de mercado. Estude antes de investir. Este material não representa recomendação de investimento por entidade regulada pela CVM.<br /><br />
          © 2026 Zulu Martimiano · Todos os direitos reservados.
        </div>
      </div>
    </footer>
  );
}

/* ──────────────────────────────────────────────────────────────
   Sticky mobile CTA + WhatsApp FAB
   ────────────────────────────────────────────────────────────── */
function StickyCTA({ onCta }) {
  return (
    <div className="sticky-cta">
      <div className="row">
        <div className="meta">
          <div className="p1">12x sem juros</div>
          <div className="p2">R$ 89,70 / mês</div>
        </div>
        <a className="btn btn--primary" href={CHECKOUT_URL} target="_blank" rel="noopener">Quero entrar</a>
      </div>
    </div>
  );
}

function WhatsAppFAB() {
  return (
    <a href={WHATSAPP_URL} target="_blank" rel="noopener" className="fab-whatsapp" aria-label="Fale conosco no WhatsApp">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3z" />
        <path d="M12 0C5.4 0 0 5.4 0 12c0 2.1.5 4.1 1.5 5.9L0 24l6.3-1.6c1.7.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12S18.6 0 12 0zm0 22c-1.9 0-3.7-.5-5.2-1.5l-.4-.2-3.7.9 1-3.6-.2-.4C2.5 15.6 2 13.8 2 12 2 6.5 6.5 2 12 2s10 4.5 10 10-4.5 10-10 10z" />
      </svg>
    </a>
  );
}

/* ──────────────────────────────────────────────────────────────
   Reusable
   ────────────────────────────────────────────────────────────── */
function Check() {
  return (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}

Object.assign(window, {
  SiteHeader, Marquee, Hero, HostCard, PoolStrip, StatsStrip, Pain, Solution, Benefits, SocialProof,
  Offer, Objections, Guarantee, FAQSection, FinalCTA, Footer, StickyCTA, WhatsAppFAB, Check
});