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

// Onboarding fullscreen — usado por novos usuários antes do app principal.
// Sem sidebar. Estética editorial, 5 passos, progress numérico.

function Onboarding() {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    nome: "Diogo Krieger",
    role: "Consultor / Mentor",
    monthly: 1,
    plataforma: "Brasil + Internacional",
    metodos: { pix: true, card: true, boleto: true, crypto: false },
    primeiro: "subscription",
  });

  const steps = [
    { num: "01", t: "Quem é você", k: "perfil" },
    { num: "02", t: "Como você ganha", k: "modelo" },
    { num: "03", t: "Onde você vende", k: "mercado" },
    { num: "04", t: "Conectar pagamentos", k: "pagamentos" },
    { num: "05", t: "Primeira venda", k: "primeira" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      {/* Top bar */}
      <header style={{ borderBottom: "1.5px solid var(--kp-ink)", background: "var(--kp-paper)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "14px 22px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div className="kp-display" style={{ fontSize: 22 }}>Sequência<em style={{ color: "var(--kp-pink)" }}>·</em></div>
          <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>
            ONBOARDING · Nº <em style={{ fontFamily: "var(--kp-display)", fontStyle: "italic", fontSize: 14, letterSpacing: 0, color: "var(--kp-pink)" }}>{steps[step].num}</em> DE 05
          </div>
          <a href="#/home" className="kp-btn kp-btn-sm" style={{ background: "transparent", boxShadow: "none" }}>Pular</a>
        </div>

        {/* Progress bar */}
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 22px 14px", display: "flex", gap: 6 }}>
          {steps.map((s,i) => (
            <div key={i} style={{
              flex: 1, height: 8, border: "1.5px solid var(--kp-ink)",
              background: i < step ? "var(--kp-green)" : i === step ? "var(--kp-pink)" : "var(--kp-white)",
            }}/>
          ))}
        </div>
      </header>

      <div style={{ maxWidth: 880, margin: "0 auto", padding: "48px 22px 64px" }}>
        {step === 0 && <StepPerfil data={data} setData={setData}/>}
        {step === 1 && <StepModelo data={data} setData={setData}/>}
        {step === 2 && <StepMercado data={data} setData={setData}/>}
        {step === 3 && <StepPagamentos data={data} setData={setData}/>}
        {step === 4 && <StepPrimeira data={data} setData={setData}/>}

        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 36 }}>
          <button onClick={()=>setStep(s=>Math.max(0,s-1))} className="kp-btn" disabled={step === 0} style={{ visibility: step === 0 ? "hidden" : "visible" }}>← Voltar</button>
          {step < steps.length-1 ? (
            <button onClick={()=>setStep(s=>s+1)} className="kp-btn kp-btn-ink" style={{ boxShadow: "4px 4px 0 0 var(--kp-pink)" }}>Continuar →</button>
          ) : (
            <a href="#/home" className="kp-btn kp-btn-green" style={{ boxShadow: "4px 4px 0 0 var(--kp-ink)" }}>Concluir e abrir app →</a>
          )}
        </div>
      </div>
    </div>
  );
}

function StepHero({ num, eyebrow, title, em, sub }) {
  return (
    <div style={{ marginBottom: 32 }}>
      <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>
        Nº <em style={{ fontFamily: "var(--kp-display)", fontStyle: "italic", fontSize: 14, color: "var(--kp-pink)" }}>{num}</em> · {eyebrow}
      </div>
      <h1 className="kp-display" style={{ fontSize: "clamp(40px,5vw,68px)", lineHeight: 1.0, margin: "8px 0 0" }}>
        {title} <em style={{ fontStyle: "italic" }}>{em}</em>
      </h1>
      {sub && <p style={{ fontSize: 16, color: "var(--kp-muted)", marginTop: 12, maxWidth: 620 }}>{sub}</p>}
    </div>
  );
}

function StepPerfil({ data, setData }) {
  return (
    <>
      <StepHero num="01" eyebrow="QUEM É VOCÊ" title="Vamos nos" em="conhecer." sub="Esses dados aparecem no checkout, na nota fiscal e na proposta — é como seu cliente vai te ver."/>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        <OnField label="Nome completo" value={data.nome} onChange={(v)=>setData(d=>({...d,nome:v}))}/>
        <OnField label="Email principal" value="diogo@costaperf.com" type="email"/>
        <OnField label="CPF / CNPJ" value="123.456.789-00" placeholder="Pra emitir nota"/>
        <OnField label="Celular" value="(11) 99000-1234"/>
      </div>

      <div style={{ marginTop: 22 }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)", marginBottom: 8 }}>QUE TIPO DE TRABALHO VOCÊ FAZ?</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 10 }}>
          {[
            { l: "Consultor / Mentor", d: "Vende seu tempo + conhecimento", c: "var(--kp-pink-soft)" },
            { l: "Criador de conteúdo", d: "Cursos, infoprodutos, comunidade", c: "var(--kp-green)" },
            { l: "Agência / Estúdio", d: "Projetos para outras empresas", c: "var(--kp-cold)" },
            { l: "SaaS / Produto digital", d: "Software com assinatura recorrente", c: "var(--kp-yellow)" },
          ].map(o => {
            const on = data.role === o.l;
            return (
              <button key={o.l} onClick={()=>setData(d=>({...d,role:o.l}))} className="kp-card" style={{
                padding: 16, textAlign: "left", cursor: "pointer",
                background: on ? o.c : "var(--kp-white)",
                boxShadow: on ? "4px 4px 0 0 var(--kp-ink)" : "2px 2px 0 0 var(--kp-ink)",
              }}>
                <div className="kp-display" style={{ fontSize: 22, lineHeight: 1.1 }}>{o.l}</div>
                <div style={{ fontSize: 12.5, color: "var(--kp-muted)", marginTop: 4 }}>{o.d}</div>
              </button>
            );
          })}
        </div>
      </div>
    </>
  );
}

function StepModelo({ data, setData }) {
  return (
    <>
      <StepHero num="02" eyebrow="COMO VOCÊ GANHA" title="Quanto tu" em="já fatura." sub="Não é teste, não é julgamento. É pra calibrar o app pro seu volume."/>
      <div style={{ marginTop: 14 }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>RECEITA MÉDIA MENSAL</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8, marginTop: 10 }}>
          {[
            { i: 0, l: "Até R$5k", c: "var(--kp-soft)" },
            { i: 1, l: "R$5k–R$30k", c: "var(--kp-pink-soft)" },
            { i: 2, l: "R$30k–R$100k", c: "var(--kp-green)" },
            { i: 3, l: "R$100k+", c: "var(--kp-pink)" },
          ].map(o => {
            const on = data.monthly === o.i;
            return (
              <button key={o.i} onClick={()=>setData(d=>({...d,monthly:o.i}))} style={{
                padding: 18, border: "1.5px solid var(--kp-ink)", cursor: "pointer",
                background: on ? o.c : "var(--kp-white)",
                boxShadow: on ? "3px 3px 0 0 var(--kp-ink)" : "none",
                fontFamily: "var(--kp-display)", fontSize: 18, fontStyle: "italic", textAlign: "center",
              }}>{o.l}</button>
            );
          })}
        </div>
      </div>

      <div style={{ marginTop: 26 }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>O QUE VOCÊ VAI VENDER PRIMEIRO? (PODE ESCOLHER MAIS DE UM)</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 10, marginTop: 10 }}>
          {[
            { l: "Assinatura recorrente", d: "Mensal ou anual · MRR previsível", c: "var(--kp-pink)", e: "◉" },
            { l: "Proposta personalizada", d: "Por cliente · de R$1k até R$50k", c: "var(--kp-green)", e: "◐" },
            { l: "Infoproduto digital", d: "Curso, ebook, comunidade paga", c: "var(--kp-cold)", e: "◓" },
            { l: "Pagamento avulso", d: "Sessão única, evento, consultoria", c: "var(--kp-yellow)", e: "◑" },
          ].map(o => (
            <div key={o.l} className="kp-card" style={{ padding: 16, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center" }}>
              <div style={{ width: 40, height: 40, background: o.c, border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontSize: 20, fontStyle: "italic" }}>{o.e}</div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 500 }}>{o.l}</div>
                <div style={{ fontSize: 11.5, color: "var(--kp-muted)", marginTop: 2 }}>{o.d}</div>
              </div>
              <input type="checkbox" defaultChecked style={{ width: 18, height: 18, accentColor: "var(--kp-pink)" }}/>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function StepMercado({ data, setData }) {
  return (
    <>
      <StepHero num="03" eyebrow="ONDE VOCÊ VENDE" title="Pra quem você" em="cobra." sub="Define os métodos de pagamento, moedas e impostos."/>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
        {[
          { l: "Brasil", d: "PIX, boleto, cartão BRL", c: "var(--kp-green)", em: "🇧🇷" },
          { l: "Brasil + Internacional", d: "+ cartão internacional + cripto", c: "var(--kp-pink)", em: "🌎" },
          { l: "Apenas internacional", d: "USD, EUR, GBP via Stripe", c: "var(--kp-cold)", em: "🌐" },
        ].map(o => {
          const on = data.plataforma === o.l;
          return (
            <button key={o.l} onClick={()=>setData(d=>({...d,plataforma:o.l}))} className="kp-card" style={{
              padding: 18, textAlign: "left", cursor: "pointer",
              background: on ? o.c : "var(--kp-white)",
              boxShadow: on ? "4px 4px 0 0 var(--kp-ink)" : "2px 2px 0 0 var(--kp-ink)",
            }}>
              <div className="kp-display" style={{ fontSize: 30, lineHeight: 1, fontStyle: "italic" }}>{o.em}</div>
              <div className="kp-display" style={{ fontSize: 22, lineHeight: 1.1, marginTop: 8 }}>{o.l}</div>
              <div style={{ fontSize: 12, color: on ? "var(--kp-ink)" : "var(--kp-muted)", marginTop: 4 }}>{o.d}</div>
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: 26 }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NOTA FISCAL</div>
        <div className="kp-card" style={{ padding: 18, marginTop: 8, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <OnField label="Razão social" value="Diogo Krieger Consultoria ME"/>
          <OnField label="CNPJ" value="12.345.678/0001-90"/>
          <OnField label="Inscrição municipal" value="—" placeholder="Opcional"/>
          <OnField label="Atividade (CNAE)" value="7020-4 · Consultoria"/>
        </div>
      </div>
    </>
  );
}

function StepPagamentos({ data, setData }) {
  const provs = [
    { id: "asaas", n: "Asaas", d: "PIX + Boleto + Cartão BR", c: "var(--kp-green)", on: true, sug: true },
    { id: "stripe", n: "Stripe", d: "Cartão internacional, USD/EUR", c: "var(--kp-cold)", on: true, sug: true },
    { id: "mercado", n: "Mercado Pago", d: "Alternativa nacional", c: "var(--kp-yellow)", on: false },
    { id: "crypto", n: "Sequência Crypto", d: "BTC, USDT, ETH on-chain", c: "var(--kp-ink)", on: false, badge: "BETA" },
  ];
  return (
    <>
      <StepHero num="04" eyebrow="CONECTAR PAGAMENTOS" title="Coloca a casa" em="em ordem." sub="Sugerimos com base no que você marcou. Pode ajustar a qualquer momento depois."/>
      <div style={{ display: "grid", gap: 10 }}>
        {provs.map(p => (
          <div key={p.id} className="kp-card" style={{ padding: 18, display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 14, alignItems: "center" }}>
            <div style={{ width: 48, height: 48, background: p.c, border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontSize: 20, fontStyle: "italic", color: p.id === "crypto" ? "var(--kp-paper)" : "var(--kp-ink)" }}>{p.n[0]}</div>
            <div>
              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                <span style={{ fontSize: 14, fontWeight: 500 }}>{p.n}</span>
                {p.sug && <span style={{ padding: "2px 7px", background: "var(--kp-pink)", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 8.5, letterSpacing: "0.16em" }}>SUGERIDO PRA VOCÊ</span>}
                {p.badge && <span style={{ padding: "2px 7px", background: "var(--kp-yellow)", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 8.5, letterSpacing: "0.16em" }}>{p.badge}</span>}
              </div>
              <div style={{ fontSize: 12, color: "var(--kp-muted)", marginTop: 2 }}>{p.d}</div>
            </div>
            <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: p.on ? "var(--kp-pink)" : "var(--kp-muted)" }}>{p.on ? "PRONTO" : "CONFIGURAR"}</span>
            <button className={"kp-btn kp-btn-sm" + (p.on ? " kp-btn-green" : "")}>{p.on ? "✓ Conectado" : "Conectar"}</button>
          </div>
        ))}
      </div>
      <div className="kp-card" style={{ padding: 14, marginTop: 14, background: "var(--kp-pink-soft)", fontSize: 12.5 }}>
        <strong>Boa notícia:</strong> não precisa fechar com banco, não precisa abrir conta PJ extra. Sequência cobra direto pro CPF/CNPJ que você cadastrou e cai na sua conta em D+1.
      </div>
    </>
  );
}

function StepPrimeira({ data, setData }) {
  return (
    <>
      <StepHero num="05" eyebrow="PRIMEIRA VENDA" title="Vamos te dar" em="momentum." sub="O que você quer criar agora? Daqui a 60 segundos você tem um link pronto pra mandar."/>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 }}>
        {[
          { id: "subscription", l: "Assinatura mensal", d: "Crie um plano e gere link de checkout", c: "var(--kp-pink)", e: "◉" },
          { id: "proposal", l: "Proposta personalizada", d: "Editor com IA e tracking de leitura", c: "var(--kp-green)", e: "◢" },
          { id: "checkout", l: "Link de pagamento único", d: "Avulso, com PIX em 60s", c: "var(--kp-cold)", e: "$" },
        ].map(o => {
          const on = data.primeiro === o.id;
          return (
            <button key={o.id} onClick={()=>setData(d=>({...d,primeiro:o.id}))} className="kp-card" style={{
              padding: 22, textAlign: "left", cursor: "pointer",
              background: on ? o.c : "var(--kp-white)",
              boxShadow: on ? "5px 5px 0 0 var(--kp-ink)" : "2px 2px 0 0 var(--kp-ink)",
            }}>
              <div className="kp-display" style={{ fontSize: 56, fontStyle: "italic", lineHeight: 1, color: on ? "var(--kp-ink)" : "var(--kp-pink)" }}>{o.e}</div>
              <div className="kp-display" style={{ fontSize: 22, lineHeight: 1.1, marginTop: 16 }}>{o.l}</div>
              <div style={{ fontSize: 12.5, color: "var(--kp-muted)", marginTop: 6 }}>{o.d}</div>
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: 26, padding: 22, background: "var(--kp-ink)", color: "var(--kp-paper)", border: "1.5px solid var(--kp-ink)", boxShadow: "5px 5px 0 0 var(--kp-green)" }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "rgba(247,241,232,0.55)" }}>GANHA-GANHA</div>
        <div className="kp-display" style={{ fontSize: 28, lineHeight: 1.1, marginTop: 6, color: "var(--kp-paper)" }}>Plano Pro <em>grátis por 31 dias</em>.</div>
        <div style={{ fontSize: 13, marginTop: 6, color: "rgba(247,241,232,0.7)" }}>Sem cartão. Você só paga depois que faturar a primeira venda. Risco zero, sequência total.</div>
      </div>
    </>
  );
}

function OnField({ label, value, placeholder, type = "text", onChange }) {
  return (
    <label style={{ display: "block" }}>
      <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{label.toUpperCase()}</span>
      <input className="kp-input" type={type} defaultValue={value} placeholder={placeholder} style={{ marginTop: 5 }} onChange={onChange ? (e)=>onChange(e.target.value) : undefined}/>
    </label>
  );
}

window.SEQ_ONBOARDING = Onboarding;