// blackpool.jsx — BLACK POOL (Black Friday) mode
// Janela oficial (horário de Brasília, UTC-3):
//   início 01/11 às 12h  ·  fim 30/11 às 20h
const BP_START = Date.UTC(2026, 10, 1, 15, 0, 0);
const BP_END = Date.UTC(2026, 10, 30, 23, 0, 0);
const BP_WHATS_NUMBER = "5512982340551";

function getBlackPoolMode(override) {
  const q = new URLSearchParams(location.search).get("blackpool");
  const forced = q || (override && override !== "auto" ? override : null);
  if (forced === "pre" || forced === "on" || forced === "off") return forced;
  const now = Date.now();
  if (now < BP_START) return "pre";
  if (now <= BP_END) return "on";
  return "off";
}

function useCountdown(target) {
  const [now, setNow] = React.useState(Date.now());
  React.useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const ms = Math.max(0, target - now);
  const pad = (n) => String(n).padStart(2, "0");
  return {
    d: pad(Math.floor(ms / 864e5)),
    h: pad(Math.floor(ms / 36e5) % 24),
    m: pad(Math.floor(ms / 6e4) % 60),
    s: pad(Math.floor(ms / 1e3) % 60),
  };
}

function BPCountdown({ target, size = "md" }) {
  const c = useCountdown(target);
  const cells = [[c.d, "dias"], [c.h, "horas"], [c.m, "min"], [c.s, "seg"]];
  return (
    <div className={`bp-count bp-count--${size}`}>
      {cells.map(([v, l], i) => (
        <div className="bp-count-cell" key={i}>
          <span className="v">{v}</span>
          <span className="l">{l}</span>
        </div>
      ))}
    </div>
  );
}

/* ───────────── Pré-Black: tela de entrada (pop-up) ───────────── */
function BPIntroModal({ onClose, onJoin, joined }) {
  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 = ""; };
  }, []);
  return (
    <div className="bp-intro-bg" onClick={onClose}>
      <div className="bp-intro" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Black Pool">
        <button className="bp-modal-x" onClick={onClose} aria-label="Fechar">✕</button>
        <p className="bp-kicker">Vem aí · Método DDP</p>
        <h2 className="bp-intro-word"><span>BLACK</span><span className="violet">POOL</span></h2>
        <div className="bp-intro-dates">
          <div><span className="l">Começa</span><span className="v">01/11 · 12h</span></div>
          <div><span className="l">Termina</span><span className="v">30/11 · 20h</span></div>
        </div>
        <p className="bp-intro-txt">
          Quem entrar no Método DDP durante a Black Pool ganha uma <strong>aula individual comigo</strong>, no Meet, sobre pool de liquidez.
        </p>
        <p className="bp-intro-count-l">Faltam</p>
        <BPCountdown target={BP_START} size="lg" />
        <div className="bp-intro-ctas">
          {joined ? (
            <span className="bp-intro-joined">Você já está na lista VIP ✓</span>
          ) : (
            <button className="bp-btn bp-btn--violet" onClick={onJoin}>Entrar na lista VIP</button>
          )}
          <button className="bp-intro-skip" onClick={onClose}>Continuar para o site</button>
        </div>
      </div>
    </div>
  );
}

/* ───────────── Pré-Black: barra de aquecimento + lista VIP ───────────── */
function BlackPoolTeaser() {
  const [open, setOpen] = React.useState(false);
  const [joined, setJoined] = React.useState(() => localStorage.getItem("bp-waitlist") === "1");
  const [intro, setIntro] = React.useState(() => sessionStorage.getItem("bp-intro-seen") !== "1");
  const closeIntro = () => { sessionStorage.setItem("bp-intro-seen", "1"); setIntro(false); };
  const c = useCountdown(BP_START);
  return (
    <>
      {intro && <BPIntroModal joined={joined} onClose={closeIntro} onJoin={() => { closeIntro(); setOpen(true); }} />}
      <div className="bp-teaser">
        <div className="bp-teaser-in">
          <span className="bp-teaser-brand">BLACK POOL</span>
          <span className="bp-teaser-txt">começa 01/11 às 12h</span>
          <span className="bp-teaser-clock">{c.d}d {c.h}h {c.m}m {c.s}s</span>
          <button className="bp-teaser-btn" onClick={() => setOpen(true)}>
            {joined ? "Você está na lista ✓" : "Entrar na lista VIP"}
          </button>
        </div>
      </div>
      {open && (
        <BPWaitlistModal
          onClose={() => setOpen(false)}
          onJoined={() => { localStorage.setItem("bp-waitlist", "1"); setJoined(true); }}
        />
      )}
    </>
  );
}

function BPWaitlistModal({ onClose, onJoined }) {
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const valid = name.trim().length > 1 && phone.replace(/\D/g, "").length >= 10;
  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    const msg = `Quero entrar na lista VIP da BLACK POOL.\nNome: ${name.trim()}\nWhatsApp: ${phone.trim()}`;
    window.open(`https://api.whatsapp.com/send?phone=${BP_WHATS_NUMBER}&text=${encodeURIComponent(msg)}`, "_blank", "noopener");
    onJoined();
    setSent(true);
  };
  return (
    <div className="bp-modal-bg" onClick={onClose}>
      <div className="bp-modal" onClick={(e) => e.stopPropagation()}>
        <button className="bp-modal-x" onClick={onClose} aria-label="Fechar">✕</button>
        <div className="bp-modal-brand">BLACK<br /><span>POOL</span></div>
        {sent ? (
          <>
            <p className="bp-modal-lead">Pronto, {name.split(" ")[0]}. Você está na lista.</p>
            <p className="bp-modal-sub">Dia 01/11 às 12h você recebe o aviso no WhatsApp antes de todo mundo.</p>
            <button className="bp-btn bp-btn--violet" onClick={onClose}>Fechar</button>
          </>
        ) : (
          <form onSubmit={submit}>
            <p className="bp-modal-lead">Entre na lista VIP e seja avisado assim que a Black Pool abrir.</p>
            <label className="bp-field">
              <span>Nome</span>
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Seu nome" autoFocus />
            </label>
            <label className="bp-field">
              <span>WhatsApp</span>
              <input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="(11) 99999-9999" inputMode="tel" />
            </label>
            <button className="bp-btn bp-btn--violet" type="submit" disabled={!valid}>Quero entrar na lista</button>
          </form>
        )}
      </div>
    </div>
  );
}


/* ───────────── Checkout Pix em modal (sem sair da página) ───────────── */
const BP_PIX = { API: "https://criptonahora.com", SLUG: "s3vp7a4nr7", PRICE_CENTS: 39999 };
const bpCpfOk = (d) => {
  if (!/^\d{11}$/.test(d) || /^(\d)\1+$/.test(d)) return false;
  const dv = (n) => { let s = 0; for (let i = 0; i < n; i++) s += +d[i] * (n + 1 - i); const r = s % 11; return r < 2 ? 0 : 11 - r; };
  return dv(9) === +d[9] && dv(10) === +d[10];
};
const bpFmtCPF = (v) => v.replace(/\D/g, "").slice(0, 11).replace(/(\d{3})(\d{0,3})(\d{0,3})(\d{0,2})/, (m, a, b, c, e) => a + (b ? "." + b : "") + (c ? "." + c : "") + (e ? "-" + e : ""));
const bpBRL = (c) => "R$ " + (c / 100).toLocaleString("pt-BR", { minimumFractionDigits: 2 });
async function bpApi(path, opts) {
  const r = await fetch(BP_PIX.API + path, opts); let d = {};
  try { d = await r.json(); } catch (e) {}
  if (!r.ok) { const e = new Error(d.detail || "Algo deu errado. Tente de novo."); e.data = d; e.status = r.status; throw e; }
  return d;
}

function BPPixModal({ onClose }) {
  const demo = React.useMemo(() => new URLSearchParams(location.search).has("demo") || /claude|localhost|127\.0\.0\.1/.test(location.hostname) || location.protocol === "file:", []);
  const [step, setStep] = React.useState("form");
  const [f, setF] = React.useState({ name: "", email: "", doc: "" });
  const [errs, setErrs] = React.useState({});
  const [formErr, setFormErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [charge, setCharge] = React.useState(null);
  const [left, setLeft] = React.useState(0);
  const [status, setStatus] = React.useState("Aguardando pagamento…");
  const [review, setReview] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const [price, setPrice] = React.useState(BP_PIX.PRICE_CENTS);
  const touch = React.useMemo(() => window.matchMedia && matchMedia("(pointer: coarse)").matches, []);
  const close = () => { try { sessionStorage.removeItem("bp-pix-live"); } catch (e) {} onClose(); };
  React.useEffect(() => {
    try {
      const s = JSON.parse(sessionStorage.getItem("bp-pix-live") || "null");
      if (s && s.charge && new Date(s.charge.expires_at).getTime() > Date.now()) { setF(s.f); setCharge(s.charge); setStep("qr"); }
    } catch (e) {}
  }, []);
  React.useEffect(() => {
    try {
      if (step === "qr" && charge) sessionStorage.setItem("bp-pix-live", JSON.stringify({ f, charge }));
      else if (step !== "qr") sessionStorage.removeItem("bp-pix-live");
    } catch (e) {}
  }, [step, charge]);

  React.useEffect(() => {
    const k = (e) => e.key === "Escape" && close();
    document.addEventListener("keydown", k);
    const o = document.body.style.overflow; document.body.style.overflow = "hidden";
    if (!demo) bpApi("/api/pagar/" + BP_PIX.SLUG).then((i) => { if (i.amount_cents) setPrice(i.amount_cents); if (i.active === false) setStep("off"); }).catch(() => {});
    return () => { document.removeEventListener("keydown", k); document.body.style.overflow = o; };
  }, []);

  React.useEffect(() => {
    if (step !== "qr" || !charge) return;
    const end = new Date(charge.expires_at).getTime();
    const tick = () => setLeft(Math.max(0, Math.round((end - Date.now()) / 1000)));
    tick();
    const cd = setInterval(tick, 1000);
    let poll = null;
    if (charge.demo) { poll = setTimeout(() => setStep("paid"), 7000); return () => { clearInterval(cd); clearTimeout(poll); }; }
    const check = async () => {
      try {
        const d = await bpApi("/api/pagar/status/" + encodeURIComponent(charge.cashin_id));
        if (d.paid) return setStep("paid");
        if (d.status === "under_review") { setReview(true); setStatus("Pagamento recebido, em análise. Não pague de novo."); return; }
        if (d.refund_reason === "PAYER_MISMATCH") { setStatus("O Pix saiu de outro CPF e foi devolvido."); setStep("again"); }
        else if (["expired", "failed", "refunded"].includes(d.status)) { setStatus(d.status === "expired" ? "O QR expirou." : "Pagamento não concluído."); setStep("again"); }
      } catch (e) {}
    };
    const vis = () => { if (document.visibilityState === "visible") { tick(); check(); } };
    document.addEventListener("visibilitychange", vis);
    window.addEventListener("pageshow", vis);
    check(); poll = setInterval(check, 3000);
    return () => { clearInterval(cd); clearInterval(poll); document.removeEventListener("visibilitychange", vis); window.removeEventListener("pageshow", vis); };
  }, [step, charge]);

  React.useEffect(() => {
    if (step === "qr" && charge && !review && left === 0 && new Date(charge.expires_at).getTime() < Date.now()) { setStatus("O QR expirou."); setStep("again"); }
  }, [left]);

  React.useEffect(() => { if (step === "paid") { try { navigator.vibrate && navigator.vibrate([120, 60, 120]); } catch (e) {} } }, [step]);

  const set = (k) => (e) => { const v = k === "doc" ? bpFmtCPF(e.target.value) : e.target.value; setF((s) => ({ ...s, [k]: v })); setErrs((s) => ({ ...s, [k]: "" })); };
  const submit = async (e) => {
    e.preventDefault(); setFormErr("");
    const name = f.name.trim().replace(/\s+/g, " "), email = f.email.trim(), doc = f.doc.replace(/\D/g, "");
    const er = {};
    if (name.split(" ").length < 2 || name.length < 5) er.name = "Digite seu nome completo.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) er.email = "Digite um e-mail válido.";
    if (!bpCpfOk(doc)) er.doc = doc.length !== 11 ? "Digite os 11 números do CPF." : "CPF inválido. Confira os números.";
    setErrs(er); if (Object.keys(er).length) return;
    setBusy(true);
    try {
      let c;
      if (demo) { await new Promise((r) => setTimeout(r, 900)); c = { cashin_id: "demo-" + Date.now(), qr_copypaste: "00020126580014br.gov.bcb.pix0136demo-black-pool-metodo-ddp5204000053039865406399.995802BR", expires_at: new Date(Date.now() + 15 * 60000).toISOString(), demo: true }; }
      else c = await bpApi("/api/pagar/" + BP_PIX.SLUG + "/cobrar", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ payer_name: name, payer_email: email, payer_tax_number: doc }) });
      setCharge(c); setReview(false); setStatus("Aguardando pagamento…"); setStep("qr");
    } catch (e) {
      const map = { name: "name", email: "email", doc: "doc" };
      if (e.data && map[e.data.field]) setErrs({ [map[e.data.field]]: e.message });
      else if (e instanceof TypeError) setStep("error");
      else setFormErr(e.message);
    } finally { setBusy(false); }
  };
  const copy = async () => {
    const t = charge.qr_copypaste; let ok = false;
    try { await navigator.clipboard.writeText(t); ok = true; } catch (e) {}
    if (!ok) { try { const a = document.createElement("textarea"); a.value = t; a.setAttribute("readonly", ""); a.style.cssText = "position:fixed;top:0;left:0;opacity:0;font-size:16px"; document.body.appendChild(a); a.select(); a.setSelectionRange(0, t.length); ok = document.execCommand("copy"); a.remove(); } catch (e) {} }
    if (ok) { setCopied(true); setTimeout(() => setCopied(false), 2500); }
  };
  const ref = charge ? String(charge.cashin_id).slice(-8).toUpperCase() : "";
  const wpp = "https://api.whatsapp.com/send?phone=" + BP_WHATS_NUMBER + "&text=" + encodeURIComponent("Olá Zulu! Acabei de pagar a Black Pool no Pix.\nNome: " + f.name.trim() + "\nPedido: " + ref + "\nQuero meu acesso e o código da aula individual.");
  const mm = String(Math.floor(left / 60)).padStart(2, "0"), ss = String(left % 60).padStart(2, "0");
  const dots = ["form", "qr", "paid"].indexOf(step === "again" ? "qr" : step);

  return (
    <div className="bp-modal-bg bp-pix-bg" onClick={close}>
      <div className="bp-modal bp-pix" onClick={(e) => e.stopPropagation()} role="dialog" aria-label="Pagar no Pix">
        <button className="bp-modal-x" onClick={close} aria-label="Fechar">✕</button>
        {demo && <div className="bp-pix-demo">Demonstração · nenhum Pix real é gerado</div>}
        {dots >= 0 && <div className="bp-pix-steps"><i className="on"></i><i className={dots >= 1 ? "on" : ""}></i><i className={dots >= 2 ? "on" : ""}></i></div>}

        {step === "form" && (
          <form onSubmit={submit} noValidate>
            <h3 className="bp-pix-h">PAGAR NO <span>PIX</span></h3>
            <div className="bp-pix-total"><span>Black Pool · Método DDP</span><b>{bpBRL(price)}</b></div>
            <label className={"bp-field" + (errs.name ? " bad" : "")}><span>Nome completo</span><input value={f.name} onChange={set("name")} placeholder="Seu nome" autoComplete="name" autoCapitalize="words" enterKeyHint="next" maxLength={80} autoFocus={!touch} />{errs.name && <em>{errs.name}</em>}</label>
            <label className={"bp-field" + (errs.email ? " bad" : "")}><span>E-mail</span><input value={f.email} onChange={set("email")} placeholder="voce@email.com" type="email" inputMode="email" autoComplete="email" autoCapitalize="off" autoCorrect="off" spellCheck={false} enterKeyHint="next" maxLength={254} />{errs.email && <em>{errs.email}</em>}</label>
            <label className={"bp-field" + (errs.doc ? " bad" : "")}><span>CPF</span><input value={f.doc} onChange={set("doc")} placeholder="000.000.000-00" inputMode="numeric" pattern="[0-9.\-]*" autoComplete="off" enterKeyHint="go" maxLength={14} />{errs.doc && <em>{errs.doc}</em>}</label>
            <p className="bp-pix-note">O Pix precisa sair de uma <b>conta no seu CPF</b>. Se outra pessoa pagar, o valor volta para ela.</p>
            {formErr && <p className="bp-pix-err">{formErr}</p>}
            <button className="bp-btn bp-btn--violet" type="submit" disabled={busy}>{busy ? "Gerando Pix…" : "Gerar Pix de " + bpBRL(price)}</button>
          </form>
        )}

        {(step === "qr" || step === "again") && charge && (
          <div className="bp-pix-qr">
            <h3 className="bp-pix-h">{touch ? <>COPIE <span>E PAGUE</span></> : <>ESCANEIE <span>E PAGUE</span></>}</h3>
            {step === "qr" && touch && (
              <>
                <p className="bp-pix-hint" style={{ margin: "-6px 0 2px" }}>Pagando pelo celular? Copie o código e cole no app do banco em <b>Pix Copia e Cola</b>.</p>
                <button className="bp-btn bp-btn--violet bp-pix-copy" onClick={copy}>{copied ? "Código copiado ✓ Agora abra o banco" : "Copiar código Pix"}</button>
              </>
            )}
            <div className={"bp-pix-qrimg" + (touch ? " sm" : "")}>{charge.qr_image_url ? <img src={charge.qr_image_url} alt="QR Code do Pix" /> : <span>QR CODE<br />(demonstração)</span>}</div>
            <div className="bp-pix-st">{step === "qr" && !review && <i></i>}<span>{status}</span></div>
            {step === "qr" && !review && <div className="bp-pix-cd">{left ? "Expira em " + mm + ":" + ss : ""}</div>}
            {step === "qr" ? (
              <>
                <div className="bp-pix-code">{charge.qr_copypaste}</div>
                {!touch && <button className="bp-btn bp-btn--violet" onClick={copy}>{copied ? "Código copiado ✓" : "Copiar código Pix"}</button>}
                <p className="bp-pix-hint">{touch ? "Depois de pagar, volte para esta tela: ela confirma sozinha." : <>Abra o app do banco → Pix → <b>Copia e Cola</b>. Esta tela confirma sozinha quando o pagamento cair.</>}</p>
              </>
            ) : (
              <button className="bp-btn bp-btn--violet" onClick={() => { setCharge(null); setStep("form"); }}>Gerar um novo Pix</button>
            )}
          </div>
        )}

        {step === "paid" && (
          <div className="bp-pix-paid">
            <div className="bp-pix-ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12.5 4.5 4.5L19 7.5" /></svg></div>
            <h3 className="bp-pix-h">PAGAMENTO <span>CONFIRMADO</span></h3>
            <p className="bp-modal-sub" style={{ margin: "0 0 6px" }}>Bem-vindo à Black Pool! Chame no WhatsApp para receber seu acesso e o <b>código da aula individual</b>.</p>
            <p className="bp-pix-ref">Pedido {ref}</p>
            <a className="bp-btn bp-btn--wpp" href={wpp} target="_blank" rel="noopener">Receber acesso no WhatsApp</a>
          </div>
        )}

        {step === "error" && (
          <div className="bp-pix-paid">
            <h3 className="bp-pix-h">NÃO DEU PARA <span>GERAR O PIX</span></h3>
            <p className="bp-modal-sub" style={{ margin: "0 0 18px" }}>O sistema de pagamento não respondeu. Tente de novo ou fale comigo no WhatsApp.</p>
            <button className="bp-btn bp-btn--violet" onClick={() => setStep("form")}>Tentar de novo</button>
            <a className="bp-btn bp-btn--ghost" href={"https://api.whatsapp.com/send?phone=" + BP_WHATS_NUMBER + "&text=" + encodeURIComponent("Olá! Quero pagar a Black Pool no Pix.")} target="_blank" rel="noopener">Falar no WhatsApp</a>
          </div>
        )}

        {step === "off" && (
          <div className="bp-pix-paid">
            <h3 className="bp-pix-h">PIX <span>PAUSADO</span></h3>
            <p className="bp-modal-sub" style={{ margin: "0 0 18px" }}>O pagamento está pausado no momento. Fale comigo no WhatsApp.</p>
            <a className="bp-btn bp-btn--wpp" href={"https://api.whatsapp.com/send?phone=" + BP_WHATS_NUMBER} target="_blank" rel="noopener">Falar no WhatsApp</a>
          </div>
        )}
      </div>
    </div>
  );
}

/* ───────────── Black ativa: página BLACK POOL ───────────── */
function BlackPoolPage({ phase = "on" }) {
  const pre = phase === "pre";
  const target = pre ? BP_START : BP_END;
  const [waitOpen, setWaitOpen] = React.useState(false);
  const [pixOpen, setPixOpen] = React.useState(false);
  const [joined, setJoined] = React.useState(() => localStorage.getItem("bp-waitlist") === "1");
  const [intro, setIntro] = React.useState(() => pre && sessionStorage.getItem("bp-intro-seen") !== "1");
  const closeIntro = () => { sessionStorage.setItem("bp-intro-seen", "1"); setIntro(false); };
  const openWait = () => setWaitOpen(true);
  const WaitBtn = ({ cls = "bp-btn bp-btn--violet", label = "Entrar na lista VIP" }) => (
    joined ? <span className="bp-joined">Você está na lista VIP ✓</span>
           : <button className={cls} onClick={openWait}>{label}</button>
  );
  const included = [
    "Método DDP completo — 7 módulos, do zero ao avançado",
    "Acesso vitalício ao conteúdo gravado",
    "Grupo VIP no WhatsApp",
    "Reunião ao vivo sobre pool de liquidez todo sábado, 9h",
  ];
  const ticker = pre
    ? ["BLACK POOL", "COMEÇA 01/11 ÀS 12H", "AULA INDIVIDUAL", "LISTA VIP ABERTA"]
    : ["BLACK POOL", "AULA INDIVIDUAL", "R$ 399,99 NO PIX OU USDT", "ATÉ 30/11 ÀS 20H"];
  const tickerRow = [...ticker, ...ticker, ...ticker, ...ticker];

  return (
    <div className="bp">
      {intro && <BPIntroModal joined={joined} onClose={closeIntro} onJoin={() => { closeIntro(); openWait(); }} />}
      {waitOpen && (
        <BPWaitlistModal
          onClose={() => setWaitOpen(false)}
          onJoined={() => { localStorage.setItem("bp-waitlist", "1"); setJoined(true); }}
        />
      )}
      <div className="bp-topbar">
        <span className="bp-topbar-brand">BLACK POOL</span>
        <span className="bp-topbar-txt">{pre ? "começa 01/11 às 12h" : "termina 30/11 às 20h"}</span>
        <BPCountdown target={target} size="sm" />
      </div>

      <section className="bp-hero">
        <div className="bp-hero-grid">
          <div className="bp-hero-copy">
            <p className="bp-kicker">{pre ? "Vem aí · Método DDP · 01/11 — 30/11" : "Método DDP · 01/11 — 30/11"}</p>
            <h1 className="bp-word">
              <span>BLACK</span>
              <span className="violet">POOL</span>
            </h1>
            <p className="bp-lead">
              {pre ? "De 01/11 a 30/11, quem" : "Quem"} entrar no Método DDP durante a Black Pool recebe uma <strong>aula individual comigo</strong>, no Meet, sobre pool de liquidez.
            </p>
            <div className="bp-hero-ctas">
              <WaitBtn />
              <span className="bp-hero-price">a partir de <strong>R$ 399,99</strong> no Pix</span>
            </div>
            {pre && (
              <div className="bp-hero-count">
                <span className="bp-intro-count-l">Abre em</span>
                <BPCountdown target={BP_START} size="lg" />
              </div>
            )}
          </div>
          <div className="bp-hero-photo">
            <img src="chatgpt_image_27_de_mar-_de_2026__10_16_-muz1dcze-cv0e.png" alt="Zulu Martimiano" />
            <span className="bp-photo-tag">Zulu Martimiano</span>
          </div>
        </div>
      </section>

      <div className="bp-ticker" aria-hidden="true">
        <div className="bp-ticker-track">
          {tickerRow.map((t, i) => (
            <span key={i}>{t}<i>✦</i></span>
          ))}
        </div>
      </div>

      <section className="bp-oneone">
        <p className="bp-kicker">Só na Black Pool</p>
        <div className="bp-ones">
          <div><span className="n">1</span><span className="l">aluno</span></div>
          <div><span className="n">1</span><span className="l">hora</span></div>
          <div><span className="n">1</span><span className="l">Meet comigo</span></div>
        </div>
        <p className="bp-oneone-txt">
          Todo aluno que comprar na Black Pool ganha uma aula individual sobre pool de liquidez. Só você e eu, no Google Meet, olhando para a sua pool.
        </p>
      </section>

      <section className="bp-offer" id="bp-oferta">
        <div className="bp-offer-head">
          <p className="bp-kicker">A oferta</p>
          <h2>Tudo do Método DDP<br /><span className="violet">+ aula individual</span></h2>
        </div>

        <ul className="bp-included">
          {included.map((t, i) => (
            <li key={i}><Check /> <span>{t}</span></li>
          ))}
          <li className="bp-included-star"><span className="star">★</span> <span>Aula individual comigo no Meet — <strong>exclusivo Black Pool</strong></span></li>
        </ul>

        <div className="bp-prices">
          <div className="bp-price">
            <p className="bp-price-name">Cartão</p>
            <p className="bp-price-from">De R$ 597,99</p>
            <p className="bp-price-big">R$ 539</p>
            <p className="bp-price-terms">ou 12x de R$ 53,00</p>
            <WaitBtn cls="bp-btn bp-btn--white" label={pre ? "Avise-me em 01/11" : "Entrar na lista VIP"} />
          </div>
          <div className="bp-price bp-price--hot">
            <span className="bp-price-flag">Melhor preço</span>
            <p className="bp-price-name">Pix ou USDT</p>
            <p className="bp-price-from">De R$ 597,99</p>
            <p className="bp-price-big">R$ 399,99</p>
            <p className="bp-price-terms">à vista</p>
            {pre ? <WaitBtn label="Avise-me em 01/11" /> : <button className="bp-btn bp-btn--violet" onClick={() => setPixOpen(true)}>Pagar no Pix · R$ 399,99</button>}
          </div>
        </div>
        <p className="bp-guarantee">{pre ? "Compra liberada dia 01/11 às 12h. Quem está na lista VIP recebe o aviso primeiro." : "Garantia de 7 dias — 100% do dinheiro de volta."}</p>
      </section>

      <div className="bp-proof">
        <SocialProof />
      </div>

      <section className="bp-final">
        <h2 className="bp-word bp-word--sm"><span>A BLACK POOL</span><span className="violet">{pre ? "COMEÇA EM" : "ACABA EM"}</span></h2>
        <BPCountdown target={target} size="lg" />
        <WaitBtn cls="bp-btn bp-btn--violet bp-btn--xl" label="Entrar na lista VIP" />
        <p className="bp-final-note">{pre ? "01/11 às 12h · até 30/11 às 20h" : "30/11 às 20h a aula individual sai da oferta."}</p>
      </section>

      <Footer />
      <WhatsAppFAB />
      {pixOpen && <BPPixModal onClose={() => setPixOpen(false)} />}
    </div>
  );
}