/* =====================================================================
   IMÓVEL EM DÓLAR — LP V4 (low ticket)  ·  método: corretor BR indica → ganha em dólar
   Estrutura roda como React 18 (UMD) + Babel no navegador (sem build).
   Engenharia clonada do template pep-master; paleta/copy = Imóvel em Dólar.
   ===================================================================== */
const { useState, useEffect } = React;

/* ============ CHECKOUT — links da plataforma ============
   ⚠️ DINHEIRO REAL: cada link tem que cobrar EXATAMENTE o valor exibido.
   - simples  → R$ 97  (Método Imóvel em Dólar — 6 módulos + acesso vitalício)
   - completo → R$ 197 (Método + Scripts + Checklist + Grupo VIP)
   - upsell   → R$ 197 (mesma oferta Completa; popup "desbloqueie tudo por +R$100")
   Trocar os placeholders SEU_LINK_* pelos links reais antes de publicar. */
const CHECKOUT = {
  simples:  "https://pay.cakto.com.br/SEU_LINK_SIMPLES_97",   // EDITAR — R$97
  completo: "https://pay.cakto.com.br/SEU_LINK_COMPLETO_197",  // EDITAR — R$197
  upsell:   "https://pay.cakto.com.br/SEU_LINK_UPSELL_117",    // EDITAR — R$117 (pacote completo c/ 40% OFF no popup)
};

// Dispara o pixel de início de checkout e redireciona (carregando as UTMs salvas).
function goCheckout(url, value) {
  if (!url || url.includes("SEU_LINK")) {
    alert("Esta oferta está sendo configurada. Tente novamente em instantes.");
    return;
  }
  if (window.fbq) fbq("track", "InitiateCheckout", { value, currency: "BRL" });
  window.location.href = (window.appendUtms ? window.appendUtms(url) : url);
}

// Rola até a dobra de preços (#precos).
function scrollToPrecos(e) {
  if (e) e.preventDefault();
  const el = document.getElementById("precos");
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}

function Icon({ name, ...rest }) {
  return <i data-lucide={name} {...rest}></i>;
}

/* Botão CTA padrão do corpo → leva até a oferta */
function CTA({ children }) {
  return (
    <a href="#precos" onClick={scrollToPrecos} className="btn btn--primary btn--block">
      {children} <Icon name="arrow-right" />
    </a>
  );
}

/* Conta de 0 até `to` quando entra na tela (easeOutCubic). Usado em preço e % de desconto. */
function CountUp({ to, duration = 1500, suffix = "", className }) {
  const [val, setVal] = useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (!e.isIntersecting || started.current) return;
        started.current = true;
        const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        if (reduce) { setVal(to); return; }
        let t0 = null;
        const tick = (now) => {
          if (t0 === null) t0 = now;
          const p = Math.min(1, (now - t0) / duration);
          setVal(Math.round(to * (1 - Math.pow(1 - p, 3))));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      });
    }, { threshold: 0.5 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <span ref={ref} className={className}>{val}{suffix}</span>;
}

/* Carrossel automático contínuo (loop infinito). Pausa ao tocar/hover. */
function AutoCarousel({ children, speed = 0.5 }) {
  const trackRef = React.useRef(null);
  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    let paused = false, raf;
    const step = () => {
      if (!paused) {
        track.scrollLeft += speed;
        const half = track.scrollWidth / 2;
        if (track.scrollLeft >= half) track.scrollLeft -= half;
      }
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    const on = () => { paused = true; }, off = () => { paused = false; };
    track.addEventListener("mouseenter", on); track.addEventListener("mouseleave", off);
    track.addEventListener("pointerdown", on); track.addEventListener("pointerup", off);
    track.addEventListener("touchstart", on, { passive: true }); track.addEventListener("touchend", off);
    return () => {
      cancelAnimationFrame(raf);
      track.removeEventListener("mouseenter", on); track.removeEventListener("mouseleave", off);
      track.removeEventListener("pointerdown", on); track.removeEventListener("pointerup", off);
      track.removeEventListener("touchstart", on); track.removeEventListener("touchend", off);
    };
  }, []);
  return (
    <div className="carousel--auto">
      <div className="carousel__track" ref={trackRef}>
        {children}{children}{/* duplicado p/ loop sem emenda */}
      </div>
    </div>
  );
}

/* ---------------- Faixa de topo (sticky) ---------------- */
function PromoBar() {
  return (
    <div className="promo-bar">
      <Icon name="sparkles" />
      <span>Exclusivo para <strong>corretores com CRECI ativo</strong></span>
      <Icon name="sparkles" />
    </div>
  );
}

/* ---------------- SEÇÃO 1 — Hero ---------------- */
function Hero() {
  return (
    <section className="section section--hero">
      <div className="brandbar" style={{ display: "flex", justifyContent: "center", marginBottom: 22 }}>
        <img src="assets/logo.png?v=2" alt="Imóvel em Dólar" style={{ height: 64, width: "auto" }} />
      </div>
      <p className="eyebrow center">Método Imóvel em Dólar</p>
      <h1 className="headline center">
        Corretor, existe <span className="grad-text">dinheiro em dólar</span> escondido na sua carteira de clientes e você pode estar deixando passar.
      </h1>
      <p className="subhead center">
        Aprenda o método do Realtor <strong>Marcos Fernandes</strong> para identificar potenciais compradores de imóveis na Flórida, fazer <strong>indicações qualificadas</strong> e receber por oportunidades que hoje passam despercebidas.
      </p>

      <div className="hero-photo">
        <img src="assets/hero.png?v=3" alt="Marcos Fernandes, corretor com CRECI ativo" />
      </div>
    </section>
  );
}

/* ---------------- SEÇÃO 2 — Resultados (prova social ENORME) ---------------- */
function Results() {
  // Carrossel de provas — fotos reais das entregas, todas no mesmo tamanho padronizado.
  const fotos = [
    { src: "assets/prova-1.png", cap: "Entrega de imóvel na Flórida" },
    { src: "assets/prova-2.png", cap: "Mais uma chave entregue em Orlando" },
    { src: "assets/prova-3.png", cap: "Cliente brasileiro dolarizando patrimônio" },
    { src: "assets/prova-4.png", cap: "Negócio fechado nos Estados Unidos" },
    { src: "assets/prova-5.png", cap: "Entrega de chaves na Flórida" },
    { src: "assets/prova-6.png", cap: "Mais um cliente atendido em Orlando" },
  ];
  return (
    <section className="section">
      <p className="results-lead center">
        A demanda já existe e as campanhas estão no ar atraindo investidores todo dia. <strong>Só falta quem indique.</strong>
      </p>

      <AutoCarousel speed={0.5}>
        {fotos.map((p, i) => (
          <figure className="proof proof--photo" key={i}>
            <div className="proof__img"><img src={p.src} alt={p.cap} loading="lazy" /></div>
            <figcaption className="proof__cap">
              <span className="proof__tag"><Icon name="badge-check" />Caso real</span>
              <b>{p.cap}</b>
            </figcaption>
          </figure>
        ))}
      </AutoCarousel>

      <div style={{ marginTop: 40 }}><CTA>QUERO RECEBER EM DÓLAR</CTA></div>
    </section>
  );
}

/* ---------------- Autoridade — Marcos Fernandes ---------------- */
function Authority() {
  return (
    <section className="section">
      <p className="eyebrow center">Quem garante</p>
      <h2 className="headline center">Quem é Marcos Fernandes?</h2>
      <div className="authority">
        <div className="authority__photo">
          <img src="assets/marcos.jpg" alt="Marcos Fernandes, Realtor licenciado na Flórida" />
          <span className="authority__badge"><Icon name="badge-check" />Realtor licenciado · Flórida</span>
        </div>
        <div className="authority__body">
          <h3 className="authority__name">Marcos Fernandes</h3>
          <p className="authority__role">Realtor licenciado na Flórida</p>
          <p className="authority__text">
            Especialista em vender imóveis para muitos brasileiros que querem investir e dolarizar patrimônio. Marcos já opera dentro do mercado americano há anos e agora abre uma estrutura para você indicar e lucrar junto, em dólar, sem precisar estar nos EUA.
          </p>
          <div className="authority__seals">
            <span><Icon name="award" />Licenciado FL</span>
            <span><Icon name="user-check" />Foco investidor BR</span>
            <span><Icon name="globe" />Operação real nos EUA</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- SEÇÃO 3 — O que você recebe (carrossel + sanfona de módulos) ---------------- */
const MODULES = [
  { n: 1, title: "Como funciona o mercado imobiliário americano", desc: "Entenda o jogo onde o dinheiro está e por que o investidor brasileiro precisa de você como ponte para a Flórida." },
  { n: 2, title: "Como identificar clientes com potencial para investir", desc: "Aprenda a enxergar, dentro da carteira que você já tem, quem está pronto para dolarizar patrimônio agora." },
  { n: 3, title: "Como apresentar a oportunidade sem parecer vendedor", desc: "A abordagem consultiva que abre a conversa e desperta o interesse sem queimar a relação que você construiu." },
  { n: 4, title: "Como funciona a indicação", desc: "O passo a passo do referral internacional: como registrar a sua indicação e garantir que ela é, e continua sendo, sua." },
  { n: 5, title: "Como acompanhar até receber sua comissão", desc: "Do aceite do cliente ao fechamento na Flórida — como acompanhar o processo e receber a sua parte em dólar." },
  { n: 6, title: "Ferramentas, scripts e materiais de apoio", desc: "Tudo o que você precisa para começar a indicar ainda esta semana, com modelos prontos para copiar e usar." },
];
function Deliverables() {
  const cards = [
    { icon: "book-open", title: "6 módulos de treinamento", list: ["Acesso imediato", "Direto ao ponto", "Assista no celular"] },
    { icon: "message-circle", title: "Grupo no WhatsApp", list: ["Networking", "Suporte", "Atualizações"] },
    { icon: "clipboard-list", title: "Roteiro de captação", list: ["WhatsApp", "Instagram", "Abordagem pronta"] },
    { icon: "handshake", title: "Fluxo de indicação", list: ["Passo a passo", "Modelo de qualificação", "Acompanhamento"] },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <p className="eyebrow center">O que você recebe</p>
      <h2 className="headline center">Tudo que você recebe para começar ainda esta semana</h2>
      <p className="section-sub">Você não recebe apenas um curso. Recebe <strong>todo o processo pronto.</strong></p>

      <AutoCarousel speed={0.5}>
        {cards.map((it, i) => (
          <div className="deliv" key={i}>
            <div className="deliv__top">
              <span className="deliv__icon"><Icon name={it.icon} /></span>
              <h3>{it.title}</h3>
            </div>
            <ul>{it.list.map((li) => <li key={li}><Icon name="check" />{li}</li>)}</ul>
          </div>
        ))}
      </AutoCarousel>

      <div className="modules">
        {MODULES.map((m, i) => (
          <div className={`module ${open === i ? "open" : ""}`} key={m.n}>
            <button className="module__q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="module__num">{m.n}</span>
              <span className="module__title">{m.title}</span>
              <Icon name="chevron-down" />
            </button>
            <div className="module__a"><div>{m.desc}</div></div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40 }}><CTA>QUERO RECEBER EM DÓLAR</CTA></div>
    </section>
  );
}

/* ---------------- SEÇÃO 4 — Bônus (preço riscado → grátis) ---------------- */
const BONUSES = [
  { icon: "message-square-text", n: 1, title: "Scripts de abordagem", price: "R$ 97", desc: "Copie e cole mensagens prontas para iniciar conversas sem parecer insistente." },
  { icon: "clipboard-check", n: 2, title: "Checklist do Investidor", price: "R$ 67", desc: "Identifique rapidamente quais clientes têm maior potencial para investir nos EUA." },
  { icon: "users", n: 3, title: "Grupo VIP", price: "R$ 147", desc: "Networking, atualizações e suporte direto com a comunidade de parceiros." },
];
function BonusFold() {
  return (
    <section className="section">
      <p className="eyebrow center">Bônus exclusivos</p>
      <h2 className="headline center">Leve junto, sem pagar a mais</h2>
      <div className="bonus-grid">
        {BONUSES.map((b) => (
          <div className="bonus-card" key={b.n}>
            <span className="bonus-card__icon"><Icon name={b.icon} /></span>
            <div className="bonus-card__body">
              <span className="bonus-card__kicker">Bônus {b.n}</span>
              <h3 className="bonus-card__title">{b.title}</h3>
              <p className="bonus-card__desc">{b.desc}</p>
              <div className="bonus-card__price"><s>{b.price}</s><span className="bonus-card__free">Grátis</span></div>
            </div>
          </div>
        ))}
      </div>
      <p className="bonus-note center"><Icon name="gift" /> Os 3 bônus já estão inclusos no <strong>plano Completo</strong>.</p>
    </section>
  );
}

/* ---------------- SEÇÃO 5 — Oferta (2 planos + garantia + FAQ) ---------------- */
function Pricing({ onSimples }) {
  const faqs = [
    { q: "Preciso falar inglês?", a: "Não. Você atua no Brasil, em português. Quem conduz a negociação nos Estados Unidos é o Realtor licenciado Marcos Fernandes." },
    { q: "Preciso ter visto ou morar nos EUA?", a: "Não. Todo o seu trabalho é feito do Brasil. Você não precisa viajar nem ter visto para indicar." },
    { q: "Preciso de licença americana?", a: "Não. Você indica como corretor brasileiro com CRECI ativo; a corretagem na Flórida é conduzida pela brokerage licenciada do Marcos." },
    { q: "Quem fecha a venda?", a: "O Realtor Marcos Fernandes e a brokerage licenciada na Flórida. Você apresenta o cliente e acompanha; eles fecham nos EUA." },
    { q: "Como recebo minha taxa de indicação?", a: "Você vai receber uma boa taxa de indicação (referral), paga em dólar, conforme a legislação aplicável no Brasil e nos Estados Unidos. Assinaremos um contrato para que isso aconteça de forma correta, dentro da legislação brasileira e americana." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="precos">
      <p className="eyebrow center">Escolha seu acesso</p>
      <h2 className="headline center">Comece hoje a construir sua renda em dólar</h2>

      <div className="plans">
        {/* Plano Simples — R$97 */}
        <div className="plan">
          <div className="plan__head">
            <h3 className="plan__name">Método Imóvel em Dólar</h3>
            <p className="plan__tagline">A oferta simples</p>
          </div>
          <div className="plan__deal">
            <s className="plan__from">de R$ 197</s>
            <span className="plan__off"><CountUp to={49} suffix="%" /> OFF</span>
          </div>
          <div className="plan__price">
            <span className="plan__cur">R$</span>
            <CountUp to={97} className="plan__val" />
          </div>
          <ul className="plan__list">
            <li><Icon name="check" />6 módulos de treinamento</li>
            <li><Icon name="check" />Acesso vitalício</li>
            <li><Icon name="check" />Acesso a grupo exclusivo com a equipe Imóvel em Dólar</li>
            <li className="plan__list--off"><Icon name="x" />Sem os bônus</li>
          </ul>
          <p className="plan__pay"><Icon name="credit-card" /> Em até <strong>12x sem juros</strong> no cartão · ou <strong>PIX com 5% OFF</strong></p>
          <button className="btn btn--outline btn--block" onClick={onSimples}>Quero o Método (R$97)</button>
        </div>

        {/* Plano Completo — R$197 (destaque) */}
        <div className="plan plan--featured">
          <span className="plan__badge">Mais vendido</span>
          <div className="plan__head">
            <h3 className="plan__name">Pacote Completo</h3>
            <p className="plan__tagline">Método + todos os bônus</p>
          </div>
          <div className="plan__deal">
            <s className="plan__from">de R$ 297</s>
            <span className="plan__off"><CountUp to={34} suffix="%" /> OFF</span>
          </div>
          <div className="plan__price">
            <span className="plan__cur">R$</span>
            <CountUp to={197} className="plan__val" />
          </div>
          <div className="value-stack">
            <ul>
              <li><span><Icon name="check" />Método Imóvel em Dólar</span><b>R$ 297</b></li>
              <li><span><Icon name="check" />Bônus 1 · Scripts de abordagem</span><b>R$ 97</b></li>
              <li><span><Icon name="check" />Bônus 2 · Checklist do Investidor</span><b>R$ 67</b></li>
              <li><span><Icon name="check" />Bônus 3 · Grupo VIP</span><b>R$ 147</b></li>
            </ul>
            <div className="value-stack__total"><span>R$ 311 em bônus</span><b>Grátis</b></div>
          </div>
          <ul className="plan__list">
            <li><Icon name="check" />Acesso ao grupo VIP com a presença do Marcos Fernandes</li>
            <li><Icon name="check" />Material exclusivo para divulgação nas redes sociais</li>
          </ul>
          <p className="plan__pay"><Icon name="credit-card" /> Em até <strong>12x sem juros</strong> no cartão · ou <strong>PIX com 5% OFF</strong></p>
          <button className="btn btn--primary btn--block" onClick={() => goCheckout(CHECKOUT.completo, 197)}>
            Quero o Pacote Completo <Icon name="arrow-right" />
          </button>
        </div>
      </div>

      <p className="cta-sub" style={{ marginTop: 14 }}>Pagamento único • Acesso imediato • Garantia de 7 dias</p>

      <p className="section-sub" style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginTop: 16 }}>
        A renda de indicação não é garantia de ganho. Resultados variam conforme aplicação e mercado. As indicações seguem a legislação aplicável no Brasil e nos Estados Unidos. O treinamento é educacional e não condiciona o direito de indicar à compra.
      </p>

      <div className="guarantee">
        <div className="seal"><div><b>7</b><span>dias</span></div></div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "1.3rem", margin: "0 0 8px", color: "var(--text-strong)" }}>Você tem 7 dias para testar.</h3>
        <p>Entre hoje, assista às aulas e veja como funciona. Se perceber que o treinamento não faz sentido para você, basta solicitar o reembolso dentro de sete dias. Todo o risco é nosso.</p>
      </div>

      <div className="faq">
        {faqs.map((f, i) => (
          <div className={`faq__item ${open === i ? "open" : ""}`} key={i}>
            <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>{f.q}<Icon name="chevron-down" /></button>
            <div className="faq__a"><div>{f.a}</div></div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- Popup de upsell (abre ao clicar no Método/Simples) ---------------- */
function UpsellModal({ onClose, onExpire }) {
  const [left, setLeft] = useState(60);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);
  React.useEffect(() => {
    if (left <= 0) { onExpire(); return; }
    const id = setTimeout(() => setLeft((s) => s - 1), 1000);
    return () => clearTimeout(id);
  }, [left]);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const mm = String(Math.floor(left / 60)).padStart(2, "0");
  const ss = String(left % 60).padStart(2, "0");
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="modal__close" aria-label="Fechar" onClick={onClose}><Icon name="x" /></button>
        <span className="modal__tag"><Icon name="sparkles" />Espere! Antes de concluir…</span>
        <h3 className="modal__title">Desbloqueie o <strong>pacote completo</strong></h3>
        <p className="modal__text">
          Por apenas <strong>R$ 20 a mais</strong> você desbloqueia <strong>todos os 3 bônus</strong> (Scripts, Checklist e Grupo VIP) e leva o pacote completo.
        </p>
        <div className="modal__price">
          <s>de R$ 197</s>
          <div className="modal__now">
            <span className="modal__cur">R$</span>
            <span className="modal__val">117</span>
            <span className="modal__off">40% OFF</span>
          </div>
        </div>
        <div className="modal__timer">
          <Icon name="clock" />
          <span>Essa oferta some em <b>{mm}:{ss}</b> e <strong>não aparece de novo</strong></span>
        </div>
        <button className="btn btn--primary btn--block" onClick={() => goCheckout(CHECKOUT.upsell, 117)}>
          SIM, QUERO O PACOTE COMPLETO <Icon name="arrow-right" />
        </button>
        <button className="modal__decline" onClick={() => goCheckout(CHECKOUT.simples, 97)}>
          Não, continuar só com o Método (R$ 97)
        </button>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <p className="site-footer__url">imovelemdolar.com.br</p>
      <p className="site-footer__rights">© {new Date().getFullYear()} Imóvel em Dólar · Seu imóvel nos EUA. Todos os direitos reservados.</p>
    </footer>
  );
}

function App() {
  const [upsellOpen, setUpsellOpen] = useState(false);
  const upsellSpent = React.useRef(false); // depois de expirar, não reabre

  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const handleSimples = () => {
    if (upsellSpent.current) { goCheckout(CHECKOUT.simples, 97); return; }
    setUpsellOpen(true);
  };

  return (
    <React.Fragment>
      <PromoBar />
      <div className="lp">
        <Hero />
        <Results />
        <Authority />
        <Deliverables />
        <BonusFold />
        <Pricing onSimples={handleSimples} />
        <Footer />
      </div>
      {upsellOpen &&
        <UpsellModal
          onClose={() => setUpsellOpen(false)}
          onExpire={() => { upsellSpent.current = true; setUpsellOpen(false); }} />}
    </React.Fragment>
  );
}

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