// sections-ledger.jsx — MCDolar (sistema Ledger)

const { useState, useEffect, useRef } = React;

const PAY = "https://pag.ae/81L2X7HVt";

const DIAS = ["Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado"];
const MESES = ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"];
function dataHoje() {
  const d = new Date();
  return `${DIAS[d.getDay()]}, ${String(d.getDate()).padStart(2,"0")} de ${MESES[d.getMonth()]} de ${d.getFullYear()}`;
}

// ─────────────────────── MASTHEAD (Nav) ───────────────────────
function Nav() {
  return (
    <header className="masthead">
      <div className="mast-top">
        <div className="wrap mast-top-in">
          <span>Edição Diária · Mini Dólar</span>
          <span className="mast-date">{dataHoje()}</span>
          <span>Pregão B3 · 09h00 — 18h00</span>
        </div>
      </div>
      <nav className="nav">
        <div className="wrap nav-inner">
          <a className="brand" href="#">
            <span>MCDolar</span>
          </a>
          <div className="nav-links">
            <a href="#metodologia">Metodologia</a>
            <a href="#privacidade">Privacidade</a>
            <a href="#assinatura">Assinatura</a>
            <a href="#duvidas">Dúvidas</a>
          </div>
          <div style={{display:"flex", alignItems:"center", gap: 12}}>
            <a className="nav-login" href="https://mcdolar.com.br/membros/login" target="_blank" rel="noopener">Entrar</a>
            <a className="nav-cta" href={PAY} target="_blank" rel="noopener">Assinar</a>
          </div>
        </div>
      </nav>
    </header>
  );
}

// ─────────────────────── TICKER ───────────────────────
function Ticker() {
  const items = [
    { sym: "WDO", val: "5.087,5", chg: "+0,42%", up: true },
    { sym: "PRÉ ABERTURA", val: "08:50:00", chg: "ABERTURA EM T-10", up: null },
    { sym: "MINI DÓLAR", val: "WDOJ26", chg: "+12 PTS", up: true },
    { sym: "MAPA DE CALOR", val: "ANÁLISE DO DIA", chg: "PUBLICADA", up: null },
    { sym: "USDBRL", val: "5,0892", chg: "−0,18%", up: false },
    { sym: "B3", val: "PREGÃO REGULAR", chg: "09:00–18:00", up: null },
  ];
  const all = [...items, ...items];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {all.map((it, i) => (
          <span className="ticker-item" key={i}>
            <span className="dot" />
            <span style={{opacity: .6}}>{it.sym}</span>
            <span>{it.val}</span>
            <span className={it.up === true ? "pos" : it.up === false ? "neg" : ""} style={{opacity: it.up === null ? .5 : 1}}>{it.chg}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────── HERO ───────────────────────
function Hero() {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="chip-wrap">
          <span className="chip"><span className="pulse" />Análise pré abertura</span>
        </div>

        <h1 className="display reveal in">
          A maioria dos traders vive na frente da tela. <em>Os melhores, não.</em>
        </h1>

        <div className="hero-foot">
          <p className="lede">
            O <em>Mapa de Calor</em> é a única metodologia de mini dólar em que você
            clica uma única vez no dia, ainda no leilão de abertura. As saídas de
            Gain e Loss são automáticas — e depois disso, o mercado trabalha por você.
          </p>
          <div className="hero-actions">
            <a className="btn btn-primary" href={PAY} target="_blank" rel="noopener">
              Quero Assinar o Mapa de Calor
              <span className="arrow">→</span>
            </a>
            <a className="btn btn-ghost" href="#metodologia">Conhecer a metodologia</a>
          </div>
          <span className="hero-note">
            Assinatura mensal independente · Acesso ao Panorama Dólar · Resumo Executivo diário de Pré Abertura
          </span>
        </div>

        <Timeline />

        <div className="hero-meta">
          <div><span className="k">UM CLIQUE</span><span className="v">No leilão de abertura</span></div>
          <div><span className="k">SAÍDAS</span><span className="v">Automáticas, sempre</span></div>
          <div><span className="k">TELA</span><span className="v">Pode desligar</span></div>
          <div><span className="k">RESULTADO</span><span className="v">Mercado trabalha</span></div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── TIMELINE ───────────────────────
function Timeline() {
  const stops = [
    { t: "08:45", lbl: "Análise chega", desc: "Pré-Abertura Publicado", side: "top" },
    { t: "09:00", lbl: "Um clique", desc: "Posição no leilão", side: "bottom" },
    { t: "09:00", lbl: "Pregão abre", desc: "Saídas configuradas automaticamente", side: "top" },
    { t: "09:30", lbl: "Desligar PC", desc: "Mercado segue", side: "bottom" },
    { t: "18:00", lbl: "Resultado", desc: "Dia encerrado", side: "top" },
  ];
  const progressForIdx = (i) => (i / (stops.length - 1)) * 80;
  const [active, setActive] = useState(1);
  const [playing, setPlaying] = useState(false);

  useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => setActive(a => (a + 1) % stops.length), 1600);
    return () => clearInterval(id);
  }, [playing]);

  return (
    <div className="tl reveal">
      <div className="tl-head">
        <div>
          <div className="mono" style={{color:"var(--ink-3)", letterSpacing: ".14em"}}>UM DIA NO MAPA DE CALOR</div>
          <div className="h-3" style={{marginTop: 10}}>O tempo de tela do trader de elite</div>
        </div>
        <div className="mono" style={{color: "var(--ink-3)"}}>
          {String(active + 1).padStart(2, "0")} / {String(stops.length).padStart(2, "0")}
        </div>
      </div>

      <div className="tl-track">
        <div className="tl-line" />
        <div className="tl-prog" style={{width: progressForIdx(active) + "%"}} />
        {stops.map((s, i) => (
          <div key={i} className={"tl-stop " + (i <= active ? "active" : "")} onMouseEnter={() => { setPlaying(false); setActive(i); }}>
            <div className="top">
              {s.side === "top" && (<><div className="lbl">{s.lbl}</div><div className="desc">{s.desc}</div></>)}
            </div>
            <div className="dot" />
            <div className="bot">
              {s.side === "bottom"
                ? (<><div className="lbl">{s.lbl}</div><div className="desc">{s.desc}</div><div className="time">{s.t}</div></>)
                : (<div className="time">{s.t}</div>)}
            </div>
          </div>
        ))}
      </div>

      <div className="tl-pgrp">
        <button className="tl-play" onClick={() => setPlaying(p => !p)} aria-label={playing ? "Pausar" : "Tocar"}>
          {playing
            ? (<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><rect x="2" y="1" width="3" height="12"/><rect x="9" y="1" width="3" height="12"/></svg>)
            : (<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><polygon points="2,1 13,7 2,13"/></svg>)}
        </button>
        <div>
          <div className="label">Etapa em foco</div>
          <div className="now">{stops[active].lbl} <span style={{color:"var(--ink-3)", fontStyle:"normal", fontFamily:"var(--mono)", fontSize: 13, marginLeft: 8}}>{stops[active].t}</span></div>
        </div>
        <div style={{marginLeft: "auto", textAlign: "right"}}>
          <div className="label">Tempo de tela</div>
          <div className="now" style={{fontSize: 18, color: "var(--accent)"}}>~10 min/dia</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────── PROPOSTA (BLOCO 01) ───────────────────────
function Proposta() {
  return (
    <section>
      <div className="wrap grid-2">
        <div>
          <div className="section-num">01 — Abertura</div>
          <h2 className="h-section" style={{marginTop: 18}}>
            Não é mais um curso. É uma <em>reprogramação.</em>
          </h2>
        </div>
        <div style={{display:"flex", flexDirection:"column", gap: 20}}>
          <p className="body dropcap">
            Você foi ensinado que trader bom é trader que acompanha. Que precisa de
            múltiplos monitores, roteamento de ordem, análise em tempo real, setup
            após setup após setup. E mesmo assim, no final do dia, a conta não fecha
            no azul com consistência, ou pior, ainda devolve o que ganhou mais cedo!
          </p>
          <p className="body">
            O Mapa de Calor não é mais uma estratégia de análise técnica. É uma
            reprogramação completa da forma como você opera — e da forma como você
            pensa sobre o mercado.
          </p>
          <p style={{margin: 0, color:"var(--ink)", fontFamily:"var(--serif)", fontStyle:"italic", fontSize: 23, lineHeight: 1.4}}>
            Uma entrada, ainda no leilão, antes do pregão abrir. Gain e Loss já
            configurados. E depois do clique: liberdade.
          </p>
          <p className="small">Isso não é simplificação. É uma mudança de patamar.</p>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── DOR (BLOCO 02) ───────────────────────
function Pain() {
  const pains = [
    "Ficar colado na tela das 8h até o fechamento, sentindo cada tick no estômago.",
    "Pagar curso após curso, mentoria após mentoria, e o resultado continua inconsistente.",
    "A ansiedade de “e se eu sair agora e o mercado virar?” que domina o seu dia — e às vezes, a sua noite.",
    "Estudar por horas, dias, meses, anos, backtesting, análise gráfica, book de ofertas — e ainda operar no emocional na hora H.",
    "Sentir que o mercado está sempre um passo à sua frente, não importa o quanto você se prepare.",
    "A frustração de ver que seu maior inimigo não é o mercado, muito menos você mesmo, mas sim tudo o que você paga pra aprender, mas não funciona.",
  ];
  return (
    <section style={{background: "var(--bg-2)"}}>
      <div className="wrap">
        <div className="grid-2">
          <div>
            <div className="section-num">02 — Diagnóstico</div>
            <h2 className="h-section" style={{marginTop: 18}}>
              Quantas horas da sua semana <em>valeram a pena?</em>
            </h2>
          </div>
          <div>
            <p className="lede">
              Antes de falar sobre o que o Mapa de Calor faz, uma pergunta honesta.
              Se você está aqui, provavelmente já conhece bem essa sensação:
            </p>
          </div>
        </div>

        <ul className="pain-grid" style={{listStyle:"none", padding: 0}}>
          {pains.map((p, i) => (
            <li className="pain-item" key={i}>
              <span className="num">{String(i + 1).padStart(2, "0")}</span>
              <p>{p}</p>
            </li>
          ))}
        </ul>

        <p className="lede" style={{marginTop: 52, maxWidth: "46ch"}}>
          Essa não é uma falha sua. É o resultado natural de um modelo de operação
          que foi <em>construído para te manter preso.</em>
        </p>
      </div>
    </section>
  );
}

// ─────────────────────── PRINCÍPIO ───────────────────────
function Principle() {
  return (
    <section className="principle">
      <div className="wrap">
        <div className="mono" style={{color:"rgba(240,231,210,.45)", letterSpacing:".18em", marginBottom: 30}}>
          O PRINCÍPIO RADICAL
        </div>
        <blockquote>
          O trader que precisa ficar olhando o mercado <span className="accent">ainda não domina</span> o mercado.
        </blockquote>
        <div className="attrib">— Giovanni dos Santos (Gigio) · Criador do Mapa de Calor</div>
      </div>
    </section>
  );
}

// ─────────────────────── DIFERENCIAL ───────────────────────
function OneDirection() {
  return (
    <section style={{background: "var(--bg-2)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)"}}>
      <div className="wrap">
        <div className="grid-2" style={{alignItems: "center"}}>
          <div>
            <div className="section-num">03 — O diferencial</div>
            <h2 className="h-section" style={{marginTop: 18}}>
              Todos na <em>mesma direção.</em> Sempre.
            </h2>
            <p className="lede" style={{marginTop: 26}}>
              Aqui, não tem um mentorado comprando enquanto o outro está vendendo.
              A entrada é a mesma pra todos.
            </p>
            <p className="body" style={{marginTop: 18}}>
              Não é achismo. Não é pseudo-leitura de mercado. Não é interpretação
              pessoal de gráfico. É uma única decisão estatística, publicada antes
              do pregão, executada do mesmo jeito por toda a base.
            </p>
          </div>

          <div style={{display: "grid", gap: 16}}>
            <div className="card" style={{padding: "26px 30px", display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 20}}>
              <span className="mono" style={{color: "var(--accent)", letterSpacing: ".14em", fontSize: 11}}>24.04.26</span>
              <div>
                <div className="mono" style={{color: "var(--ink-3)", letterSpacing: ".12em", fontSize: 10, marginBottom: 4}}>DIREÇÃO DO DIA</div>
                <div className="h-3" style={{fontSize: 22}}>Mini Dólar · Compra</div>
              </div>
              <div style={{width: 44, height: 44, borderRadius: "50%", background: "var(--accent)", color: "var(--paper)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 20}}>↑</div>
            </div>

            <div className="card" style={{padding: "26px 30px"}}>
              <div className="mono" style={{color: "var(--ink-3)", letterSpacing: ".12em", fontSize: 10, marginBottom: 10}}>TODA A BASE, AO MESMO TEMPO</div>
              <div style={{display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 4, marginBottom: 14}}>
                {Array.from({length: 36}).map((_, i) => (
                  <div key={i} style={{aspectRatio: "1", background: "var(--accent)", opacity: 0.35 + (i * 0.018)}} />
                ))}
              </div>
              <p className="small" style={{marginTop: 4}}>
                Uma análise. Uma posição. Uma direção. O grupo inteiro entra com a
                mesma ordem no mesmo lado do book.
              </p>
            </div>

            <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
              <div className="card" style={{padding: "20px 22px", borderStyle: "dashed", opacity: 0.75}}>
                <div className="mono" style={{color: "var(--ink-3)", letterSpacing: ".12em", fontSize: 10, marginBottom: 8}}>EM OUTROS LUGARES</div>
                <p className="small" style={{textDecoration: "line-through", textDecorationColor: "var(--ink-3)"}}>
                  Cada um interpreta o gráfico do seu jeito. Uns compram, outros vendem, ninguém concorda.
                </p>
              </div>
              <div className="card ink-card" style={{padding: "20px 22px"}}>
                <div className="mono" style={{color: "#D98B7E", letterSpacing: ".12em", fontSize: 10, marginBottom: 8}}>NO MAPA DE CALOR</div>
                <p className="small" style={{color: "rgba(240,231,210,0.85)", fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 15, lineHeight: 1.4}}>
                  Uma direção. Uma entrada. A mesma, para todos.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── METODOLOGIA ───────────────────────
function Method() {
  const steps = [
    { n: "I", h: "Análise antes do pregão", p: "Todos os dias, você acessa o Resumo Executivo de Pré Abertura antes do leilão abrir e confirma com o gráfico do Panorama Dólar." },
    { n: "II", h: "Posicionamento no leilão", p: "Entra na sua posição com um único clique, ainda durante o leilão de abertura do mini dólar." },
    { n: "III", h: "Saídas automáticas", p: "Gain e loss automáticos, configurados na própria ordem, sem nenhum clique. Nada depende da sua reação." },
    { n: "IV", h: "Liberdade depois disso", p: "O mercado segue o seu curso. Com ou sem você na frente do computador." },
  ];
  return (
    <section id="metodologia">
      <div className="wrap">
        <div className="grid-2">
          <div>
            <div className="section-num">04 — Metodologia</div>
            <h2 className="h-section" style={{marginTop: 18}}>
              Precisão cirúrgica no momento certo. <em>Disciplina</em> depois disso.
            </h2>
          </div>
          <div style={{display:"flex", flexDirection:"column", gap: 18}}>
            <p className="body">
              Desenvolvida por Giovanni dos Santos (Gigio) e sua equipe ao longo de
              mais de um ano de pesquisa, backtests e estatísticas avançadas — com um
              objetivo claro: criar um modelo operacional em que o emocional não
              interfira na execução.
            </p>
            <p className="body">
              Não é sobre simplificar o trade. É sobre operar com precisão no momento
              certo — e ter a disciplina de não interferir depois disso. Isso é o que
              separa o trader de elite dos demais.
            </p>
          </div>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <span className="n">{s.n}</span>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── BENEFÍCIOS ───────────────────────
function Benefits() {
  const items = [
    { ix: "B.01", h: "Liberdade real de tempo", p: "Você não precisa mais sacrificar seu dia, sua família ou sua saúde mental para operar mini dólar." },
    { ix: "B.02", h: "Eliminação do emocional", p: "Como a entrada é feita antes do pregão e as saídas são automáticas, o maior sabotador do trader é neutralizado." },
    { ix: "B.03", h: "Panorama Dólar", p: "Acesso à ferramenta proprietária com visibilidade do cenário macro do dólar antes de qualquer decisão operacional." },
    { ix: "B.04", h: "Mentalidade de elite", p: "Você para de operar como a maioria e começa a se comportar como quem realmente entende o jogo." },
    { ix: "B.05", h: "Evolução contínua ao longo do programa", p: "A metodologia se aprofunda com o tempo: quanto mais você permanece, mais situações diferentes você domina com a mesma execução." },
    { ix: "B.06", h: "Suporte Individual", p: "Acesso direto à equipe MCDolar via WhatsApp para dúvidas, alinhamentos e acompanhamento em tempo real." },
    { ix: "B.07", h: "Metodologia proprietária", p: "Base estatística exclusiva, desenvolvida internamente, que não existe em nenhum outro lugar do mercado." },
  ];
  return (
    <section style={{background:"var(--bg-2)"}}>
      <div className="wrap">
        <div className="grid-2">
          <div>
            <div className="section-num">05 — Benefícios</div>
            <h2 className="h-section" style={{marginTop: 18}}>
              O que muda quando você <em>opera assim.</em>
            </h2>
          </div>
          <p className="lede">
            Sete consequências diretas — não promessas vagas, mas o resultado
            estrutural de uma metodologia em que o emocional foi removido da equação.
          </p>
        </div>

        <ul className="index-list" style={{marginTop: 52}}>
          {items.map((it) => (
            <li key={it.ix}>
              <span className="ix">{it.ix}</span>
              <div className="it">
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ─────────────────────── PRIVACIDADE ───────────────────────
function Privacy() {
  return (
    <section className="privacy" id="privacidade">
      <div className="wrap privacy-grid">
        <div>
          <div className="section-num">06 — Prova social, à nossa maneira</div>
          <h2 className="h-section" style={{marginTop: 18}}>
            Não publicamos <em>screenshots.</em> Não publicamos <em>resultados.</em>
          </h2>
          <p className="body" style={{marginTop: 26}}>
            Prezamos pela privacidade absoluta dos nossos assinantes. Não divulgamos
            nomes, resultados individuais nem screenshots de operações. Essa é uma
            escolha ética e deliberada da MCDolar — e o motivo pelo qual você não vai
            encontrar prints duvidosos no nosso material.
          </p>
          <p className="body" style={{color:"var(--ink-3)", marginTop: 14, fontSize: 14}}>
            O que oferecemos no lugar disso: comprometimento real, todos os dias de
            mercado, com análise, suporte e acompanhamento da equipe.
          </p>
        </div>

        <div className="seal">
          <h4>Selo MCDolar · Privacidade do assinante</h4>
          <p>
            “A metodologia foi validada internamente com mais de um ano de backtests
            e análise estatística contínua. Cada nuance do mini dólar já foi mapeada
            — e é justamente por isso que o tempo de assinatura é diretamente
            proporcional ao resultado.”
          </p>
          <div className="signature">
            <div>
              GIOVANNI DOS SANTOS (GIGIO)<br/>
              <span style={{color: "var(--ink-3)", letterSpacing: ".06em"}}>CRIADOR · MCDOLAR</span>
            </div>
            <div className="stamp">PRIVACIDADE<br/>ABSOLUTA</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── ASSINATURA ───────────────────────
function Plan() {
  const features = [
    "Mentoria Individual",
    "Grupo exclusivo no WhatsApp (não obrigatório)",
    "Suporte individual e em grupo",
    "Acesso à ferramenta Panorama Dólar",
    "Resumo Executivo — Análise Pré Abertura do mercado",
    "Metodologia auto ajustada ao longo do programa",
  ];
  return (
    <section id="assinatura">
      <div className="wrap">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: 52, flexWrap:"wrap", gap: 24}}>
          <div>
            <div className="section-num">07 — Assinatura</div>
            <h2 className="h-section" style={{marginTop: 18}}>Mapa de Calor <em>· MCDolar</em></h2>
          </div>
          <p className="lede" style={{maxWidth: "42ch"}}>
            Mês a mês, sem fidelidade. Em meses sem operações, a mensalidade cai pela metade.
          </p>
        </div>

        <div className="plan-card">
          <div className="plan-grid">
            <div className="plan-left">
              <div className="mono" style={{color:"var(--ink-3)", letterSpacing: ".14em"}}>O QUE ESTÁ INCLUSO</div>
              <h3 className="h-3" style={{marginTop: 12, marginBottom: 4}}>Tudo do programa, sem add-ons.</h3>
              <p className="small">Acesso imediato após confirmação.</p>
              <ul className="plan-feats">
                {features.map((f, i) => (<li key={i}><span className="tick">✓</span><span>{f}</span></li>))}
              </ul>
            </div>

            <div className="plan-right">
              <div className="mono" style={{color:"var(--ink-3)", letterSpacing:".14em", marginBottom: 6}}>ASSINATURA MENSAL</div>
              <div className="price">
                <span className="amount">R$ 999<span style={{fontSize: "0.42em", letterSpacing: 0}}>,00</span></span>
                <span className="per">/ mês</span>
              </div>
              <p className="plan-note">Mês a mês. Cobrança recorrente, cancelável a qualquer momento. Sem fidelidade contratual.</p>
              <div style={{marginTop: 16, padding: "14px 16px", borderLeft: "2px solid var(--accent)", background: "var(--accent-soft)"}}>
                <div className="mono" style={{color:"var(--accent)", letterSpacing:".14em", fontSize: 11, marginBottom: 4}}>MESES SEM OPERAÇÕES</div>
                <p className="small" style={{margin: 0, color: "var(--ink)"}}>
                  Mensalidade reduzida em <strong>50%</strong> — você só paga cheio quando o mercado abre janelas.
                </p>
              </div>

              <div className="plan-cta">
                <a className="btn btn-primary" href={PAY} target="_blank" rel="noopener" style={{width:"100%", justifyContent:"center"}}>
                  Assinar agora<span className="arrow">→</span>
                </a>
                <p className="small" style={{marginTop: 12, textAlign:"center"}}>
                  Acesso imediato ao Panorama Dólar + Relatório Pré Abertura + Grupo WhatsApp <span style={{opacity:.7}}>(não obrigatório)</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── OBJEÇÕES ───────────────────────
function Objections() {
  const obj = [
    { q: "“Não tem garantia. Se não funcionar, perco o dinheiro.”", a: "Entendo essa preocupação — e vou ser direto. O Mapa de Calor não oferece garantia de devolução porque não é um produto de prateleira. É uma metodologia ativa, com suporte diário, análises ao vivo e ajustes contínuos. Garantia aqui seria uma promessa vazia que nenhum mercado financeiro sério pode fazer. O que oferecemos é comprometimento real da nossa equipe — todos os dias de mercado, sem exceção." },
    { q: "“Preciso mudar muito meu comportamento. Não sei se consigo.”", a: "Essa é, na verdade, a pergunta certa a se fazer. O Mapa de Calor não é para quem quer uma solução fácil — é para quem está disposto a questionar tudo que aprendeu sobre trade e reconstruir do zero. Se você chegou até aqui, provavelmente já está pronto para isso. A metodologia foi desenhada exatamente para guiar essa transição." },
    { q: "“O valor é alto para uma assinatura mensal.”", a: "Compare com o custo de mais um curso que não entrega resultado. Com mais horas perdidas na frente do computador. Com mais operações emocionais que destroem a conta. O Mapa de Calor não é uma despesa — é uma mudança de patamar. E quanto mais tempo de assinatura, mais completa é a formação." },
  ];
  return (
    <section style={{background:"var(--bg-2)"}}>
      <div className="wrap">
        <div className="grid-2">
          <div>
            <div className="section-num">08 — Objeções honestas</div>
            <h2 className="h-section" style={{marginTop: 18}}>
              O que normalmente passa pela <em>sua cabeça.</em>
            </h2>
          </div>
          <p className="lede">
            Três perguntas que aparecem quase sempre nesta etapa. Respondidas sem
            rodeio — porque a relação aqui não é de consumidor e produto.
          </p>
        </div>

        <div className="obj">
          {obj.map((o, i) => (
            <div className="obj-row" key={i}>
              <h3 className="obj-q">{o.q}</h3>
              <p className="obj-a">{o.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── GARANTIA + URGÊNCIA ───────────────────────
function GuaranteeAndScarcity() {
  return (
    <section>
      <div className="wrap" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: "clamp(28px, 4vw, 64px)"}}>
        <div className="card" style={{padding: "clamp(32px, 4vw, 52px)"}}>
          <div className="mono" style={{color:"var(--accent)", letterSpacing: ".18em", marginBottom: 14}}>09 · GARANTIA</div>
          <h3 className="h-3" style={{marginBottom: 18}}>Não oferecemos reembolso. Oferecemos compromisso mútuo.</h3>
          <p className="body" style={{fontSize: 15.5}}>
            Nossa equipe estará presente todos os dias de mercado — com análise,
            suporte e acompanhamento. O que pedimos em troca é que você apareça
            disposto a mudar.
          </p>
          <p style={{fontSize: 16, marginTop: 16, fontStyle:"italic", fontFamily:"var(--serif)", color:"var(--ink)", lineHeight: 1.45}}>
            Não é uma relação de consumidor e produto. É uma relação de mentor e
            operador comprometido.
          </p>
        </div>

        <div className="card ink-card" style={{padding: "clamp(32px, 4vw, 52px)"}}>
          <div className="mono" style={{color:"#D98B7E", letterSpacing: ".18em", marginBottom: 14}}>10 · VAGAS LIMITADAS</div>
          <h3 className="h-3" style={{marginBottom: 18}}>O suporte individual exige limite real de assinantes ativos.</h3>
          <p className="body" style={{fontSize: 15.5, color:"rgba(240,231,210,0.74)"}}>
            Para manter a qualidade do suporte que a metodologia exige, limitamos o
            número de assinantes ativos por período. Quando as vagas fecham, fecham.
          </p>
          <div style={{marginTop: 28, padding: 16, background:"rgba(240,231,210,0.07)", display:"flex", justifyContent:"space-between", alignItems:"center", gap: 16, flexWrap:"wrap"}}>
            <div>
              <div className="mono" style={{color:"#D98B7E", letterSpacing:".14em", fontSize: 10}}>STATUS DA TURMA</div>
              <div style={{color:"inherit", fontSize: 18, marginTop: 4, fontStyle:"italic", fontFamily:"var(--serif)"}}>Aberta — espaço limitado</div>
            </div>
            <a className="btn btn-primary" href={PAY} target="_blank" rel="noopener" style={{background:"#D98B7E", color:"var(--ink)"}}>
              Garantir vaga →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── FAQ ───────────────────────
function Faq() {
  const items = [
    { q: "O Mapa de Calor funciona para iniciantes em mini dólar?", a: "Sim — e muitas vezes funciona melhor para quem ainda não “viciou” em outros métodos. O que é necessário não é experiência prévia, mas comprometimento real com a mudança de mentalidade que a metodologia exige." },
    { q: "Preciso acompanhar o mercado o dia todo?", a: "Não. Esse é exatamente o diferencial do Mapa de Calor. Você recebe a análise antes da abertura, se posiciona ainda no leilão, com um clique, as saídas de Gain e Loss são automáticas — e depois disso, o mercado segue sem que você precise intervir." },
    { q: "Quanto tempo por dia preciso dedicar?", a: "O tempo de operação é mínimo — concentrado no período pré-abertura do pregão. O restante do seu dia é seu. Há também o grupo de WhatsApp, que não é obrigatório, mas o core operacional é rápido e objetivo." },
    { q: "E se eu não gostar ou não me adaptar?", a: "O Mapa de Calor não é para todo perfil de trader — e somos transparentes sobre isso. Por isso reforçamos antes da assinatura: é necessário disposição real para mudar comportamentos. Não há reembolso, mas há suporte contínuo para que a adaptação aconteça da melhor forma possível." },
    { q: "Como funciona o acesso após a assinatura?", a: "Imediatamente após a confirmação do pagamento, você é inserido, caso deseje, no grupo do WhatsApp e recebe acesso à ferramenta Panorama Dólar no site MCDolar. As análises pré-pregão chegam antes da abertura dos mercados." },
    { q: "Tem suporte se eu tiver dúvidas na operação?", a: "Sim — suporte individual e em grupo pelo WhatsApp, com a equipe MCDolar disponível para alinhar, tirar dúvidas e acompanhar sua evolução." },
    { q: "Como funciona o pagamento?", a: "Assinatura mensal recorrente, cancelável a qualquer momento — sem fidelidade contratual. Em meses sem operações, a mensalidade é reduzida em 50%: você só paga o valor cheio quando o mercado abre janelas." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="duvidas">
      <div className="wrap">
        <div className="grid-2" style={{marginBottom: 44}}>
          <div>
            <div className="section-num">11 — Dúvidas frequentes</div>
            <h2 className="h-section" style={{marginTop: 18}}>Sete perguntas <em>que valem fazer.</em></h2>
          </div>
          <p className="lede">
            Antes de assinar, vale ler estas. Se alguma ficar de fora, fale com a
            equipe direto pelo WhatsApp.
          </p>
        </div>

        <div>
          {items.map((it, i) => (
            <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span><span className="plus">+</span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── FINAL CTA ───────────────────────
function FinalCta() {
  return (
    <section className="final">
      <div className="wrap">
        <div className="mono" style={{color: "rgba(240,231,210,0.5)", letterSpacing: ".18em", marginBottom: 30}}>12 — DECISÃO</div>
        <h2>
          Um clique. No leilão. Antes do pregão abrir. E depois disso —{" "}
          <span className="accent"><em>liberdade.</em></span>
        </h2>
        <p className="lede" style={{maxWidth:"56ch", marginTop: 30}}>
          Você passou anos aprendendo a operar do jeito que todo mundo ensina. Horas
          de tela. Ansiedade. Resultados inconsistentes. O Mapa de Calor é para o
          trader pronto para fazer o que a maioria nunca vai ter coragem: parar de
          operar como todos os outros.
        </p>
        <div style={{marginTop: 44, display:"flex", gap: 18, flexWrap:"wrap", alignItems:"center"}}>
          <a className="btn btn-primary" href={PAY} target="_blank" rel="noopener">
            Quero assinar o Mapa de Calor<span className="arrow">→</span>
          </a>
          <span className="mono" style={{color:"rgba(240,231,210,0.5)", letterSpacing:".14em"}}>
            ASSINATURA MENSAL · ACESSO IMEDIATO · VAGAS LIMITADAS
          </span>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── PS ───────────────────────
function PS() {
  return (
    <section className="ps">
      <div className="wrap">
        <div className="ps-row">
          <div className="label">P.S.</div>
          <p>
            Se você chegou até aqui, já sabe que isso é diferente de tudo que você já
            viu. O Mapa de Calor não promete enriquecimento rápido — promete uma
            mudança real na forma como você opera e pensa sobre o mercado. Essa
            transformação tem um preço: comprometimento. Se você está disposto a
            pagar esse preço, a equipe MCDolar está pronta para caminhar com você —
            todos os dias de mercado, sem exceção.
          </p>
        </div>
        <div className="ps-row">
          <div className="label">P.P.S.</div>
          <p>As vagas são limitadas para garantir a qualidade do suporte individual. Quando fechar, fecha.</p>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────── FOOTER ───────────────────────
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col">
            <div className="brand">
              <span>MCDolar</span>
            </div>
            <p className="small" style={{maxWidth: "38ch"}}>
              Mapa de Calor — metodologia proprietária para operação de mini dólar
              com posicionamento no leilão de abertura e saídas automáticas.
            </p>
          </div>
          <div className="foot-col">
            <h5>Programa</h5>
            <ul>
              <li><a href="#metodologia">Metodologia</a></li>
              <li><a href="#assinatura">Assinatura</a></li>
              <li><a href="#duvidas">Dúvidas</a></li>
              <li><a href="#privacidade">Privacidade</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Contato</h5>
            <ul>
              <li><a href="https://wa.me/5521995718465?text=Ol%C3%A1%2C%20quero%20mais%20informa%C3%A7%C3%B5es%20sobre%20o%20Mapa%20de%20Calor" target="_blank" rel="noopener">WhatsApp · +55 21 99571-8465</a></li>
              <li><a href="mailto:atendimento@mcdolar.com.br">atendimento@mcdolar.com.br</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-fine">
          <span>© 2025 MCDolar · Mapa de Calor. Todos os direitos reservados.</span>
          <span>Operações em mercado financeiro envolvem risco. Resultados passados não garantem resultados futuros.</span>
        </div>
      </div>
    </footer>
  );
}

// ─────────────────────── STICKY CTA ───────────────────────
function StickyCta() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.9);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={"sticky-cta " + (show ? "show" : "")}>
      <a className="btn btn-primary" href={PAY} target="_blank" rel="noopener" style={{boxShadow:"0 8px 30px rgba(0,0,0,0.22)"}}>
        Assinar Mapa de Calor<span className="arrow">→</span>
      </a>
    </div>
  );
}

Object.assign(window, {
  Nav, Hero, Proposta, Pain, Principle, OneDirection, Method, Benefits,
  Privacy, Plan, Objections, GuaranteeAndScarcity, Faq, FinalCta, PS, Footer, StickyCta,
});
