// vita-profile.jsx — Profile tab: family members, patient switch (face), voice-guided add, privacy

const PARENTESCOS = ['Hijo / Hija', 'Esposo / Esposa', 'Mamá', 'Papá', 'Hermano / Hermana', 'Abuelo / Abuela', 'Otro'];

function avatarFor(nombre) { return (nombre || '?').trim().charAt(0).toUpperCase(); }

function Avatar({ t, persona, nombre, size = 48, active, menor }) {
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <div style={{
        width: size, height: size, borderRadius: '32%', display: 'grid', placeItems: 'center',
        background: `linear-gradient(135deg, ${persona.accent}, ${persona.accentDeep})`, color: persona.onAccent || '#fff',
        fontFamily: 'Instrument Serif, serif', fontSize: size * 0.46,
        boxShadow: active ? `0 0 0 3px ${t.bg1}, 0 0 0 5px ${persona.accent}` : 'none',
      }}>{avatarFor(nombre)}</div>
      {menor && (
        <span style={{ position: 'absolute', right: -3, bottom: -3, width: size * 0.4, height: size * 0.4, borderRadius: '50%', background: t.bg1, display: 'grid', placeItems: 'center', border: `1.5px solid ${t.stroke}` }}>
          {Icon.child({ s: size * 0.26, c: persona.accent })}
        </span>
      )}
    </div>
  );
}

// ── Profile screen ──────────────────────────────────────────────
function ProfileScreen({ t, persona, profile, usuarioSesion, family, activeId, onSwitch, onAdd, onOpenData, onShowSecurity, onTalk, onToggleTheme, onLogout, onOpenHome, onOpenHistory, onOpenProfile, onOpenServices }) {
  const nombreCuenta = usuarioSesion ? [usuarioSesion.nombre, usuarioSesion.apellido].filter(Boolean).join(' ') : null;
  const titular = { id: 'titular', nombre: nombreCuenta || profile.nombre || 'Tú', sub: 'Titular de la cuenta', edad: profile.edad, eps: profile.eps };
  return (
    <Stage t={t}>
      <div style={{ flex: 1, overflow: 'auto', padding: '58px 18px 96px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
          <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 30, color: t.text }}>Perfil</div>
          <IconBtn t={t} onClick={onToggleTheme} title="Tema">{t.dark ? Icon.sun({ s: 17 }) : Icon.moon({ s: 17 })}</IconBtn>
        </div>

        {/* account holder */}
        <button onClick={() => onSwitch({ id: 'titular' })} style={{ width: '100%', textAlign: 'left', cursor: 'pointer', border: `1.5px solid ${activeId === 'titular' ? persona.accent : t.stroke}`, borderRadius: 22, padding: 16, marginBottom: 18, background: activeId === 'titular' ? hexA(persona.accent, t.dark ? 0.1 : 0.06) : (t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF'), display: 'flex', alignItems: 'center', gap: 14, WebkitTapHighlightColor: 'transparent' }}>
          <Avatar t={t} persona={persona} nombre={titular.nombre} size={56} active={activeId === 'titular'} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: t.text }}>{titular.nombre}</div>
            <div style={{ fontSize: 13, color: t.muted, fontWeight: 500 }}>{[titular.sub, titular.eps].filter(Boolean).join(' · ')}</div>
          </div>
          {activeId === 'titular'
            ? <span style={{ fontSize: 12, fontWeight: 700, color: persona.accent, background: hexA(persona.accent, 0.14), padding: '5px 11px', borderRadius: 999 }}>Activo</span>
            : <span style={{ color: t.muted }}>{Icon.swap({ s: 19, c: t.muted })}</span>}
        </button>

        {/* cuenta real — a propósito distinta de "tu historia con Vita": esto viene
            del backend (sesión autenticada), no de lo que se contó en el onboarding */}
        {usuarioSesion && (
          <div style={{ borderRadius: 18, padding: '14px 16px', marginBottom: 18, border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.03)' : '#FBFCFE' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              {Icon.shield({ s: 14, c: t.muted })}
              <span style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: t.muted }}>Tu cuenta</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                <span style={{ fontSize: 13, color: t.muted, fontWeight: 500 }}>Correo</span>
                <span style={{ fontSize: 13.5, color: t.text, fontWeight: 600 }}>{usuarioSesion.correo}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                <span style={{ fontSize: 13, color: t.muted, fontWeight: 500 }}>Rol</span>
                <span style={{ fontSize: 13.5, color: t.text, fontWeight: 600 }}>{usuarioSesion.rol}</span>
              </div>
            </div>
          </div>
        )}

        {/* family */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '4px 4px 12px' }}>
          {Icon.users({ s: 16, c: t.muted })}
          <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: t.muted }}>Mi familia</span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 14 }}>
          {family.length === 0 && (
            <div style={{ padding: '22px 16px', borderRadius: 18, border: `1.5px dashed ${t.strokeStrong}`, textAlign: 'center', color: t.muted }}>
              <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'center' }}>{Icon.users({ s: 26, c: t.muted })}</div>
              <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.45 }}>Aún no has agregado familiares.<br/>Vita puede cuidar a toda tu familia.</div>
            </div>
          )}
          {family.map(m => {
            const isActive = activeId === m.id;
            return (
              <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: 14, borderRadius: 20, border: `1.5px solid ${isActive ? persona.accent : t.stroke}`, background: isActive ? hexA(persona.accent, t.dark ? 0.1 : 0.06) : (t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF') }}>
                <Avatar t={t} persona={persona} nombre={m.nombre} size={50} active={isActive} menor={m.menor} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15.5, fontWeight: 700, color: t.text }}>{m.nombre}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginTop: 2 }}>
                    <span style={{ fontSize: 12.5, color: t.textSoft, fontWeight: 500 }}>{m.parentesco}{m.edad ? ' · ' + m.edad + ' años' : ''}</span>
                    {m.menor && <span style={{ fontSize: 10.5, fontWeight: 700, color: '#E6A93C', background: hexA('#E6A93C', 0.16), padding: '2px 8px', borderRadius: 999 }}>Menor · gestiona {m.guardianNombre}</span>}
                  </div>
                </div>
                {isActive
                  ? <span style={{ fontSize: 12, fontWeight: 700, color: persona.accent, background: hexA(persona.accent, 0.14), padding: '5px 11px', borderRadius: 999 }}>Activo</span>
                  : <button onClick={() => onSwitch(m)} style={{ display: 'flex', alignItems: 'center', gap: 5, cursor: 'pointer', border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.7)', borderRadius: 999, padding: '7px 12px', color: persona.accent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 12.5, fontWeight: 700, WebkitTapHighlightColor: 'transparent' }}>{Icon.faceid({ s: 15, c: persona.accent })} Cambiar</button>}
              </div>
            );
          })}
        </div>

        {/* add member */}
        <button onClick={() => onAdd()} style={{ width: '100%', padding: '15px', borderRadius: 16, cursor: 'pointer', border: 'none', background: `linear-gradient(135deg, ${persona.accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, boxShadow: `0 10px 24px ${hexA(persona.accent, 0.35)}`, marginBottom: 24 }}>
          {Icon.mic({ s: 19, c: t.onAccent })} Agregar familiar con Vita
        </button>

        {/* privacy & data */}
        <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: t.muted, margin: '0 4px 12px' }}>Privacidad y datos</div>
        <div style={{ borderRadius: 20, overflow: 'hidden', border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF' }}>
          {[
            { icon: 'user', label: 'Mis datos personales', desc: 'Nombre, contacto, cobertura', onClick: onOpenData },
            { icon: 'faceid', label: 'Seguridad y biometría', desc: 'Tu rostro y acceso', onClick: onShowSecurity },
            { icon: 'consent', label: 'Consentimientos y privacidad', desc: 'Habeas Data · quién ve tus datos', onClick: onShowSecurity },
            { icon: 'logout', label: 'Cerrar sesión', desc: 'Saldrás de tu cuenta', onClick: onLogout, danger: true },
          ].map((r, i) => (
            <button key={i} onClick={r.onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 13, padding: '14px 15px', cursor: 'pointer', border: 'none', borderTop: i ? `1px solid ${t.stroke}` : 'none', background: 'transparent', textAlign: 'left', WebkitTapHighlightColor: 'transparent' }}>
              <span style={{ width: 38, height: 38, flexShrink: 0, borderRadius: 11, display: 'grid', placeItems: 'center', background: r.danger ? hexA(t.coral, 0.13) : hexA(persona.accent, 0.13) }}>{Icon[r.icon]({ s: 19, c: r.danger ? t.coral : persona.accent })}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14.5, fontWeight: 700, color: r.danger ? t.coral : t.text }}>{r.label}</div>
                <div style={{ fontSize: 12, color: t.muted, fontWeight: 500, marginTop: 1 }}>{r.desc}</div>
              </div>
              {Icon.chevron({ s: 17, c: t.muted })}
            </button>
          ))}
        </div>

        {/* Vita helper */}
        <button onClick={onTalk} style={{ width: '100%', marginTop: 16, display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderRadius: 18, cursor: 'pointer', border: `1px solid ${hexA(persona.accent, 0.3)}`, background: hexA(persona.accent, t.dark ? 0.08 : 0.05), textAlign: 'left', WebkitTapHighlightColor: 'transparent' }}>
          <VitaDot t={t} size={34} active />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: t.text }}>¿Necesitas algo? Háblame</div>
            <div style={{ fontSize: 12.5, color: t.textSoft, fontWeight: 450 }}>Agregar familia, cambiar datos, lo que sea — por voz.</div>
          </div>
          {Icon.mic({ s: 20, c: persona.accent })}
        </button>
      </div>

      <BottomNav t={t} persona={persona} active="perfil" onTalk={onTalk} onOpenHome={onOpenHome} onOpenHistory={onOpenHistory} onOpenProfile={onOpenProfile} onOpenServices={onOpenServices} onShowSecurity={onShowSecurity} />
    </Stage>
  );
}

// ── Member home (when managing a family member) ─────────────────
function MemberHome({ t, persona, member, titularName, onBackToTitular, onStartTriage, onToggleTheme, onOpenProfile, onTalk }) {
  return (
    <Stage t={t}>
      <div style={{ flex: 1, overflow: 'auto', padding: '58px 18px 96px' }}>
        {/* managing banner */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderRadius: 14, marginBottom: 16, background: hexA(persona.accent, t.dark ? 0.12 : 0.08), border: `1px solid ${hexA(persona.accent, 0.3)}` }}>
          {Icon.swap({ s: 17, c: persona.accent })}
          <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: t.text }}>Estás gestionando a {member.nombre.split(' ')[0]}</span>
          <button onClick={onBackToTitular} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: persona.accent, fontSize: 12.5, fontWeight: 700, fontFamily: 'Hanken Grotesk, sans-serif' }}>Volver a ti</button>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
          <Avatar t={t} persona={persona} nombre={member.nombre} size={60} menor={member.menor} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 28, color: t.text, lineHeight: 1.1 }}>{member.nombre}</div>
            <div style={{ fontSize: 13.5, color: t.muted, fontWeight: 500 }}>{member.parentesco}{member.edad ? ' · ' + member.edad + ' años' : ''}{member.menor ? ' · Acudiente: ' + member.guardianNombre : ''}</div>
          </div>
          <IconBtn t={t} onClick={onToggleTheme} title="Tema">{t.dark ? Icon.sun({ s: 17 }) : Icon.moon({ s: 17 })}</IconBtn>
        </div>

        {/* empty state — Vita getting to know them */}
        <div style={{ borderRadius: 24, padding: 22, textAlign: 'center', background: `linear-gradient(135deg, ${hexA(persona.accent, 0.16)}, ${hexA(persona.accent, 0.04)})`, border: `1.5px solid ${hexA(persona.accent, 0.3)}` }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}><Waveform state="idle" variant="barras" accent={persona.accent} accentDeep={persona.accentDeep} size={92} /></div>
          <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 23, color: t.text, lineHeight: 1.15, marginBottom: 6 }}>Vita aún no conoce a {member.nombre.split(' ')[0]}</div>
          <p style={{ fontSize: 14, color: t.textSoft, lineHeight: 1.5, margin: '0 0 16px', fontWeight: 450 }}>
            {member.menor
              ? `Como ${member.nombre.split(' ')[0]} es menor, tú harás su primer triage por él. Hablado, sencillo, igual que el tuyo.`
              : `Hagamos su primer triage hablado para empezar a cuidar su salud y construir su historia.`}
          </p>
          <button onClick={onStartTriage} style={{ width: '100%', padding: '15px', borderRadius: 15, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${persona.accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, boxShadow: `0 10px 24px ${hexA(persona.accent, 0.4)}` }}>
            {Icon.mic({ s: 18, c: t.onAccent })} Empezar su primer triage
          </button>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 7, justifyContent: 'center', marginTop: 16, color: t.muted, fontSize: 12, fontWeight: 500 }}>
          {Icon.shield({ s: 14, c: t.muted })} Su historia se guarda en tu cuenta, protegida y privada
        </div>
      </div>

      <BottomNav t={t} persona={persona} active="inicio" onTalk={onTalk} onOpenHome={() => {}} onOpenProfile={onOpenProfile} onOpenHistory={onOpenProfile} onShowSecurity={onOpenProfile} />
    </Stage>
  );
}

// ── Voice-guided add member ─────────────────────────────────────
function AddMemberFlow({ t, persona, titularName, voice, tts, onDone, onClose }) {
  const accent = persona.accent;
  const [step, setStep] = React.useState(0);
  const [nombre, setNombre] = React.useState('');
  const [parentesco, setParentesco] = React.useState('');
  const [edad, setEdad] = React.useState('');
  const [text, setText] = React.useState('');
  const menor = edad !== '' && Number(edad) < 18;

  const steps = [
    { q: '¿A quién quieres agregar? Dime su nombre.', hint: 'Nombre completo' },
    { q: '¿Qué parentesco tiene contigo?', hint: 'Elige uno' },
    { q: '¿Cuántos años tiene?', hint: 'Su edad' },
    { q: 'confirm' },
  ];

  const spokenRef = React.useRef(-1);
  React.useEffect(() => {
    if (!tts || step === spokenRef.current || step >= 3) return;
    spokenRef.current = step;
    voice && voice.speak(steps[step].q, persona);
  }, [step]);

  const next = () => setStep(s => Math.min(3, s + 1));

  const submitName = (v) => { const val = (v != null ? v : text).trim(); if (!val) return; setNombre(val); setText(''); next(); };
  const micName = () => { const ok = voice && voice.startListening((f) => submitName(f)); if (!ok) document.getElementById('addm-input') && document.getElementById('addm-input').focus(); };

  const finish = () => {
    onDone({ id: 'm' + Date.now(), nombre: nombre.trim(), parentesco, edad: edad ? Number(edad) : null, menor, guardianNombre: titularName, hasHistoria: false });
  };

  return (
    <Sheet t={t} onClose={onClose} tall>
      {/* progress dots */}
      <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginBottom: 16 }}>
        {[0, 1, 2, 3].map(i => <span key={i} style={{ width: i === step ? 22 : 7, height: 7, borderRadius: 999, background: i <= step ? accent : t.stroke, transition: 'all .3s' }} />)}
      </div>

      {/* Vita asks */}
      {step < 3 && (
        <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 18 }}>
          <VitaDot t={t} size={36} active />
          <div style={{ flex: 1, padding: '12px 15px', borderRadius: '4px 16px 16px 16px', background: t.dark ? 'rgba(255,255,255,0.06)' : '#FFFFFF', border: `1px solid ${t.stroke}` }}>
            <div style={{ fontSize: 15.5, color: t.text, fontWeight: 500, lineHeight: 1.4 }}>{steps[step].q}</div>
          </div>
        </div>
      )}

      {/* Step 0 — name */}
      {step === 0 && (
        <div style={{ display: 'flex', gap: 10 }}>
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', borderRadius: 15, padding: '0 6px 0 14px', background: t.dark ? 'rgba(255,255,255,0.06)' : '#fff', border: `1px solid ${t.stroke}`, height: 52 }}>
            <input id="addm-input" autoFocus value={voice && voice.listening ? (voice.interim || '') : text} readOnly={voice && voice.listening} onChange={e => setText(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') submitName(); }} placeholder={voice && voice.listening ? 'Escuchando…' : 'Nombre completo'} style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 16, color: t.text, fontFamily: 'Hanken Grotesk, sans-serif', minWidth: 0 }} />
            {text.trim() && !(voice && voice.listening) && <button onClick={() => submitName()} style={{ width: 40, height: 40, borderRadius: 11, border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center', background: hexA(accent, 0.15), color: accent }}>{Icon.arrowRight({ s: 20, c: accent })}</button>}
          </div>
          <button onClick={micName} style={{ width: 52, height: 52, flexShrink: 0, borderRadius: '50%', cursor: 'pointer', display: 'grid', placeItems: 'center', background: voice && voice.listening ? `linear-gradient(135deg, ${accent}, ${persona.accentDeep})` : (t.dark ? 'rgba(255,255,255,0.08)' : '#fff'), color: voice && voice.listening ? t.onAccent : accent, border: voice && voice.listening ? 'none' : `1px solid ${t.stroke}`, boxShadow: t.shadow }}>{Icon.mic({ s: 22, c: voice && voice.listening ? t.onAccent : accent })}</button>
        </div>
      )}

      {/* Step 1 — parentesco */}
      {step === 1 && (
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {PARENTESCOS.map(p => (
            <button key={p} onClick={() => { setParentesco(p); next(); }} style={{ padding: '11px 15px', borderRadius: 13, cursor: 'pointer', border: `1.5px solid ${parentesco === p ? accent : t.stroke}`, background: parentesco === p ? hexA(accent, 0.12) : (t.dark ? 'rgba(255,255,255,0.04)' : '#fff'), color: parentesco === p ? accent : t.text, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 14, fontWeight: 600, WebkitTapHighlightColor: 'transparent' }}>{p}</button>
          ))}
        </div>
      )}

      {/* Step 2 — edad */}
      {step === 2 && (
        <div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <input autoFocus type="tel" inputMode="numeric" value={edad} onChange={e => setEdad(e.target.value.replace(/\D/g, '').slice(0, 3))} onKeyDown={e => { if (e.key === 'Enter' && edad) next(); }} placeholder="Edad" style={{ flex: 1, height: 52, padding: '0 16px', borderRadius: 15, border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.06)' : '#fff', color: t.text, fontSize: 18, fontWeight: 600, fontFamily: 'Hanken Grotesk, sans-serif', outline: 'none' }} />
            <button disabled={!edad} onClick={next} style={{ padding: '0 20px', height: 52, borderRadius: 15, border: 'none', cursor: edad ? 'pointer' : 'default', opacity: edad ? 1 : 0.4, background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15, fontWeight: 700 }}>Seguir</button>
          </div>
          {menor && <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, padding: '11px 13px', borderRadius: 12, background: hexA('#E6A93C', 0.12), border: `1px solid ${hexA('#E6A93C', 0.3)}` }}>{Icon.child({ s: 17, c: '#E6A93C' })}<span style={{ fontSize: 13, color: t.textSoft, fontWeight: 500, lineHeight: 1.4 }}>Es menor de edad. <b style={{ color: t.text }}>Tú ({titularName}) serás su acudiente</b> y gestionas su salud.</span></div>}
        </div>
      )}

      {/* Step 3 — confirm */}
      {step === 3 && (
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 16, borderRadius: 18, border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', marginBottom: 14 }}>
            <Avatar t={t} persona={persona} nombre={nombre} size={54} menor={menor} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 17, fontWeight: 700, color: t.text }}>{nombre}</div>
              <div style={{ fontSize: 13, color: t.muted, fontWeight: 500 }}>{parentesco}{edad ? ' · ' + edad + ' años' : ''}</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: 13, borderRadius: 14, background: hexA(accent, t.dark ? 0.1 : 0.06), border: `1px solid ${hexA(accent, 0.25)}`, marginBottom: 16 }}>
            {Icon.faceid({ s: 18, c: accent })}
            <span style={{ fontSize: 13, color: t.textSoft, lineHeight: 1.45, fontWeight: 450 }}>
              {menor
                ? <>Como es menor, <b style={{ color: t.text }}>se gestiona con tu rostro</b>. No necesita acceso propio.</>
                : <><b style={{ color: t.text }}>{nombre.split(' ')[0]}</b> tendrá su propio acceso. Registramos su rostro cuando esté presente.</>}
            </span>
          </div>
          <button onClick={finish} style={{ width: '100%', padding: '15px', borderRadius: 15, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9 }}>{Icon.check({ s: 18, c: t.onAccent, w: 3 })} Agregar a {nombre.split(' ')[0]}</button>
          <button onClick={() => setStep(0)} style={{ width: '100%', marginTop: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: t.muted, fontSize: 13, fontWeight: 500, fontFamily: 'Hanken Grotesk, sans-serif' }}>Empezar de nuevo</button>
        </div>
      )}
    </Sheet>
  );
}

// ── Personal data sheet ─────────────────────────────────────────
function PersonalDataSheet({ t, persona, profile, onClose }) {
  const rows = [
    ['Nombre', profile.nombre], ['Edad', profile.edad ? profile.edad + ' años' : null], ['Sexo', profile.sexo],
    ['EPS', profile.eps], ['Prepagada / Plan', profile.prepagada], ['Objetivo de salud', profile.objetivo],
  ].filter(r => r[1]);
  return (
    <Sheet t={t} onClose={onClose}>
      <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 26, color: t.text, marginBottom: 4 }}>Mis datos personales</div>
      <p style={{ fontSize: 13.5, color: t.textSoft, margin: '0 0 16px', fontWeight: 450 }}>Puedes pedirle a Vita que cambie cualquiera de estos por voz.</p>
      <div style={{ borderRadius: 18, overflow: 'hidden', border: `1px solid ${t.stroke}` }}>
        {rows.map(([k, v], i) => (
          <div key={i} style={{ display: 'flex', gap: 14, padding: '13px 15px', borderTop: i ? `1px solid ${t.stroke}` : 'none', background: t.dark ? 'rgba(255,255,255,0.03)' : '#fff' }}>
            <div style={{ width: 130, flexShrink: 0, fontSize: 13, fontWeight: 600, color: t.muted }}>{k}</div>
            <div style={{ flex: 1, fontSize: 14, color: t.text, fontWeight: 500 }}>{Array.isArray(v) ? v.join(', ') : v}</div>
          </div>
        ))}
      </div>
    </Sheet>
  );
}

Object.assign(window, { ProfileScreen, MemberHome, AddMemberFlow, PersonalDataSheet });