// ScreenOthers.jsx — news, chat, incident, about, profile, auth, settings

/* -------- Shared: Report Card -------- */
function ReportCard({ report, isDesktop = false, onLike, onSpam }) {
  const kindMeta = {
    delay:       { label: 'Demora',        color: '#F5B301' },
    cut:         { label: 'Corte',         color: '#CC3333' },
    vandal:      { label: 'Vandalismo',    color: '#A72126' },
    access:      { label: 'Accesibilidad', color: '#0078B1' },
    safety:      { label: 'Seguridad',     color: '#52267D' },
    overcrowd:   { label: 'Aglomeración', color: '#E13A40' },
    cleanliness: { label: 'Limpieza',      color: '#006515' },
    other:       { label: 'Otro',          color: '#8A97A8' },
  };
  const meta = kindMeta[report.kind] || kindMeta.other;

  return (
    <div className="card" style={{ padding: 14, marginBottom: 10 }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
        <LineChip id={report.line} size="sm" style={{ marginTop: 2 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 999, background: meta.color + '22', color: meta.color, fontFamily: 'var(--font-display)', fontWeight: 700 }}>{meta.label}</span>
            <span style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-display)', fontWeight: 600 }}>{report.station}</span>
            <span style={{ fontSize: 10, color: 'var(--text-dim)', marginLeft: 'auto' }}>{report.ago}</span>
          </div>
          <div style={{ fontSize: 13, marginTop: 5, lineHeight: 1.4 }}>{report.text}</div>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 4 }}>{report.author}</div>
        </div>
      </div>
      {/* Actions */}
      <div style={{ display: 'flex', gap: 8, marginTop: 10, paddingTop: 8, borderTop: '1px solid var(--border)' }}>
        <button onClick={() => onLike && onLike(report.id)}
          style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px', borderRadius: 8, background: report.likedByMe ? 'oklch(0.94 0.07 155)' : 'var(--ink-100)', fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, color: report.likedByMe ? 'var(--ok)' : 'var(--text-muted)' }}>
          <I name="heart" size={13} style={{ stroke: report.likedByMe ? 'var(--ok)' : 'var(--text-dim)' }} />
          {report.likes} útil
        </button>
        {!report.mine && (
          <button onClick={() => onSpam && onSpam(report.id)}
            style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px', borderRadius: 8, background: report.spammedByMe ? 'oklch(0.96 0.06 25)' : 'var(--ink-100)', fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, color: report.spammedByMe ? 'var(--error)' : 'var(--text-muted)' }}>
            <I name="zap" size={13} style={{ stroke: report.spammedByMe ? 'var(--error)' : 'var(--text-dim)' }} />
            Spam{report.spam > 0 ? ' ·' + report.spam : ''}
          </button>
        )}
        {report.mine && <span style={{ fontSize: 11, color: 'var(--ok)', fontFamily: 'var(--font-display)', fontWeight: 700, padding: '5px 10px', display: 'flex', alignItems: 'center', gap: 4 }}><I name="check" size={12} style={{ stroke: 'var(--ok)' }} /> Tu reporte</span>}
        <div style={{ flex: 1 }} />
      </div>
    </div>
  );
}

/* -------- News -------- */
function ScreenNews({ go, t }) {
  const [filter, setFilter] = React.useState('all');
  const items = filter === 'all' ? NEWS : NEWS.filter(n => n.line === filter);
  const [statusEvents, setStatusEvents] = React.useState([]);
  React.useEffect(() => {
    loadStatusEvents(5).then(evs => setStatusEvents(evs || []));
  }, []);
  const filteredEvents = filter === 'all' ? statusEvents : statusEvents.filter(e => e.lineId === filter);

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar large title={t('news')} subtitle="Novedades del sistema" left={<button onClick={()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />

      {/* Tab bar — Reportes comunidad temporalmente oculto */}
      <div style={{ padding: '0 20px 10px', display: 'flex', gap: 4 }}>
        <button style={{ padding: '8px 14px', borderRadius: 999, background: 'var(--ink-900)', color: 'white', fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700 }}>Noticias</button>
      </div>

      {true && ( /* solo noticias — reportes comunidad temporalmente ocultos */
        <>
          {/* line filter chips */}
          <div style={{ padding: '0 20px 12px', display: 'flex', gap: 6, overflowX: 'auto' }}>
            <button onClick={()=>setFilter('all')} style={{ padding: '6px 12px', borderRadius: 999, background: filter==='all'?'var(--ink-900)':'var(--ink-100)', color: filter==='all'?'white':'var(--text-muted)', fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, flexShrink: 0 }}>Todas</button>
            {LINES.map(l => (
              <button key={l.id} onClick={()=>setFilter(l.id)} style={{ padding: '5px 10px 5px 4px', borderRadius: 999, background: filter===l.id?`var(--linea-${l.id.toLowerCase()}-2)`:'var(--ink-100)', color: filter===l.id?(l.id==='H'?'#0B1220':'white'):'var(--text-muted)', fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 5, flexShrink: 0 }}>
                <div style={{ width:20,height:20,borderRadius:10,background:`var(--linea-${l.id.toLowerCase()}-2)`,color:l.id==='H'?'#0B1220':'white',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:800 }}>{l.id}</div>
                {l.id === 'U' ? 'Urquiza' : l.id === 'P' ? 'Premetro' : 'Línea ' + l.id}
              </button>
            ))}
          </div>
          <div className="scroll-area" style={{ padding: '0 20px 20px' }}>
            {/* Cambios de estado reales — últimos 5 días de infosubte */}
            {filteredEvents.length === 0 ? (
              <div style={{ fontSize: 13, color: 'var(--text-dim)', padding: '8px 0' }}>
                Sin novedades en los últimos 5 días{filter !== 'all' ? ` para Línea ${filter}` : ''}.
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {filteredEvents.map((ev, i) => <StatusEventCard key={i} event={ev} />)}
              </div>
            )}

            {/* Anuncios históricos del CMS / automáticos como contexto adicional */}
            {(() => {
              const automáticos = getAnnouncementHistory(3, 3).filter(a => filter === 'all' || a.lineId === filter);
              let cms_hist = [];
              try {
                if (window.CMS_ANNOUNCEMENTS && Array.isArray(window.CMS_ANNOUNCEMENTS)) {
                  cms_hist = window.CMS_ANNOUNCEMENTS;
                }
              } catch {}
              const hist = [...automáticos, ...cms_hist].slice(0, 3);
              if (!hist.length) return null;
              return (
                <div style={{ marginTop: 20 }}>
                  <div style={{ fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.08em', marginBottom: 8 }}>Anuncios</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {hist.map(a => {
                      const meta = ANNOUNCEMENT_KIND[a.kind] || ANNOUNCEMENT_KIND.advisory;
                      return (
                        <a key={a.id} href={a.url} target="_blank" rel="noopener noreferrer"
                           className="card" style={{ padding: 12, textDecoration: 'none', color: 'inherit', display: 'flex', gap: 10 }}>
                          <div style={{ width: 32, height: 32, borderRadius: 16, background: 'var(--ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                            <I name={meta.icon} size={14} />
                          </div>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3, flexWrap: 'wrap' }}>
                              <span style={{ fontSize: 10, fontFamily: 'var(--font-display)', fontWeight: 800, textTransform: 'uppercase', color: 'var(--text-muted)', letterSpacing: '.05em' }}>{meta.label}</span>
                              {a.lineId && <LineChip id={a.lineId} size="sm" />}
                              {a.source && <span style={{ fontSize: 10, color: 'var(--text-dim)', fontWeight: 700 }}>· {a.source.label}{a.source.handle ? ` ${a.source.handle}` : ''}</span>}
                              <span style={{ fontSize: 10, color: 'var(--text-dim)', marginLeft: 'auto' }}>{timeAgoLabel(a.createdAt)}</span>
                            </div>
                            <div style={{ fontSize: 12, lineHeight: 1.4 }}>{a.text}</div>
                          </div>
                        </a>
                      );
                    })}
                  </div>
                </div>
              );
            })()}
          </div>
        </>
      )}

      {/* reportes comunidad temporalmente ocultos */}
    </div>
  );
}

/* -------- Chat / Assistant -------- */
function ScreenChat({ go, t }) {
  const [msgs, setMsgs] = React.useState([
    { role: 'bot', text: '¡Hola! Soy tu asistente de viaje. Puedo ayudarte con horarios, combinaciones y reportes. ¿A dónde vas?' },
  ]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const send = async () => {
    if (!input.trim()) return;
    const userMsg = input;
    setMsgs(m => [...m, { role: 'user', text: userMsg }]);
    setInput('');
    setLoading(true);
    try {
      const reply = await window.claude.complete(`Sos un asistente amable del subte de Buenos Aires (alSubte). Respondé en 1-2 oraciones cortas, en español rioplatense. Pregunta del usuario: ${userMsg}`);
      setMsgs(m => [...m, { role: 'bot', text: reply }]);
    } catch {
      setMsgs(m => [...m, { role: 'bot', text: 'No pude conectarme. Probá de nuevo en un ratito.' }]);
    }
    setLoading(false);
  };

  const suggestions = ['¿Cómo llego a Retiro?', 'Combinación Línea B con D', 'Estaciones accesibles'];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar title={t('assistant')} subtitle="powered by claude" left={<button onClick={()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
      <div className="scroll-area" style={{ padding: '0 16px 12px' }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: m.role === 'user' ? 'flex-end' : 'flex-start', marginBottom: 10 }}>
            {m.role === 'bot' && <div style={{ width: 30, height: 30, borderRadius: 15, background: 'var(--linea-a-2)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12, marginRight: 8, flexShrink: 0 }}>al</div>}
            <div style={{ maxWidth: '80%', padding: '10px 14px', borderRadius: 16, background: m.role === 'user' ? 'var(--ink-900)' : 'var(--surface)', color: m.role === 'user' ? 'white' : 'var(--text)', border: m.role === 'bot' ? '1px solid var(--border)' : 'none', fontSize: 13, lineHeight: 1.45 }}>{m.text}</div>
          </div>
        ))}
        {loading && <div style={{ padding: 10, color: 'var(--text-muted)', fontSize: 12 }}>escribiendo...</div>}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
          {suggestions.map(s => (
            <button key={s} onClick={() => setInput(s)} style={{ padding: '6px 10px', borderRadius: 14, background: 'var(--ink-100)', fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--text-muted)' }}>{s}</button>
          ))}
        </div>
      </div>
      <div style={{ padding: '10px 16px 16px', display: 'flex', gap: 8, borderTop: '1px solid var(--border)', background: 'var(--surface)', flexShrink: 0 }}>
        <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&send()} placeholder={t('askMe')} style={{ flex: 1, padding: '10px 14px', borderRadius: 20, border: '1px solid var(--border)', background: 'var(--ink-050)', outline: 'none' }} />
        <button onClick={send} style={{ width: 40, height: 40, borderRadius: 20, background: 'var(--ink-900)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I name="send" size={18} />
        </button>
      </div>
    </div>
  );
}

/* -------- Incident Report -------- */
const TERMS_KEY = 'report_terms_v1_accepted';
const EMOVA_KINDS = new Set(['vandal','access','cleanliness','other']);
const EMOVA_HOUR_OK = () => { const h = new Date().getHours(), d = new Date().getDay(); return d >= 1 && d <= 5 && h >= 8 && h < 20; };

function ScreenIncidentReport({ go, t, lang }) {
  // terms acceptance (localStorage)
  const [termsAccepted, setTermsAccepted] = React.useState(() => !!localStorage.getItem(TERMS_KEY));
  // mobile check: if window width > 900 we show a soft warning (not a hard block — could be tablet)
  const isNarrow = window.innerWidth <= 900;

  // report flow state
  const [step, setStep] = React.useState(1);   // 1=category 2=line 3=details 4=done
  const [escalate, setEscalate] = React.useState(null); // 'safety' | 'emova' | null
  const [kind, setKind] = React.useState(null);
  const [line, setLine] = React.useState(null);
  const [desc, setDesc] = React.useState('');
  const reset = () => { setStep(1); setKind(null); setLine(null); setDesc(''); setEscalate(null); };

  const acceptTerms = () => {
    localStorage.setItem(TERMS_KEY, JSON.stringify({ acceptedAt: new Date().toISOString(), version: 1 }));
    setTermsAccepted(true);
  };

  const selectKind = (id) => {
    setKind(id);
    if (id === 'safety') { setEscalate('safety'); }
    else if (EMOVA_KINDS.has(id)) { setEscalate('emova'); }
    else { setStep(2); }
  };

  // ── Terms warning modal ──────────────────────────────────────────────────────
  if (!termsAccepted) return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar title="Antes de reportar" left={<button onClick={()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
      <div className="scroll-area" style={{ padding: '0 20px 30px' }}>
        <div style={{ padding: '16px 0 10px', display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: 32, background: 'oklch(0.96 0.06 85)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <I name="warning" size={32} style={{ stroke: 'var(--warn)' }} />
          </div>
        </div>
        <h2 style={{ fontSize: 20, textAlign: 'center', marginBottom: 6 }}>Información importante</h2>

        <div className="card" style={{ padding: 16, marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, marginBottom: 8 }}>¿QUÉ SON LOS REPORTES?</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 }}>
            Los reportes son colaborativos y pueden no reflejar el estado oficial del servicio.
            alSubte <strong>no es un canal oficial</strong> y no está vinculado con Emova, SBASE ni el Gobierno de la Ciudad.
          </div>
        </div>

        <div className="card" style={{ padding: 16, marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, marginBottom: 8 }}>DATOS QUE RECOLECTAMOS</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 }}>
            Al enviar un reporte registramos: tu identidad de Google, tu ubicación en el momento del reporte,
            el modelo de dispositivo y sistema operativo.<br /><br />
            La ubicación <strong>sólo se usa para validar el reporte</strong> y no se comparte con terceros.
            No almacenamos tu posición fuera de los reportes.
          </div>
        </div>

        <div className="card" style={{ padding: 16, marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, marginBottom: 8 }}>REQUISITOS</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 }}>
            • Debés tener al menos <strong>16 años</strong>.<br />
            • Debés iniciar sesión con Google.<br />
            • Solo se aceptan reportes desde dispositivo móvil.<br />
            • Información falsa puede resultar en la suspensión de tu cuenta.
          </div>
        </div>

        <div className="card" style={{ padding: 16, marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, marginBottom: 8 }}>EMERGENCIAS</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 }}>
            Ante una emergencia, riesgo de vida o delito en curso, llamá al <strong>911</strong>.
            alSubte no reemplaza los servicios de emergencias.
          </div>
        </div>

        <div className="card" style={{ padding: 16, marginBottom: 18 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, marginBottom: 8 }}>TUS DERECHOS</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 }}>
            Podés solicitar la eliminación de tus datos en cualquier momento desde Ajustes → Datos y privacidad,
            o escribiéndonos a <strong>bear.by.patagonia at gmail dot com</strong> (Ley 25.326, art. 16).
          </div>
        </div>

        <button onClick={acceptTerms} className="btn btn-primary btn-block btn-lg">
          <I name="check" size={16} />Acepto y quiero reportar
        </button>
        <button onClick={()=>go('main')} className="btn btn-ghost btn-block" style={{ marginTop: 8 }}>
          Volver sin reportar
        </button>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 20, marginTop: 16 }}>
          <button onClick={() => go('legal', { doc: 'terminos', from: 'incidentReport' })} style={{ fontSize: 12, color: 'var(--info)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
            Términos y condiciones
          </button>
          <button onClick={() => go('legal', { doc: 'privacidad', from: 'incidentReport' })} style={{ fontSize: 12, color: 'var(--info)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
            Política de privacidad
          </button>
        </div>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', textAlign: 'center', marginTop: 12, lineHeight: 1.5 }}>
          Al aceptar confirmás que tenés al menos 16 años y aceptás los{' '}
          <span style={{ textDecoration: 'underline' }}>Términos y Condiciones</span> y la{' '}
          <span style={{ textDecoration: 'underline' }}>Política de Privacidad</span> de alSubte.
          Versión 1.0 — 2026-04-21.
        </div>
      </div>
    </div>
  );

  // ── Desktop soft-warning ─────────────────────────────────────────────────────
  if (!isNarrow) return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar title={t('reportIncident')} left={<button onClick={()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 30, textAlign: 'center', gap: 16 }}>
        <I name="smartphone" size={48} style={{ stroke: 'var(--text-dim)' }} />
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18 }}>Usá el celular</div>
        <div style={{ fontSize: 13, color: 'var(--text-muted)', maxWidth: 280, lineHeight: 1.6 }}>
          Los reportes requieren verificar tu ubicación en tiempo real. Abrí alSubte desde tu teléfono para enviar un reporte.
        </div>
        <button onClick={()=>go('main')} className="btn btn-secondary">Volver al inicio</button>
      </div>
    </div>
  );

  // ── Safety escalation interstitial ──────────────────────────────────────────
  if (escalate === 'safety') return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar title="Seguridad" left={<button onClick={()=>{setEscalate(null);setKind(null);}} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
      <div className="scroll-area" style={{ padding: '0 20px 30px' }}>
        <div style={{ padding: '20px 0 16px', textAlign: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: 32, background: 'oklch(0.95 0.07 310)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
            <I name="eye" size={30} style={{ stroke: '#52267D' }} />
          </div>
          <h2 style={{ fontSize: 20, marginBottom: 6 }}>Incidente de seguridad</h2>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>
            ¿El incidente requiere atención inmediata?
          </div>
        </div>

        <a href="tel:911" style={{ display: 'block', textDecoration: 'none' }}>
          <button className="btn btn-block btn-lg" style={{ background: 'var(--error)', color: 'white', marginBottom: 12, fontSize: 16, gap: 10 }}>
            <I name="phone" size={20} />Llamar al 911 ahora
          </button>
        </a>

        <div style={{ fontSize: 12, color: 'var(--text-dim)', textAlign: 'center', marginBottom: 20 }}>
          Ante riesgo de vida, agresión o delito en curso<br/>no esperes — llamá al 911 directamente.
        </div>

        <div style={{ height: 1, background: 'var(--border)', margin: '0 0 20px' }} />
        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14, textAlign: 'center' }}>
          O informá a la comunidad sin urgencia
        </div>
        <button onClick={()=>{setEscalate(null);setStep(2);}} className="btn btn-secondary btn-block">
          <I name="send" size={16} />Continuar con el reporte
        </button>
      </div>
    </div>
  );

  // ── Emova escalation interstitial ───────────────────────────────────────────
  if (escalate === 'emova') {
    const kindLabel = INCIDENT_TYPES.find(it=>it.id===kind)?.label || 'Incidente';
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <AppBar title={kindLabel} left={<button onClick={()=>{setEscalate(null);setKind(null);}} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
        <div className="scroll-area" style={{ padding: '0 20px 30px' }}>
          <div style={{ padding: '16px 0 12px' }}>
            <div style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.5, marginBottom: 18 }}>
              Este tipo de reporte puede ser atendido directamente por <strong>Emova</strong>, la empresa concesionaria.
              Te ofrecemos tres canales de contacto:
            </div>
          </div>

          {/* Canal 1 — email */}
          <a href="mailto:info@emova.com.ar?subject=Reporte%20alSubte%3A%20" style={{ textDecoration: 'none', display: 'block', marginBottom: 10 }}>
            <div className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: 'oklch(0.95 0.04 240)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <I name="mail" size={20} style={{ stroke: 'var(--info)' }} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>Escribir a Emova</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>info@emova.com.ar</div>
              </div>
              <I name="chevronRight" size={16} style={{ stroke: 'var(--text-dim)' }} />
            </div>
          </a>

          {/* Canal 2 — web */}
          <a href="https://emova.com.ar/index.php/canal-de-denuncias/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', display: 'block', marginBottom: 10 }}>
            <div className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: 'oklch(0.95 0.04 240)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <I name="globe" size={20} style={{ stroke: 'var(--info)' }} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>Canal de denuncias web</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>emova.com.ar · formulario oficial</div>
              </div>
              <I name="chevronRight" size={16} style={{ stroke: 'var(--text-dim)' }} />
            </div>
          </a>

          {/* Canal consultas generales — Flokzu */}
          <a href="https://app.flokzu.com/public/042abLCCP" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', display: 'block', marginBottom: 10 }}>
            <div className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: 'oklch(0.95 0.04 240)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <I name="mail" size={20} style={{ stroke: 'var(--info)' }} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>Consultas Generales</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Formulario de contacto · alSubte</div>
              </div>
              <I name="chevronRight" size={16} style={{ stroke: 'var(--text-dim)' }} />
            </div>
          </a>

          {/* Canal 3 — teléfono (solo Lun-Vie 8-20) */}
          <a href="tel:08003336682" style={{ textDecoration: 'none', display: 'block', marginBottom: 18 }}>
            <div className="card" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 14, opacity: EMOVA_HOUR_OK() ? 1 : 0.55 }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: EMOVA_HOUR_OK() ? 'oklch(0.95 0.08 155)' : 'var(--ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <I name="phone" size={20} style={{ stroke: EMOVA_HOUR_OK() ? 'var(--ok)' : 'var(--text-dim)' }} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>Llamar a Emova</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                  0800-333-6682
                  {EMOVA_HOUR_OK()
                    ? <span style={{ color: 'var(--ok)', marginLeft: 6, fontWeight: 700 }}>· Disponible ahora</span>
                    : <span style={{ marginLeft: 6 }}>· Lun–Vie 8:00 a 20:00</span>}
                </div>
              </div>
              <I name="chevronRight" size={16} style={{ stroke: 'var(--text-dim)' }} />
            </div>
          </a>

          <div style={{ height: 1, background: 'var(--border)', margin: '0 0 18px' }} />
          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 12, textAlign: 'center' }}>
            También podés informar a la comunidad
          </div>
          <button onClick={()=>{setEscalate(null);setStep(2);}} className="btn btn-secondary btn-block">
            <I name="send" size={16} />Reportar en alSubte igual
          </button>
          <button onClick={()=>{reset();go('main');}} className="btn btn-ghost btn-block" style={{ marginTop: 8 }}>
            Volver al inicio
          </button>
        </div>
      </div>
    );
  }

  // ── Main report flow ─────────────────────────────────────────────────────────
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar title={t('reportIncident')} subtitle={step < 4 ? `Paso ${step} de 3` : '¡Enviado!'} left={<button onClick={step > 1 ? ()=>setStep(s=>s-1) : ()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
      <div className="scroll-area" style={{ padding: '0 20px 20px' }}>
        {step < 4 && <div style={{ display: 'flex', gap: 4, marginBottom: 20 }}>{[1,2,3].map(i => <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i <= step ? 'var(--ink-900)' : 'var(--ink-200)' }} />)}</div>}

        {step === 1 && (
          <>
            <h2 style={{ fontSize: 20, marginBottom: 4 }}>{t('whatHappened')}</h2>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 16 }}>Los reportes son colaborativos y ayudan a otros pasajeros.</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {INCIDENT_TYPES.map(it => (
                <button key={it.id} onClick={()=>selectKind(it.id)} style={{ padding: 16, borderRadius: 14, background: kind===it.id?'var(--ink-900)':'var(--surface)', color: kind===it.id?'white':'var(--text)', border: '1px solid var(--border)', textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 8, minHeight: 90 }}>
                  <I name={it.icon} size={22} />
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{lang==='en'?it.labelEn:it.label}</div>
                </button>
              ))}
            </div>
            <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 14, textAlign: 'center', lineHeight: 1.5 }}>
              Los reportes no reflejan el estado oficial · Para emergencias llamá al <strong>911</strong>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h2 style={{ fontSize: 20, marginBottom: 4 }}>{t('whichLine')}</h2>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 16 }}>Elegí la línea afectada.</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
              {LINES.map(l => (
                <button key={l.id} onClick={()=>{setLine(l.id);setStep(3);}} style={{ padding: '14px', borderRadius: 14, background: line===l.id?`var(--linea-${l.id.toLowerCase()}-2)`:'var(--surface)', border: '1px solid var(--border)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, width: 'calc(33% - 7px)' }}>
                  <div style={{ width: 40, height: 40, borderRadius: 20, background: `var(--linea-${l.id.toLowerCase()}-2)`, color: l.id==='H'?'#0B1220':'white', display:'flex',alignItems:'center',justifyContent:'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18 }}>{l.id}</div>
                  <div style={{ fontSize: 10, color: line===l.id?(l.id==='H'?'#0B1220':'white'):'var(--text)', fontFamily: 'var(--font-display)', fontWeight: 700, textAlign: 'center' }}>{l.id === 'U' ? 'Urquiza' : l.id === 'P' ? 'Premetro' : l.name.replace('Línea ','')}</div>
                </button>
              ))}
            </div>
            <button onClick={()=>{setLine(null);setStep(3);}} className="btn btn-ghost btn-block" style={{ marginTop: 12, fontSize: 13 }}>No sé / en varias líneas</button>
          </>
        )}

        {step === 3 && (
          <>
            <h2 style={{ fontSize: 20, marginBottom: 4 }}>Contanos más</h2>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 16 }}>Opcional, pero ayuda.</div>
            <div className="card" style={{ padding: 12, marginBottom: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
              <I name="mapPin" size={18} style={{stroke:'var(--info)'}}/>
              <div style={{ flex: 1, fontSize: 12 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700 }}>Detectando ubicación</div>
                <div style={{ color: 'var(--text-muted)' }}>Cerca de {line ? 'estación Pueyrredón' : 'Av. Corrientes 1500'}</div>
              </div>
              <span style={{ fontSize: 10, color: 'var(--info)', fontWeight: 700 }}>cambiar</span>
            </div>
            <textarea value={desc} onChange={e=>setDesc(e.target.value)} placeholder={t('addDetails')} style={{ width: '100%', minHeight: 100, padding: 12, borderRadius: 12, border: '1px solid var(--border)', background: 'var(--surface)', resize: 'vertical', outline: 'none', fontSize: 13 }} />
            <button className="btn btn-secondary btn-block" style={{ marginTop: 10 }}><I name="camera" size={16}/>Agregar foto (opcional)</button>
            <button onClick={()=>setStep(4)} className="btn btn-primary btn-block btn-lg" style={{ marginTop: 14 }}>
              <I name="send" size={16} />{t('sendReport')}
            </button>
          </>
        )}

        {step === 4 && (
          <div style={{ padding: '40px 10px', textAlign: 'center' }}>
            <div style={{ width: 80, height: 80, borderRadius: 40, background: 'oklch(0.94 0.1 155)', color: 'var(--ok)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>
              <I name="check" size={40} />
            </div>
            <h2 style={{ fontSize: 24, marginBottom: 10 }}>{t('thanks')}</h2>
            <div style={{ color: 'var(--text-muted)', fontSize: 13, marginBottom: 24, lineHeight: 1.5 }}>{t('reportSent')}</div>
            <button className="btn btn-primary btn-block btn-lg" onClick={()=>{reset();go('main');}}>{t('backHome')}</button>
            <button className="btn btn-ghost btn-block" onClick={reset} style={{marginTop:6}}>Enviar otro reporte</button>
          </div>
        )}
      </div>
    </div>
  );
}

/* -------- About -------- */
function ScreenAbout({ go, t }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar title={t('aboutApp')} left={<button onClick={()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
      <div className="scroll-area" style={{ padding: '0 20px 30px' }}>
        <div style={{ textAlign: 'center', padding: '20px 0' }}>
          <img src="assets/logo.png" style={{ width: 90, height: 90, borderRadius: 22, marginBottom: 12, boxShadow: 'var(--shadow-md)' }} />
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, letterSpacing: '-.02em' }}>alSubte</div>
          <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>v1.1</div>
        </div>
        <div className="card" style={{ padding: 18, marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, marginBottom: 6 }}>¿Qué es alSubte?</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>Una app independiente para viajar mejor por el subte de Buenos Aires. Los datos provienen de fuentes abiertas del GCBA, Emova, medios de noticias y reportes de pasajeros. Incluye subte, Línea Urquiza y Premetro.</div>
        </div>
        <div className="card" style={{ padding: 18, marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, marginBottom: 6 }}>Proyecto</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>Tiene como objetivo principal mostrar información confiable, probar tecnologías</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>No intento ser serio, es un laboratorio de pruebas. Elegí el subte por su identidad de color, dinamismo y pocos tipos de apps permiten integrar tantas cosas: arquitectura de software, diseño de interfaz y experiencia de usuario, apps mobile, web, IA, datos en tiempo real, datos geográficos, notificaciones, interacción entre usuarios, noticias.</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>Esta app literal es un juego para probar tecnologías. No pidas seriedad de una app oficial, quiero estar online con lo mejor.</div>
        </div>
        <div className="card" style={{ padding: 18, marginBottom: 12 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, marginBottom: 6 }}>Descargo de Responsabilidad</div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>Para más información leer{' '}
            <button onClick={() => go('legal', { doc: 'terminos', from: 'about' })} style={{ color: 'var(--info)', fontWeight: 700, textDecoration: 'underline', fontSize: 13 }}>Licencia de Uso</button>
            {' '}y{' '}
            <button onClick={() => go('legal', { doc: 'privacidad', from: 'about' })} style={{ color: 'var(--info)', fontWeight: 700, textDecoration: 'underline', fontSize: 13 }}>Política de Privacidad</button>.
          </div>
          <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>Sin afiliación oficial con SBASE, Emova o el GCBA.</div>
        </div>
      </div>
    </div>
  );
}

/* -------- Auth -------- */
function ScreenAuth({ go, t, setAuthed }) {
  const [mode, setMode] = React.useState('signin');
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', background: 'var(--surface)' }}>
      <div className="scroll-area" style={{ padding: '30px 28px 20px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ textAlign: 'center', marginTop: 20, marginBottom: 30 }}>
          <img src="assets/logo.png" style={{ width: 72, height: 72, borderRadius: 18, marginBottom: 14 }} />
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, letterSpacing: '-.02em' }}>Bienvenido a alSubte</div>
          <div style={{ color: 'var(--text-muted)', fontSize: 13, marginTop: 4 }}>Entrá para guardar tus líneas favoritas</div>
        </div>
        <div style={{ display: 'inline-flex', background: 'var(--ink-100)', borderRadius: 10, padding: 3, marginBottom: 20, alignSelf: 'center' }}>
          <button onClick={()=>setMode('signin')} style={{ padding: '8px 18px', borderRadius: 7, fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, background: mode==='signin'?'var(--surface)':'transparent', color: mode==='signin'?'var(--text)':'var(--text-muted)' }}>Iniciar sesión</button>
          <button onClick={()=>setMode('signup')} style={{ padding: '8px 18px', borderRadius: 7, fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, background: mode==='signup'?'var(--surface)':'transparent', color: mode==='signup'?'var(--text)':'var(--text-muted)' }}>Registrarme</button>
        </div>
        <label style={{ fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', marginBottom: 6 }}>Email</label>
        <div style={{ display: 'flex', alignItems: 'center', background: 'var(--ink-050)', border: '1px solid var(--border)', borderRadius: 12, padding: '0 12px', marginBottom: 12 }}>
          <I name="mail" size={18} style={{stroke:'var(--text-dim)'}}/>
          <input value={email} onChange={e=>setEmail(e.target.value)} placeholder="tu@email.com" style={{ flex:1, padding: 12, border: 'none', background: 'transparent', outline: 'none' }} />
        </div>
        <label style={{ fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', marginBottom: 6 }}>Contraseña</label>
        <div style={{ display: 'flex', alignItems: 'center', background: 'var(--ink-050)', border: '1px solid var(--border)', borderRadius: 12, padding: '0 12px', marginBottom: 18 }}>
          <I name="lock" size={18} style={{stroke:'var(--text-dim)'}}/>
          <input type="password" value={pw} onChange={e=>setPw(e.target.value)} placeholder="••••••••" style={{ flex:1, padding: 12, border: 'none', background: 'transparent', outline: 'none' }} />
        </div>
        <button onClick={()=>{setAuthed(true);go('profile');}} className="btn btn-primary btn-block btn-lg">
          {mode==='signin'?'Iniciar sesión':'Crear cuenta'}
        </button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '18px 0', color: 'var(--text-dim)', fontSize: 11 }}>
          <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />O CONTINUÁ CON<div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
        </div>
        <button onClick={()=>{setAuthed(true);go('profile');}} className="btn btn-secondary btn-block btn-lg">
          <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.4h5.9c-.3 1.4-1.1 2.5-2.3 3.3v2.8h3.7c2.2-2 3.4-5 3.4-8.2z"/><path fill="#34A853" d="M12 23c3.1 0 5.7-1 7.6-2.8l-3.7-2.8c-1 .7-2.3 1.1-3.9 1.1-3 0-5.5-2-6.4-4.7H1.8v2.9C3.7 20.3 7.5 23 12 23z"/><path fill="#FBBC05" d="M5.6 13.8c-.2-.7-.4-1.4-.4-2.2s.1-1.5.4-2.2V6.5H1.8C1 8.1.5 10 .5 11.6s.5 3.5 1.3 5.1l3.8-2.9z"/><path fill="#EA4335" d="M12 4.6c1.7 0 3.2.6 4.4 1.7l3.3-3.3C17.7 1.2 15.1.2 12 .2 7.5.2 3.7 2.8 1.8 6.5l3.8 2.9C6.5 6.6 9 4.6 12 4.6z"/></svg>
          Continuar con Google
        </button>
        <button onClick={()=>go('main')} className="btn btn-ghost btn-block" style={{ marginTop: 10 }}>Seguir como invitado</button>
      </div>
    </div>
  );
}

/* -------- Profile -------- */
function ScreenProfile({ go, t, setAuthed }) {
  const [tab, setTab] = React.useState('profile');
  const [reports, setReports] = React.useState(REPORTS_SEED);
  const myReports = reports.filter(r => r.mine);
  const lineStatus = useLiveStatus();

  const handleLike = (id) => setReports(rs => rs.map(r => r.id === id ? { ...r, likes: r.likedByMe ? r.likes - 1 : r.likes + 1, likedByMe: !r.likedByMe } : r));
  const handleSpam = (id) => setReports(rs => rs.map(r => r.id === id ? { ...r, spam: r.spammedByMe ? r.spam - 1 : r.spam + 1, spammedByMe: !r.spammedByMe } : r));

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar large title={t('profile')} left={<button onClick={()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} right={<button onClick={()=>go('settings')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="settings" size={18}/></button>} />

      {/* Profile card */}
      <div style={{ padding: '0 20px 12px' }}>
        <div className="card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
          <div style={{ width: 60, height: 60, borderRadius: 30, background: 'linear-gradient(135deg, var(--linea-a-1), var(--linea-e-1))', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22 }}>J</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18 }}>Juan P.</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>juan@mail.com</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--ok)' }}>164</div>
            <div style={{ fontSize: 10, color: 'var(--text-muted)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>puntos · #12</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 14 }}>
          {[{n:42,l:'viajes'},{n:myReports.length || 8,l:'reportes'},{n:3,l:'favoritos'}].map(s => (
            <div key={s.l} className="card" style={{ padding: 12, textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22 }}>{s.n}</div>
              <div style={{ fontSize: 10, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.05em', fontWeight: 700, fontFamily: 'var(--font-display)' }}>{s.l}</div>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 4 }}>
          {[{id:'profile',label:'Perfil'},{id:'reports',label:'Mis reportes'},{id:'ranking',label:'Ranking'}].map(tb => (
            <button key={tb.id} onClick={() => setTab(tb.id)} style={{ flex: 1, padding: '8px 6px', borderRadius: 999, background: tab === tb.id ? 'var(--ink-900)' : 'var(--ink-100)', color: tab === tb.id ? 'white' : 'var(--text-muted)', fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700 }}>{tb.label}</button>
          ))}
        </div>
      </div>

      <div className="scroll-area" style={{ padding: '0 20px 20px' }}>
        {tab === 'profile' && (
          <>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, color: 'var(--text-muted)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '.08em' }}>Mis líneas</div>
            <div className="card" style={{ padding: 6, marginBottom: 18 }}>
              {['A','D','H'].map(id => (
                <button key={id} onClick={()=>go('lineDetail',{line:id})} style={{ width: '100%', padding: 10, display: 'flex', alignItems: 'center', gap: 12, background: 'transparent', borderBottom: id!=='H'?'1px solid var(--border)':'none' }}>
                  <LineChip id={id} />
                  <div style={{ flex: 1, textAlign: 'left' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{LINES.find(l=>l.id===id).name}</div>
                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Frecuencia: {lineStatus[id]?.freq ?? '–'}</div>
                  </div>
                  <I name="chevronRight" size={16} style={{stroke:'var(--text-dim)'}}/>
                </button>
              ))}
            </div>
            {[
              { icon: 'settings', label: t('settings'), onClick: () => go('settings') },
              { icon: 'bell', label: 'Notificaciones', onClick: () => go('settings') },
              { icon: 'info', label: t('aboutApp'), onClick: () => go('about') },
            ].map(it => (
              <button key={it.label} onClick={it.onClick} className="card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12, width: '100%', marginBottom: 8 }}>
                <I name={it.icon} size={18} style={{stroke:'var(--text-muted)'}}/>
                <div style={{ flex: 1, textAlign: 'left', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>{it.label}</div>
                <I name="chevronRight" size={16} style={{stroke:'var(--text-dim)'}}/>
              </button>
            ))}
            <button onClick={()=>{setAuthed(false);go('main');}} className="btn btn-ghost btn-block" style={{ marginTop: 14, color: 'var(--error)' }}>Cerrar sesión</button>
          </>
        )}

        {tab === 'reports' && (
          <>
            {myReports.length === 0 ? (
              <div style={{ textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, padding: '30px 0' }}>Todavía no enviaste reportes.</div>
            ) : (
              myReports.map(r => <ReportCard key={r.id} report={r} onLike={handleLike} onSpam={handleSpam} />)
            )}
          </>
        )}

        {tab === 'ranking' && (
          <>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14 }}>Top colaboradores de la semana. Sumá puntos enviando reportes precisos y recibiendo likes de otros pasajeros.</div>
            {LEADERBOARD.map((u, i) => (
              <div key={u.name} className="card" style={{ padding: 14, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 12, background: u.isMe ? 'oklch(0.97 0.04 155)' : 'var(--surface)', border: u.isMe ? '1.5px solid var(--ok)' : '1px solid var(--border)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, width: 28, textAlign: 'center', color: i < 3 ? ['#FFB800','#8A97A8','#CD7F32'][i] : 'var(--text-muted)' }}>{u.badge || '#'+u.rank}</div>
                <div style={{ width: 40, height: 40, borderRadius: 20, background: 'linear-gradient(135deg, var(--linea-a-1), var(--linea-e-1))', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16 }}>{u.avatar}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{u.name}{u.isMe ? ' (vos)' : ''}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{u.points} puntos</div>
                </div>
                {u.isMe && <span style={{ fontSize: 10, color: 'var(--ok)', fontFamily: 'var(--font-display)', fontWeight: 800 }}>TU LUGAR</span>}
              </div>
            ))}
            <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-muted)', marginTop: 8 }}>Ranking actualizado los lunes a las 0:00</div>
          </>
        )}
      </div>
    </div>
  );
}

/* -------- Settings -------- */
function Toggle({ on, onToggle }) {
  return (
    <button onClick={onToggle} style={{ width: 44, height: 26, borderRadius: 13, background: on ? 'var(--ok)' : 'var(--ink-200)', position: 'relative', transition: 'background .2s', flexShrink: 0 }}>
      <div style={{ width: 20, height: 20, borderRadius: 10, background: 'white', boxShadow: 'var(--shadow-sm)', position: 'absolute', top: 3, left: on ? 21 : 3, transition: 'left .2s' }} />
    </button>
  );
}

function HourPicker({ from, to, onChange }) {
  const hours = Array.from({length: 24}, (_, i) => i);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <select value={from} onChange={e => onChange(parseInt(e.target.value), to)} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--ink-050)', fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, outline: 'none' }}>
        {hours.map(h => <option key={h} value={h}>{String(h).padStart(2,'0')}:00</option>)}
      </select>
      <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>→</span>
      <select value={to} onChange={e => onChange(from, parseInt(e.target.value))} style={{ padding: '4px 8px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--ink-050)', fontSize: 12, fontFamily: 'var(--font-display)', fontWeight: 700, outline: 'none' }}>
        {hours.map(h => <option key={h} value={h}>{String(h).padStart(2,'0')}:00</option>)}
      </select>
    </div>
  );
}

function DayPicker({ days, onChange }) {
  const DAYS = [{n:'L',v:1},{n:'M',v:2},{n:'X',v:3},{n:'J',v:4},{n:'V',v:5},{n:'S',v:6},{n:'D',v:0}];
  const toggle = (v) => onChange(days.includes(v) ? days.filter(d => d !== v) : [...days, v]);
  return (
    <div style={{ display: 'flex', gap: 4 }}>
      {DAYS.map(d => (
        <button key={d.v} onClick={() => toggle(d.v)} style={{ width: 28, height: 28, borderRadius: 14, background: days.includes(d.v) ? 'var(--ink-900)' : 'var(--ink-100)', color: days.includes(d.v) ? 'white' : 'var(--text-muted)', fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700 }}>{d.n}</button>
      ))}
    </div>
  );
}

function ScreenSettings({ go, t, theme, setTheme, lang, setLang, pushPrefs, setPushPrefs }) {
  const [expandedLine, setExpandedLine] = React.useState(null);

  // Derive sub-objects from the shared pushPrefs (App-level, persisted in localStorage)
  const generalAlerts = pushPrefs.generalAlerts || PUSH_DEFAULTS.generalAlerts;
  const newsNotif = pushPrefs.news || PUSH_DEFAULTS.news;
  const lineConfig = pushPrefs.lineConfig || PUSH_DEFAULTS.lineConfig;

  const setGeneralAlerts = (updater) => setPushPrefs(p => ({ ...p, generalAlerts: typeof updater === 'function' ? updater(p.generalAlerts || PUSH_DEFAULTS.generalAlerts) : updater }));
  const setNewsNotif     = (updater) => setPushPrefs(p => ({ ...p, news:          typeof updater === 'function' ? updater(p.news          || PUSH_DEFAULTS.news)          : updater }));

  const isLineOn = (id) => !!(pushPrefs.lines?.[id]);
  const toggleLine = (id) => {
    const wasOn = isLineOn(id);
    setPushPrefs(p => ({ ...p, lines: { ...(p.lines || {}), [id]: !wasOn } }));
    if (!wasOn) setExpandedLine(id);
    else if (expandedLine === id) setExpandedLine(null);
  };
  const updateLineConfig = (id, patch) => setPushPrefs(p => ({ ...p, lineConfig: { ...(p.lineConfig || {}), [id]: { ...(p.lineConfig?.[id] || {}), ...patch } } }));

  const SectionLabel = ({children}) => (
    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '.08em', margin: '8px 4px 8px' }}>{children}</div>
  );

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      <AppBar title={t('settings')} left={<button onClick={()=>go('main')} style={{width:36,height:36,borderRadius:18,background:'var(--ink-100)',display:'flex',alignItems:'center',justifyContent:'center'}}><I name="arrowLeft" size={18}/></button>} />
      <div className="scroll-area" style={{ padding: '0 20px 20px' }}>

        {/* Appearance */}
        <SectionLabel>{t('appearance')}</SectionLabel>
        <div className="card" style={{ padding: 4, marginBottom: 18 }}>
          <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid var(--border)' }}>
            <I name={theme==='dark'?'moon':'sun'} size={18} style={{stroke:'var(--text-muted)'}}/>
            <div style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>{t('theme')}</div>
            <div style={{ display: 'inline-flex', background: 'var(--ink-100)', borderRadius: 8, padding: 2 }}>
              {[['auto','Auto'],['light','Claro'],['dark','Oscuro']].map(([val,label]) => (
                <button key={val} onClick={()=>setTheme(val)} style={{
                  padding: '5px 12px', borderRadius: 6, fontSize: 11,
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  background: theme===val ? 'var(--surface)' : 'transparent',
                  color: theme===val ? 'var(--text)' : 'var(--text-muted)',
                  boxShadow: theme===val ? '0 1px 4px rgba(0,0,0,.1)' : 'none',
                  transition: 'background .15s, color .15s',
                }}>{label}</button>
              ))}
            </div>
          </div>
          <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <I name="globe" size={18} style={{stroke:'var(--text-muted)'}}/>
            <div style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>{t('language')}</div>
            <div style={{ display: 'inline-flex', background: 'var(--ink-100)', borderRadius: 8, padding: 2 }}>
              <button onClick={()=>setLang('es')} style={{ padding: '5px 12px', borderRadius: 6, fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, background: lang==='es'?'var(--surface)':'transparent', color: lang==='es'?'var(--text)':'var(--text-muted)' }}>ES</button>
              <button onClick={()=>setLang('en')} style={{ padding: '5px 12px', borderRadius: 6, fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, background: lang==='en'?'var(--surface)':'transparent', color: lang==='en'?'var(--text)':'var(--text-muted)' }}>EN</button>
            </div>
          </div>
        </div>

        {/* Alertas generales */}
        <SectionLabel>Alertas generales</SectionLabel>
        <div style={{ fontSize: 11, color: 'var(--text-muted)', margin: '0 4px 8px' }}>Paros, cortes totales, eventos que afecten toda la red.</div>
        <div className="card" style={{ padding: '12px 14px', marginBottom: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: generalAlerts.enabled ? 14 : 0 }}>
            <I name="bell" size={18} style={{stroke:'var(--text-muted)'}}/>
            <div style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>Avisos importantes</div>
            <Toggle on={generalAlerts.enabled} onToggle={() => setGeneralAlerts(p => ({...p, enabled: !p.enabled}))} />
          </div>
          {generalAlerts.enabled && (
            <>
              <div style={{ height: 1, background: 'var(--border)', margin: '0 0 12px' }} />
              <div style={{ fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', marginBottom: 6 }}>DÍAS</div>
              <DayPicker days={generalAlerts.days} onChange={days => setGeneralAlerts(p => ({...p, days}))} />
              <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 10, lineHeight: 1.4 }}>
                ⚡ Se recomienda dejar habilitado todos los días. *un paro puede confirmarse un domingo y afectar el lunes.
              </div>
            </>
          )}
        </div>

        {/* Alertas por línea */}
        <SectionLabel>{t('notifications')} por línea</SectionLabel>
        <div style={{ fontSize: 11, color: 'var(--text-muted)', margin: '0 4px 8px' }}>Demoras o cortes en la línea. Configurá días y horarios por línea.</div>
        <div className="card" style={{ padding: 4, marginBottom: 18 }}>
          {LINES.map((l, i) => {
            const on = isLineOn(l.id);
            const expanded = expandedLine === l.id && on;
            const cfg = lineConfig[l.id] || { days:[1,2,3,4,5], hourFrom:7, hourTo:22 };
            return (
              <div key={l.id} style={{ borderBottom: i < LINES.length-1 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <LineChip id={l.id} size="sm" />
                  <div style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>{l.name}</div>
                  {on && (
                    <button onClick={() => setExpandedLine(expanded ? null : l.id)}
                      style={{ display: 'flex', alignItems: 'center', gap: 3, padding: '3px 8px', borderRadius: 6, background: 'var(--ink-100)', fontSize: 10, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', marginRight: 6 }}>
                      <I name="settings" size={11} style={{stroke:'var(--text-dim)'}}/>{expanded ? 'cerrar' : 'configurar'}
                    </button>
                  )}
                  <Toggle on={on} onToggle={() => toggleLine(l.id)} />
                </div>
                {expanded && (
                  <div style={{ padding: '0 14px 14px', background: 'var(--ink-050)', borderTop: '1px solid var(--border)' }}>
                    <div style={{ fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', margin: '10px 0 6px' }}>DÍAS</div>
                    <DayPicker days={cfg.days} onChange={days => updateLineConfig(l.id, { days })} />
                    <div style={{ fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', margin: '10px 0 6px' }}>HORARIO</div>
                    <HourPicker from={cfg.hourFrom} to={cfg.hourTo} onChange={(f, t_) => updateLineConfig(l.id, { hourFrom:f, hourTo:t_ })} />
                  </div>
                )}
              </div>
            );
          })}
        </div>

        {/* Novedades */}
        <SectionLabel>Novedades</SectionLabel>
        <div style={{ fontSize: 11, color: 'var(--text-muted)', margin: '0 4px 8px', lineHeight: 1.5 }}>
          Alertas de clima, eventos leves, aviso de incidentes, información a tener en cuenta y nuevas funciones de la app.
        </div>
        <div className="card" style={{ padding: '12px 14px', marginBottom: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: newsNotif.enabled ? 14 : 0 }}>
            <I name="news" size={18} style={{stroke:'var(--text-muted)'}}/>
            <div style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14 }}>Novedades</div>
            <Toggle on={newsNotif.enabled} onToggle={() => setNewsNotif(p => ({...p, enabled: !p.enabled}))} />
          </div>
          {newsNotif.enabled && (
            <>
              <div style={{ height: 1, background: 'var(--border)', margin: '0 0 12px' }} />
              <div style={{ fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', marginBottom: 6 }}>DÍAS</div>
              <DayPicker days={newsNotif.days} onChange={days => setNewsNotif(p => ({...p, days}))} />
              <div style={{ fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-muted)', marginTop: 12, marginBottom: 6 }}>HORARIO</div>
              <HourPicker from={newsNotif.hourFrom} to={newsNotif.hourTo} onChange={(f,t_) => setNewsNotif(p => ({...p, hourFrom:f, hourTo:t_}))} />
            </>
          )}
        </div>
        {/*<div style={{ fontSize: 10, color: 'var(--text-dim)', margin: '0 4px 18px', fontStyle: 'italic', lineHeight: 1.5 }}>
          Aún no enviamos notificaciones push — estará disponible cuando se active el dominio definitivo.
          Por ahora las novedades se muestran al abrir la app. Los feeds externos se revisan automáticamente
          (Emova una vez por día, SMN cada 3 h).
        </div>*/}

        {/* Data & privacy */}
        <SectionLabel>{t('data')}</SectionLabel>
        <div className="card" style={{ padding: 4, marginBottom: 18 }}>
          {[
            { label: 'Permisos de ubicación',         action: null },
            { label: 'Política de privacidad',        action: () => go('legal', { doc: 'privacidad', from: 'settings' }) },
            { label: 'Términos y condiciones',        action: () => go('legal', { doc: 'terminos', from: 'settings' }) },
          ].map(({ label, action }, i, arr) => (
            <button key={label} onClick={action || undefined} style={{ width: '100%', padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: i<arr.length-1?'1px solid var(--border)':'none', textAlign: 'left', opacity: action ? 1 : 0.5 }}>
              <div style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13 }}>{label}</div>
              <I name="chevronRight" size={16} style={{stroke:'var(--text-dim)'}}/>
            </button>
          ))}
        </div>

        <div style={{ textAlign: 'center', color: 'var(--text-dim)', fontSize: 12, padding: '20px 0' }}>alSubte v1.1</div>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', margin: '0 4px 18px', lineHeight: 1.5 }}>
          Si te gusta la web, tenés ideas, problemas al usarla pordés escribir a x.com/wfranck o bear.by.patagonia at gmail dot com
        </div>
      </div>
    </div>
  );
}

// ── ScreenLegal ──────────────────────────────────────────────────────────────
// const LEGAL_CONTENT = {
//   terminos: {
//     title: 'Términos y Condiciones',
//     updated: '2026-04-21',
//     sections: [
//       { h: '1. Identificación del titular', p: 'alSubte es una aplicación web/móvil informativa no oficial sobre la red de subterráneos y premetro de la Ciudad Autónoma de Buenos Aires, operada por Walter J. Franck · bear.by.patagonia at gmail dot com' },
//       { h: '2. Carácter no oficial', p: 'La Aplicación no mantiene vínculo institucional, contractual ni comercial con Emova Movilidad S.A., SBASE, el GCBA ni ningún otro organismo público. La información es de carácter orientativo y no reemplaza los canales oficiales.' },
//       { h: '3. Aceptación', p: 'El mero uso de la Aplicación implica la aceptación de estos Términos. Si no estás de acuerdo, debés abstenerte de utilizarla.' },
//       { h: '4. Capacidad', p: 'La consulta general es apta para todo público sin registro. La publicación de reportes colaborativos requiere tener al menos 16 años cumplidos (criterio AAIP).' },
//       { h: '5. Reportes colaborativos', p: 'Los reportes son colaborativos y pueden no reflejar el estado oficial del servicio. El Responsable no verifica individualmente cada reporte. Para enviar un reporte: aceptá la advertencia previa, iniciá sesión con Google, usá un dispositivo móvil y permitir acceso a tu ubicación.' },
//       { h: '6. Uso indebido', p: 'Está prohibido enviar información falsa, engañosa o maliciosa; contenido difamatorio, discriminatorio o violento; datos personales de terceros sin su consentimiento. Se reserva el derecho de eliminar reportes y suspender cuentas sin aviso previo.' },
//       { h: '7. Emergencias', p: 'Ante una emergencia, riesgo para la vida o delito en curso, llamá al 911. alSubte no es un canal de respuesta ante emergencias.' },
//       { h: '8. Canales Emova', p: 'Para reportes de vandalismo, accesibilidad y limpieza dirigidos al concesionario: info@emova.com.ar · https://emova.com.ar/canal-de-denuncias · 0800-333-6682 (lun–vie 8–20 h).' },
//       { h: '9. Disponibilidad', p: 'La Aplicación se ofrece "tal cual", sin garantía de disponibilidad continua. Los Términos pueden actualizarse; los cambios sustantivos se comunicarán con 10 días de anticipación cuando sea posible.' },
//       { h: '10. Limitación de responsabilidad', p: 'El Responsable no será responsable por pérdidas derivadas de decisiones tomadas en base a información de la Aplicación, interrupciones del servicio de transporte, errores de fuentes públicas ni fallas técnicas.' },
//       { h: '11. Ley aplicable', p: 'Estos Términos se rigen por las leyes de la República Argentina. Toda controversia se someterá a los Tribunales Ordinarios de la CABA, sin perjuicio de los derechos del consumidor (Ley 24.240).' },
//     ],
//   },
//   privacidad: {
//     title: 'Política de Privacidad',
//     updated: '2026-04-21',
//     sections: [
//       { h: '1. Responsable', p: 'Walter J. Franck · bear.by.patagonia at gmail dot com. Esta Política se rige por la Ley 25.326 de Protección de Datos Personales.' },
//       { h: '2. Datos del uso general (sin registro)', p: 'No recolectamos datos personales identificables. El localStorage del navegador guarda únicamente preferencias locales (tema, idioma, anuncios descartados, configuración de notificaciones). No usamos cookies de seguimiento ni analítica de terceros que identifiquen usuarios.' },
//       { h: '3. Geolocalización', p: 'En el mapa y consulta de líneas, tu ubicación se procesa exclusivamente en tu dispositivo y nunca se envía a nuestros servidores. Solo al enviar un reporte se registra tu ubicación junto al reporte para validar proximidad a la estación.' },
//       { h: '4. Datos de reportes (requiere registro)', p: 'Registramos: ID de cuenta Google, nombre y correo, ubicación en el momento del reporte, modelo/OS/navegador del dispositivo, contenido del reporte y timestamp. Los reportes se conservan el tiempo necesario para cumplir la finalidad del servicio y pueden ser solicitados para eliminación en cualquier momento.' },
//       { h: '5. Notificaciones push', p: 'Las preferencias de notificación se guardan localmente. Cuando se activen las notificaciones, el servidor no conocerá tu identidad individual: solo la cantidad de dispositivos con determinada configuración. El token push no se cruza con tu cuenta Google.' },
//       { h: '6. Proveedores técnicos', p: 'Supabase Inc. (base de datos, EE.UU./AWS), Cloudflare Inc. (CDN, EE.UU.), Vercel Inc. eventual (hosting, EE.UU.). Estos países no integran la lista de adecuación de la AAIP; nos aseguramos mediante cláusulas contractuales (DPA de cada proveedor).' },
//       { h: '7. No compartimos con Emova ni GCBA', p: 'No compartimos datos de usuarios con Emova, SBASE, el Gobierno de la Ciudad ni ningún organismo oficial. alSubte no mantiene relación contractual con ninguno de ellos.' },
//       { h: '8. Menores de edad', p: 'La función de reportes está reservada a personas de 16 años o más. El uso general es apto para todo público. No recolectamos datos identificables de menores en el uso general.' },
//       { h: '9. Tus derechos (Ley 25.326, art. 14-16)', p: 'Tenés derecho a: Acceso, Rectificación, Supresión ("derecho al olvido") y Oposición. Para ejercerlos: Ajustes → Datos y privacidad → Eliminar mis datos, o escribí a bear.by.patagonia at gmail dot com con asunto "Solicitud de supresión". Respondemos en máx. 5 días hábiles. La autoridad de control es la AAIP: argentina.gob.ar/aaip' },
//       { h: '10. Seguridad', p: 'Implementamos acceso a BD restringido por roles (RLS Supabase), transmisión cifrada (HTTPS/TLS) y claves de API como secretos de entorno, nunca en el código.' },
//       { h: '11. Cookies y almacenamiento', p: 'Esta app no usa cookies de seguimiento. El localStorage se usa exclusivamente para preferencias y caché de funcionamiento. Podés borrarlo desde tu navegador o desde Ajustes → Datos y privacidad.' },
//     ],
//   },
// };

const LEGAL_CONTENT = {
  terminos: {
    title: 'Términos y Condiciones',
    updated: '2026-04-21',
    sections: [
      { h: '1. Identificación del titular', p: 'alSubte es una aplicación web/móvil informativa no oficial sobre la red de subterráneos y premetro de la Ciudad Autónoma de Buenos Aires, operada por Walter J. Franck · bear.by.patagonia at gmail dot com' },
      { h: '2. Carácter no oficial', p: 'La Aplicación no mantiene vínculo institucional, contractual ni comercial con Emova Movilidad S.A., SBASE, el GCBA ni ningún otro organismo público. La información es de carácter orientativo y no reemplaza los canales oficiales.' },
      { h: '3. Aceptación', p: 'El mero uso de la Aplicación implica la aceptación de estos Términos. Si no estás de acuerdo, debés abstenerte de utilizarla.' },
      { h: '4. Capacidad', p: 'La consulta general es apta para todo público sin registro. La publicación de reportes colaborativos requiere tener al menos 16 años cumplidos.' },
      { h: '5. Reportes colaborativos', p: 'Los reportes son generados por usuarios y se procesan de forma agregada. La Aplicación puede requerir múltiples reportes coincidentes para mostrar un estado o incidente, sin que ello implique verificación ni garantía de exactitud. El Responsable no valida individualmente cada reporte. Al enviar un reporte, el usuario declara que la información es veraz, actual y realizada de buena fe, siendo el único responsable por su contenido y sus consecuencias.' },
      { h: '6. Uso indebido', p: 'Está prohibido enviar información falsa, engañosa o maliciosa; contenido difamatorio, intimidatorio, discriminatorio o violento; o datos personales de terceros sin su consentimiento. El Responsable podrá eliminar reportes, limitar funcionalidades o suspender cuentas cuando detecte uso indebido, incluyendo reportes falsos que afecten la experiencia de otros usuarios o el funcionamiento del servicio.' },
      { h: '7. Emergencias y seguridad', p: 'La Aplicación no es un canal para reportar emergencias, delitos o situaciones de riesgo. En estos casos, el usuario debe comunicarse directamente con el 911, la policía o los canales oficiales del concesionario. alSubte solo permite reportes informativos sobre el estado del servicio.' },
      { h: '8. Canales Emova', p: 'Para reportes dirigidos al concesionario: info@emova.com.ar · https://emova.com.ar/canal-de-denuncias · 0800-333-6682 (lun–vie 8–20 h).' },
      { h: '9. Disponibilidad', p: 'La Aplicación se ofrece "tal cual", sin garantía de disponibilidad continua. Los Términos pueden actualizarse; los cambios sustantivos se comunicarán cuando sea posible.' },
      { h: '10. Limitación de responsabilidad', p: 'El Responsable no será responsable por pérdidas derivadas de decisiones tomadas en base a información de la Aplicación, incluyendo información basada en reportes colaborativos aun cuando sean coincidentes entre múltiples usuarios, ni por interrupciones del servicio de transporte, errores de fuentes públicas o fallas técnicas.' },
      { h: '11. Ley aplicable', p: 'Estos Términos se rigen por las leyes de la República Argentina. Toda controversia se someterá a los Tribunales Ordinarios de la Ciudad Autónoma de Buenos Aires, sin perjuicio de los derechos del consumidor (Ley 24.240).' },
    ],
  },

  privacidad: {
    title: 'Política de Privacidad',
    updated: '2026-04-21',
    sections: [
      { h: '1. Responsable', p: 'Walter J. Franck · bear.by.patagonia at gmail dot com. Esta Política se rige por la Ley 25.326 de Protección de Datos Personales.' },
      { h: '2. Datos del uso general (sin registro)', p: 'No recolectamos datos personales identificables. El almacenamiento local del dispositivo guarda únicamente preferencias (tema, idioma, configuración y estado de la aplicación). No utilizamos cookies de seguimiento ni analítica que identifique usuarios.' },
      { h: '3. Geolocalización', p: 'Tu ubicación se procesa en tu dispositivo para funciones de consulta. Solo se registra y envía a nuestros servidores cuando el usuario decide enviar un reporte, con el fin de validar su relación con la estación o servicio reportado.' },
      { h: '4. Datos de reportes (requiere registro)', p: 'Registramos: ID de cuenta Google, nombre, correo electrónico, ubicación al momento del reporte, información técnica del dispositivo, contenido del reporte y fecha/hora. Estos datos se utilizan para operar la funcionalidad, prevenir abusos y, en caso necesario, investigar conductas indebidas como amenazas, intimidaciones o reportes falsos. Se conservan únicamente por el tiempo necesario para estos fines.' },
      { h: '5. Notificaciones push', p: 'Las preferencias de notificación se gestionan en el dispositivo. Cuando se activen, el sistema puede utilizar identificadores técnicos para el envío, sin asociarlos directamente con tu identidad personal.' },
      { h: '6. Proveedores técnicos', p: 'Utilizamos servicios de terceros para operar la Aplicación (como base de datos, infraestructura y distribución de contenido). Estos proveedores pueden implicar transferencia internacional de datos. Se adoptan medidas contractuales razonables para proteger la información conforme a la normativa aplicable.' },
      { h: '7. No compartimos con Emova ni GCBA', p: 'No compartimos datos de usuarios con Emova, SBASE, el Gobierno de la Ciudad ni ningún organismo oficial. alSubte no mantiene relación contractual con ninguno de ellos.' },
      { h: '8. Menores de edad', p: 'La función de reportes está reservada a personas de 16 años o más. El uso general es apto para todo público.' },
      { h: '9. Tus derechos', p: 'Tenés derecho a acceder, rectificar y solicitar la eliminación de tus datos personales. Para ejercerlos: Ajustes → Datos y privacidad → Eliminar mis datos, o escribí a bear.by.patagonia at gmail dot com.' },
      { h: '10. Seguridad', p: 'Aplicamos medidas razonables de seguridad, incluyendo transmisión cifrada y controles de acceso a los datos.' },
      { h: '11. Almacenamiento local', p: 'La aplicación utiliza almacenamiento local del dispositivo exclusivamente para preferencias y funcionamiento. Podés eliminarlo desde tu navegador o desde la configuración de la app.' },
      { h: '12. Responsabilidad sobre los reportes', p: 'Los reportes publicados son responsabilidad exclusiva de los usuarios que los generan. alSubte no asume responsabilidad por su contenido. No obstante, el Responsable podrá conservar información asociada a los reportes con el fin de prevenir abusos, garantizar la seguridad de la plataforma y colaborar con autoridades competentes cuando corresponda.' },
      { h: '13. Procesamiento de reportes', p: 'Los reportes pueden ser utilizados de forma agregada para identificar tendencias o estados del servicio. La visualización puede basarse en múltiples reportes coincidentes. Este procesamiento no implica validación individual ni garantiza la veracidad de la información mostrada.' },
    ],
  },
};

function ScreenLegal({ doc, from, go, t }) {
  const content = LEGAL_CONTENT[doc] || LEGAL_CONTENT.terminos;
  return (
    <div className="scroll-area">
      <AppBar
        title={content.title}
        left={
          <button onClick={() => go(from || 'settings')} style={{ width: 38, height: 38, borderRadius: 19, background: 'var(--ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <I name="arrowLeft" size={18} />
          </button>
        }
      />
      <div style={{ padding: '4px 20px 32px' }}>
        <div style={{ fontSize: 11, color: 'var(--text-dim)', marginBottom: 20, fontStyle: 'italic' }}>
          Versión 1.0 · Última actualización: {content.updated}
        </div>
        {content.sections.map((s, i) => (
          <div key={i} style={{ marginBottom: 18 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, color: 'var(--text)', marginBottom: 5 }}>{s.h}</div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.65 }}>{s.p}</div>
          </div>
        ))}
        <div style={{ marginTop: 24, padding: 16, borderRadius: 14, background: 'var(--ink-100)' }}>
          <div style={{ fontSize: 12, color: 'var(--text-dim)', lineHeight: 1.6 }}>
            Para consultas sobre esta {doc === 'privacidad' ? 'política' : 'versión'}:{' '}
            <strong>bear.by.patagonia at gmail dot com</strong>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenNews, ScreenChat, ScreenIncidentReport, ScreenAbout, ScreenAuth, ScreenProfile, ScreenSettings, ScreenLegal, ReportCard });