// Footer (sitemap + legal). ClosingSection (CTA de la landing antigua) eliminado.
function Footer() {
  const { navigate } = useRoute();
  const nav = [
    ['Inicio', '/'], ['Aula', '/aula'], ['Builder', '/builder'],
    ['Mis rutinas', '/rutinas'], ['Atlas Coach', '/coach'], ['Progreso', '/progreso'],
  ];
  const linkSty = { background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: '"Inter",system-ui', fontSize: 14, color: '#5C6477', textAlign: 'left' };
  return (
    <footer style={{ padding: '64px 32px 40px', background: '#FAFAF7', borderTop: '1px solid rgba(15,26,46,0.06)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <AtlasA size={28} color="#0F1A2E" stroke={9} />
              <span style={{ fontFamily: '"Inter",system-ui', fontWeight: 800, fontSize: 18, letterSpacing: -0.4, color: '#0F1A2E' }}>
                Atlas <span style={{ fontWeight: 500, opacity: 0.55 }}>Method</span>
              </span>
            </div>
            <p style={{ fontFamily: '"Inter",system-ui', fontSize: 14, color: '#5C6477', lineHeight: 1.5, margin: '16px 0 0', maxWidth: 340 }}>
              Entrenamiento basado en evidencia. Tus datos se guardan solo en tu dispositivo.
            </p>
          </div>
          <div>
            <div style={{ fontFamily: '"Inter",system-ui', fontSize: 12, fontWeight: 700, color: '#3A4257', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 16 }}>Navegación</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {nav.map(([l, p]) => <button key={p} onClick={() => navigate(p)} style={linkSty}>{l}</button>)}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: '"Inter",system-ui', fontSize: 12, fontWeight: 700, color: '#3A4257', letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 16 }}>Legal</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                // El acceso al coaching online solo aparece si el flag está activo.
                ...((typeof ATLAS_FEATURE === 'function' && ATLAS_FEATURE('FEATURE_COACH_ONLINE')) ? [['Entrena con un coach','/coach-online']] : []),
                ['Aviso legal','/legal'],['Política de privacidad','/privacidad'],['Política de cookies','/cookies'],['Términos de uso','/terminos'],['Créditos y licencias','/creditos'],
              ].map(([l, p]) => (
                <button key={p} onClick={() => navigate(p)} style={linkSty}>{l}</button>
              ))}
            </div>
          </div>
        </div>
        <div style={{ paddingTop: 24, borderTop: '1px solid rgba(15,26,46,0.08)' }}>
          <span style={{ fontFamily: '"Inter",system-ui', fontSize: 12, color: '#6B7280' }}>© 2026 Atlas Method · [NOMBRE]</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Footer });