// tela-onboarding.jsx — Primeiro acesso: splash → boas-vindas → persona → lembrete.

function TelaOnboarding() {
  const store = useStore();
  const [step, setStep] = useState(0);
  const [name, setName] = useState(store.state.name || '');
  const [persona, setPersona] = useState(null);
  const [time, setTime] = useState('20:30');
  const [reminder, setReminder] = useState(true);
  const steps = 4;

  const finish = () => {
    const j = (PERSONAS.find(p => p.id === persona) || {}).journey || 'restauracao';
    store.actions.finishOnboarding({ name: name.trim() || 'amado', persona, reminderTime: time, reminderOn: reminder });
    nav('/home'); // mapa primeiro: cai na Home (tab bar visível); o card "Continuar jornada" leva à jornada escolhida
  };

  // Splash
  if (step === 0) {
    return (
      <div className="ob-stage" style={obStage}>
        <div className="glow-top" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'relative', textAlign: 'center', animation: 'riseIn .8s var(--ease) both' }}>
          <Logo size={76} radius={22} />
          <h1 className="serif" style={{ fontSize: 'clamp(38px,11vw,58px)', fontWeight: 600, lineHeight: 1, margin: '24px 0 0' }}>O Casal<br />Legendário</h1>
          <div className="mono" style={{ fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', marginTop: 18 }}>{BRAND.tagline}</div>
          <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, animation: 'riseIn .8s var(--ease) .15s both' }}>
            <span style={{ width: 30, height: 1, background: 'var(--accent-line)' }} />
            <div className="serif" style={{ fontSize: 17, color: 'var(--cream)', letterSpacing: '0.01em' }}>{BRAND.people}</div>
            <div className="mono" style={{ fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--faint)' }}>{BRAND.reach.seguidores} seguidores · {BRAND.reach.vidas} vidas tocadas</div>
          </div>
        </div>
        <button className="btn btn-gold btn-lg" style={{ position: 'absolute', bottom: 'max(36px, env(safe-area-inset-bottom))', left: 24, right: 24, animation: 'riseIn .8s var(--ease) .3s both' }} onClick={() => setStep(1)}>
          Começar a caminhada <Icon name="arrow" size={18} />
        </button>
      </div>
    );
  }

  return (
    <div className="ob-stage" style={{ ...obStage, justifyContent: 'flex-start', paddingTop: 'max(40px, env(safe-area-inset-top))' }}>
      <div className="glow-top" style={{ position: 'absolute', inset: 0 }} />
      <div style={{ position: 'relative', width: '100%', maxWidth: 440, flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* progress */}
        <div className="row" style={{ gap: 6, marginBottom: 28 }}>
          {Array.from({ length: steps - 1 }).map((_, i) => (
            <span key={i} style={{ flex: 1, height: 3, borderRadius: 999, background: i < step ? 'var(--accent)' : 'var(--surface-2)' }} />
          ))}
        </div>

        {step === 1 && (
          <div style={{ animation: 'riseIn .4s var(--ease) both' }}>
            <Eyebrow>Bem-vindos</Eyebrow>
            <h1 className="serif" style={{ fontSize: 'clamp(32px,8vw,44px)', fontWeight: 600, lineHeight: 1.06, margin: '12px 0 14px' }}>Que bom ter você aqui.</h1>
            <p className="muted" style={{ fontSize: 16, lineHeight: 1.55 }}>Vamos caminhar um passo de cada vez rumo à restauração do seu casamento. Como podemos te chamar?</p>
            <label className="label" htmlFor="ob-nome" style={{ marginTop: 24 }}>Seu nome</label>
            <input id="ob-nome" className="field" autoFocus value={name} onChange={e => setName(e.target.value)} placeholder="Seu nome" onKeyDown={e => e.key === 'Enter' && name.trim() && setStep(2)} />
            <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 18, opacity: name.trim() ? 1 : 0.5 }} disabled={!name.trim()} onClick={() => setStep(2)}>{name.trim() ? 'Prazer, ' + name.trim().split(' ')[0] : 'Continuar'} <Icon name="arrow" size={18} /></button>
          </div>
        )}

        {step === 2 && (
          <div style={{ animation: 'riseIn .4s var(--ease) both' }}>
            <Eyebrow>Passo 1 de 2</Eyebrow>
            <h1 className="serif" style={{ fontSize: 'clamp(30px,7vw,40px)', fontWeight: 600, lineHeight: 1.08, margin: '12px 0 8px' }}>{name.trim() ? name.trim().split(' ')[0] + ', onde você está hoje?' : 'Onde você está hoje?'}</h1>
            <p className="muted" style={{ fontSize: 15 }}>Sem julgamento. Só para começarmos do lugar certo.</p>
            <div className="stack" style={{ marginTop: 20 }}>
              {PERSONAS.map((p, i) => (
                <div key={p.id} className={'card card-tap ' + (['rise-in','rise-in-2','rise-in-3','rise-in-4'][i] || 'rise-in') + (persona === p.id ? ' card-accent' : '')} style={{ display: 'flex', gap: 14, alignItems: 'center', borderColor: persona === p.id ? 'var(--accent-line)' : 'var(--line)' }} onClick={() => setPersona(p.id)}>
                  <div style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--accent-soft)', display: 'grid', placeItems: 'center', color: 'var(--accent)', flex: '0 0 42px' }}><Icon name={p.icon} size={22} /></div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 600, fontSize: 15 }}>{p.title}</div>
                    <div className="muted" style={{ fontSize: 13 }}>{p.desc}</div>
                  </div>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', border: '1.5px solid var(--line)', background: persona === p.id ? 'var(--accent)' : 'transparent', display: 'grid', placeItems: 'center', color: 'var(--on-accent)', flex: '0 0 22px' }}>{persona === p.id && <Icon name="check" size={14} />}</span>
                </div>
              ))}
            </div>
            <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 18, opacity: persona ? 1 : 0.5 }} disabled={!persona} onClick={() => setStep(3)}>Continuar</button>
          </div>
        )}

        {step === 3 && (
          <div style={{ animation: 'riseIn .4s var(--ease) both' }}>
            <Eyebrow>Passo 2 de 2</Eyebrow>
            <h1 className="serif" style={{ fontSize: 'clamp(30px,7vw,40px)', fontWeight: 600, lineHeight: 1.08, margin: '12px 0 8px' }}>O hábito que restaura.</h1>
            <p className="muted" style={{ fontSize: 15, lineHeight: 1.55 }}>Um lembrete diário ajuda a manter a sequência. Escolha o melhor horário para o seu devocional.</p>
            <div className="card" style={{ marginTop: 22, textAlign: 'center', padding: '24px 18px' }}>
              <Icon name="bell" size={26} color="var(--accent)" style={{ margin: '0 auto 12px' }} />
              <input type="time" className="field" aria-label="Horário do lembrete diário" style={{ textAlign: 'center', fontSize: 22, fontFamily: 'var(--mono)', maxWidth: 180, margin: '0 auto' }} value={time} onChange={e => setTime(e.target.value)} />
              <label className="row" style={{ gap: 10, justifyContent: 'center', marginTop: 18, cursor: 'pointer' }} onClick={() => setReminder(!reminder)}>
                <span style={{ width: 22, height: 22, borderRadius: 7, border: '1.5px solid var(--line)', background: reminder ? 'var(--accent)' : 'transparent', display: 'grid', placeItems: 'center', color: 'var(--on-accent)' }}>{reminder && <Icon name="check" size={14} />}</span>
                <span style={{ fontSize: 14 }}>Quero receber o lembrete diário</span>
              </label>
            </div>
            <button className="btn btn-gold btn-full btn-lg" style={{ marginTop: 18 }} onClick={finish}>Começar minha jornada <Icon name="arrow" size={18} /></button>
            <button className="btn btn-ghost btn-full" style={{ marginTop: 10 }} onClick={finish}>Agora não, decido depois</button>
          </div>
        )}
      </div>
    </div>
  );
}

const obStage = {
  minHeight: '100vh', minHeight: '100dvh', display: 'flex', flexDirection: 'column',
  alignItems: 'center', justifyContent: 'center', padding: '24px', position: 'relative',
  maxWidth: 520, margin: '0 auto',
};

Object.assign(window, { TelaOnboarding });