{/* Header */}

› {cons.photo ?

: null } Agendar · {cons.nombre}

{steps.map(function(s,i){return (

i+1?'#16A34A':step===i+1?'var(--accent)':'var(--glass-bg)',border:'0.5px solid var(--glass-border)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'9px',fontWeight:700,color:step>=i+1?'var(--accent-text)':'var(--t3)',backdropFilter:'var(--glass-blur)'}}> {step>i+1?'✓':i+1}

{i}

);})}

{/* Step 1 */} {step===1&&(

Para qué empresa y qué tema

Empresa

Tema principal de la sesión

</div>
              <div style={{background:'var(--glass-bg-atmo)',backdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',borderRadius:'10px',padding:'12px 14px',marginBottom:'16px'}}>
                <p style={{fontSize:'11px',fontWeight:600,color:'var(--t3)',margin:'0 0 4px'}}>Brief pre-llenado por IA (editable)</p>
                <p style={{fontSize:'12px',color:'var(--t2)',margin:0,lineHeight:1.55}}>AR Days subieron de 32 a 58 días. Margen delivery negativo tras comisiones. Revenue +12% pero liquidez en riesgo a 6 semanas.</p>
              </div>
              <button onClick={function(){if(canS2)setStep(2);}} disabled={!canS2} style={{width:'100%',padding:'11px',borderRadius:'100px',background:canS2?'var(--accent)':'var(--glass-bg)',border:'none',color:canS2?'var(--accent-text)':'var(--t3)',fontSize:'13.5px',fontWeight:600,cursor:canS2?'pointer':'default',fontFamily:'var(--font)'}}>Siguiente → Elegir fecha</button>
            </div>
          )}

{/* Step 2 */}
          {step===2&&(
            <div style={{animation:'fadeInUp 0.2s ease'}}>
              <h3 style={{fontSize:'16px',fontWeight:600,color:'var(--t1)',marginBottom:'16px'}}>Fecha y horario · Mayo 2026</h3>
              <div style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',borderRadius:'var(--radius-card)',padding:'16px',marginBottom:'14px'}}>
                <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:'2px',marginBottom:'6px'}}>
                  {['D','L','M','M','J','V','S'].map(function(d,i){return <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:'3px'}}>
                  {[null,null,null].map(function(_,i){return <div key={'e'+i}/>;})}
                  {Array.from({length:31}).map(function(_,i){
                    var d=i+1; var av=AVAIL_D.indexOf(d)>-1; var sel=fecha===d;
                    return <button key={d} onClick={function(){if(av){setFecha(d);setHora(null);}}} style={{padding:'5px 2px',borderRadius:'6px',border:'none',fontSize:'12px',fontWeight:sel?700:400,background:sel?'var(--accent)':av?'var(--glass-bg-atmo)':'none',backdropFilter:av?'var(--glass-blur)':'none',color:sel?'var(--accent-text)':av?'var(--t1)':'var(--t3)',cursor:av?'pointer':'default',opacity:av?1:0.35,transition:'background 0.1s'}}>{d}</button>;
                  })}
                </div>
              </div>
              {fecha&&(
                <div style={{marginBottom:'14px'}}>
                  <p style={{fontSize:'12px',fontWeight:600,color:'var(--t2)',marginBottom:'8px'}}>Horarios disponibles · {fecha} mayo</p>
                  <div className="grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'6px'}}>
                    {SLOTS.map(function(h){return <button key={h} onClick={function(){setHora(h);}} style={{padding:'8px',borderRadius:'100px',fontSize:'12.5px',fontWeight:500,fontFamily:'var(--font-mono)',background:hora===h?'var(--glass-bg-atmo)':'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid '+(hora===h?'var(--accent-border)':'var(--glass-border)'),color:hora===h?'var(--t1)':'var(--t2)',cursor:'pointer',transition:'all 0.1s'}}>{h}</button>;})}
                  </div>
                </div>
              )}
              <button onClick={function(){if(canS3)setStep(3);}} disabled={!canS3} style={{width:'100%',padding:'11px',borderRadius:'100px',background:canS3?'var(--accent)':'var(--glass-bg)',border:'none',color:canS3?'var(--accent-text)':'var(--t3)',fontSize:'13.5px',fontWeight:600,cursor:canS3?'pointer':'default',fontFamily:'var(--font)'}}>{canS3?'Siguiente → Confirmar':'Elige fecha y horario'}</button>
            </div>
          )}

{/* Step 3 */}
          {step===3&&(
            <div style={{animation:'fadeInUp 0.2s ease'}}>
              <h3 style={{fontSize:'16px',fontWeight:600,color:'var(--t1)',marginBottom:'16px'}}>Resumen de la sesión</h3>
              <div style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',borderRadius:'var(--radius-card)',padding:'18px',marginBottom:'14px'}}>
                {[
                  ['Consultor', cons.nombre + ' · $' + cons.price + ' USD/h'],
                  ['Empresa', co.nombre],
                  ['Fecha', fecha + ' mayo 2026 · ' + hora],
                  ['Duración', '60 minutos'],
                  ['Total', '$' + cons.price + ' USD'],
                ].map(function(row){return (
                  <div key={row[0]} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderBottom:'0.5px solid var(--border)'}}>
                    <span style={{fontSize:'12.5px',color:'var(--t3)'}}>{row[0]}</span>
                    <span style={{fontSize:'12.5px',fontWeight:600,color:'var(--t1)'}}>{row[1]}</span>
                  </div>
                );})}
              </div>
              <p style={{fontSize:'11.5px',color:'var(--t3)',marginBottom:'14px',lineHeight:1.55}}>El pago queda en escrow y se libera al consultor al completar la sesión.</p>
              <button onClick={function(){setStep(4);}} style={{width:'100%',padding:'11px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13.5px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'}}>Siguiente → Pagar</button>
            </div>
          )}

{/* Step 4 */}
          {step===4&&(
            <div style={{animation:'fadeInUp 0.2s ease'}}>
              <h3 style={{fontSize:'16px',fontWeight:600,color:'var(--t1)',marginBottom:'16px'}}>Pago · ${cons.price} USD</h3>
              {[['Número de tarjeta','**** **** **** 4242'],['MM / AA','12 / 27'],['CVV','•••'],['Titular','Isai Campo']].map(function(f){return(
                <div key={f[0]} style={{marginBottom:'12px'}}>
                  <label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>{f[0]}</label>
                  <input defaultValue={f[1]} style={{width:'100%',padding:'10px 13px',borderRadius:'10px',fontSize:'13.5px'}}/>
                </div>
              );})}
              <p style={{fontSize:'11.5px',color:'var(--t3)',marginBottom:'14px',lineHeight:1.55}}>🔒 Pago seguro · el monto queda en escrow hasta completar la sesión.</p>
              <button onClick={function(){setPaid(true);}} style={{width:'100%',padding:'12px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13.5px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'}}>Confirmar y pagar →</button>
            </div>
          )}

</div>
      </div>
    </div>
  );
}

/* ─── CONSULTOR PROFILE ──────────────────────────────────────────────────── */
function ConsultorProfile({ cons, onBack, onAgendar }) {
  var testimonios = [
    {q:'"Llegó sabiendo exactamente cuáles eran mis problemas. La hora más útil que he pagado."',a:'Marco T.',e:'SaaS, Panamá'},
    {q:'"Tenía miedo de los números. Ahora los entiendo."',a:'Carla R.',e:'Retail, Colombia'},
  ];
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      <div style={{padding:'12px 20px',borderBottom:'0.5px solid var(--border)',flexShrink:0,display:'flex',alignItems:'center',gap:'10px'}}>
        <button onClick={onBack} style={{fontSize:'12.5px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:500,display:'flex',alignItems:'center',gap:'4px',padding:0}}>← Laboratorio</button>
        <span style={{color:'var(--border-2)'}}>›</span>
        <span style={{fontSize:'13px',fontWeight:500,color:'var(--t1)'}}>{cons.nombre}</span>
      </div>
      <div style={{flex:1,overflowY:'auto',padding:'20px'}} className="main-scroll">
        <div style={{maxWidth:'580px'}}>
          <div style={{display:'flex',gap:'16px',alignItems:'flex-start',marginBottom:'20px',flexWrap:'wrap'}}>
            {cons.photo
    ? <img src={cons.photo} alt={cons.nombre} style={{width:'72px',height:'72px',borderRadius:'50%',objectFit:'cover',objectPosition:'top',flexShrink:0,border:'1px solid rgba(0,0,0,0.08)'}}/>
    : <div style={{width:'72px',height:'72px',borderRadius:'50%',background:cons.color+'22',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'22px',fontWeight:800,color:cons.color,flexShrink:0}}>{cons.initials}</div>
  }
            <div style={{flex:1,minWidth:'180px'}}>
              <h2 style={{fontSize:'20px',fontWeight:700,color:'var(--t1)',margin:'0 0 4px'}}>{cons.nombre}</h2>
              <p style={{fontSize:'13px',color:'var(--t2)',margin:'0 0 8px'}}>{cons.area}</p>
              <div style={{display:'flex',alignItems:'center',gap:'8px',flexWrap:'wrap'}}>
                <Stars n={cons.rating}/>
                <span style={{fontSize:'12px',color:'var(--t3)',fontFamily:'var(--font-mono)'}}>{cons.rating} · {cons.sessions} sesiones</span>
                <span style={{fontFamily:'var(--font-mono)',fontSize:'14px',fontWeight:600,color:'var(--t1)'}}>${cons.price} USD/h</span>
              </div>
            </div>
            <button onClick={onAgendar} style={{padding:'10px 20px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)',flexShrink:0}}>Agendar sesión</button>
          </div>
          <div style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',borderRadius:'var(--radius-card)',padding:'18px',marginBottom:'12px'}}>
            <p style={{fontSize:'10px',fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--t3)',marginBottom:'8px'}}>Sobre {cons.nombre.split(' ')[0]}</p>
            <p style={{fontSize:'13.5px',color:'var(--t2)',lineHeight:1.65,margin:0}}>{cons.bio} Trabajé en más de 80 empresas en LATAM en los últimos años.</p>
          </div>
          <div style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',borderRadius:'var(--radius-card)',padding:'18px',marginBottom:'16px'}}>
            <p style={{fontSize:'10px',fontWeight:600,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--t3)',marginBottom:'14px'}}>Testimonios</p>
            {testimonios.map(function(t,i){return(
              <div key={i} style={{marginBottom:i<testimonios.length-1?'14px':0,paddingBottom:i<testimonios.length-1?'14px':0,borderBottom:i<testimonios.length-1?'0.5px solid var(--border)':'none'}}>
                <Stars n={5}/>
                <p style={{fontSize:'13px',color:'var(--t1)',lineHeight:1.6,margin:'6px 0',fontStyle:'italic'}}>{t.q}</p>
                <p style={{fontSize:'12px',color:'var(--t3)',margin:0}}>{t.a} · {t.e}</p>
              </div>
            );})}
          </div>
          <button onClick={onAgendar} style={{width:'100%',padding:'12px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'14px',fontWeight:600,cursor:'pointer',fontFamily:'var(--font)'}}>Agendar sesión con {cons.nombre.split(' ')[0]} →</button>
        </div>
      </div>
    </div>
  );
}

/* ─── LABORATORIO VIEW ───────────────────────────────────────────────────── */
function LaboratorioView({ setView }) {
  var [selCons,setSelCons]   = useState(null);
  var [booking,setBooking]   = useState(false);
  var [area,setArea]         = useState('Todas');

if(booking&&selCons) return <BookingFlow cons={selCons} onBack={function(){setBooking(false);}} onDone={function(){setBooking(false);setSelCons(null);}}/>;
  if(selCons) return <ConsultorProfile cons={selCons} onBack={function(){setSelCons(null);}} onAgendar={function(){setBooking(true);}}/>;

var filtered = area==='Todas' ? CONSULTORS : CONSULTORS.filter(function(c){return c.area.toLowerCase().indexOf(area.toLowerCase().slice(0,5))>-1;});

return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      <div style={{padding:'14px 20px',borderBottom:'0.5px solid var(--border)',flexShrink:0}}>
        <h2 style={{fontSize:'15px',fontWeight:600,color:'var(--t1)',margin:'0 0 3px'}}>Laboratorio Empresarial</h2>
        <p style={{fontSize:'11.5px',color:'var(--t3)',margin:0}}>Consultores verificados · llegan con el brief de tu negocio pre-llenado por IA</p>
      </div>
      <div style={{flex:1,overflowY:'auto',padding:'16px 20px'}} className="main-scroll">
        {/* Area filter */}
        <div style={{display:'flex',gap:'6px',marginBottom:'16px',overflowX:'auto',paddingBottom:'4px'}}>
          {AREAS_F.map(function(a){return(
            <button key={a} onClick={function(){setArea(a);}} style={{padding:'6px 13px',borderRadius:'100px',background:area===a?'var(--glass-bg-atmo)':'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid '+(area===a?'var(--accent-border)':'var(--glass-border)'),color:area===a?'var(--t1)':'var(--t3)',fontSize:'12px',fontWeight:area===a?600:400,cursor:'pointer',fontFamily:'var(--font)',whiteSpace:'nowrap',transition:'all 0.12s'}}>{a}</button>
          );})}
        </div>
        {/* Grid */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(240px,1fr))',gap:'12px'}}>
          {filtered.map(function(c){return(
            <div key={c.id} onClick={function(){setSelCons(c);}} style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',boxShadow:'var(--glass-shadow)',borderRadius:'var(--radius-card)',padding:'20px',cursor:'pointer',transition:'all 0.15s'}}
              onMouseEnter={function(e){e.currentTarget.style.background='var(--glass-bg-atmo)';e.currentTarget.style.borderColor='var(--accent-border)';e.currentTarget.style.transform='translateY(-2px)';}}
              onMouseLeave={function(e){e.currentTarget.style.background='var(--glass-bg)';e.currentTarget.style.borderColor='var(--glass-border)';e.currentTarget.style.transform='none';}}>
              <div style={{display:'flex',alignItems:'center',gap:'10px',marginBottom:'12px'}}>
                {c.photo
    ? <img src={c.photo} alt={c.nombre} style={{width:'42px',height:'42px',borderRadius:'50%',objectFit:'cover',objectPosition:'top',flexShrink:0,border:'1px solid rgba(0,0,0,0.08)'}}/>
    : <div style={{width:'42px',height:'42px',borderRadius:'50%',background:c.color+'22',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'13px',fontWeight:800,color:c.color,flexShrink:0}}>{c.initials}</div>
  }
                <div>
                  <p style={{fontSize:'13.5px',fontWeight:600,color:'var(--t1)',margin:0}}>{c.nombre}</p>
                  <p style={{fontSize:'11px',color:'var(--t3)',margin:'1px 0 0'}}>{c.area}</p>
                </div>
              </div>
              <p style={{fontSize:'12px',color:'var(--t2)',lineHeight:1.55,marginBottom:'12px',minHeight:'50px'}}>{c.bio}</p>
              <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
                <div style={{display:'flex',alignItems:'center',gap:'5px'}}>
                  <Stars n={c.rating}/>
                  <span style={{fontSize:'11px',color:'var(--t3)',fontFamily:'var(--font-mono)'}}>{c.rating} · {c.sessions}</span>
                </div>
                <span style={{fontFamily:'var(--font-mono)',fontSize:'13.5px',fontWeight:600,color:'var(--t1)'}}>${c.price}/h</span>
              </div>
            </div>
          );})}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LaboratorioView });

¡Sesión confirmada!

Para qué empresa y qué tema