// Ejecutora — Recursos y Configuración

const RecursosScreen = () => {
  const recursos = [
    { titulo: 'Script de ventas WhatsApp — Adquisición', categoria: 'Script', color: EJ.cyan, bg: EJ.cyanLight, desc: 'Mensaje de bienvenida para quien nunca te ha comprado. Con pack de bienvenida y urgencia real.' },
    { titulo: 'Script de reactivación — Activación', categoria: 'Script', color: EJ.pink, bg: EJ.pinkLight, desc: 'Mensaje personalizado que menciona la compra anterior. Tono cálido, sin presión.' },
    { titulo: 'Planilla de seguimiento semanal', categoria: 'Planilla', color: EJ.violet, bg: EJ.violetLight, desc: 'Registra contactos, seguimientos y resultados. 6 indicadores clave.' },
    { titulo: 'Calendario de ventas mensual', categoria: 'Template', color: EJ.cyan, bg: EJ.cyanLight, desc: 'Planificación visual del mes: campañas, fechas clave y meta de facturación.' },
    { titulo: 'Checklist OKR trimestral', categoria: 'Planilla', color: EJ.violet, bg: EJ.violetLight, desc: 'Define tu Objetivo y 3 KRs medibles para Q2 / Q3 / Q4.' },
    { titulo: 'Guión de llamada de cierre', categoria: 'Script', color: EJ.pink, bg: EJ.pinkLight, desc: '5 pasos para cerrar en una llamada: rapport → diagnóstico → oferta → objeciones → cierre.' },
    { titulo: 'Análisis de objeciones', categoria: 'Guía', color: EJ.navy, bg: '#E8EAF6', desc: 'Las 10 objeciones más comunes y cómo quebrarlas antes de que aparezcan.' },
    { titulo: 'Copy para campañas de WhatsApp', categoria: 'Template', color: EJ.cyan, bg: EJ.cyanLight, desc: 'Plantillas listas para los 3 tipos de campaña. Solo personaliza el nombre y producto.' },
    { titulo: 'Embudo de Desafío 5 Días', categoria: 'Estructura', color: EJ.violet, bg: EJ.violetLight, desc: 'Día a día del desafío: rapport → framework → profundización → objeciones → oferta.' },
    { titulo: 'Tracker de ingresos mensuales', categoria: 'Planilla', color: EJ.cyan, bg: EJ.cyanLight, desc: 'Registra ventas diarias, calcula ticket promedio y mide vs. meta.' },
    { titulo: 'Kit de WhatsApp VIP — 30 estrategias', categoria: 'Guía', color: EJ.pink, bg: EJ.pinkLight, desc: '15 estrategias antes + 15 estrategias después de abrir ventas.' },
    { titulo: 'Auto-evaluación del negocio', categoria: 'Diagnóstico', color: EJ.navy, bg: '#E8EAF6', desc: 'Módulo 0 del curso. 4 áreas · semáforo · plan de acción de 1 página.' },
  ];

  const categorias = ['Todos', 'Script', 'Planilla', 'Template', 'Guía', 'Estructura', 'Diagnóstico'];
  const [filtro, setFiltro] = React.useState('Todos');
  const [busqueda, setBusqueda] = React.useState('');

  const filtrados = recursos.filter(r => {
    const matchCat = filtro === 'Todos' || r.categoria === filtro;
    const matchBus = r.titulo.toLowerCase().includes(busqueda.toLowerCase()) || r.desc.toLowerCase().includes(busqueda.toLowerCase());
    return matchCat && matchBus;
  });

  return (
    <div style={{ padding: '28px 32px', background: EJ.bgApp, minHeight: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
        <div>
          <h2 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 26, color: EJ.navy }}>Recursos</h2>
          <p style={{ margin: '4px 0 0', fontSize: 13, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>Templates, scripts y herramientas de La Rutina que Vende™</p>
        </div>
        <Badge variant="navy">✦ {recursos.length} recursos</Badge>
      </div>

      {/* Filtros */}
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 20, flexWrap: 'wrap' }}>
        <Input placeholder="🔍 Buscar recurso..." value={busqueda} onChange={e => setBusqueda(e.target.value)} style={{ maxWidth: 260, marginBottom: 0 }} />
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {categorias.map(cat => (
            <button key={cat} onClick={() => setFiltro(cat)} style={{
              padding: '6px 14px', borderRadius: 50, border: `1.5px solid ${filtro === cat ? EJ.cyan : EJ.border}`,
              background: filtro === cat ? EJ.cyanLight : 'transparent',
              color: filtro === cat ? EJ.cyanDark : EJ.secondary,
              fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'Nunito, sans-serif', transition: 'all 0.15s',
            }}>{cat}</button>
          ))}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {filtrados.map((r, i) => (
          <Card key={i} style={{ display: 'flex', flexDirection: 'column', gap: 12, cursor: 'pointer', transition: 'transform 0.15s, box-shadow 0.15s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 30px rgba(26,31,110,0.14)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 20px rgba(26,31,110,0.08)'; }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', background: r.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={r.color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <polyline points="14 2 14 8 20 8"/>
                  <line x1="16" y1="13" x2="8" y2="13"/>
                  <line x1="16" y1="17" x2="8" y2="17"/>
                  <polyline points="10 9 9 9 8 9"/>
                </svg>
              </div>
              <Badge variant={r.color === EJ.cyan ? 'cyan' : r.color === EJ.violet ? 'violet' : r.color === EJ.pink ? 'pink' : 'navy'}>{r.categoria}</Badge>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 6 }}>{r.titulo}</div>
              <div style={{ fontSize: 12, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', lineHeight: 1.5 }}>{r.desc}</div>
            </div>
            <Btn variant="outline" size="sm" style={{ marginTop: 'auto' }}>Abrir recurso →</Btn>
          </Card>
        ))}
      </div>
    </div>
  );
};

// ── Configuración ──────────────────────────────────────────────
const ConfigScreen = () => {
  const [perfil, setPerfil] = React.useState({ nombre: 'Wuilldelys Medina', email: 'hola@ejecutora.com', negocio: 'Ejecutora', sector: 'Coach negocios', whatsapp: '+58 412 000 0000' });
  const [metas, setMetas] = React.useState({ facturacion: '8000', clientes: '15', tasa: '30', reactivacion: '8' });
  const [saved, setSaved] = React.useState(false);

  const guardar = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  const sectores = ['Coach negocios', 'Coach bienestar', 'Diseñadora', 'Infoproductora', 'Pastelería', 'Entrenadora', 'Otro'];

  return (
    <div style={{ padding: '28px 32px', background: EJ.bgApp, minHeight: '100%' }}>
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ margin: 0, fontFamily: 'Nunito, sans-serif', fontWeight: 800, fontSize: 26, color: EJ.navy }}>Configuración</h2>
        <p style={{ margin: '4px 0 0', fontSize: 13, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>Tu perfil, metas y preferencias del sistema</p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Perfil */}
          <Card>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
              <img src="../assets/Wuilldelys-Ejecutora.jpg" width="60" height="60" style={{ borderRadius: '50%', objectFit: 'cover', flexShrink: 0 }} alt="Perfil" />
              <div>
                <div style={{ fontSize: 17, fontWeight: 800, color: EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{perfil.nombre}</div>
                <div style={{ fontSize: 12, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif' }}>{perfil.email}</div>
                <Badge variant="violet" style={{ marginTop: 6 }}>✦ Ejecutora Pro</Badge>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Input label="Nombre" value={perfil.nombre} onChange={e => setPerfil(p => ({...p, nombre: e.target.value}))} />
                <Input label="Negocio / Marca" value={perfil.negocio} onChange={e => setPerfil(p => ({...p, negocio: e.target.value}))} />
                <Input label="Email" type="email" value={perfil.email} onChange={e => setPerfil(p => ({...p, email: e.target.value}))} />
                <Input label="WhatsApp" value={perfil.whatsapp} onChange={e => setPerfil(p => ({...p, whatsapp: e.target.value}))} />
              </div>
              <Select label="Sector de tu negocio" value={perfil.sector} onChange={e => setPerfil(p => ({...p, sector: e.target.value}))} options={sectores.map(s => ({value: s, label: s}))} />
            </div>
          </Card>

          {/* Metas */}
          <Card>
            <SectionHeader title="Metas mensuales — Los 6 indicadores" subtitle="Base para el diagnóstico automático" />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Input label="Meta de facturación $USD" type="number" value={metas.facturacion} onChange={e => setMetas(p => ({...p, facturacion: e.target.value}))} />
              <Input label="Meta de nuevas clientes" type="number" value={metas.clientes} onChange={e => setMetas(p => ({...p, clientes: e.target.value}))} />
              <Input label="Tasa de cierre mínima %" type="number" value={metas.tasa} onChange={e => setMetas(p => ({...p, tasa: e.target.value}))} />
              <Input label="Meta clientes reactivadas" type="number" value={metas.reactivacion} onChange={e => setMetas(p => ({...p, reactivacion: e.target.value}))} />
            </div>
            <div style={{ marginTop: 14 }}>
              <Btn variant="primary" size="sm" onClick={guardar}>{saved ? '✓ Guardado' : 'Guardar cambios'}</Btn>
            </div>
          </Card>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Plan actual */}
          <Card>
            <div style={{ fontSize: 14, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 14 }}>Plan actual</div>
            <div style={{ background: 'linear-gradient(135deg, #1A1F6E 0%, #7B5CF5 100%)', borderRadius: 16, padding: '20px 18px', marginBottom: 14 }}>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontFamily: 'Nunito Sans, sans-serif', marginBottom: 4 }}>Plan activo</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', fontFamily: 'Nunito, sans-serif', marginBottom: 2 }}>✦ Ejecutora Pro</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontFamily: 'Nunito Sans, sans-serif' }}>Acceso total · Templates · Mentoría · Software</div>
            </div>
            <div style={{ fontSize: 12, color: EJ.muted, fontFamily: 'Nunito Sans, sans-serif', marginBottom: 14 }}>Próxima facturación: 25 junio 2026</div>
            <Btn variant="outline" size="sm">Gestionar suscripción</Btn>
          </Card>

          {/* Niveles del curso */}
          <Card>
            <div style={{ fontSize: 14, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 14 }}>Niveles de La Rutina que Vende™</div>
            {[
              { nombre: 'Esencial', precio: '$97', desc: '5 módulos + 8 plantillas + acceso de por vida', color: EJ.cyan, activo: false },
              { nombre: 'Completo ★', precio: '$197', desc: '+ comunidad + 4 sesiones grupales + revisión campaña', color: EJ.violet, activo: true },
              { nombre: 'VIP', precio: '$397', desc: '+ sesión 1a1 + soporte 60 días + lanzamientos futuros', color: EJ.pink, activo: false },
            ].map((nivel, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 14,
                background: nivel.activo ? nivel.color + '18' : EJ.bgApp,
                border: `1.5px solid ${nivel.activo ? nivel.color : EJ.border}`,
                marginBottom: i < 2 ? 10 : 0,
              }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 800, color: nivel.activo ? nivel.color : EJ.navy, fontFamily: 'Nunito, sans-serif' }}>{nivel.nombre}</div>
                  <div style={{ fontSize: 11, color: EJ.secondary, fontFamily: 'Nunito Sans, sans-serif', marginTop: 2 }}>{nivel.desc}</div>
                </div>
                <div style={{ textAlign: 'right', flexShrink: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: nivel.activo ? nivel.color : EJ.navy, fontFamily: 'JetBrains Mono, monospace' }}>{nivel.precio}</div>
                  {nivel.activo && <div style={{ fontSize: 10, color: nivel.color, fontFamily: 'Nunito, sans-serif', fontWeight: 700, marginTop: 2 }}>✓ Tu plan</div>}
                </div>
              </div>
            ))}
          </Card>

          {/* Principios */}
          <Card soft>
            <div style={{ fontSize: 13, fontWeight: 700, color: EJ.navy, fontFamily: 'Nunito, sans-serif', marginBottom: 12 }}>7 Principios de La Rutina que Vende™</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                '1 acción de venta por día',
                'Los 3 tipos de campaña deben rotar',
                'Nunca compitas por precio, compite por valor',
                'La planificación decide, la rutina ejecuta',
                'Construye activos que te pertenecen',
                'La retención vale más que la adquisición',
                'Medir 6 indicadores, no 60',
              ].map((p, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <div style={{ width: 18, height: 18, borderRadius: '50%', background: EJ.cyan, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, fontFamily: 'Nunito, sans-serif', flexShrink: 0 }}>{i + 1}</div>
                  <span style={{ fontSize: 12, color: EJ.body, fontFamily: 'Nunito Sans, sans-serif', lineHeight: 1.5 }}>{p}</span>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { RecursosScreen, ConfigScreen });