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

// ─── Catálogo da oferta ────────────────────────────────────
const BASE = {
  title: "Módulo de Agendamento Inteligente com IA",
  subtitle: "Para Diogo Costa · Costa Performance Médica",
  preco: 4000,
  parcelas: 12,
};

const BUMPS = [
  {
    id: "rev-extra",
    title: "Rodada extra de revisão",
    desc: "Mais um ciclo completo de ajustes depois da entrega final.",
    price: 480,
    badge: "Recomendado",
    color: "var(--kp-green)",
    pre: false,
  },
  {
    id: "fast-7d",
    title: "Fast-track · entrega em 7 dias",
    desc: "Pula a fila. Sua entrega vira prioridade #1 da semana.",
    price: 1200,
    badge: "Só 2 vagas/mês",
    color: "var(--kp-pink)",
    pre: true,
  },
  {
    id: "stripe",
    title: "Integração Stripe + Cobrança recorrente",
    desc: "Setup completo do gateway de pagamento dentro do agente.",
    price: 850,
    badge: null,
    color: "var(--kp-cold)",
    pre: false,
  },
  {
    id: "training",
    title: "Treinamento com seu time (2h ao vivo)",
    desc: "Sessão gravada de onboarding pra equipe operar a ferramenta.",
    price: 600,
    badge: null,
    color: "var(--kp-warm)",
    pre: false,
  },
];

const METODOS = [
  { k: "pix", l: "PIX", sub: "Confirma em ~30s", color: "var(--kp-green)", desconto: 0.05 },
  { k: "card", l: "Cartão", sub: "Até 12x · sem juros 3x", color: "var(--kp-cold)", desconto: 0 },
  { k: "boleto", l: "Boleto", sub: "Compensa em 1-2 dias", color: "var(--kp-soft)", desconto: 0.03 },
  { k: "crypto", l: "Cripto", sub: "BTC · USDT · ETH", color: "var(--kp-ink)", desconto: 0.07 },
];

const CRIPTOS = [
  { id: "btc", name: "Bitcoin", sym: "BTC", rate: 372145.20, addr: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh" },
  { id: "usdt", name: "Tether USDT", sym: "USDT", rate: 5.04, addr: "0x742d35Cc6634C0532925a3b844Bc9e7595f4DfB1" },
  { id: "eth", name: "Ethereum", sym: "ETH", rate: 17820.00, addr: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2" },
];

const DEPOIMENTOS = [
  { name: "Lucas H.", role: "Founder · Mira AI", quote: "Fechei 6 propostas em duas semanas. O score de aceitação era 100% certeiro." },
  { name: "Ana V.", role: "Studio Verbete", quote: "Não mando mais PDF. Cliente que abre 3x sempre fecha. É quase mágico." },
  { name: "Rafael M.", role: "Sócio · Tórtola", quote: "Reduziu 40% do tempo perdido com lead frio. O agente sabe quando ligar." },
];

// ─── Hooks ────────────────────────────────────────────────
function useCountdown(initialSec = 14 * 60 + 23) {
  const [s, setS] = React.useState(initialSec);
  React.useEffect(() => {
    const t = setInterval(() => setS(v => Math.max(0, v - 1)), 1000);
    return () => clearInterval(t);
  }, []);
  const m = Math.floor(s / 60), sec = s % 60;
  return `${String(m).padStart(2,"0")}:${String(sec).padStart(2,"0")}`;
}

// ─── Componente principal ────────────────────────────────
function Checkout() {
  const [bumps, setBumps] = React.useState({ "rev-extra": false, "fast-7d": false, "stripe": false, "training": false });
  const [method, setMethod] = React.useState("pix");
  const [crypto, setCrypto] = React.useState("usdt");
  const [paid, setPaid] = React.useState(false);
  const [parcelas, setParcelas] = React.useState(3);
  const timer = useCountdown();

  const bumpsTotal = BUMPS.reduce((s, b) => bumps[b.id] ? s + b.price : s, 0);
  const subtotal = BASE.preco + bumpsTotal;
  const sel = METODOS.find(m => m.k === method);
  const desconto = subtotal * (sel?.desconto || 0);
  const entrada = subtotal * 0.5;
  const total = method === "pix" || method === "boleto" || method === "crypto" ? entrada - desconto * 0.5 : entrada;

  const toggle = (id) => setBumps(b => ({ ...b, [id]: !b[id] }));

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      {/* Topbar do checkout */}
      <div style={{ background: "var(--kp-ink)", color: "var(--kp-paper)", padding: "10px 28px", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--kp-green)" }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--kp-green)", animation: "kp-pulse 1.6s infinite" }}/>
            Conexão segura · TLS 1.3
          </span>
          <span style={{ color: "rgba(247,241,232,0.4)" }}>|</span>
          <span style={{ color: "var(--kp-faint)" }}>BACEN · Sequência Pay</span>
        </div>
        <div style={{ fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 10 }}>
          <span style={{ color: "var(--kp-pink)" }}>● Reservado por mais</span>
          <span className="kp-display" style={{ fontStyle: "italic", fontSize: 22, color: "var(--kp-paper)", letterSpacing: 0 }}>{timer}</span>
        </div>
      </div>

      {/* Hero do checkout */}
      <div style={{ borderBottom: "1.5px solid var(--kp-ink)", padding: "32px 28px 28px" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <span className="kp-eyebrow"><span className="kp-dot"/>Nº 0042 · Aceita há 4min</span>
          <h1 className="kp-display" style={{ fontSize: "clamp(40px,5.5vw,72px)", lineHeight: 1.0, margin: "10px 0 0", maxWidth: 1000 }}>
            Falta <em>uma assinatura</em> pra começar,<br/>
            Diogo. <span className="kp-splash kp-splash-pink">Vamos?</span>
          </h1>
          <div style={{ display: "flex", gap: 14, marginTop: 18, flexWrap: "wrap" }}>
            <SocialChip dot="var(--kp-green)" label="14 contratando agora"/>
            <SocialChip dot="var(--kp-pink)" label="62 fecharam essa semana"/>
            <SocialChip dot="var(--kp-yellow)" label="Reserva exclusiva: 15min"/>
          </div>
        </div>
      </div>

      {/* Grid principal */}
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "32px 28px 80px", display: "grid", gridTemplateColumns: "1.45fr 1fr", gap: 28, alignItems: "start" }}>
        {/* COLUNA ESQUERDA */}
        <div>
          {/* Sua oferta */}
          <SectionLabel num="01" label="Sua oferta"/>
          <div className="kp-card" style={{ padding: 22, marginBottom: 28 }}>
            <div style={{ display: "flex", alignItems: "start", justifyContent: "space-between", gap: 20 }}>
              <div style={{ flex: 1 }}>
                <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>PROPOSTA · Nº 0042</div>
                <h3 className="kp-display" style={{ fontSize: 30, lineHeight: 1.05, marginTop: 6 }}>{BASE.title}</h3>
                <p style={{ fontSize: 13.5, color: "var(--kp-muted)", marginTop: 6 }}>{BASE.subtitle}</p>
                <div style={{ marginTop: 14, display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <Bullet>Setup completo + integração agenda</Bullet>
                  <Bullet>QA + 30 dias de ajustes</Bullet>
                  <Bullet>Lembretes WhatsApp + e-mail</Bullet>
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>VALOR</div>
                <div className="kp-display" style={{ fontSize: 44, fontStyle: "italic", lineHeight: 1, marginTop: 4 }}>{brl(BASE.preco)}</div>
                <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)", marginTop: 4 }}>50% ENTRADA · 50% NA ENTREGA</div>
              </div>
            </div>
          </div>

          {/* Order bumps */}
          <SectionLabel num="02" label="Adicionar à entrega" tag={`${Object.values(bumps).filter(Boolean).length}/4 selecionados`}/>
          <div style={{ display: "grid", gap: 12, marginBottom: 28 }}>
            {BUMPS.map(b => (
              <BumpRow key={b.id} bump={b} active={bumps[b.id]} onToggle={() => toggle(b.id)}/>
            ))}
          </div>

          {/* Métodos */}
          <SectionLabel num="03" label="Como você quer pagar?"/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, marginBottom: 18 }}>
            {METODOS.map(m => (
              <MethodCard key={m.k} m={m} active={method === m.k} onPick={() => setMethod(m.k)}/>
            ))}
          </div>

          {method === "pix" && <PixPanel valor={total} setPaid={setPaid} paid={paid}/>}
          {method === "card" && <CardPanel parcelas={parcelas} setParcelas={setParcelas} valor={total} setPaid={setPaid} paid={paid}/>}
          {method === "boleto" && <BoletoPanel valor={total} setPaid={setPaid} paid={paid}/>}
          {method === "crypto" && <CryptoPanel valor={total} crypto={crypto} setCrypto={setCrypto} setPaid={setPaid} paid={paid}/>}

          {/* Garantia */}
          <div style={{ marginTop: 32, padding: 22, background: "var(--kp-soft)", border: "1.5px solid var(--kp-ink)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "center" }}>
            <ShieldGlyph/>
            <div>
              <div className="kp-display" style={{ fontSize: 24 }}>Garantia <em>incondicional</em> de 7 dias.</div>
              <p style={{ fontSize: 13.5, color: "var(--kp-muted)", marginTop: 4, lineHeight: 1.5 }}>
                Se em uma semana você sentir que não é pra você, devolvemos 100% do valor. Sem perguntas, sem formulário, sem chamada de retenção. Só um e-mail.
              </p>
            </div>
          </div>

          {/* Depoimentos */}
          <div style={{ marginTop: 28 }}>
            <SectionLabel num="04" label="Quem já passou por aqui"/>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
              {DEPOIMENTOS.map((d,i) => (
                <div key={i} className="kp-card kp-card-soft" style={{ padding: 18 }}>
                  <div style={{ fontFamily: "var(--kp-display)", fontSize: 38, lineHeight: 0.5, color: "var(--kp-pink)", height: 18 }}>“</div>
                  <p style={{ fontSize: 13, lineHeight: 1.5, fontStyle: "italic", margin: "10px 0 14px" }}>{d.quote}</p>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{d.name}</div>
                  <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-muted)", marginTop: 2 }}>{d.role.toUpperCase()}</div>
                </div>
              ))}
            </div>
          </div>

          {/* FAQ */}
          <div style={{ marginTop: 28 }}>
            <SectionLabel num="05" label="Perguntas frequentes"/>
            <div style={{ borderTop: "1.5px solid var(--kp-ink)" }}>
              <FAQ q="Quando começa o trabalho?" a="Imediatamente após a confirmação do pagamento. Você recebe um e-mail com link do kickoff em até 1h útil."/>
              <FAQ q="E se eu quiser parcelar tudo?" a="Cartão até 12x. PIX e cripto têm desconto, mas só pra entrada de 50% — o restante é cobrado na entrega."/>
              <FAQ q="Posso pedir nota fiscal?" a="Sim, emissão automática em até 24h após a confirmação. Pra MEI, PJ ou pessoa física."/>
              <FAQ q="Cripto é seguro?" a="Operamos via custódia da Sequência Pay. Você paga no endereço, a gente confirma 1 bloco e libera. Demora ~10min em BTC, ~3min em ETH/USDT."/>
            </div>
          </div>
        </div>

        {/* COLUNA DIREITA · sticky summary */}
        <aside style={{ position: "sticky", top: 20 }}>
          <div className="kp-card" style={{ padding: 0, overflow: "hidden", boxShadow: "6px 6px 0 0 var(--kp-pink)" }}>
            <div style={{ background: "var(--kp-ink)", color: "var(--kp-paper)", padding: "16px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1.5px solid var(--kp-ink)" }}>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-faint)" }}>RESUMO</span>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-green)" }}>● ATUALIZADO</span>
            </div>
            <div style={{ padding: 22, background: "var(--kp-white)" }}>
              <SumRow label={BASE.title} value={brl(BASE.preco)} small/>
              {BUMPS.filter(b => bumps[b.id]).map(b => (
                <SumRow key={b.id} label={"+ " + b.title} value={brl(b.price)} small accent/>
              ))}
              <hr style={{ border: "none", borderTop: "1px solid rgba(10,10,10,0.1)", margin: "10px 0" }}/>
              <SumRow label="Subtotal" value={brl(subtotal)}/>
              <SumRow label={`Entrada (50%) · ${sel.l}`} value={brl(entrada)} muted/>
              {desconto > 0 && method !== "card" && (
                <SumRow label={`Desconto ${sel.l} (${Math.round(sel.desconto*100)}%)`} value={"−" + brl(desconto*0.5)} accent/>
              )}
              <hr style={{ border: "none", borderTop: "1.5px solid var(--kp-ink)", margin: "14px 0 10px" }}/>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div>
                  <div style={{ fontSize: 12, fontFamily: "var(--kp-mono)", letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--kp-muted)" }}>Total agora</div>
                  <div style={{ fontSize: 11, color: "var(--kp-muted)", marginTop: 2 }}>+ {brl(subtotal - entrada)} na entrega</div>
                </div>
                <div className="kp-display" style={{ fontSize: 48, fontStyle: "italic", lineHeight: 1 }}>{brl(total)}</div>
              </div>

              <button onClick={() => setPaid(true)} className="kp-btn kp-btn-ink" style={{ width: "100%", padding: "16px 20px", fontSize: 12, marginTop: 16, boxShadow: "4px 4px 0 0 var(--kp-green)" }}>
                {paid ? "✓ Pagamento confirmado" : `Confirmar e pagar ${brl(total)} →`}
              </button>

              <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, fontSize: 11 }}>
                <Mini icon="✓" text="7 dias garantia"/>
                <Mini icon="✓" text="Recibo automático"/>
                <Mini icon="✓" text="Suporte 24h dia útil"/>
                <Mini icon="✓" text="NF emitida em 24h"/>
              </div>
            </div>
          </div>

          {/* Bandeiras */}
          <div className="kp-card kp-card-soft" style={{ padding: 16, marginTop: 14, display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>ACEITAMOS</span>
            <Brand label="VISA" bg="var(--kp-cold)"/>
            <Brand label="MASTER" bg="var(--kp-warm)"/>
            <Brand label="ELO" bg="var(--kp-green)"/>
            <Brand label="AMEX" bg="var(--kp-soft)"/>
            <Brand label="PIX" bg="var(--kp-green)"/>
            <Brand label="₿"/>
          </div>

          {/* Trust badges */}
          <div className="kp-card kp-card-soft" style={{ padding: 16, marginTop: 14, fontSize: 12, color: "var(--kp-muted)", lineHeight: 1.55 }}>
            <div style={{ display: "flex", gap: 8, alignItems: "start" }}>
              <span style={{ color: "var(--kp-green)", fontSize: 14 }}>🔒</span>
              <span>Seu pagamento é processado pela <strong style={{ color: "var(--kp-ink)" }}>Sequência Pay</strong>, instituição autorizada pelo BACEN. Reembolso em 7 dias por arrependimento, sem perguntas.</span>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

// ─── Subcomponents ──────────────────────────────────────
function SectionLabel({ num, label, tag }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14, gap: 10 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
        <span className="kp-display" style={{ fontSize: 28, fontStyle: "italic", color: "var(--kp-pink)", lineHeight: 1 }}>{num}</span>
        <h2 className="kp-display" style={{ fontSize: 24, lineHeight: 1, margin: 0 }}>{label}</h2>
      </div>
      {tag && <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{tag}</span>}
    </div>
  );
}

function Bullet({ children }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, padding: "4px 10px", background: "var(--kp-soft)", border: "1px solid rgba(10,10,10,0.15)" }}>
      <span style={{ color: "var(--kp-green-deep)", fontWeight: 700 }}>✓</span> {children}
    </span>
  );
}

function BumpRow({ bump, active, onToggle }) {
  return (
    <button onClick={onToggle} style={{
      display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16, alignItems: "center",
      textAlign: "left", padding: 18, cursor: "pointer", width: "100%",
      border: "1.5px solid var(--kp-ink)",
      background: active ? bump.color : "var(--kp-white)",
      boxShadow: active ? "4px 4px 0 0 var(--kp-ink)" : "2px 2px 0 0 var(--kp-ink)",
      transition: "transform .12s ease, box-shadow .12s ease",
      transform: active ? "translate(-1px,-1px)" : "none",
      fontFamily: "var(--kp-sans)", color: "var(--kp-ink)",
    }}>
      <span style={{
        width: 24, height: 24, border: "1.5px solid var(--kp-ink)",
        background: active ? "var(--kp-ink)" : "var(--kp-paper)",
        color: active ? bump.color : "transparent",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        fontWeight: 800, fontSize: 16, lineHeight: 1,
      }}>✓</span>
      <div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
          <span className="kp-display" style={{ fontSize: 22, lineHeight: 1.1 }}>{bump.title}</span>
          {bump.badge && (
            <span className="kp-sticker" style={{ background: bump.pre ? "var(--kp-pink)" : "var(--kp-green)", padding: "3px 7px", fontSize: 8.5, boxShadow: "1.5px 1.5px 0 0 var(--kp-ink)" }}>
              {bump.badge}
            </span>
          )}
        </div>
        <div style={{ fontSize: 13, color: "var(--kp-muted)", marginTop: 4, lineHeight: 1.5 }}>{bump.desc}</div>
      </div>
      <div style={{ textAlign: "right" }}>
        <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)" }}>+ ADICIONAR</div>
        <div className="kp-display" style={{ fontSize: 26, fontStyle: "italic", lineHeight: 1, marginTop: 2 }}>{brl(bump.price)}</div>
      </div>
    </button>
  );
}

function MethodCard({ m, active, onPick }) {
  return (
    <button onClick={onPick} style={{
      padding: 16, textAlign: "left", border: "1.5px solid var(--kp-ink)", cursor: "pointer",
      background: active ? m.color : "var(--kp-white)",
      color: active && m.k === "crypto" ? "var(--kp-paper)" : "var(--kp-ink)",
      boxShadow: active ? "4px 4px 0 0 var(--kp-ink)" : "2px 2px 0 0 var(--kp-ink)",
      transform: active ? "translate(-1px,-1px)" : "none",
      transition: "all .12s ease",
      position: "relative",
    }}>
      <div className="kp-display" style={{ fontSize: 24, color: "inherit" }}>{m.l}</div>
      <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", marginTop: 4, color: active && m.k === "crypto" ? "rgba(247,241,232,0.6)" : "var(--kp-muted)" }}>{m.sub}</div>
      {m.desconto > 0 && (
        <span style={{
          position: "absolute", top: -8, right: -8,
          background: "var(--kp-pink)", color: "var(--kp-ink)",
          fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.14em",
          padding: "3px 7px", border: "1.5px solid var(--kp-ink)",
          boxShadow: "2px 2px 0 0 var(--kp-ink)",
        }}>−{Math.round(m.desconto*100)}%</span>
      )}
    </button>
  );
}

function PixPanel({ valor, setPaid, paid }) {
  return (
    <div className="kp-card" style={{ padding: 22 }}>
      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 22, alignItems: "start" }}>
        <QRGlyph color="var(--kp-ink)"/>
        <div>
          <div className="kp-display" style={{ fontSize: 24 }}>Pix copia-e-cola</div>
          <p style={{ fontSize: 12.5, color: "var(--kp-muted)", marginTop: 4 }}>Aponte a câmera ou copie o código abaixo. Confirma na hora.</p>
          <div style={{ marginTop: 12, padding: 12, background: "var(--kp-soft)", border: "1.5px dashed rgba(10,10,10,0.3)", fontFamily: "var(--kp-mono)", fontSize: 11, lineHeight: 1.4, wordBreak: "break-all" }}>
            00020126360014BR.GOV.BCB.PIX0114+5511987654321520400005303986540420.005802BR5921Diogo Krieger Studio6009Sao Paulo62070503***6304A1B2
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
            <button className="kp-btn kp-btn-ink" style={{ flex: 1 }}><Icon.copy s={12}/> Copiar código</button>
            <button onClick={()=>setPaid(true)} className="kp-btn kp-btn-green">Já paguei →</button>
          </div>
          {paid && <div style={{ marginTop: 12, padding: 10, background: "var(--kp-green)", border: "1.5px solid var(--kp-ink)", fontSize: 13 }}>✓ Pagamento confirmado · recibo enviado</div>}
        </div>
      </div>
    </div>
  );
}

function CardPanel({ parcelas, setParcelas, valor, setPaid, paid }) {
  return (
    <div className="kp-card" style={{ padding: 22 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <label style={{ gridColumn: "1 / -1" }}>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NÚMERO DO CARTÃO</span>
          <input className="kp-input" placeholder="0000 0000 0000 0000" defaultValue="4242 4242 4242 4242" style={{ marginTop: 6 }}/>
        </label>
        <label>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>VALIDADE</span>
          <input className="kp-input" placeholder="MM/AA" defaultValue="12/28" style={{ marginTop: 6 }}/>
        </label>
        <label>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>CVV</span>
          <input className="kp-input" placeholder="123" defaultValue="123" style={{ marginTop: 6 }}/>
        </label>
        <label style={{ gridColumn: "1 / -1" }}>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NOME NO CARTÃO</span>
          <input className="kp-input" placeholder="DIOGO COSTA" defaultValue="DIOGO COSTA" style={{ marginTop: 6 }}/>
        </label>
        <div style={{ gridColumn: "1 / -1" }}>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>PARCELAMENTO</span>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 6, marginTop: 6 }}>
            {[1,3,6,12].map(p => (
              <button key={p} onClick={()=>setParcelas(p)} style={{
                padding: "10px 6px", border: "1.5px solid var(--kp-ink)", textAlign: "center",
                background: parcelas === p ? "var(--kp-green)" : "var(--kp-white)",
                cursor: "pointer", fontFamily: "var(--kp-sans)",
                boxShadow: parcelas === p ? "3px 3px 0 0 var(--kp-ink)" : "none",
              }}>
                <div className="kp-display" style={{ fontSize: 22, lineHeight: 1 }}>{p}x</div>
                <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-muted)", marginTop: 2 }}>
                  {brl(valor / p)}{p > 3 ? " c/ juros" : " s/ juros"}
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
      <button onClick={()=>setPaid(true)} className="kp-btn kp-btn-ink" style={{ marginTop: 16, width: "100%", padding: "14px 18px", fontSize: 11 }}>
        Pagar {parcelas}x {brl(valor / parcelas)} →
      </button>
      {paid && <div style={{ marginTop: 12, padding: 10, background: "var(--kp-green)", border: "1.5px solid var(--kp-ink)", fontSize: 13 }}>✓ Cartão aprovado · recibo no e-mail</div>}
    </div>
  );
}

function BoletoPanel({ valor, setPaid, paid }) {
  return (
    <div className="kp-card" style={{ padding: 22 }}>
      <div className="kp-display" style={{ fontSize: 24 }}>Boleto bancário</div>
      <p style={{ fontSize: 13, color: "var(--kp-muted)", marginTop: 4 }}>Compensa em 1-2 dias úteis. Vencimento em 3 dias.</p>
      <div style={{ marginTop: 14, padding: 14, background: "var(--kp-soft)", fontFamily: "var(--kp-mono)", fontSize: 12.5, letterSpacing: "0.04em", border: "1.5px dashed rgba(10,10,10,0.3)" }}>
        34191.79001 01043.510047 91020.150008 9 88720000{Math.round(valor*100)}
      </div>
      <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
        <button className="kp-btn kp-btn-ink" style={{ flex: 1 }}>Baixar boleto (.pdf)</button>
        <button className="kp-btn"><Icon.copy s={12}/> Copiar linha</button>
      </div>
      {paid && <div style={{ marginTop: 12, padding: 10, background: "var(--kp-green)", border: "1.5px solid var(--kp-ink)", fontSize: 13 }}>✓ Boleto gerado · enviado por e-mail</div>}
    </div>
  );
}

function CryptoPanel({ valor, crypto, setCrypto, setPaid, paid }) {
  const c = CRIPTOS.find(x => x.id === crypto);
  const cryptoAmount = (valor / c.rate);
  return (
    <div className="kp-card" style={{ padding: 0, overflow: "hidden", background: "var(--kp-ink)", color: "var(--kp-paper)" }}>
      <div style={{ padding: "14px 20px", borderBottom: "1px solid rgba(247,241,232,0.14)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-faint)" }}>PAGAMENTO EM CRIPTOMOEDA</div>
        <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.2em", color: "var(--kp-green)" }}>● ON-CHAIN</span>
      </div>
      <div style={{ padding: 20 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 8, marginBottom: 18 }}>
          {CRIPTOS.map(cc => (
            <button key={cc.id} onClick={()=>setCrypto(cc.id)} style={{
              padding: 12, border: "1.5px solid " + (crypto === cc.id ? "var(--kp-green)" : "rgba(247,241,232,0.2)"),
              background: crypto === cc.id ? "rgba(124,240,103,0.08)" : "rgba(247,241,232,0.04)",
              color: "var(--kp-paper)", cursor: "pointer", textAlign: "left",
              fontFamily: "var(--kp-sans)",
            }}>
              <div className="kp-display" style={{ fontSize: 22, color: "var(--kp-paper)", lineHeight: 1 }}>{cc.sym}</div>
              <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-faint)", marginTop: 4 }}>{cc.name}</div>
            </button>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 22, alignItems: "start" }}>
          <QRGlyph color="var(--kp-paper)" bg="var(--kp-ink)" inverted/>
          <div>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-faint)" }}>ENVIAR EXATAMENTE</div>
            <div className="kp-display" style={{ fontSize: 36, color: "var(--kp-green)", fontStyle: "italic", lineHeight: 1, marginTop: 6 }}>
              {cryptoAmount.toFixed(c.id === "btc" ? 8 : 4)} {c.sym}
            </div>
            <div className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--kp-faint)", marginTop: 4 }}>≈ {brl(valor)} · cotação {brl(c.rate)}/{c.sym}</div>

            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-faint)", marginTop: 18 }}>PARA O ENDEREÇO</div>
            <div style={{ marginTop: 6, padding: 10, background: "rgba(247,241,232,0.05)", border: "1px solid rgba(247,241,232,0.14)", fontFamily: "var(--kp-mono)", fontSize: 11, color: "var(--kp-paper)", wordBreak: "break-all", lineHeight: 1.5 }}>
              {c.addr}
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
              <button className="kp-btn kp-btn-green" style={{ flex: 1 }}><Icon.copy s={12}/> Copiar endereço</button>
              <button onClick={()=>setPaid(true)} className="kp-btn" style={{ background: "transparent", color: "var(--kp-paper)", borderColor: "var(--kp-paper)", boxShadow: "3px 3px 0 0 var(--kp-pink)" }}>
                Já enviei →
              </button>
            </div>
            <p style={{ fontSize: 11.5, color: "rgba(247,241,232,0.6)", marginTop: 10, lineHeight: 1.55 }}>
              Confirmação após 1 bloco · ~10min em BTC, ~3min em ETH/USDT. Receberá e-mail automático.
            </p>
            {paid && <div style={{ marginTop: 12, padding: 10, background: "var(--kp-green)", color: "var(--kp-ink)", fontSize: 13 }}>✓ Aguardando confirmação on-chain… (mock)</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

function FAQ({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: "1.5px solid var(--kp-ink)" }}>
      <button onClick={()=>setOpen(o=>!o)} style={{
        width: "100%", padding: "16px 0", textAlign: "left", background: "transparent",
        border: "none", display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: "var(--kp-sans)", cursor: "pointer",
      }}>
        <span style={{ fontSize: 15, fontWeight: 500 }}>{q}</span>
        <span className="kp-display" style={{ fontSize: 24, fontStyle: "italic", color: "var(--kp-pink)", transition: "transform .15s", transform: open ? "rotate(45deg)" : "none" }}>+</span>
      </button>
      {open && <div style={{ paddingBottom: 16, fontSize: 13.5, color: "var(--kp-muted)", lineHeight: 1.6 }}>{a}</div>}
    </div>
  );
}

function SumRow({ label, value, small, muted, accent }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "5px 0", fontSize: small ? 12.5 : 13.5 }}>
      <span style={{ color: muted ? "var(--kp-muted)" : accent ? "var(--kp-green-deep)" : "var(--kp-ink)", flex: 1 }}>{label}</span>
      <span className="kp-mono" style={{ fontSize: small ? 10 : 11, letterSpacing: "0.14em", color: muted ? "var(--kp-muted)" : accent ? "var(--kp-green-deep)" : "var(--kp-ink)" }}>{value}</span>
    </div>
  );
}

function Mini({ icon, text }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--kp-muted)" }}>
      <span style={{ color: "var(--kp-green-deep)", fontWeight: 800 }}>{icon}</span>{text}
    </div>
  );
}

function Brand({ label, bg }) {
  return (
    <span style={{
      padding: "5px 9px", fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em",
      border: "1.5px solid var(--kp-ink)", background: bg || "var(--kp-white)",
    }}>{label}</span>
  );
}

function SocialChip({ dot, label }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "6px 12px", border: "1.5px solid var(--kp-ink)", background: "var(--kp-white)",
      fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
      boxShadow: "2px 2px 0 0 var(--kp-ink)",
    }}>
      <span style={{ width: 7, height: 7, borderRadius: "50%", background: dot, animation: "kp-pulse 1.6s infinite" }}/>
      {label}
    </span>
  );
}

function QRGlyph({ color = "var(--kp-ink)", bg, inverted }) {
  return (
    <div style={{ width: 168, height: 168, background: bg || "var(--kp-white)", border: "1.5px solid " + (inverted ? "rgba(247,241,232,0.3)" : "var(--kp-ink)"), display: "grid", gridTemplateColumns: "repeat(14,1fr)", gridTemplateRows: "repeat(14,1fr)" }}>
      {Array.from({ length: 196 }).map((_,i) => {
        const r = Math.floor(i/14), c = i%14;
        const corner = (r<3 && c<3) || (r<3 && c>10) || (r>10 && c<3);
        const fill = corner ? ((r+c)%2===0) : ((i*7 + i*i + (r*c))%5) < 2;
        return <span key={i} style={{ background: fill ? color : "transparent" }}/>;
      })}
    </div>
  );
}

function ShieldGlyph() {
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
      <path d="M32 4 L8 14 V32 C8 46 18 56 32 60 C46 56 56 46 56 32 V14 L32 4 Z" fill="var(--kp-green)" stroke="var(--kp-ink)" strokeWidth="2"/>
      <path d="M22 32 L29 39 L44 24" stroke="var(--kp-ink)" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

window.SEQ_CHECKOUT = Checkout;