/* global React, SEQ_UI */
const { brl, Avatar } = window.SEQ_UI;

// Página standalone de checkout — o que o CLIENTE vê quando clica num link sequencia.app/c/...
// Estética sequência viral, sem sidebar, focada em conversão.

function getCheckoutSlug() {
  const h = window.location.hash || "";
  const q = h.split("?")[1];
  if (!q) return null;
  return new URLSearchParams(q).get("slug");
}

function CheckoutPublic() {
  const [method, setMethod] = React.useState("pix");
  const [bumps, setBumps] = React.useState({ b1: false, b2: false });
  const [step, setStep] = React.useState("form"); // form | confirm | success
  const [timer, setTimer] = React.useState(14 * 60 + 23);
  const [recent, setRecent] = React.useState(0);
  const [productData, setProductData] = React.useState(null);

  React.useEffect(() => {
    const id = setInterval(() => setTimer(t => Math.max(0, t-1)), 1000);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => {
    const id = setInterval(() => setRecent(r => (r+1)%4), 4200);
    return () => clearInterval(id);
  }, []);

  // Tenta carregar produto real via slug do checkout — ou pega o primeiro produto ativo
  React.useEffect(() => {
    const slug = getCheckoutSlug();
    if (slug) {
      fetch(`/api/checkouts?slug=${slug}`).then(r => r.json()).then(d => {
        const link = (d.checkouts || []).find(c => c.link?.publicSlug === slug);
        if (link?.product) setProductData({ nome: link.product.name, base: (link.product.price || 0) / 100 });
      }).catch(() => {});
    } else {
      // Fallback: pega primeiro produto ativo
      window.SEQ_API.listProducts()
        .then(d => {
          const p = (d.products || []).find(x => x.status === "active");
          if (p) setProductData({ nome: p.name, base: (p.price || 0) / 100 });
        })
        .catch(() => {});
    }
  }, []);

  const product = productData || { nome: "Mentoria 1:1 · Plano mensal", base: 1200 };
  const BUMPS = [
    { id: "b1", t: "Sessão de bônus extra (45min)", p: 290, c: "var(--kp-pink-soft)" },
    { id: "b2", t: "Acesso vitalício ao curso Sequência Viral", p: 490, c: "var(--kp-green)" },
  ];
  const bumpsTotal = BUMPS.filter(b => bumps[b.id]).reduce((s,b)=>s+b.p,0);
  const discount = method === "pix" ? 0.05 : method === "boleto" ? 0.03 : method === "crypto" ? 0.07 : 0;
  const subtotal = product.base + bumpsTotal;
  const total = subtotal * (1 - discount);

  const recents = [
    { n: "Marina V.", w: "São Paulo", a: "há 4min" },
    { n: "André S.", w: "Curitiba", a: "há 12min" },
    { n: "Helena K.", w: "Florianópolis", a: "há 28min" },
    { n: "Lucas H.", w: "Rio de Janeiro", a: "há 1h" },
  ];

  const fmt = (s) => `${String(Math.floor(s/60)).padStart(2,"0")}:${String(s%60).padStart(2,"0")}`;

  if (step === "success") {
    return <SuccessPage product={product.nome} total={total} method={method}/>;
  }

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)", fontFamily: "var(--kp-sans)" }}>
      {/* Top urgency bar */}
      <div style={{ background: "var(--kp-ink)", color: "var(--kp-paper)", padding: "10px 20px", display: "flex", alignItems: "center", justifyContent: "center", gap: 14, flexWrap: "wrap", fontSize: 12 }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          <span className="kp-dot" style={{ background: "var(--kp-green)" }}/>
          <span style={{ fontFamily: "var(--kp-mono)", letterSpacing: "0.16em", textTransform: "uppercase", fontSize: 10 }}>RESERVA SEGURA</span>
        </span>
        <span style={{ color: "rgba(247,241,232,0.7)" }}>•</span>
        <span>Sua vaga expira em <strong className="kp-mono" style={{ background: "var(--kp-pink)", color: "var(--kp-ink)", padding: "2px 8px", marginLeft: 4 }}>{fmt(timer)}</strong></span>
      </div>

      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "32px 22px 80px" }}>
        {/* Brand minimal */}
        <div style={{ marginBottom: 24, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div className="kp-display" style={{ fontSize: 24, lineHeight: 1 }}>Sequência<em style={{ color: "var(--kp-pink)" }}>·</em></div>
            <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--kp-muted)", marginTop: 2 }}>CHECKOUT SEGURO · SSL · BACEN</div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 11, color: "var(--kp-muted)" }}>
            <span className="kp-mono" style={{ letterSpacing: "0.16em" }}>VENDIDO POR</span>
            <Avatar initials="DK" size={28} bg="var(--kp-pink)"/>
            <span style={{ fontWeight: 500, color: "var(--kp-ink)" }}>Diogo Krieger</span>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 24 }}>
          {/* LEFT — form */}
          <div>
            {/* Hero */}
            <div className="kp-card" style={{ padding: 26, marginBottom: 18, background: "var(--kp-pink-soft)" }}>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>VOCÊ ESTÁ COMPRANDO</div>
              <h1 className="kp-display" style={{ fontSize: "clamp(36px,4vw,52px)", lineHeight: 1.05, margin: "8px 0 0" }}>
                {product.nome.split(" · ")[0]} <em style={{ fontStyle: "italic" }}>{product.nome.split(" · ")[1] || ""}</em>
              </h1>
              <div style={{ marginTop: 14, display: "flex", gap: 8, flexWrap: "wrap" }}>
                <Chip>✓ Sessão semanal de 60min</Chip>
                <Chip>✓ Material exclusivo Sequência</Chip>
                <Chip>✓ Acesso ao grupo VIP</Chip>
                <Chip>✓ Garantia 7 dias</Chip>
              </div>
            </div>

            {/* Recent activity floating */}
            <div className="kp-card" style={{ padding: 14, marginBottom: 18, background: "var(--kp-ink)", color: "var(--kp-paper)", display: "flex", alignItems: "center", gap: 12 }}>
              <span className="kp-dot" style={{ background: "var(--kp-green)" }}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "rgba(247,241,232,0.5)" }}>ATIVIDADE RECENTE</div>
                <div style={{ fontSize: 13, marginTop: 2, transition: "opacity .3s" }} key={recent}>
                  <strong>{recents[recent].n}</strong> de {recents[recent].w} comprou <span style={{ color: "rgba(247,241,232,0.6)" }}>{recents[recent].a}</span>
                </div>
              </div>
              <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-green)" }}>62 ESTE MÊS</span>
            </div>

            {/* Step 1 — Identificação */}
            <SectionNum n="01" t="Quem é você"/>
            <div className="kp-card" style={{ padding: 20, marginBottom: 18 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <PubField label="Nome completo" placeholder="Seu nome"/>
                <PubField label="Email" type="email" placeholder="você@email.com"/>
                <PubField label="CPF/CNPJ" placeholder="000.000.000-00"/>
                <PubField label="Celular" placeholder="(11) 90000-0000"/>
              </div>
            </div>

            {/* Step 2 — Order bumps */}
            <SectionNum n="02" t="Adicione ao pedido" sub="opcional"/>
            <div style={{ display: "grid", gap: 10, marginBottom: 18 }}>
              {BUMPS.map(b => (
                <button key={b.id} onClick={()=>setBumps(s=>({...s,[b.id]:!s[b.id]}))} className="kp-card" style={{
                  padding: 16, textAlign: "left", border: "1.5px solid var(--kp-ink)",
                  background: bumps[b.id] ? b.c : "var(--kp-white)",
                  boxShadow: bumps[b.id] ? "4px 4px 0 0 var(--kp-ink)" : "2px 2px 0 0 var(--kp-ink)",
                  cursor: "pointer", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center",
                }}>
                  <span style={{ width: 22, height: 22, border: "1.5px solid var(--kp-ink)", background: bumps[b.id] ? "var(--kp-ink)" : "var(--kp-white)", color: "var(--kp-paper)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }}>{bumps[b.id] ? "✓" : ""}</span>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>{b.t}</div>
                    <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)", marginTop: 2 }}>OFERTA EXCLUSIVA NESTE CHECKOUT</div>
                  </div>
                  <span className="kp-display" style={{ fontSize: 22, fontStyle: "italic" }}>+ {brl(b.p)}</span>
                </button>
              ))}
            </div>

            {/* Step 3 — Métodos */}
            <SectionNum n="03" t="Como vai pagar"/>
            <div className="kp-card" style={{ padding: 20, marginBottom: 18 }}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8 }}>
                {[
                  { k: "pix", l: "PIX", b: "−5%", c: "var(--kp-green)" },
                  { k: "card", l: "Cartão", b: "até 12×", c: "var(--kp-cold)" },
                  { k: "boleto", l: "Boleto", b: "−3%", c: "var(--kp-soft)" },
                  { k: "crypto", l: "Cripto", b: "−7%", c: "var(--kp-ink)" },
                ].map(m => {
                  const on = method === m.k;
                  return (
                    <button key={m.k} onClick={()=>setMethod(m.k)} style={{
                      padding: "14px 10px", border: "1.5px solid var(--kp-ink)",
                      background: on ? m.c : "var(--kp-white)",
                      color: on && m.k === "crypto" ? "var(--kp-paper)" : "var(--kp-ink)",
                      cursor: "pointer", textAlign: "left",
                      boxShadow: on ? "3px 3px 0 0 var(--kp-ink)" : "none",
                    }}>
                      <div className="kp-display" style={{ fontSize: 18, fontStyle: "italic" }}>{m.l}</div>
                      <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", marginTop: 4, color: on && m.k === "crypto" ? "var(--kp-green)" : on ? "var(--kp-ink)" : "var(--kp-muted)" }}>{m.b}</div>
                    </button>
                  );
                })}
              </div>

              {/* Method-specific UI */}
              <div style={{ marginTop: 16 }}>
                {method === "pix" && (
                  <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, padding: 14, background: "var(--kp-soft)", border: "1.5px solid var(--kp-ink)", alignItems: "center" }}>
                    <QRPlaceholder/>
                    <div>
                      <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>QR PIX · CHAVE</div>
                      <code style={{ fontFamily: "var(--kp-mono)", fontSize: 11, wordBreak: "break-all", display: "block", marginTop: 4 }}>00020126580014BR.GOV.BCB.PIX0136…f4d2-4a8b-9c5e-1f2a3b4c5d6e</code>
                      <div style={{ fontSize: 12, color: "var(--kp-muted)", marginTop: 6 }}>Pagamento confirma automaticamente em ~5 segundos</div>
                    </div>
                  </div>
                )}
                {method === "card" && (
                  <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 10 }}>
                    <PubField label="Número do cartão" placeholder="0000 0000 0000 0000"/>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
                      <PubField label="Validade" placeholder="MM/AA"/>
                      <PubField label="CVV" placeholder="123"/>
                      <PubField label="Parcelas" select={["1×", "2×", "3×", "6×", "12×"]}/>
                    </div>
                    <PubField label="Nome no cartão" placeholder="Como está no cartão"/>
                  </div>
                )}
                {method === "boleto" && (
                  <div style={{ padding: 14, background: "var(--kp-soft)", border: "1.5px solid var(--kp-ink)" }}>
                    <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>BOLETO BANCÁRIO</div>
                    <p style={{ fontSize: 13, margin: "6px 0 0" }}>Geramos seu boleto após confirmar. Vencimento em 3 dias úteis. Compensação em até 2 dias após pagamento.</p>
                  </div>
                )}
                {method === "crypto" && <CryptoPanel total={total}/>}
              </div>
            </div>

            {/* Garantia */}
            <div className="kp-card" style={{ padding: 18, marginBottom: 18, background: "var(--kp-green)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "center" }}>
              <div style={{ width: 56, height: 56, background: "var(--kp-white)", border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z" stroke="var(--kp-ink)" strokeWidth="1.5" strokeLinejoin="round"/><path d="M9 12l2 2 4-4" stroke="var(--kp-ink)" strokeWidth="1.5" strokeLinecap="round"/></svg>
              </div>
              <div>
                <div className="kp-display" style={{ fontSize: 22, lineHeight: 1.1 }}>Garantia incondicional de <em>7 dias</em></div>
                <div style={{ fontSize: 12.5, marginTop: 4 }}>Se em 7 dias você não estiver satisfeito, devolvemos 100% sem perguntas. Risco zero, sequência total.</div>
              </div>
            </div>
          </div>

          {/* RIGHT — sticky summary */}
          <div>
            <div style={{ position: "sticky", top: 20 }}>
              <div className="kp-card" style={{ padding: 22, background: "var(--kp-white)", boxShadow: "6px 6px 0 0 var(--kp-pink)" }}>
                <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>RESUMO</div>
                <div style={{ marginTop: 14, display: "grid", gap: 10 }}>
                  <Row l={product.nome} r={brl(product.base)}/>
                  {BUMPS.filter(b => bumps[b.id]).map(b => (
                    <Row key={b.id} l={b.t} r={"+ " + brl(b.p)} small/>
                  ))}
                  <div style={{ borderTop: "1px solid rgba(10,10,10,0.15)", paddingTop: 10 }}>
                    <Row l="Subtotal" r={brl(subtotal)} muted/>
                    {discount > 0 && <Row l={`Desconto ${method.toUpperCase()}`} r={"− " + brl(subtotal*discount)} accent/>}
                  </div>
                </div>
                <div style={{ marginTop: 14, padding: 14, background: "var(--kp-pink-soft)", border: "1.5px solid var(--kp-ink)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                  <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.2em" }}>TOTAL</span>
                  <span className="kp-display" style={{ fontSize: 38, fontStyle: "italic" }}>{brl(total)}</span>
                </div>
                <button onClick={()=>setStep("success")} className="kp-btn kp-btn-ink" style={{ width: "100%", marginTop: 14, padding: "16px 18px", fontSize: 12, boxShadow: "4px 4px 0 0 var(--kp-green)" }}>
                  Pagar {brl(total)} agora →
                </button>
                <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 10.5, color: "var(--kp-muted)" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>🔒 SSL 256-bit</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>✓ Aprovado BACEN</span>
                </div>
              </div>

              {/* Trust pile */}
              <div className="kp-card" style={{ padding: 18, marginTop: 14, background: "var(--kp-soft)" }}>
                <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>QUEM JÁ COMPROU</div>
                <div style={{ display: "flex", gap: -8, marginTop: 10 }}>
                  {["MV","AS","HK","LH","RT","JP"].map((i,k) => (
                    <span key={k} style={{ width: 30, height: 30, marginLeft: k === 0 ? 0 : -8, background: ["var(--kp-pink)","var(--kp-green)","var(--kp-cold)","var(--kp-yellow)","var(--kp-warm)","var(--kp-pink-soft)"][k], border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontSize: 11, fontStyle: "italic" }}>{i}</span>
                  ))}
                </div>
                <div style={{ fontSize: 12, marginTop: 10 }}><strong>+ 268 pessoas</strong> compraram este produto. Avaliação média <strong>4.9/5</strong>.</div>
              </div>

              {/* Mini FAQ */}
              <FAQ/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Chip({ children }) {
  return <span style={{ padding: "6px 10px", background: "var(--kp-white)", border: "1.5px solid var(--kp-ink)", fontSize: 11.5, fontWeight: 500 }}>{children}</span>;
}
function SectionNum({ n, t, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 12 }}>
      <span className="kp-display" style={{ fontSize: 28, fontStyle: "italic", color: "var(--kp-pink)", lineHeight: 1 }}>{n}</span>
      <h2 className="kp-display" style={{ fontSize: 24, lineHeight: 1, margin: 0 }}>{t}</h2>
      {sub && <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)" }}>· {sub}</span>}
    </div>
  );
}
function PubField({ label, placeholder, type = "text", select }) {
  return (
    <label style={{ display: "block" }}>
      <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{label.toUpperCase()}</span>
      {select ? (
        <select className="kp-input" style={{ marginTop: 5 }}>{select.map(o => <option key={o}>{o}</option>)}</select>
      ) : (
        <input className="kp-input" type={type} placeholder={placeholder} style={{ marginTop: 5 }}/>
      )}
    </label>
  );
}
function Row({ l, r, small, muted, accent }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 10, fontSize: small ? 11.5 : 13, color: muted ? "var(--kp-muted)" : accent ? "var(--kp-pink)" : "var(--kp-ink)" }}>
      <span style={{ flex: 1 }}>{l}</span>
      <span className="kp-mono" style={{ fontSize: small ? 10 : 11, letterSpacing: "0.14em" }}>{r}</span>
    </div>
  );
}
function QRPlaceholder() {
  return (
    <div style={{ width: 100, height: 100, background: "var(--kp-white)", border: "1.5px solid var(--kp-ink)", display: "grid", gridTemplateColumns: "repeat(8,1fr)", gridTemplateRows: "repeat(8,1fr)" }}>
      {Array.from({length:64}).map((_,i)=> (
        <span key={i} style={{ background: (i*7+i*i)%3 === 0 ? "var(--kp-ink)" : "transparent" }}/>
      ))}
    </div>
  );
}
function CryptoPanel({ total }) {
  const [coin, setCoin] = React.useState("BTC");
  const rates = { BTC: 380000, USDT: 5.05, ETH: 18900 };
  const amount = (total / rates[coin]).toFixed(coin === "USDT" ? 2 : 6);
  const addrs = { BTC: "bc1q9k7g2x4hj8l3m5n6p2q9r8s7t4u5v6w7x8y9z", USDT: "TXa9k2L7MqB8VnF3sR6tY1uW4eP5oI8dC2", ETH: "0x9F4a8B2C7e3D5f1A6b9C8d7E4f2A1b5C8d9E3F2a" };
  return (
    <div style={{ padding: 14, background: "var(--kp-ink)", color: "var(--kp-paper)", border: "1.5px solid var(--kp-ink)" }}>
      <div style={{ display: "flex", gap: 6 }}>
        {["BTC","USDT","ETH"].map(c => (
          <button key={c} onClick={()=>setCoin(c)} style={{
            padding: "6px 12px", border: "1.5px solid var(--kp-paper)", cursor: "pointer",
            background: coin === c ? "var(--kp-green)" : "transparent",
            color: coin === c ? "var(--kp-ink)" : "var(--kp-paper)",
            fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em",
          }}>{c}</button>
        ))}
      </div>
      <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "center" }}>
        <QRPlaceholder/>
        <div>
          <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "rgba(247,241,232,0.55)" }}>VALOR EM {coin}</div>
          <div className="kp-display" style={{ fontSize: 26, fontStyle: "italic", marginTop: 4 }}>{amount} {coin}</div>
          <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "rgba(247,241,232,0.55)", marginTop: 10 }}>ENDEREÇO ON-CHAIN</div>
          <code style={{ display: "block", padding: "6px 8px", background: "rgba(247,241,232,0.08)", marginTop: 4, fontFamily: "var(--kp-mono)", fontSize: 10.5, wordBreak: "break-all", color: "var(--kp-green)" }}>{addrs[coin]}</code>
        </div>
      </div>
    </div>
  );
}
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "É seguro pagar?", a: "Sim. Usamos criptografia SSL 256-bit, somos aprovados pelo BACEN e seus dados nunca são armazenados em nossos servidores." },
    { q: "Quando recebo o acesso?", a: "Imediato após a confirmação do pagamento. PIX em ~5s, cartão na hora, boleto em até 2 dias." },
    { q: "Posso cancelar?", a: "Pode, a qualquer momento. E nos primeiros 7 dias devolvemos 100% incondicionalmente." },
  ];
  return (
    <div className="kp-card" style={{ padding: 0, marginTop: 14 }}>
      <div style={{ padding: "12px 18px", borderBottom: "1.5px solid var(--kp-ink)" }}>
        <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>DÚVIDAS FREQUENTES</span>
      </div>
      {items.map((it,i) => (
        <div key={i} style={{ borderBottom: i === items.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
          <button onClick={()=>setOpen(open === i ? -1 : i)} style={{ width: "100%", padding: "12px 18px", background: "transparent", border: "none", textAlign: "left", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: 13, fontWeight: 500 }}>{it.q}</span>
            <span style={{ fontFamily: "var(--kp-display)", fontSize: 20, fontStyle: "italic", color: "var(--kp-pink)" }}>{open === i ? "−" : "+"}</span>
          </button>
          {open === i && <div style={{ padding: "0 18px 14px", fontSize: 12.5, color: "var(--kp-muted)", lineHeight: 1.5 }}>{it.a}</div>}
        </div>
      ))}
    </div>
  );
}

function SuccessPage({ product, total, method }) {
  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-green)", display: "flex", alignItems: "center", justifyContent: "center", padding: 22 }}>
      <div className="kp-card" style={{ maxWidth: 560, width: "100%", padding: 36, background: "var(--kp-paper)", boxShadow: "8px 8px 0 0 var(--kp-ink)" }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)", display: "flex", alignItems: "center", gap: 6 }}>
          <span className="kp-dot" style={{ background: "var(--kp-green)" }}/> PAGAMENTO CONFIRMADO
        </div>
        <h1 className="kp-display" style={{ fontSize: 48, lineHeight: 1.05, margin: "10px 0 0" }}>Bem-vindo, <em>Diogo.</em></h1>
        <p style={{ fontSize: 14, marginTop: 12, lineHeight: 1.5 }}>Você acabou de comprar <strong>{product}</strong> por <strong>{brl(total)}</strong> via {method.toUpperCase()}. Recebemos tudo. Acesso liberado.</p>
        <div style={{ marginTop: 20, padding: 16, background: "var(--kp-pink-soft)", border: "1.5px solid var(--kp-ink)" }}>
          <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>PRÓXIMOS PASSOS</div>
          <ol style={{ margin: "8px 0 0", paddingLeft: 18, fontSize: 13, lineHeight: 1.7 }}>
            <li>Recibo enviado pro seu email</li>
            <li>Acesso ao portal do assinante: <a href="#/portal" style={{ color: "var(--kp-pink)" }}>sequencia.app/portal</a></li>
            <li>Sua primeira sessão é em 3 dias úteis</li>
          </ol>
        </div>
        <a href="#/portal" className="kp-btn kp-btn-ink" style={{ width: "100%", justifyContent: "center", marginTop: 20, padding: "14px 18px", fontSize: 12, boxShadow: "4px 4px 0 0 var(--kp-pink)" }}>Ir pro portal →</a>
      </div>
    </div>
  );
}

window.SEQ_CKPUBLIC = CheckoutPublic;