/* Espera de activación del bot · Pieza 3a — 04-sep-2026
   Pantalla nueva. Cuando el emprendedor termina el onboarding completo (precios
   incluidos), WhatsApp todavía no responde: falta que Meta apruebe el número, y
   ese tiempo no lo controlamos.

   Tres decisiones de diseño, todas por lo mismo — no prometer lo que no sabemos:
   · Sin barra de progreso ni ETA. Una barra que no avanza es peor que no tenerla.
   · Sin "avisame cuando esté listo" y sin "revisá tu mail": Mate ya le escribe
     en el mismo chat de Telegram donde está parado. El mail queda para
     suscripción, facturación y mantenimiento.
   · La espera no es una sala de espera. Es el momento de enseñarle el panel,
     porque es el único rato en que no tiene trabajo encima.                  */

const SECCIONES = [
  { k:'Hoy', d:'Tu día en orden: a qué hora abrís, cada trabajo con su monto y los huecos libres entre uno y otro.',
    ya:'La agenda de hoy, vacía hasta que entre el primer pedido.', p:['M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2z'] },
  { k:'Agenda', d:'Los turnos ordenados por hora y los presupuestos esperando respuesta, cada uno con su propia lista.',
    ya:'Podés cargar trabajos a mano desde ya, sin esperar al bot.', p:['M3 10h18','M8 3v4','M16 3v4','M5 6h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'] },
  { k:'Clientes', d:'Cada cliente con su teléfono, su dirección, lo que le hiciste y lo que te facturó.',
    ya:'Mia los va a ir cargando sola con cada conversación.', p:['M16 20c0-2.6-1.9-4.4-4-4.4S8 17.4 8 20','M12 11.6a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6z'] },
  { k:'Negocio', d:'Los números del mes, los comprobantes que emitiste y toda tu configuración.',
    ya:'Acá volvés a cambiar cualquier cosa que hayas configurado.', p:['M4 20V10','M10 20V4','M16 20v-7','M22 20H2'] },
];

function BannerEspera({ onVer }) {
  return (
    <button onClick={onVer} style={{ flex:'none', display:'flex', alignItems:'center', gap:10, width:'100%', minHeight:44, padding:'0 14px', background:T.aSoft, border:'none', borderBottom:`1px solid ${T.aBorder}`, cursor:'pointer', textAlign:'left' }}>
      <span style={{ width:7, height:7, flex:'none', borderRadius:9, background:T.amber, animation:'tgpulse 1.8s ease-in-out infinite' }} />
      <span style={{ flex:1, minWidth:0, fontFamily:T.sans, fontSize:12.5, color:T.c300, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>Tu WhatsApp se está activando</span>
      <span style={{ flex:'none', fontFamily:T.mono, fontSize:9, letterSpacing:'.1em', color:T.amber }}>VER</span>
    </button>
  );
}

function Espera({ cfg, onVer }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <Card gap={13}>
        <div style={{ display:'flex', alignItems:'center', gap:11 }}>
          <span style={{ width:34, height:34, flex:'none', borderRadius:11, background:T.gSoft, border:`1px solid ${T.gBorder}`, display:'grid', placeItems:'center', color:T.green, fontSize:15 }}>✓</span>
          <div style={{ minWidth:0 }}>
            <div style={{ fontFamily:T.sans, fontSize:16, fontWeight:700, color:T.c100, letterSpacing:'-.2px' }}>Terminaste de configurar</div>
            <div style={{ fontFamily:T.sans, fontSize:12.5, color:T.c500, marginTop:2 }}>{cfg.rubro} · {cfg.servicios.filter(s => s.n.trim()).length} servicios con precio</div>
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'flex-start', gap:11, paddingTop:13, borderTop:`1px solid ${T.g800}` }}>
          <span style={{ width:34, height:34, flex:'none', borderRadius:11, background:T.aSoft, border:`1px solid ${T.aBorder}`, display:'grid', placeItems:'center' }}>
            <i style={{ width:8, height:8, borderRadius:9, background:T.amber, display:'block', animation:'tgpulse 1.8s ease-in-out infinite' }} />
          </span>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ fontFamily:T.sans, fontSize:15, fontWeight:600, color:T.c100 }}>Falta que se active tu WhatsApp</div>
            <div style={{ fontFamily:T.sans, fontSize:12.5, lineHeight:1.5, color:T.c500, marginTop:3 }}>Meta tiene que aprobar tu número. Ese tiempo no lo manejamos nosotros, así que no te prometo una hora. <b style={{ color:T.c300 }}>Hasta que esté, Mia no le contesta a tus clientes.</b></div>
          </div>
        </div>
      </Card>

      <Card gap={11}>
        <Lbl>NO TENÉS QUE HACER NADA</Lbl>
        <div style={{ display:'flex', alignItems:'flex-end', gap:9 }}>
          <span style={{ width:30, height:30, flex:'none', borderRadius:99, background:T.vSoft, border:`1px solid ${T.vBorder}`, display:'grid', placeItems:'center', fontFamily:T.display, fontSize:13, color:T.c100, letterSpacing:'.5px' }}>M</span>
          <div style={{ flex:1, minWidth:0, background:T.g950, border:`1px solid ${T.g800}`, borderRadius:'14px 14px 14px 4px', padding:'11px 13px' }}>
            <div style={{ fontFamily:T.sans, fontSize:13.5, lineHeight:1.5, color:T.c100 }}>Listo, ya está activo tu WhatsApp. Mia empezó a atender.</div>
            <div style={{ fontFamily:T.mono, fontSize:9, letterSpacing:'.09em', color:T.c500, marginTop:6 }}>MATE · CUANDO ESTÉ LISTO</div>
          </div>
        </div>
        <div style={{ fontFamily:T.sans, fontSize:12.5, lineHeight:1.55, color:T.c500 }}>Mate te lo escribe <b style={{ color:T.c300 }}>en este mismo chat</b> apenas el bot esté vivo. No hace falta que revises el mail ni que dejes ningún aviso.</div>
      </Card>

      <div>
        <div style={{ display:'flex', alignItems:'baseline', gap:10, marginBottom:10 }}>
          <div style={{ fontFamily:T.display, fontSize:19, lineHeight:1.16, letterSpacing:'.4px', color:T.c100 }}>MIENTRAS ESPERÁS</div>
          <span style={{ marginLeft:'auto', fontFamily:T.mono, fontSize:9.5, color:T.c500 }}>4 SECCIONES</span>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
          {SECCIONES.map(s => (
            <button key={s.k} onClick={onVer} style={{ display:'flex', alignItems:'flex-start', gap:12, padding:14, background:T.g900, border:`1px solid ${T.g800}`, borderRadius:14, cursor:'pointer', textAlign:'left', width:'100%' }}>
              <span style={{ width:32, height:32, flex:'none', borderRadius:10, background:T.g800, display:'grid', placeItems:'center' }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={T.c300} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{s.p.map((d,i) => <path key={i} d={d}/>)}</svg>
              </span>
              <span style={{ flex:1, minWidth:0 }}>
                <span style={{ display:'block', fontFamily:T.sans, fontSize:14.5, fontWeight:700, color:T.c100 }}>{s.k}</span>
                <span style={{ display:'block', fontFamily:T.sans, fontSize:12.5, lineHeight:1.5, color:T.c500, marginTop:3 }}>{s.d}</span>
                <span style={{ display:'flex', alignItems:'center', gap:6, marginTop:7 }}>
                  <i style={{ width:5, height:5, flex:'none', borderRadius:9, background:T.v600, display:'block' }} />
                  <span style={{ fontFamily:T.sans, fontSize:11.5, lineHeight:1.4, color:T.c300 }}>{s.ya}</span>
                </span>
              </span>
            </button>
          ))}
        </div>
      </div>

      <div style={{ fontFamily:T.sans, fontSize:12.5, lineHeight:1.55, color:T.c500, padding:'0 4px' }}>Todo lo que ves ahora está vacío porque el bot todavía no atendió a nadie. <b style={{ color:T.c300 }}>Los datos se van a ir cargando solos</b> apenas Mia empiece a hablar con tus clientes.</div>
    </div>
  );
}

Object.assign(window, { Espera, BannerEspera, SECCIONES });