// mnm-ingresar.jsx — IngresoView + AgendamientoView

/* ─── HELPERS ────────────────────────────────────────────────────────────────── */

function renderMd(text) {
  return text.split(/\*\*([^*]+)\*\*/).map((part, i) =>
    i % 2 === 0 ? part : <strong key={i} style={{color:'var(--t1)'}}>{part}</strong>
  );
}

function ViewShell({ title, subtitle, onBack, children }) {
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      <div style={{padding:'20px 24px 16px',borderBottom:'1px solid var(--border)',flexShrink:0,display:'flex',alignItems:'center',gap:'12px'}}>
        {onBack && (
          <button onClick={onBack} style={{background:'none',border:'none',cursor:'pointer',color:'var(--t3)',display:'flex',alignItems:'center',gap:'4px',fontSize:'13px',padding:0}}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 3L6 8L10 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        )}
        <div>
          <h2 style={{fontSize:'16px',fontWeight:700,color:'var(--t1)',margin:0}}>{title}</h2>
          {subtitle && <p style={{fontSize:'12px',color:'var(--t3)',margin:'2px 0 0'}}>{subtitle}</p>}
        </div>
      </div>
      <div style={{flex:1,overflowY:'auto',padding:'24px'}} className="main-scroll">
        {children}
      </div>
    </div>
  );
}

/* ─── VOZ FLOW ───────────────────────────────────────────────────────────────── */

function VozFlow({ onDone, onBack }) {
  const [state, setState] = useState('ready');
  const [secs, setSecs] = useState(0);
  const [editData, setEditData] = useState(null);

  useEffect(() => {
    if (state === 'grabando') {
      const t = setTimeout(() => setState('procesando'), 4500);
      return () => clearTimeout(t);
    }
    if (state === 'procesando') {
      const t = setTimeout(() => { setState('confirmar'); setEditData(VOICE_EXTRACTED); }, 2000);
      return () => clearTimeout(t);
    }
  }, [state]);

  useEffect(() => {
    if (state !== 'grabando') { setSecs(0); return; }
    const t = setInterval(() => setSecs(s => s + 1), 1000);
    return () => clearInterval(t);
  }, [state]);

  const fmt = s => `0:${String(s).padStart(2,'0')}`;

  if (state === 'ready') return (
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minHeight:'360px',gap:'20px',textAlign:'center'}}>
      <p style={{fontSize:'14px',color:'var(--t2)',maxWidth:'320px',lineHeight:1.6}}>Graba una nota de voz describiendo tus ingresos y gastos del mes en lenguaje natural.</p>
      <button onClick={()=>setState('grabando')} style={{width:'80px',height:'80px',borderRadius:'50%',background:'var(--s-red-bg)',border:'2px solid var(--s-red)',color:'var(--s-red)',display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer',transition:'transform 0.15s'}}>
        <Ic.Mic/>
      </button>
      <p style={{fontSize:'12px',color:'var(--t3)'}}>Toca para grabar</p>
      <button onClick={onBack} style={{fontSize:'12px',color:'var(--t3)',background:'none',border:'none',cursor:'pointer'}}>← Elegir otro método</button>
    </div>
  );

  if (state === 'grabando') return (
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minHeight:'360px',gap:'20px',textAlign:'center'}}>
      <p style={{fontSize:'13px',color:'var(--t2)',maxWidth:'300px',lineHeight:1.6}}>Habla con naturalidad: facturación, costos principales, gastos del mes...</p>
      <div style={{position:'relative',width:'90px',height:'90px'}}>
        {[0,1,2].map(i=>(
          <span key={i} style={{position:'absolute',inset:0,borderRadius:'50%',border:'1px solid var(--s-red)',animation:`pulseRing 1.8s ${i*0.6}s ease-out infinite`}}/>
        ))}
        <div style={{position:'absolute',inset:0,borderRadius:'50%',background:'var(--s-red-bg)',border:'2px solid var(--s-red)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--s-red)'}}>
          <Ic.Mic/>
        </div>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
        <span style={{width:'7px',height:'7px',borderRadius:'50%',background:'var(--s-red)',animation:'recBlink 1s ease infinite'}}></span>
        <span style={{fontFamily:'var(--font-mono)',fontSize:'20px',fontWeight:500,color:'var(--t1)'}}>{fmt(secs)}</span>
      </div>
      <button onClick={()=>setState('procesando')} style={{padding:'8px 22px',borderRadius:'8px',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t2)',fontSize:'13px',fontWeight:600,cursor:'pointer'}}>Detener</button>
    </div>
  );

  if (state === 'procesando') return (
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minHeight:'360px',gap:'16px',textAlign:'center'}}>
      <div style={{width:'44px',height:'44px',borderRadius:'50%',border:'2px solid var(--accent)',borderTopColor:'transparent',animation:'spin 0.9s linear infinite'}}></div>
      <p style={{fontSize:'14px',color:'var(--t2)'}}>Procesando tu nota de voz...</p>
      <p style={{fontSize:'12px',color:'var(--t3)'}}>Extrayendo y clasificando los datos</p>
    </div>
  );

  if (state === 'confirmar' && editData) {
    const sections = [
      {key:'ingresos', label:'INGRESOS', items:editData.ingresos},
      {key:'costos_v', label:'COSTOS VARIABLES', items:editData.costos_v},
      {key:'costos_f', label:'COSTOS FIJOS', items:editData.costos_f},
    ];
    return (
      <div style={{maxWidth:'580px',margin:'0 auto',animation:'fadeInUp 0.3s ease'}}>
        <p style={{fontSize:'13px',color:'var(--t2)',marginBottom:'20px',lineHeight:1.6}}>Esto es lo que entendí de tu nota. Corrige lo que no esté bien antes de procesar.</p>
        <div style={{display:'flex',flexDirection:'column',gap:'16px',marginBottom:'20px'}}>
          {sections.map(sec=>(
            <div key={sec.key} style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',overflow:'hidden'}}>
              <div style={{padding:'10px 16px',borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span style={{fontSize:'10.5px',fontWeight:700,letterSpacing:'0.07em',color:'var(--t3)'}}>{sec.label}</span>
                <button style={{fontSize:'11px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontWeight:600}}>Editar</button>
              </div>
              {sec.items.map((item,i)=>(
                <div key={i} style={{padding:'10px 16px',display:'flex',justifyContent:'space-between',borderBottom:i<sec.items.length-1?'1px solid var(--border)':'none'}}>
                  <span style={{fontSize:'13px',color:'var(--t2)'}}>{item.l}</span>
                  <span style={{fontFamily:'var(--font-mono)',fontSize:'13px',color:'var(--t1)',fontWeight:500}}>{item.v}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
        {editData.missing.length > 0 && (
          <div style={{background:'var(--s-yellow-bg)',border:'1px solid var(--s-yellow-bg)',borderLeft:'3px solid var(--s-yellow)',borderRadius:'var(--radius)',padding:'12px 16px',marginBottom:'20px',display:'flex',gap:'10px',alignItems:'flex-start'}}>
            <span style={{color:'var(--s-yellow)',flexShrink:0,marginTop:'1px'}}><Ic.Warning/></span>
            <div>
              <p style={{fontSize:'12.5px',color:'var(--t2)',margin:'0 0 8px'}}>No encontré datos de: <strong style={{color:'var(--s-yellow)'}}>{editData.missing.join(', ')}</strong></p>
              <div style={{display:'flex',gap:'8px'}}>
                <button style={{fontSize:'12px',color:'var(--s-yellow)',background:'none',border:'1px solid var(--s-yellow-bg)',borderRadius:'5px',padding:'3px 10px',cursor:'pointer',fontWeight:600}}>Agregar</button>
                <button style={{fontSize:'12px',color:'var(--t3)',background:'none',border:'none',cursor:'pointer'}}>Continuar sin ese dato</button>
              </div>
            </div>
          </div>
        )}
        <div style={{display:'flex',gap:'10px',justifyContent:'flex-end'}}>
          <button onClick={()=>setState('ready')} style={{padding:'10px 18px',borderRadius:'8px',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t2)',fontSize:'13px',fontWeight:600,cursor:'pointer'}}>Volver a grabar</button>
          <button onClick={onDone} style={{padding:'10px 22px',borderRadius:'8px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer'}}>Confirmar y procesar →</button>
        </div>
      </div>
    );
  }
  return null;
}

/* ─── CHAT FLOW ──────────────────────────────────────────────────────────────── */

function ChatFlow({ onDone, onBack }) {
  const [messages, setMessages] = useState([]);
  const [step, setStep] = useState(0);
  const [input, setInput] = useState('');
  const [typing, setTyping] = useState(false);
  const [extracted, setExtracted] = useState([]);
  const [confirmed, setConfirmed] = useState(false);
  const bottomRef = useRef(null);

  useEffect(()=>{
    const t = setTimeout(()=>{
      setMessages([{role:'ai',text:CHAT_QUESTIONS[0].ai}]);
    },400);
    return ()=>clearTimeout(t);
  },[]);

  useEffect(()=>{
    if(bottomRef.current) bottomRef.current.scrollTop = bottomRef.current.scrollHeight;
  },[messages,typing]);

  const send = useCallback((text)=>{
    if(!text.trim()||typing) return;
    const q = CHAT_QUESTIONS[step];
    const newExt = [...extracted,{label:q.label,value:text}];
    setMessages(m=>[...m,{role:'user',text}]);
    setExtracted(newExt);
    setInput('');
    setTyping(true);
    setTimeout(()=>{
      setTyping(false);
      if(step+1 < CHAT_QUESTIONS.length){
        setMessages(m=>[...m,{role:'ai',text:CHAT_QUESTIONS[step+1].ai}]);
        setStep(s=>s+1);
      } else {
        setMessages(m=>[...m,{role:'ai',text:'¡Perfecto! Esto es lo que registré. Revisa y confirma para procesar.'}]);
        setStep(-1);
      }
    },700);
  },[step,extracted,typing]);

  if(confirmed) return(
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minHeight:'360px',gap:'16px',textAlign:'center'}}>
      <div style={{width:'56px',height:'56px',borderRadius:'50%',background:'var(--s-green-bg)',border:'2px solid var(--s-green)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--s-green)'}}><Ic.Check/></div>
      <h3 style={{fontSize:'17px',fontWeight:700,color:'var(--t1)'}}>Datos registrados</h3>
      <p style={{fontSize:'13px',color:'var(--t2)'}}>Procesando Diciembre 2024...</p>
      <button onClick={onDone} style={{marginTop:'8px',padding:'10px 22px',borderRadius:'8px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer'}}>Ver mi dashboard →</button>
    </div>
  );

  return(
    <div style={{display:'flex',flexDirection:'column',height:'100%',minHeight:'440px',maxWidth:'580px',margin:'0 auto'}}>
      <div ref={bottomRef} style={{flex:1,overflowY:'auto',display:'flex',flexDirection:'column',gap:'12px',paddingBottom:'12px',minHeight:'280px',maxHeight:'320px'}}>
        {messages.map((msg,i)=>(
          <div key={i} style={{display:'flex',justifyContent:msg.role==='user'?'flex-end':'flex-start',animation:'fadeInUp 0.2s ease'}}>
            {msg.role==='ai' && (
              <div style={{width:'28px',height:'28px',borderRadius:'50%',background:'var(--accent)',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'10px',fontWeight:800,color:'var(--accent-text)',marginRight:'8px',marginTop:'2px'}}>IA</div>
            )}
            <div style={{maxWidth:'78%',padding:'10px 13px',borderRadius:msg.role==='user'?'12px 12px 4px 12px':'12px 12px 12px 4px',background:msg.role==='user'?'var(--accent-bg)':'var(--surf-2)',border:`1px solid ${msg.role==='user'?'var(--accent-border)':'var(--border)'}`,fontSize:'13px',color:'var(--t1)',lineHeight:1.55}}>
              {msg.role==='ai'?renderMd(msg.text):msg.text}
            </div>
          </div>
        ))}
        {typing && (
          <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
            <div style={{width:'28px',height:'28px',borderRadius:'50%',background:'var(--accent)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'10px',fontWeight:800,color:'var(--accent-text)'}}>IA</div>
            <div style={{padding:'10px 14px',borderRadius:'12px 12px 12px 4px',background:'var(--surf-2)',border:'1px solid var(--border)',display:'flex',gap:'4px',alignItems:'center'}}>
              {[0,1,2].map(i=><span key={i} style={{width:'5px',height:'5px',borderRadius:'50%',background:'var(--t3)',animation:`recBlink 1.2s ${i*0.25}s ease infinite`}}/>)}
            </div>
          </div>
        )}
      </div>

      {step === -1 && extracted.length > 0 && (
        <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'14px',marginBottom:'12px',animation:'fadeInUp 0.3s ease'}}>
          {extracted.map((e,i)=>(
            <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:i<extracted.length-1?'1px solid var(--border)':'none'}}>
              <span style={{fontSize:'12.5px',color:'var(--t2)'}}>{e.label}</span>
              <span style={{fontFamily:'var(--font-mono)',fontSize:'12.5px',color:'var(--t1)',fontWeight:500}}>{e.value}</span>
            </div>
          ))}
          <button onClick={()=>setConfirmed(true)} style={{marginTop:'12px',width:'100%',padding:'10px',borderRadius:'8px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer'}}>Confirmar y procesar →</button>
        </div>
      )}

      {step >= 0 && (
        <div>
          {CHAT_QUESTIONS[step] && (
            <div style={{display:'flex',flexWrap:'wrap',gap:'6px',marginBottom:'10px'}}>
              {CHAT_QUESTIONS[step].suggestions.map((s,i)=>(
                <button key={i} onClick={()=>send(s)} style={{padding:'5px 11px',borderRadius:'20px',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t2)',fontSize:'12px',cursor:'pointer',transition:'border-color 0.1s,color 0.1s'}}
                  onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--accent-border)';e.currentTarget.style.color='var(--accent)'}}
                  onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.color='var(--t2)'}}>
                  {s}
                </button>
              ))}
            </div>
          )}
          <div style={{display:'flex',gap:'8px'}}>
            <input value={input} onChange={e=>setInput(e.target.value)}
              onKeyDown={e=>e.key==='Enter'&&send(input)}
              placeholder="Escribe tu respuesta..."
              style={{flex:1,padding:'10px 14px',borderRadius:'8px',fontSize:'13px'}}/>
            <button onClick={()=>send(input)} style={{padding:'10px 16px',borderRadius:'8px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontWeight:700,cursor:'pointer',fontSize:'13px'}}>→</button>
          </div>
        </div>
      )}
    </div>
  );
}

/* ─── FORMULARIO FLOW ────────────────────────────────────────────────────────── */

function FormularioFlow({ onDone, onBack }) {
  const [open, setOpen] = useState('ingresos');
  const [vals, setVals] = useState({
    'Ventas mostrador':'', 'Delivery / domicilios':'', 'Catering / eventos':'',
    'Insumos y materia prima':'', 'Comisiones y cargos variables':'',
    'Alquiler local':'', 'Servicios (luz, agua, gas)':'', 'Nómina del equipo':'',
  });
  const set = (k,v) => setVals(prev=>({...prev,[k]:v}));

  const sections = [
    {id:'ingresos', label:'Ingresos', fields:['Ventas mostrador','Delivery / domicilios','Catering / eventos']},
    {id:'costos_v', label:'Costos variables', fields:['Insumos y materia prima','Comisiones y cargos variables']},
    {id:'costos_f', label:'Costos fijos', fields:['Alquiler local','Servicios (luz, agua, gas)','Nómina del equipo']},
  ];

  return (
    <div style={{maxWidth:'560px',margin:'0 auto',animation:'fadeInUp 0.25s ease'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'8px',marginBottom:'20px'}}>
        {sections.map(sec=>(
          <div key={sec.id} style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',overflow:'hidden'}}>
            <button onClick={()=>setOpen(open===sec.id?null:sec.id)}
              style={{width:'100%',padding:'13px 16px',display:'flex',justifyContent:'space-between',alignItems:'center',background:'none',border:'none',cursor:'pointer',color:'var(--t1)'}}>
              <span style={{fontSize:'13px',fontWeight:600}}>{sec.label}</span>
              <span style={{color:'var(--t3)',transition:'transform 0.2s',transform:open===sec.id?'rotate(180deg)':'',lineHeight:0}}><Ic.Chevron/></span>
            </button>
            {open===sec.id && (
              <div style={{padding:'4px 16px 16px',borderTop:'1px solid var(--border)',display:'flex',flexDirection:'column',gap:'10px'}}>
                {sec.fields.map(f=>(
                  <div key={f}>
                    <label style={{fontSize:'12px',color:'var(--t3)',display:'block',marginBottom:'4px'}}>{f}</label>
                    <input value={vals[f]} onChange={e=>set(f,e.target.value)} placeholder="$0.00"
                      style={{width:'100%',padding:'9px 12px',borderRadius:'6px',fontSize:'13px',fontVariantNumeric:'tabular-nums'}}/>
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}
      </div>
      <div style={{display:'flex',gap:'10px',justifyContent:'flex-end'}}>
        <button onClick={onBack} style={{padding:'10px 18px',borderRadius:'8px',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t2)',fontSize:'13px',fontWeight:600,cursor:'pointer'}}>← Volver</button>
        <button onClick={onDone} style={{padding:'10px 22px',borderRadius:'8px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer'}}>Confirmar y procesar →</button>
      </div>
    </div>
  );
}

/* ─── INGRESO VIEW ───────────────────────────────────────────────────────────── */

function IngresoView({ setView }) {
  const [step, setStep] = useState('canal');

  const handleDone = () => setView('dashboard');

  if(step === 'voz') return <ViewShell title="Nota de voz" subtitle="Diciembre 2024" onBack={()=>setStep('canal')}><VozFlow onDone={handleDone} onBack={()=>setStep('canal')}/></ViewShell>;
  if(step === 'chat') return <ViewShell title="Chat con IA" subtitle="Diciembre 2024" onBack={()=>setStep('canal')}><ChatFlow onDone={handleDone} onBack={()=>setStep('canal')}/></ViewShell>;
  if(step === 'form') return <ViewShell title="Formulario manual" subtitle="Diciembre 2024" onBack={()=>setStep('canal')}><FormularioFlow onDone={handleDone} onBack={()=>setStep('canal')}/></ViewShell>;

  const methods = [
    {id:'form', Icon:Ic.Form, label:'Formulario manual', desc:'Lleno los campos yo mismo, sección por sección.'},
    {id:'chat', Icon:Ic.Chat, label:'Chat con IA', desc:'La IA me hace preguntas y yo respondo en lenguaje natural.'},
    {id:'voz', Icon:Ic.Mic, label:'Nota de voz', desc:'Grabo un audio describiendo mis números del mes.'},
  ];

  return (
    <ViewShell title="Ingresar datos" subtitle="¿Cómo quieres registrar Diciembre 2024?">
      <div style={{maxWidth:'520px',margin:'0 auto',display:'flex',flexDirection:'column',gap:'12px'}}>
        {methods.map(({id,Icon,label,desc})=>(
          <button key={id} onClick={()=>setStep(id)} style={{
            display:'flex',alignItems:'center',gap:'16px',
            background:'var(--surf-1)',border:'1px solid var(--border)',
            borderRadius:'var(--radius)',padding:'18px 20px',
            cursor:'pointer',textAlign:'left',
            transition:'border-color 0.15s,transform 0.15s,box-shadow 0.15s',
          }}
          onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--accent-border)';e.currentTarget.style.transform='translateY(-1px)';e.currentTarget.style.boxShadow='0 4px 20px rgba(0,0,0,0.15)'}}
          onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.transform='none';e.currentTarget.style.boxShadow='none'}}>
            <div style={{width:'44px',height:'44px',borderRadius:'10px',background:'var(--accent-bg)',border:'1px solid var(--accent-border)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--accent)',flexShrink:0}}>
              <Icon/>
            </div>
            <div>
              <p style={{fontSize:'14px',fontWeight:600,color:'var(--t1)',margin:'0 0 3px'}}>{label}</p>
              <p style={{fontSize:'12.5px',color:'var(--t2)',margin:0,lineHeight:1.5}}>{desc}</p>
            </div>
            <span style={{marginLeft:'auto',color:'var(--t3)',flexShrink:0}}><Ic.ChevronR/></span>
          </button>
        ))}
      </div>
    </ViewShell>
  );
}

/* ─── AGENDAMIENTO VIEW ──────────────────────────────────────────────────────── */

const FACILITATORS = [
  {id:1, name:'Ana Morales',   rating:4.9, sessions:24, bio:'Especialista en restaurantes y food service'},
  {id:2, name:'Carlos Reyes',  rating:4.7, sessions:18, bio:'Experto en flujo de caja y gestión de costos'},
];

const TIME_SLOTS = ['09:00','10:00','11:00','14:00','15:00','16:00'];

function AgendamientoView({ setView, onSessionConfirmed }) {
  const [selDate, setSelDate] = useState(null);
  const [selTime, setSelTime] = useState(null);
  const [selFacilitator, setSelFacilitator] = useState(null);
  const [confirmed, setConfirmed] = useState(false);

  const today = 15;
  const DAY_HEADERS = ['D','L','M','M','J','V','S'];
  const calCells = [];
  const firstDay = 3; // Jan 1 2025 = Wednesday (0=Sun)
  for(let i=0;i<firstDay;i++) calCells.push(null);
  for(let d=1;d<=31;d++) calCells.push(d);

  const isAvailable = d => {
    if(!d || d < today) return false;
    const dow = (firstDay + d - 1) % 7;
    return dow !== 0 && dow !== 6;
  };

  const dayNames = ['domingo','lunes','martes','miércoles','jueves','viernes','sábado'];
  const getDayName = d => { const dow = (firstDay + d - 1) % 7; return dayNames[dow]; };

  if(confirmed) {
    const f = FACILITATORS.find(x=>x.id===selFacilitator);
    return (
      <ViewShell title="Laboratorio Empresarial" subtitle="Sesión confirmada">
        <div style={{maxWidth:'500px',margin:'0 auto',display:'flex',flexDirection:'column',alignItems:'center',gap:'20px',paddingTop:'20px',textAlign:'center',animation:'fadeInUp 0.3s ease'}}>
          <div style={{width:'64px',height:'64px',borderRadius:'50%',background:'var(--s-green-bg)',border:'2px solid var(--s-green)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--s-green)'}}>
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M5 14L10.5 19.5L23 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div>
            <h3 style={{fontSize:'20px',fontWeight:700,color:'var(--t1)',margin:'0 0 6px'}}>¡Sesión confirmada!</h3>
            <p style={{fontSize:'13px',color:'var(--t2)'}}>Recibirás una confirmación en tu correo</p>
          </div>
          <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'12px',padding:'20px 24px',width:'100%',display:'flex',flexDirection:'column',gap:'12px',textAlign:'left'}}>
            {[
              {label:'Fecha', value:`${getDayName(selDate)} ${selDate} de enero de 2025`.replace(/^\w/, c=>c.toUpperCase())},
              {label:'Horario', value:`${selTime} — ${String(parseInt(selTime)+1).padStart(2,'0')}:00`},
              {label:'Facilitador', value:(f && f.name)},
              {label:'Período', value:'Diciembre 2024'},
            ].map(({label,value})=>(
              <div key={label} style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingBottom:'10px',borderBottom:'1px solid var(--border)'}}>
                <span style={{fontSize:'12px',color:'var(--t3)'}}>{label}</span>
                <span style={{fontSize:'13px',fontWeight:600,color:'var(--t1)'}}>{value}</span>
              </div>
            ))}
            <p style={{fontSize:'12px',color:'var(--t2)',margin:'4px 0 0',lineHeight:1.6}}>{(f && f.name)} recibirá el brief de sesión automáticamente antes de la hora acordada.</p>
          </div>
          <div style={{display:'flex',gap:'10px',flexWrap:'wrap',justifyContent:'center'}}>
            {onSessionConfirmed && (
              <button onClick={onSessionConfirmed} style={{padding:'11px 24px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Ir a sala de espera →</button>
            )}
            <button onClick={()=>setView('dashboard')} style={{padding:'11px 28px',borderRadius:'100px',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t1)',fontSize:'13px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'}}>← Ir al dashboard</button>
          </div>
        </div>
      </ViewShell>
    );
  }

  const canConfirm = selDate && selTime && selFacilitator;
  const steps = [{n:'Fecha',done:!!selDate},{n:'Horario',done:!!selTime},{n:'Facilitador',done:!!selFacilitator}];

  return (
    <ViewShell title="Laboratorio Empresarial" subtitle="Agendar sesión · Enero 2025">
      <div style={{maxWidth:'680px',margin:'0 auto'}}>
        {/* Progress */}
        <div style={{display:'flex',gap:'8px',marginBottom:'24px'}}>
          {steps.map((s,i)=>(
            <div key={i} style={{display:'flex',alignItems:'center',gap:'6px'}}>
              <div style={{width:'20px',height:'20px',borderRadius:'50%',background:s.done?'var(--s-green-bg)':'var(--surf-2)',border:`1px solid ${s.done?'var(--s-green)':'var(--border)'}`,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'10px',fontWeight:700,color:s.done?'var(--s-green)':'var(--t3)'}}>{s.done?<Ic.Check/>:i+1}</div>
              <span style={{fontSize:'12px',color:s.done?'var(--t2)':'var(--t3)',fontWeight:s.done?500:400}}>{s.n}</span>
              {i<2&&<span style={{color:'var(--border-2)',fontSize:'12px',margin:'0 2px'}}>›</span>}
            </div>
          ))}
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'16px',marginBottom:'16px'}}>
          {/* Calendar */}
          <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'16px'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'14px'}}>
              <span style={{fontSize:'13px',fontWeight:600,color:'var(--t1)'}}>Enero 2025</span>
              <div style={{display:'flex',gap:'2px'}}>
                <button style={{background:'none',border:'none',color:'var(--t3)',cursor:'default',padding:'2px'}}><Ic.ChevronL/></button>
                <button style={{background:'none',border:'none',color:'var(--t3)',cursor:'pointer',padding:'2px'}}><Ic.ChevronR/></button>
              </div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:'2px',marginBottom:'6px'}}>
              {DAY_HEADERS.map((d,i)=><div key={i} style={{textAlign:'center',fontSize:'10px',fontWeight:600,color:'var(--t3)',padding:'3px 0'}}>{d}</div>)}
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:'2px'}}>
              {calCells.map((d,i)=>{
                const avail = isAvailable(d);
                const isSel = d===selDate;
                const isPast = d && d < today;
                return (
                  <button key={i} onClick={()=>avail&&setSelDate(d)} style={{
                    padding:'5px 2px',borderRadius:'5px',border:'none',fontSize:'12px',fontWeight:500,
                    background:isSel?'var(--accent)':d===today&&!isSel?'var(--surf-3)':'none',
                    color:!d?'transparent':isSel?'#070B07':isPast?'var(--t3)':avail?'var(--t1)':'var(--t3)',
                    cursor:avail?'pointer':'default',
                    opacity:!d||isPast?0.35:1,
                    outline:d===today&&!isSel?'1px solid var(--accent-border)':'none',
                    transition:'background 0.1s',
                  }}>{d||' '}</button>
                );
              })}
            </div>
          </div>

          {/* Time slots */}
          <div style={{background:'var(--surf-1)',border:'1px solid var(--border)',borderRadius:'var(--radius)',padding:'16px'}}>
            <p style={{fontSize:'13px',fontWeight:600,color:'var(--t1)',marginBottom:'14px'}}>
              {selDate?`${getDayName(selDate).replace(/^\w/,c=>c.toUpperCase())} ${selDate}`:'Selecciona una fecha'}
            </p>
            {selDate ? (
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'6px'}}>
                {TIME_SLOTS.map(t=>(
                  <button key={t} onClick={()=>setSelTime(t)} style={{
                    padding:'9px 0',borderRadius:'7px',fontSize:'13px',fontWeight:600,fontFamily:'var(--font-mono)',
                    background:selTime===t?'var(--accent-bg)':'var(--surf-2)',
                    border:`1px solid ${selTime===t?'var(--accent-border)':'var(--border)'}`,
                    color:selTime===t?'var(--accent)':'var(--t2)',cursor:'pointer',
                    transition:'all 0.12s',
                  }}>{t}</button>
                ))}
              </div>
            ) : (
              <p style={{fontSize:'12.5px',color:'var(--t3)',lineHeight:1.6}}>Los horarios disponibles aparecerán una vez que selecciones una fecha en el calendario.</p>
            )}
          </div>
        </div>

        {/* Facilitators */}
        <div style={{marginBottom:'20px'}}>
          <p style={{fontSize:'12px',fontWeight:700,letterSpacing:'0.07em',textTransform:'uppercase',color:'var(--t3)',marginBottom:'10px'}}>Facilitador</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px'}}>
            {FACILITATORS.map(f=>(
              <button key={f.id} onClick={()=>setSelFacilitator(f.id)} style={{
                display:'flex',gap:'12px',alignItems:'flex-start',
                background:'var(--surf-1)',border:`1px solid ${selFacilitator===f.id?'var(--accent-border)':'var(--border)'}`,
                borderRadius:'var(--radius)',padding:'14px 16px',cursor:'pointer',textAlign:'left',
                boxShadow:selFacilitator===f.id?'0 0 0 1px var(--accent-border)':'none',
                transition:'all 0.12s',
              }}>
                <div style={{width:'36px',height:'36px',borderRadius:'50%',background:'var(--surf-3)',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',fontSize:'13px',fontWeight:700,color:'var(--t2)'}}>
                  {f.name.split(' ').map(x=>x[0]).join('')}
                </div>
                <div>
                  <p style={{fontSize:'13px',fontWeight:600,color:'var(--t1)',margin:'0 0 2px'}}>{f.name}</p>
                  <p style={{fontSize:'11.5px',color:'var(--t2)',margin:'0 0 5px',lineHeight:1.4}}>{f.bio}</p>
                  <div style={{display:'flex',alignItems:'center',gap:'5px'}}>
                    <span style={{color:'var(--s-yellow)',display:'flex',gap:'1px'}}>{[0,1,2,3,4].map(i=><Ic.Star key={i}/>)}</span>
                    <span style={{fontSize:'11px',color:'var(--t3)',fontFamily:'var(--font-mono)'}}>{f.rating} · {f.sessions} sesiones</span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>

        <div style={{display:'flex',justifyContent:'flex-end'}}>
          <button onClick={()=>canConfirm&&setConfirmed(true)} disabled={!canConfirm} style={{
            padding:'12px 28px',borderRadius:'8px',fontSize:'14px',fontWeight:700,cursor:canConfirm?'pointer':'default',
            background:canConfirm?'var(--accent)':'var(--surf-2)',
            border:'none',color:canConfirm?'#070B07':'var(--t3)',
            transition:'all 0.15s',
          }}>
            {canConfirm?'Confirmar sesión →':'Completa los pasos para confirmar'}
          </button>
        </div>
      </div>
    </ViewShell>
  );
}

Object.assign(window, { IngresoView, AgendamientoView });