// ===== RIVAMAR Group — Manual de Usuario interactivo (módulo admin) =====
const { useState: useStateMan } = React;

function Manual() {
  const secciones = [
    {
      id: 'acceso', icon: 'lock', titulo: 'Acceso al panel',
      intro: 'Cómo ingresar y salir del panel de administración de forma segura.',
      pasos: [
        ['Ingresar', 'En el sitio, pulsa el botón "Admin" de la barra superior. Escribe tu correo corporativo y tu contraseña, luego "Ingresar al panel".'],
        ['Publicar antes de salir', 'IMPORTANTE: antes de cerrar sesión pulsa "Publicar al servidor" para guardar las reservas y cambios en todos los dispositivos. Si hay cambios pendientes, el botón parpadea y el sistema te avisa al intentar salir.'],
        ['Cerrar sesión', 'Usa el botón "Cerrar sesión" (arriba a la derecha) al terminar. Te pedirá confirmación y no perderás información si publicaste antes.'],
        ['¿Olvidaste tu contraseña?', 'Pídele a un Administrador que te asigne una nueva desde el módulo Usuarios → 🔑 Contraseña.'],
      ],
    },
    {
      id: 'dashboard', icon: 'chart', titulo: 'Dashboard',
      intro: 'Resumen general del negocio en tiempo real.',
      pasos: [
        ['Indicadores (KPIs)', 'Arriba ves: total de reservas, comensales (total de personas en reservas activas), comensales de hoy, pendientes, confirmadas y descuentos EXPONOR aplicados.'],
        ['Reservas próximas a vencer', 'Un panel destacado lista las reservas de las próximas 48 horas (HOY / Mañana). Desde ahí recuerdas al cliente su reserva por WhatsApp o correo con un clic.'],
        ['Últimas reservas', 'Debajo aparece el listado de las reservas más recientes para revisar de un vistazo.'],
      ],
    },
    {
      id: 'reservas', icon: 'list', titulo: 'Gestión de Reservas',
      intro: 'Administra todas las solicitudes de reserva de los tres locales.',
      pasos: [
        ['Crear reserva manual', 'Botón "+ Nueva reserva": agrega una reserva directamente desde el panel (útil para reservas por teléfono o presenciales). Recibe automáticamente el código correlativo RV-2026-xxxx.'],
        ['Buscar y filtrar', 'Usa el buscador (nombre, empresa, ID, teléfono) y los filtros por estado (Activas, Pendientes, Confirmadas, Canceladas, Eliminadas) y por local.'],
        ['Cambiar estado', 'Botones "Confirmar" / "Cancelar" en cada fila. El color del estado cambia automáticamente.'],
        ['Enviar al cliente por WhatsApp', 'Pulsa el ícono verde de WhatsApp para enviarle al cliente el detalle de su reserva con un mensaje listo.'],
        ['Descargar comprobante PDF', 'El ícono de documento genera un comprobante con la identidad RIVAMAR (se abre la ventana de impresión → "Guardar como PDF").'],
        ['Editar (todos los campos)', 'El ícono de lápiz abre el formulario completo: nombre, empresa, correo, teléfono, fecha, hora, local, número de personas, estado, beneficio EXPONOR, credencial y comentarios.'],
        ['Eliminar (sin perder el registro)', 'El ícono de papelera marca la reserva como "Eliminada" pero conserva su código correlativo; la ves con el filtro "Eliminadas" y puedes restaurarla.'],
        ['Exportar CSV', 'Botón "Exportar CSV" para descargar el listado filtrado y abrirlo en Excel.'],
      ],
    },
    {
      id: 'galeria', icon: 'image', titulo: 'Galería',
      intro: 'Administra las fotos que se muestran en el sitio público.',
      pasos: [
        ['Agregar foto', 'Botón "Agregar foto": completa local, categoría, título y arrastra la imagen (o pega una URL). Marca "Destacada" si quieres que aparezca en el inicio.'],
        ['Editar o eliminar', 'Cada foto tiene acciones para destacar, editar o eliminar. Los cambios se ven al instante en el sitio.'],
      ],
    },
    {
      id: 'cms', icon: 'edit', titulo: 'CMS Lite — Contenido del sitio',
      intro: 'Edita TODO el contenido del sitio sin tocar código.',
      pasos: [
        ['Pestañas', 'General (logo, hero, banner, contacto, paleta de color, footer, correo), Locales (datos, dirección, MAPA "cómo llegar" y menús de los 3), Nosotros, Convenios y EXPONOR.'],
        ['Publicar', 'Tras editar, pulsa "Publicar cambios" para que se reflejen en el sitio. "Restablecer sección" vuelve a los valores por defecto.'],
        ['Historial', 'Se guardan las últimas 5 versiones; puedes restaurar cualquiera.'],
        ['Edición directa en el sitio', 'Con sesión activa, aparece la barra "Modo edición" en el sitio público: haz clic sobre un texto para editarlo en su lugar.'],
        ['Cambiar la paleta', 'En General → Paleta de color eliges entre Rivamar, Midnight, Claro Gourmet, Esmeralda, Burdeos e Industrial. Se aplica a todo el sitio.'],
      ],
    },
    {
      id: 'cotizaciones', icon: 'briefcase', titulo: 'Cotizaciones B2B',
      intro: 'Solicitudes de convenio enviadas desde el formulario "Convenios B2B" (cualquier dispositivo).',
      pasos: [
        ['Llegada automática', 'Cada solicitud del formulario público llega aquí en estado "Nueva", sin importar el dispositivo desde el que se envió.'],
        ['Herramientas', 'Igual que Gestión de Reservas: buscador, filtros por estado, KPIs, exportar CSV, responder por WhatsApp/correo y descargar PDF.'],
        ['Gestionar estado', 'Marca cada cotización como Nueva → Contactada → Cerrada, o archívala (se conserva el registro).'],
      ],
    },
    {
      id: 'correos', icon: 'mail', titulo: 'Correos y pendientes',
      intro: 'Solicitudes por confirmar y plantillas de notificación con la identidad de la marca.',
      pasos: [
        ['Pendientes de confirmación', 'La pestaña "Pendientes" lista las reservas y cotizaciones que esperan tu confirmación, con un contador rojo. Confírmalas o avísale al cliente por WhatsApp en un clic.'],
        ['Vista previa', 'Revisa cómo llega el correo de confirmación al cliente y el aviso al administrador.'],
        ['Envío automático', 'En CMS → General → "Correo automático de reservas" se conecta el correo del servidor (sin límites) o EmailJS para que las reservas lleguen solas.'],
        ['Aviso a tu WhatsApp', 'En CMS → General → "Aviso al teléfono" activas CallMeBot (gratis) para recibir un WhatsApp cada vez que entra una reserva nueva.'],
      ],
    },
    {
      id: 'usuarios', icon: 'users', titulo: 'Usuarios y roles',
      intro: 'Controla quién accede y qué módulos puede usar.',
      pasos: [
        ['Roles', 'Administrador (acceso total), Encargado Local (reservas y contenido) y Usuario básico (consulta y reservas). Cada rol trae módulos predeterminados.'],
        ['Crear usuario', 'Completa nombre, correo, contraseña y rol. "Crear usuario (activo)" lo deja listo; "Crear e invitar por correo" envía la invitación. El usuario se guarda siempre, aunque falle el envío del correo.'],
        ['Contraseña', 'El botón 🔑 Contraseña permite asignar o cambiar la clave de cada usuario.'],
        ['Módulos a la medida', 'Pulsa "N módulos" para activar/desactivar el acceso a módulos específicos por usuario.'],
      ],
    },
    {
      id: 'visitas', icon: 'globe', titulo: 'Visitas',
      intro: 'Analítica de tráfico del sitio.',
      pasos: [
        ['Métricas', 'Visitas totales, de hoy e IPs únicas, con un gráfico de los últimos 7 días.'],
        ['Detalle', 'Tabla con las visitas recientes (fecha, IP, navegador y dispositivo), exportable a CSV.'],
      ],
    },
    {
      id: 'reportes', icon: 'chart', titulo: 'Reportes',
      intro: 'Métricas de reservas por local y beneficio EXPONOR.',
      pasos: [
        ['Indicadores', 'Comensales, beneficio EXPONOR y tasa de confirmación.'],
        ['Exportar', 'Descarga un informe en PDF con la identidad RIVAMAR, además del CSV.'],
      ],
    },
  ];

  const [abierta, setAbierta] = useStateMan('acceso');

  return (
    <div className="space-y-5 max-w-4xl">
      <div className="bg-gradient-to-r from-gold/15 to-transparent border border-gold/25 rounded-xl p-5">
        <h2 className="font-display text-xl font-bold text-gray-50">Manual de usuario del sistema</h2>
        <p className="text-sm text-gray-400 mt-1.5 leading-relaxed">Guía paso a paso de todos los módulos del panel RIVAMAR Group. Haz clic en cada sección para ver los procesos. Disponible para todos los roles de usuario.</p>
      </div>

      {/* Índice rápido */}
      <div className="flex flex-wrap gap-2">
        {secciones.map((s) => (
          <button key={s.id} onClick={() => { setAbierta(s.id); }}
            className={`text-xs font-medium px-3 py-1.5 rounded-full border transition-colors ${abierta === s.id ? 'bg-gold/15 text-gold border-gold/40' : 'bg-iron text-gray-400 border-white/10 hover:text-gray-200'}`}>
            {s.titulo}
          </button>
        ))}
      </div>

      {/* Acordeón */}
      <div className="space-y-3">
        {secciones.map((s, i) => {
          const open = abierta === s.id;
          return (
            <div key={s.id} className="bg-iron border border-white/10 rounded-xl overflow-hidden">
              <button onClick={() => setAbierta(open ? '' : s.id)} className="w-full flex items-center gap-3 px-5 py-4 text-left hover:bg-white/[0.02]">
                <span className="grid place-items-center w-9 h-9 rounded-lg bg-gold/15 text-gold shrink-0"><AdIcon name={s.icon} size={17} /></span>
                <span className="flex-1">
                  <span className="block font-display font-bold text-gray-50 text-sm">{i + 1}. {s.titulo}</span>
                  <span className="block text-xs text-gray-500 mt-0.5">{s.intro}</span>
                </span>
                <span className={`text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 9 12 15 18 9"/></svg>
                </span>
              </button>
              {open && (
                <div className="px-5 pb-5 pt-1">
                  <ol className="space-y-3">
                    {s.pasos.map(([t, d], idx) => (
                      <li key={idx} className="flex gap-3">
                        <span className="grid place-items-center w-6 h-6 rounded-full bg-carbon border border-gold/30 text-gold text-xs font-bold shrink-0 mt-0.5">{idx + 1}</span>
                        <div>
                          <span className="font-semibold text-gray-100 text-sm">{t}</span>
                          <p className="text-sm text-gray-400 leading-relaxed mt-0.5">{d}</p>
                        </div>
                      </li>
                    ))}
                  </ol>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="bg-iron border border-white/10 rounded-xl p-5 text-sm text-gray-400">
        <p className="font-semibold text-gray-200 mb-1">¿Necesitas ayuda adicional?</p>
        <p className="leading-relaxed">Escribe a <span className="text-gold">soporte@rivamar.cl</span> o contacta a tu Administrador. Este manual está siempre disponible en el menú lateral del panel para todos los usuarios.</p>
      </div>
    </div>
  );
}

Object.assign(window, { Manual });