// Órbita, Onboarding (3-step flow)

const OnboardingScreen = ({ onComplete, onGoUpload, onGoEditor }) => {
  const [step, setStep] = React.useState(0); // 0..3
  const [brandName, setBrandName] = React.useState('Luisa Ribeiro');
  const [brandColor, setBrandColor] = React.useState('#F5F1E8');
  const [subdomain, setSubdomain] = React.useState('luisaribeiro');
  const [logoFile, setLogoFile] = React.useState(null);

  // Plan + payment state (step 2)
  const [plan, setPlan]               = React.useState('atelier'); // 'inicio' | 'atelier'
  const [payMethod, setPayMethod]     = React.useState('card');    // cartão é o único método aceito
  const [cpf, setCpf]                 = React.useState('');
  const [cardName, setCardName]       = React.useState('');
  const [cardNumber, setCardNumber]   = React.useState('');
  const [cardExp, setCardExp]         = React.useState('');
  const [cardCvv, setCardCvv]         = React.useState('');
  const [coupon, setCoupon]           = React.useState('');
  const [couponApplied, setCouponApplied] = React.useState(false);
  const [showCoupon, setShowCoupon]   = React.useState(false);
  const [showTerms, setShowTerms]     = React.useState(null);
  const [showImport, setShowImport]   = React.useState(false);

  const steps = ['Boas-vindas', 'Sua marca', 'Plano', 'Primeira sessão'];

  const PLANS = {
    inicio:  { name: 'Início',  price: 89,  sessions: 10, desc: 'Pra quem está começando a prática.' },
    atelier: { name: 'Atelier', price: 189, sessions: 25, desc: 'Pra prática consolidada.' },
  };
  const chosen = PLANS[plan];
  const discount = couponApplied ? Math.round(chosen.price * 0.20) : 0;
  const monthly = chosen.price - discount;
  const trialEnds = new Date(); trialEnds.setDate(trialEnds.getDate() + TRIAL_LIMITS.days);
  const trialEndsStr = trialEnds.toLocaleDateString('pt-BR', { day: 'numeric', month: 'long' });

  const handleColorInput = (v) => {
    if (/^#[0-9A-Fa-f]{0,6}$/.test(v)) setBrandColor(v);
  };

  const formatCpf = (v) => v.replace(/\D/g, '').slice(0, 11)
    .replace(/^(\d{3})(\d)/, '$1.$2')
    .replace(/^(\d{3}\.\d{3})(\d)/, '$1.$2')
    .replace(/^(\d{3}\.\d{3}\.\d{3})(\d)/, '$1-$2');
  const formatCard = (v) => v.replace(/\D/g, '').slice(0, 16).replace(/(\d{4})(?=\d)/g, '$1 ');
  const formatExp = (v) => v.replace(/\D/g, '').slice(0, 4).replace(/^(\d{2})(\d)/, '$1/$2');

  return (
    <div style={{
      minHeight: '100vh', background: '#100D0A',
      fontFamily: 'Inter, sans-serif', color: '#F5F1E8',
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: (step === 1 || step === 2) ? 'flex-start' : 'center',
      padding: (step === 1 || step === 2) ? '0' : '32px',
      position: 'relative', overflow: 'hidden',
    }}>
      <GrainOverlay />
      <div style={{
        position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)',
        width: 800, height: 400, pointerEvents: 'none',
        background: `radial-gradient(ellipse at 50% 0%, ${brandColor}20, transparent 68%)`,
        transition: 'background 0.4s',
      }} />

      {/* Progress dots */}
      <div style={{
        position: (step === 1 || step === 2) ? 'sticky' : 'relative',
        top: (step === 1 || step === 2) ? 0 : 'auto',
        zIndex: 50, width: '100%',
        display: 'flex', justifyContent: 'center',
        padding: '24px 0 20px',
        background: (step === 1 || step === 2) ? 'rgba(16,13,10,0.9)' : 'transparent',
        backdropFilter: (step === 1 || step === 2) ? 'blur(12px)' : 'none',
        borderBottom: (step === 1 || step === 2) ? '1px solid rgba(245,241,232,0.06)' : 'none',
      }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div style={{
                width: i === step ? 24 : 8, height: 8, borderRadius: 999,
                background: i === step ? brandColor : i < step ? `${brandColor}60` : 'rgba(245,241,232,0.15)',
                transition: 'all 0.3s',
              }} />
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ── STEP 0: Boas-vindas ── */}
      {step === 0 && (
        <div style={{ maxWidth: 560, textAlign: 'center', position: 'relative', zIndex: 1 }}>
          {/* Orbital emblem */}
          <div style={{ display: 'inline-flex', position: 'relative', marginBottom: 40 }}>
            <svg width="80" height="80" viewBox="0 0 80 80" fill="none" style={{ animation: 'spin 12s linear infinite' }}>
              <circle cx="40" cy="40" r="34" stroke={brandColor} strokeWidth="1" opacity="0.25" fill="none" strokeDasharray="4 10" />
            </svg>
            <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)' }}>
              <OrbitasMark size={54} color={brandColor} />
            </div>
          </div>

          <h1 style={{
            margin: '0 0 16px', fontSize: 36,
            fontFamily: '"Instrument Serif", serif', fontWeight: 400, letterSpacing: '-0.02em',
          }}>
            Bem-vinda, Luisa.
          </h1>
          <p style={{ margin: '0 0 12px', fontSize: 16, color: 'rgba(245,241,232,0.6)', lineHeight: 1.65 }}>
            Vamos configurar o espaço onde seus consulentes encontram você.
          </p>
          <p style={{ margin: '0 0 48px', fontSize: 13, color: 'rgba(245,241,232,0.35)' }}>
            Leva menos de 2 minutos. Você pode editar tudo depois.
          </p>
          <button onClick={() => setStep(1)} style={{
            padding: '14px 40px', borderRadius: 999, border: 'none',
            background: brandColor,
            color: '#100D0A', fontSize: 15, fontWeight: 600,
            cursor: 'pointer', fontFamily: 'Inter, sans-serif',
            boxShadow: `0 8px 32px ${brandColor}40`,
            transition: 'all 0.15s',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; }}
          >
            Vamos lá →
          </button>
          <div>
            <button onClick={onComplete} style={{
              marginTop: 18, background: 'none', border: 'none', color: 'rgba(245,241,232,0.4)',
              fontSize: 13, cursor: 'pointer', fontFamily: 'Inter, sans-serif',
            }}>
              Pular por agora
            </button>
          </div>
        </div>
      )}

      {/* ── STEP 1: Sua marca ── */}
      {step === 1 && (
        <div className="orbita-onb-split" style={{
          width: '100%', maxWidth: 1100, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr',
          gap: 0, minHeight: 'calc(100vh - 72px)',
          position: 'relative', zIndex: 1,
        }}>
          <style>{`
            @media (min-width: 900px){
              .orbita-onb-split{ grid-template-columns: 1fr 1fr !important; }
              .orbita-onb-split > div:first-child{ padding: 48px !important; }
            }
          `}</style>
          {/* LEFT, form */}
          <div style={{ padding: '40px 20px', overflowY: 'auto' }}>
            <h2 style={{ margin: '0 0 8px', fontFamily: '"Instrument Serif", serif', fontSize: 28, fontWeight: 400 }}>
              Sua marca
            </h2>
            <p style={{ margin: '0 0 36px', fontSize: 14, color: 'rgba(245,241,232,0.5)' }}>
              Personalize o espaço que seus consulentes vão ver.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {/* Brand name */}
              <div>
                <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.5)', display: 'block', marginBottom: 8 }}>Nome da marca</label>
                <input
                  value={brandName} onChange={e => setBrandName(e.target.value)}
                  style={{
                    width: '100%', background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                    borderRadius: 10, padding: '11px 14px', color: '#F5F1E8', fontSize: 14,
                    fontFamily: 'Inter, sans-serif', outline: 'none', boxSizing: 'border-box',
                  }}
                  onFocus={e => e.target.style.borderColor = `${brandColor}55`}
                  onBlur={e => e.target.style.borderColor = 'rgba(245,241,232,0.1)'}
                />
              </div>

              {/* Logo upload */}
              <div>
                <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.5)', display: 'block', marginBottom: 8 }}>Logo <span style={{ opacity: 0.5 }}>(opcional)</span></label>
                <div
                  onClick={() => setLogoFile('logo-mock.png')}
                  style={{
                    height: 100, borderRadius: 12, border: `2px dashed ${logoFile ? '#8CAF88' : 'rgba(245,241,232,0.12)'}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    cursor: 'pointer', transition: 'all 0.15s',
                    background: logoFile ? 'rgba(140,175,136,0.06)' : 'rgba(245,241,232,0.02)',
                  }}
                  onMouseEnter={e => e.currentTarget.style.borderColor = `${brandColor}50`}
                  onMouseLeave={e => e.currentTarget.style.borderColor = logoFile ? '#8CAF88' : 'rgba(245,241,232,0.12)'}
                >
                  {logoFile ? (
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontSize: 22, marginBottom: 4 }}>✓</div>
                      <div style={{ fontSize: 12, color: '#8CAF88' }}>logo-mock.png</div>
                    </div>
                  ) : (
                    <div style={{ textAlign: 'center', color: 'rgba(245,241,232,0.3)' }}>
                      <div style={{ fontSize: 22, marginBottom: 6 }}>⊕</div>
                      <div style={{ fontSize: 12 }}>Clique para enviar PNG, SVG ou JPG</div>
                    </div>
                  )}
                </div>
              </div>

              {/* Color picker */}
              <div>
                <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.5)', display: 'block', marginBottom: 8 }}>Cor principal</label>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
                  {/* Preset swatches */}
                  {['#F5F1E8','#F4A261','#E76F51','#7A9EC9','#8CAF88','#C49BC9','#F4C261'].map(c => (
                    <button key={c} onClick={() => setBrandColor(c)} style={{
                      width: 30, height: 30, borderRadius: '50%', background: c, border: 'none',
                      cursor: 'pointer', flexShrink: 0,
                      boxShadow: brandColor === c ? `0 0 0 3px #100D0A, 0 0 0 5px ${c}` : `0 0 0 2px transparent`,
                      transition: 'box-shadow 0.15s',
                    }} />
                  ))}
                  {/* Custom hex */}
                  <input
                    value={brandColor} onChange={e => handleColorInput(e.target.value)}
                    style={{
                      width: 100, background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                      borderRadius: 8, padding: '7px 10px', color: '#F5F1E8', fontSize: 12,
                      fontFamily: 'monospace', outline: 'none',
                    }}
                  />
                  <input type="color" value={brandColor} onChange={e => setBrandColor(e.target.value)} style={{ width: 30, height: 30, borderRadius: 8, border: 'none', background: 'none', cursor: 'pointer', padding: 0 }} />
                </div>
              </div>

              {/* Subdomain */}
              <div>
                <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.5)', display: 'block', marginBottom: 8 }}>Endereço do portal</label>
                <div style={{ display: 'flex', alignItems: 'center', background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)', borderRadius: 10, overflow: 'hidden' }}>
                  <span style={{ padding: '11px 12px 11px 14px', fontSize: 13, color: 'rgba(245,241,232,0.35)', whiteSpace: 'nowrap', userSelect: 'none' }}>orbita.app/c/</span>
                  <input
                    value={subdomain} onChange={e => setSubdomain(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
                    style={{ flex: 1, background: 'none', border: 'none', padding: '11px 14px 11px 0', color: brandColor, fontSize: 13, fontFamily: 'Inter, sans-serif', outline: 'none' }}
                  />
                </div>
              </div>
            </div>

            <div style={{ marginTop: 40, display: 'flex', gap: 12 }}>
              <button onClick={() => setStep(0)} style={{ padding: '12px 24px', borderRadius: 999, border: '1px solid rgba(245,241,232,0.12)', background: 'transparent', color: 'rgba(245,241,232,0.5)', fontSize: 13, cursor: 'pointer', fontFamily: 'Inter, sans-serif' }}>
                ← Voltar
              </button>
              <button onClick={() => setStep(2)} style={{
                flex: 1, padding: '12px 0', borderRadius: 999, border: 'none',
                background: brandColor,
                color: '#100D0A', fontSize: 14, fontWeight: 600,
                cursor: 'pointer', fontFamily: 'Inter, sans-serif',
              }}>
                Continuar →
              </button>
            </div>
          </div>

          {/* RIGHT, Live preview — empilha embaixo do form no mobile; vira coluna fixa/sticky a partir de 900px */}
          <div className="orbita-onb-preview" style={{
            borderTop: '1px solid rgba(245,241,232,0.07)',
            background: 'rgba(245,241,232,0.015)',
            display: 'flex', flexDirection: 'column',
            height: 420, overflow: 'hidden',
          }}>
            <style>{`
              @media (min-width: 900px){
                .orbita-onb-preview{
                  border-top: none !important; border-left: 1px solid rgba(245,241,232,0.07) !important;
                  position: sticky !important; top: 72px !important; height: calc(100vh - 72px) !important;
                }
              }
            `}</style>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid rgba(245,241,232,0.06)', display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ display: 'flex', gap: 5 }}>
                {['#E76F51','#F4C261','#8CAF88'].map(c => <div key={c} style={{ width: 9, height: 9, borderRadius: '50%', background: c, opacity: 0.6 }} />)}
              </div>
              <div style={{ flex: 1, background: 'rgba(245,241,232,0.05)', borderRadius: 6, padding: '4px 10px', fontSize: 11, color: 'rgba(245,241,232,0.3)', fontFamily: 'monospace' }}>
                orbitas.app.br/c/{subdomain}
              </div>
            </div>
            {/* Mini portal preview */}
            <div style={{ flex: 1, overflowY: 'auto', padding: '24px 24px' }}>
              {/* Header */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28, paddingBottom: 16, borderBottom: '1px solid rgba(245,241,232,0.06)' }}>
                <div style={{ width: 34, height: 34, borderRadius: '50%', background: `${brandColor}22`, border: `1.5px solid ${brandColor}50`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: brandColor, fontSize: 11, fontWeight: 600 }}>
                  {brandName.split(' ').map(w => w[0]).slice(0,2).join('')}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: '#F5F1E8' }}>{brandName || 'Sua marca'}</div>
                  <div style={{ fontSize: 10, color: 'rgba(245,241,232,0.35)' }}>Astrologia · Consulta particular</div>
                </div>
              </div>
              {/* Theme */}
              <div style={{ marginBottom: 20 }}>
                <div style={{ fontSize: 10, color: 'rgba(245,241,232,0.35)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>Revolução Solar</div>
                <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 18, lineHeight: 1.3, marginBottom: 10 }}>Consolidar, não expandir.</div>
              </div>
              {/* Sample month block */}
              <div style={{ padding: '14px 16px', borderRadius: 14, background: `${brandColor}10`, border: `1px solid ${brandColor}28`, marginBottom: 14 }}>
                <div style={{ fontSize: 12, color: brandColor, marginBottom: 8, fontWeight: 500 }}>🌱 Mês atual, Abril</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
                  {[{ l: 'Foco', c: '#7A9EC9' }, { l: 'Risco', c: '#E76F51' }].map(x => (
                    <div key={x.l} style={{ padding: '8px 10px', borderRadius: 8, background: `${x.c}0c`, border: `1px solid ${x.c}20` }}>
                      <div style={{ fontSize: 9, color: x.c, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>{x.l}</div>
                      <div style={{ width: '80%', height: 6, borderRadius: 3, background: 'rgba(245,241,232,0.1)' }} />
                    </div>
                  ))}
                </div>
              </div>
              {/* Month grid mini */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6,1fr)', gap: 4 }}>
                {['Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez','Jan','Fev','Mar'].map((m, i) => (
                  <div key={m} style={{
                    padding: '6px 4px', borderRadius: 6, fontSize: 9, textAlign: 'center',
                    background: i === 0 ? `${brandColor}14` : 'rgba(245,241,232,0.03)',
                    border: `1px solid ${i === 0 ? `${brandColor}30` : 'rgba(245,241,232,0.05)'}`,
                    color: i === 0 ? brandColor : 'rgba(245,241,232,0.3)',
                  }}>{m}</div>
                ))}
              </div>
              {/* CTA preview */}
              <div style={{ marginTop: 18 }}>
                <div style={{ padding: '10px 16px', borderRadius: 999, background: brandColor, color: '#100D0A', fontSize: 12, fontWeight: 600, textAlign: 'center' }}>
                  ✦ Check-in da semana
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ── STEP 2: Plano + Pagamento ── */}
      {step === 2 && (
        <div className="orbita-onb-split2" style={{
          width: '100%', maxWidth: 1100, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr',
          gap: 0, minHeight: 'calc(100vh - 72px)',
          position: 'relative', zIndex: 1,
        }}>
          <style>{`
            @media (min-width: 900px){
              .orbita-onb-split2{ grid-template-columns: 1.4fr 1fr !important; }
              .orbita-onb-split2 > div:first-child{ padding: 40px 48px 120px !important; }
            }
          `}</style>
          {/* LEFT, plan + payment */}
          <div style={{ padding: '32px 20px 40px', overflowY: 'auto' }}>
            <h2 style={{ margin: '0 0 8px', fontFamily: '"Instrument Serif", serif', fontSize: 28, fontWeight: 400, color: '#F5F1E8' }}>
              Escolha seu plano
            </h2>
            <p style={{ margin: '0 0 28px', fontSize: 14, color: 'rgba(245,241,232,0.6)' }}>
              3 dias grátis ou 3 sessões, o que vier primeiro. Sem cobrança hoje, cancele quando quiser.
            </p>

            {/* Plan toggle */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 32 }}>
              {Object.entries(PLANS).map(([id, p]) => {
                const sel = plan === id;
                return (
                  <button key={id} onClick={() => setPlan(id)} style={{
                    textAlign: 'left', padding: '18px 20px', borderRadius: 16, cursor: 'pointer',
                    background: sel ? `${brandColor}14` : 'rgba(245,241,232,0.03)',
                    border: `1.5px solid ${sel ? brandColor + '60' : 'rgba(245,241,232,0.1)'}`,
                    transition: 'all 0.15s', fontFamily: 'Inter, sans-serif', position: 'relative',
                  }}>
                    {id === 'atelier' && (
                      <span style={{
                        position: 'absolute', top: -10, right: 14,
                        background: brandColor,
                        color: '#100D0A', fontSize: 9, fontWeight: 700, letterSpacing: '0.06em',
                        textTransform: 'uppercase', padding: '3px 9px', borderRadius: 999,
                        whiteSpace: 'nowrap',
                      }}>Mais escolhido</span>
                    )}
                    <div style={{ fontSize: 13, fontWeight: 600, color: sel ? brandColor : '#F5F1E8', marginBottom: 6 }}>{p.name}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 8 }}>
                      <span style={{ fontFamily: '"Instrument Serif", serif', fontSize: 26, color: sel ? brandColor : '#F5F1E8', lineHeight: 1 }}>R${p.price}</span>
                      <span style={{ fontSize: 11, color: 'rgba(245,241,232,0.55)' }}>/mês</span>
                    </div>
                    <div style={{ fontSize: 11, color: 'rgba(245,241,232,0.6)', marginBottom: 8, lineHeight: 1.4 }}>{p.desc}</div>
                    <div style={{ fontSize: 11, color: 'rgba(245,241,232,0.75)', fontFamily: 'DM Mono, monospace' }}>{p.sessions} sessões/mês</div>
                  </button>
                );
              })}
            </div>

            {/* Payment method — cartão de crédito é o único meio aceito */}
            <div style={{ marginBottom: 20 }}>
              <label style={{ fontSize: 11, fontWeight: 600, color: 'rgba(245,241,232,0.55)', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'block', marginBottom: 10 }}>Forma de pagamento</label>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px',
                background: 'rgba(245,241,232,0.04)', borderRadius: 12, border: '1px solid rgba(245,241,232,0.08)',
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#F5F1E8" strokeWidth="2"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#F5F1E8' }}>Cartão de crédito</div>
                  <div style={{ fontSize: 10, color: 'rgba(245,241,232,0.45)' }}>Renovação automática mensal</div>
                </div>
              </div>
            </div>

            {/* CPF (always) */}
            <div style={{ marginBottom: 18 }}>
              <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.6)', display: 'block', marginBottom: 8 }}>
                CPF <span style={{ opacity: 0.5, fontWeight: 400 }}>(pra emissão da NF)</span>
              </label>
              <input value={cpf} onChange={e => setCpf(formatCpf(e.target.value))} placeholder="000.000.000-00" style={{
                width: '100%', background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                borderRadius: 10, padding: '11px 14px', color: '#F5F1E8', fontSize: 14,
                fontFamily: 'DM Mono, monospace', outline: 'none', boxSizing: 'border-box',
                letterSpacing: '0.02em',
              }}
              onFocus={e => e.target.style.borderColor = `${brandColor}55`}
              onBlur={e => e.target.style.borderColor = 'rgba(245,241,232,0.1)'}
              />
            </div>

            {/* Card fields */}
            {(
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 12 }}>
                <div>
                  <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.6)', display: 'block', marginBottom: 8 }}>Nome impresso no cartão</label>
                  <input value={cardName} onChange={e => setCardName(e.target.value.toUpperCase())} placeholder="LUISA RIBEIRO" style={{
                    width: '100%', background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                    borderRadius: 10, padding: '11px 14px', color: '#F5F1E8', fontSize: 14,
                    fontFamily: 'Inter, sans-serif', outline: 'none', boxSizing: 'border-box',
                  }} onFocus={e => e.target.style.borderColor = `${brandColor}55`} onBlur={e => e.target.style.borderColor = 'rgba(245,241,232,0.1)'} />
                </div>
                <div>
                  <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.6)', display: 'block', marginBottom: 8 }}>Número do cartão</label>
                  <div style={{ position: 'relative' }}>
                    <input value={cardNumber} onChange={e => setCardNumber(formatCard(e.target.value))} placeholder="0000 0000 0000 0000" style={{
                      width: '100%', background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                      borderRadius: 10, padding: '11px 50px 11px 14px', color: '#F5F1E8', fontSize: 14,
                      fontFamily: 'DM Mono, monospace', outline: 'none', boxSizing: 'border-box', letterSpacing: '0.04em',
                    }} onFocus={e => e.target.style.borderColor = `${brandColor}55`} onBlur={e => e.target.style.borderColor = 'rgba(245,241,232,0.1)'} />
                    <div style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', display: 'flex', gap: 4 }}>
                      {[['#1A1F71','VISA'], ['#EB001B','MC']].map(([c, l]) => (
                        <div key={l} style={{ width: 28, height: 18, borderRadius: 3, background: c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 7, color: '#fff', fontWeight: 700 }}>{l}</div>
                      ))}
                    </div>
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                  <div>
                    <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.6)', display: 'block', marginBottom: 8 }}>Validade</label>
                    <input value={cardExp} onChange={e => setCardExp(formatExp(e.target.value))} placeholder="MM/AA" style={{
                      width: '100%', background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                      borderRadius: 10, padding: '11px 14px', color: '#F5F1E8', fontSize: 14,
                      fontFamily: 'DM Mono, monospace', outline: 'none', boxSizing: 'border-box',
                    }} onFocus={e => e.target.style.borderColor = `${brandColor}55`} onBlur={e => e.target.style.borderColor = 'rgba(245,241,232,0.1)'} />
                  </div>
                  <div>
                    <label style={{ fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.6)', display: 'block', marginBottom: 8 }}>CVV</label>
                    <input value={cardCvv} onChange={e => setCardCvv(e.target.value.replace(/\D/g, '').slice(0,4))} placeholder="•••" style={{
                      width: '100%', background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                      borderRadius: 10, padding: '11px 14px', color: '#F5F1E8', fontSize: 14,
                      fontFamily: 'DM Mono, monospace', outline: 'none', boxSizing: 'border-box', letterSpacing: '0.1em',
                    }} onFocus={e => e.target.style.borderColor = `${brandColor}55`} onBlur={e => e.target.style.borderColor = 'rgba(245,241,232,0.1)'} />
                  </div>
                </div>
              </div>
            )}

            {/* Coupon (collapsible) */}
            <div style={{ marginTop: 8 }}>
              {!showCoupon ? (
                <button onClick={() => setShowCoupon(true)} style={{ background: 'none', border: 'none', color: 'rgba(245,241,232,0.5)', fontSize: 12, cursor: 'pointer', padding: '4px 0', fontFamily: 'Inter, sans-serif' }}>
                  + Tenho um cupom
                </button>
              ) : (
                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <input value={coupon} onChange={e => { setCoupon(e.target.value.toUpperCase()); setCouponApplied(false); }} placeholder="PILOTO20" style={{
                    flex: 1, background: 'rgba(245,241,232,0.04)', border: '1px solid rgba(245,241,232,0.1)',
                    borderRadius: 8, padding: '8px 12px', color: '#F5F1E8', fontSize: 12,
                    fontFamily: 'DM Mono, monospace', outline: 'none', letterSpacing: '0.05em',
                  }} />
                  <button onClick={() => setCouponApplied(coupon.length > 2)} style={{
                    padding: '8px 16px', borderRadius: 8, border: 'none',
                    background: couponApplied ? 'rgba(140,175,136,0.16)' : 'rgba(245,241,232,0.08)',
                    color: couponApplied ? '#8CAF88' : 'rgba(245,241,232,0.7)',
                    fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'Inter, sans-serif',
                  }}>{couponApplied ? '✓ Aplicado' : 'Aplicar'}</button>
                </div>
              )}
              {couponApplied && (
                <div style={{ fontSize: 11, color: '#8CAF88', marginTop: 6, fontFamily: 'Inter, sans-serif' }}>
                  Cupom <strong>{coupon}</strong> aplicado, 20% de desconto nos próximos 3 meses
                </div>
              )}
            </div>

            {/* Footer nav */}
            <div style={{ marginTop: 36, display: 'flex', gap: 12 }}>
              <button onClick={() => setStep(1)} style={{ padding: '12px 24px', borderRadius: 999, border: '1px solid rgba(245,241,232,0.12)', background: 'transparent', color: 'rgba(245,241,232,0.7)', fontSize: 13, cursor: 'pointer', fontFamily: 'Inter, sans-serif' }}>
                ← Voltar
              </button>
            </div>
          </div>

          {/* RIGHT, order summary — empilha embaixo no mobile, vira coluna sticky a partir de 900px */}
          <div className="orbita-onb-summary" style={{
            borderTop: '1px solid rgba(245,241,232,0.07)',
            background: 'rgba(245,241,232,0.015)',
            overflow: 'auto',
            padding: '28px 20px 40px',
          }}>
            <style>{`
              @media (min-width: 900px){
                .orbita-onb-summary{
                  border-top: none !important; border-left: 1px solid rgba(245,241,232,0.07) !important;
                  position: sticky !important; top: 72px !important; height: calc(100vh - 72px) !important;
                  padding: 40px 36px 96px !important;
                }
              }
            `}</style>
            <div style={{ fontSize: 10, color: 'rgba(245,241,232,0.45)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600, marginBottom: 18 }}>Resumo</div>

            {/* Plan row */}
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', paddingBottom: 14, borderBottom: '1px solid rgba(245,241,232,0.08)' }}>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, color: '#F5F1E8' }}>Órbitas {chosen.name}</div>
                <div style={{ fontSize: 11, color: 'rgba(245,241,232,0.55)', marginTop: 2 }}>Cobrado mensalmente</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 22, color: '#F5F1E8', lineHeight: 1 }}>R${chosen.price}</div>
                <div style={{ fontSize: 10, color: 'rgba(245,241,232,0.4)', marginTop: 2 }}>/mês</div>
              </div>
            </div>

            {/* Discount line */}
            {couponApplied && (
              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 12, fontSize: 12, color: '#8CAF88' }}>
                <span>Cupom {coupon}</span>
                <span style={{ fontFamily: 'DM Mono, monospace' }}>− R${discount}</span>
              </div>
            )}

            {/* Trial card */}
            <div style={{
              marginTop: 18, padding: 16, borderRadius: 14,
              background: `${brandColor}10`, border: `1px solid ${brandColor}30`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={brandColor} strokeWidth="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                <span style={{ fontSize: 12, fontWeight: 600, color: brandColor, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>3 dias grátis · até 3 sessões</span>
              </div>
              <div style={{ fontSize: 12, color: 'rgba(245,241,232,0.7)', lineHeight: 1.6 }}>
                Hoje você libera tudo sem pagar nada.<br/>
                Vale até {trialEndsStr} ou até 3 sessões processadas — o que vier primeiro.
              </div>
            </div>

            {/* Totals */}
            <div style={{ marginTop: 18, padding: 14, borderRadius: 12, background: 'rgba(245,241,232,0.04)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(245,241,232,0.65)', marginBottom: 6 }}>
                <span>Hoje</span>
                <span style={{ fontFamily: 'DM Mono, monospace', color: '#8CAF88', fontWeight: 600 }}>R$0,00</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(245,241,232,0.65)' }}>
                <span>{trialEndsStr}</span>
                <span style={{ fontFamily: 'DM Mono, monospace', color: '#F5F1E8' }}>R${monthly},00</span>
              </div>
            </div>

            {/* CTA */}
            <button onClick={() => setStep(3)} style={{
              marginTop: 24, width: '100%', padding: '14px 0', borderRadius: 999, border: 'none',
              background: brandColor,
              color: '#100D0A', fontSize: 14, fontWeight: 600,
              cursor: 'pointer', fontFamily: 'Inter, sans-serif',
              boxShadow: `0 8px 32px ${brandColor}30`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
              Começar trial de 3 dias
            </button>
            <div style={{ fontSize: 10, color: 'rgba(245,241,232,0.4)', marginTop: 12, textAlign: 'center', lineHeight: 1.5 }}>
              Ao continuar você concorda com os <span onClick={() => setShowTerms('termos')} style={{ color: brandColor, cursor: 'pointer' }}>Termos</span> e a <span onClick={() => setShowTerms('privacidade')} style={{ color: brandColor, cursor: 'pointer' }}>Política de Privacidade</span>.
            </div>
          </div>
        </div>
      )}

      {/* ── STEP 3: Primeira sessão ── */}
      {step === 3 && (
        <div style={{ maxWidth: 700, width: '100%', position: 'relative', zIndex: 1, padding: '0 20px' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <h2 style={{ margin: '0 0 10px', fontFamily: '"Instrument Serif", serif', fontSize: 30, fontWeight: 400 }}>
              Como você quer começar?
            </h2>
            <p style={{ margin: 0, fontSize: 14, color: 'rgba(245,241,232,0.5)' }}>
              Você pode explorar o produto agora ou subir uma sessão real.
            </p>
          </div>

          <div className="orbita-onb-options" style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
            <style>{`@media (min-width: 640px){ .orbita-onb-options{ grid-template-columns: 1fr 1fr !important; } }`}</style>
            {/* Option A, real session */}
            <button onClick={onGoUpload} style={{
              padding: '36px 28px', borderRadius: 20, textAlign: 'left',
              background: `${brandColor}0e`, border: `1.5px solid ${brandColor}30`,
              cursor: 'pointer', fontFamily: 'Inter, sans-serif', transition: 'all 0.18s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = `${brandColor}18`; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = `${brandColor}0e`; e.currentTarget.style.transform = 'none'; }}
            >
              <div style={{ fontSize: 32, marginBottom: 16 }}>📁</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: '#F5F1E8', marginBottom: 8 }}>
                Subir uma sessão real
              </div>
              <div style={{ fontSize: 13, color: 'rgba(245,241,232,0.5)', lineHeight: 1.6 }}>
                Envie o áudio ou transcrição de uma consulta que você já fez. A IA processa e monta o painel.
              </div>
              <div style={{ marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 500, color: brandColor }}>
                Começar agora →
              </div>
            </button>

            {/* Option B, demo */}
            <button onClick={onGoEditor} style={{
              padding: '36px 28px', borderRadius: 20, textAlign: 'left',
              background: 'rgba(245,241,232,0.04)', border: '1.5px solid rgba(245,241,232,0.1)',
              cursor: 'pointer', fontFamily: 'Inter, sans-serif', transition: 'all 0.18s',
            }}
            onMouseEnter={e => { e.currentTarget.style.background = 'rgba(245,241,232,0.07)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'rgba(245,241,232,0.04)'; e.currentTarget.style.transform = 'none'; }}
            >
              <div style={{ fontSize: 32, marginBottom: 16 }}>✨</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: '#F5F1E8', marginBottom: 8 }}>
                Explorar com sessão demo
              </div>
              <div style={{ fontSize: 13, color: 'rgba(245,241,232,0.5)', lineHeight: 1.6 }}>
                Carrega a sessão da Mariana Santos com dados prontos. Veja como o editor e o portal funcionam.
              </div>
              <div style={{ marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 500, color: 'rgba(245,241,232,0.45)' }}>
                Ver demo →
              </div>
            </button>
          </div>

          <p style={{ textAlign: 'center', marginTop: 20, fontSize: 12, color: 'rgba(245,241,232,0.35)' }}>
            Já tem consulentes cadastradas em outro lugar? <span onClick={() => setShowImport(true)} style={{ color: brandColor, cursor: 'pointer' }}>Importar de uma planilha (CSV)</span>
          </p>

          <button onClick={() => setStep(2)} style={{
            display: 'block', margin: '20px auto 0', background: 'none', border: 'none',
            color: 'rgba(245,241,232,0.5)', fontSize: 13, cursor: 'pointer', padding: '8px 16px',
          }}>
            ← Voltar
          </button>
        </div>
      )}

      {showTerms && <TermsModal initialTab={showTerms} onClose={() => setShowTerms(null)} />}
      {showImport && <ImportCsvModal onClose={() => setShowImport(false)} />}

      <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
    </div>
  );
};

Object.assign(window, { OnboardingScreen });