// ── "Entrena con un coach" (/coach-online) ────────────────────────────────────
// Página informativa pública: la app da el plan y la base científica; un coach
// revisa la ejecución y acompaña. Sin backend — el CTA abre el cliente de correo
// (ningún dato se recoge dentro de la app). Sin precios, testimonios ni cifras.
// Diseño: crema/navy, azul #2563EB en el botón principal, tipografía Inter.

const CO = {
  page:  '#FAFAF7', card: '#FFFFFF', ink: '#0F1A2E', body: '#2C3542',
  sub:   '#5C6477', muted: '#8A8F9C', border: 'rgba(15,26,46,0.08)',
  blue:  '#2563EB', navy: '#0F1A2E',
};

const CO_MAILTO = 'mailto:atlasmethod.app@gmail.com?subject=Coach%20online%20-%20Atlas%20Method&body=Hola%20Mario%2C%20me%20interesa%20el%20coaching%20online.%20Mi%20objetivo%20es%3A%20';

// Placeholder de foto: silueta sobre navy (sin imágenes de stock).
function CoachPhotoPlaceholder() {
  return (
    <div
      role="img"
      aria-label="Espacio reservado para la foto de Mario Gil"
      style={{
        width: 92, height: 92, flexShrink: 0, borderRadius: 18,
        background: 'linear-gradient(135deg, #1C2B44 0%, #0F1A2E 100%)',
        border: '1px solid rgba(15,26,46,0.12)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}
    >
      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="8.2" r="3.6" fill="rgba(250,250,247,0.42)" />
        <path d="M4.6 19.4c0-3.6 3.3-5.6 7.4-5.6s7.4 2 7.4 5.6" fill="rgba(250,250,247,0.42)" />
      </svg>
    </div>
  );
}

function CoachOnlineSection() {
  const isMobile = useIsMobile();
  const { navigate } = useRoute();

  // Servicio desactivado: redirige a Inicio (el componente se conserva tras el flag).
  const enabled = (typeof ATLAS_FEATURE === 'function') && ATLAS_FEATURE('FEATURE_COACH_ONLINE');
  React.useEffect(() => { if (!enabled) navigate('/'); }, [enabled]); // eslint-disable-line react-hooks/exhaustive-deps
  if (!enabled) return null;

  const incluye = [
    'Evaluación inicial: punto de partida, objetivos, experiencia previa y cómo te mueves.',
    'Programa a tu medida, según tu nivel, tu tiempo y tu material.',
    'Sesiones guiadas, online por videollamada o presenciales en Madrid.',
    'Corrección de técnica en las sesiones y por vídeo.',
    'Seguimiento y ajustes según cómo progresas.',
  ];

  const pasos = [
    'Me escribes con tu objetivo.',
    'Hacemos una evaluación inicial.',
    'Empezamos con tu plan y el seguimiento.',
  ];

  return (
    <section style={{ background: CO.page, minHeight: '100vh', padding: isMobile ? '24px 16px calc(80px + env(safe-area-inset-bottom))' : '56px 32px 96px' }}>
      <div style={{ maxWidth: 760, margin: '0 auto' }}>
        <button onClick={() => navigate('/perfil')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 28, background: 'none', border: 'none', cursor: 'pointer', fontFamily: '"Inter",system-ui', fontSize: 14, fontWeight: 600, color: CO.sub, padding: 0 }}>
          ← Volver
        </button>

        {/* a) Título */}
        <h1 style={{ fontFamily: '"Inter",system-ui', fontSize: isMobile ? 28 : 38, fontWeight: 800, color: CO.ink, letterSpacing: -0.8, lineHeight: 1.1, margin: '0 0 14px' }}>
          Entrena con un coach
        </h1>

        {/* b) Texto breve */}
        <p style={{ fontFamily: '"Inter",system-ui', fontSize: isMobile ? 16 : 17, color: CO.body, lineHeight: 1.65, margin: '0 0 32px', maxWidth: 620 }}>
          La app te da el plan y la base científica. Un coach revisa cómo lo ejecutas, ajusta el programa a ti y te acompaña en el proceso.
        </p>

        {/* c) Qué incluye */}
        <div style={{ background: CO.card, borderRadius: 18, border: `1px solid ${CO.border}`, padding: isMobile ? '18px 18px' : '24px 28px', marginBottom: 20 }}>
          <h2 style={{ fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 11, fontWeight: 700, color: CO.sub, letterSpacing: 0.6, textTransform: 'uppercase', margin: '0 0 14px' }}>
            Qué incluye
          </h2>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {incluye.map((item, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontFamily: '"Inter",system-ui', fontSize: 15.5, color: CO.body, lineHeight: 1.55 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ flexShrink: 0, marginTop: 1 }}>
                  <circle cx="12" cy="12" r="11" fill="rgba(37,99,235,0.10)" />
                  <path d="M7.5 12.4l2.9 2.9 6-6.3" stroke="#2563EB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* c2) Cómo funciona */}
        <div style={{ background: CO.card, borderRadius: 18, border: `1px solid ${CO.border}`, padding: isMobile ? '18px 18px' : '24px 28px', marginBottom: 20 }}>
          <h2 style={{ fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 11, fontWeight: 700, color: CO.sub, letterSpacing: 0.6, textTransform: 'uppercase', margin: '0 0 16px' }}>
            Cómo funciona
          </h2>
          <ol style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {pasos.map((paso, i) => (
              <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, fontFamily: '"Inter",system-ui', fontSize: 15.5, color: CO.body, lineHeight: 1.5 }}>
                <span aria-hidden="true" style={{ flexShrink: 0, width: 26, height: 26, borderRadius: 999, background: CO.blue, color: '#fff', fontFamily: '"Inter",system-ui', fontSize: 13, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {i + 1}
                </span>
                <span style={{ marginTop: 2 }}>{paso}</span>
              </li>
            ))}
          </ol>
        </div>

        {/* d) Quién está detrás */}
        <div style={{ background: CO.card, borderRadius: 18, border: `1px solid ${CO.border}`, padding: isMobile ? '18px 18px' : '24px 28px', marginBottom: 28 }}>
          <h2 style={{ fontFamily: 'ui-monospace,Menlo,monospace', fontSize: 11, fontWeight: 700, color: CO.sub, letterSpacing: 0.6, textTransform: 'uppercase', margin: '0 0 16px' }}>
            Quién está detrás
          </h2>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <CoachPhotoPlaceholder />
            <div>
              <div style={{ fontFamily: '"Inter",system-ui', fontSize: 17, fontWeight: 800, color: CO.ink, letterSpacing: -0.3, marginBottom: 4 }}>
                Mario Gil
              </div>
              <div style={{ fontFamily: '"Inter",system-ui', fontSize: 14.5, color: CO.sub, lineHeight: 1.5 }}>
                Entrenador personal y estudiante de Ciencias de la Actividad Física y del Deporte.
              </div>
            </div>
          </div>
        </div>

        {/* e) CTA principal + f) Nota */}
        <a
          href={CO_MAILTO}
          className="wp-press"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            width: isMobile ? '100%' : 'auto', minHeight: 50, padding: '0 26px',
            borderRadius: 12, background: CO.blue, color: '#FFFFFF', textDecoration: 'none',
            fontFamily: '"Inter",system-ui', fontSize: 15, fontWeight: 700, border: 'none',
            boxShadow: '0 1px 2px rgba(15,26,46,0.12)',
          }}
        >
          Contactar por email
        </a>
        <p style={{ fontFamily: '"Inter",system-ui', fontSize: 13, color: CO.muted, margin: '12px 0 0' }}>
          Escríbeme y te cuento las opciones disponibles.
        </p>
      </div>
    </section>
  );
}

function CoachOnlinePage() { return <CoachOnlineSection />; }

Object.assign(window, { CoachOnlineSection, CoachOnlinePage });