/* Mi.Asistente — Onboarding de la mini-app · Pieza 3a
   Porta el tour de Configuración de panel.html (02-sep-2026): mismos 6 pasos y
   los mismos textos, escritos por Product. Lo que cambia es el mecanismo.

   En el panel el tour es un SPOTLIGHT: box-shadow de 9999px que oscurece todo
   menos la card, con un tooltip flotando al lado. En 390 px eso no funciona —
   no hay "al lado", y la card destacada queda tapada por el propio tooltip.

   Acá el mismo tour usa el patrón nativo: una hoja anclada abajo y el paso
   siguiente en el MainButton, con la fila real resaltada detrás. El contenido
   es idéntico; el gesto es el de Telegram.                                   */

/* Los 7 flujos son los de tsm-config.js (patrones A–G). Decisión 04-sep: elegir
   el RUBRO ya es elegir el flujo — una sola decisión para el emprendedor, no dos.
   El flujo trae un preset; después el emprendedor ajusta lo que quiera y Mia se
   adapta a lo que quedó configurado.                                         */
const FLUJOS = {
  A:{ t:'Visitas técnicas', s:'Visitas',           e:'Electricista, plomero, gasista', pres:'a veces', dom:true  },
  B:{ t:'Turnos con agenda', s:'Turnos',          e:'Peluquería, manicura, kinesio',  pres:'casi nunca', dom:false },
  C:{ t:'Presupuestos e instalaciones', s:'Presupuestos', e:'Pintor, albañil, carpintero', pres:'siempre', dom:true  },
  D:{ t:'Pedidos por encargo', s:'Encargos',      e:'Pastelería, catering, viandas',  pres:'siempre', dom:true  },
  E:{ t:'Eventos', s:'Eventos',                   e:'DJ, fotografía, animación',      pres:'siempre', dom:true  },
  F:{ t:'Consultas profesionales', s:'Consultas', e:'Contador, coach, consultor',    pres:'casi nunca', dom:false },
  G:{ t:'Taller', s:'Taller',                     e:'Celulares, electrónica, calzado', pres:'a veces', dom:false },
};

/* Rubros reales de SUBCATS_POR_PATRON (onboarding-flow.js). El patrón sale de
   acá: el emprendedor elige a qué se dedica, no una letra.                   */
const RUBROS = [
  ['A','Electricista'],['A','Plomero'],['A','Gasista'],['A','Cerrajero'],['A','Técnico AC'],
  ['A','Técnico electrodomésticos'],['A','Técnico PC'],['A','Mecánico móvil'],['A','Gomería móvil'],
  ['B','Peluquería'],['B','Barbería'],['B','Lashista'],['B','Manicura'],['B','Cosmetología'],
  ['B','Depilación'],['B','Masajes estéticos'],['B','Makeup'],['B','Estética facial'],
  ['B','Kinesiólogo'],['B','Nutricionista'],['B','Entrenador'],['B','Yoga'],
  ['B','Profesor particular'],['B','Idiomas'],
  ['C','Pintor'],['C','Albañil'],['C','Carpintero'],['C','Instalador alarmas'],['C','Instalador GNC'],
  ['C','Detailing auto'],['C','Polarizado'],['C','Taller mecánico'],['C','Limpieza domiciliaria'],
  ['C','Jardinería'],['C','Piletero'],['C','Fumigación'],
  ['D','Pastelería personalizada'],['D','Catering'],['D','Viandas'],['D','Mesas dulces'],
  ['D','Lunch empresarial'],['D','Food prep'],
  ['E','DJ'],['E','Fotografía eventos'],['E','Animación infantil'],['E','Sonido e iluminación'],
  ['E','Organización eventos'],['E','Video eventos'],
  ['F','Contador'],['F','Gestor'],['F','Consultor operativo'],['F','Osteópata'],
  ['F','Terapias alternativas'],['F','Coach'],
  ['G','Reparación celulares'],['G','Taller electrónica'],['G','Relojería'],['G','Zapatería/calzado'],
];

const PASOS_ONB = [
  { k:'Tu rubro',                 t:'Tu rubro',                 x:'Con esto arranca todo: elegí a qué te dedicás y Mia queda preconfigurada para tu forma de trabajar. Si cambiás algo más abajo, ella se adapta a lo que dejes.' },
  { k:'Servicios y precios',      t:'Servicios y precios',      x:'Qué ofrecés y cuánto cobrás. Es lo único sin lo que Mia no puede arrancar: sin precios no cotiza, y el bot no se activa hasta que estén.' },
  { k:'Visitas a domicilio',      t:'Visitas a domicilio',      x:'Si vas al lugar del cliente, definí el recargo (si cobrás uno) y las zonas que cubrís.' },
  { k:'Horarios y días',          t:'Horarios y días',          x:'Tus horarios de atención y qué días trabajás. Mia no ofrece turnos fuera de esto.' },
  { k:'Capacidad y metas',        t:'Capacidad y metas',        x:'Cuántos trabajos por día podés tomar como máximo, para que no se te sature la agenda.' },
  { k:'Sobreturnos',              t:'Sobreturnos',              x:'Si aceptás meter algún trabajo extra fuera de tu capacidad normal.' },
  { k:'Recibos y presupuestos',   t:'Recibos y presupuestos',   x:'El texto y los datos que van en los comprobantes que le mandás a tus clientes (no reemplaza factura fiscal).' },
];

/* `inset` = el alto del MainButton, que la hoja NO debe tapar: el paso
   siguiente del tour vive ahí y tiene que quedar tocable. */
function Coach({ i, total, onSkip, onBack, inset = 68, pasos = PASOS_ONB }) {
  const p = pasos[i];
  return (
    <div style={{ position:'absolute', inset:0, zIndex:24, display:'flex', flexDirection:'column', justifyContent:'flex-end', paddingBottom:inset, pointerEvents:'none' }}>
      <div style={{ position:'absolute', left:0, right:0, top:0, bottom:-inset, background:'rgba(8,7,6,.55)', pointerEvents:'auto' }} />
      {/* La entrada anima SOLO opacidad. Con un keyframe de transform, si la
          animación queda pendiente (startTime null) la hoja se congela en su
          0% —translateY(100%)— y se va abajo del marco. La posición de reposo
          nunca puede depender de que una animación termine. */}
      <div style={{ position:'relative', pointerEvents:'auto', background:T.g900, borderTop:`1px solid ${T.g700}`, borderRadius:'20px 20px 0 0', padding:'16px 16px 14px', display:'flex', flexDirection:'column', gap:12, animation:'tgin 220ms ease-out' }}>
        <div style={{ display:'flex', alignItems:'flex-start', gap:12 }}>
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:6 }}>
              <span style={{ fontFamily:T.mono, fontSize:9.5, letterSpacing:'.13em', color:T.v600 }}>{i + 1} DE {total}</span>
            </div>
            <div style={{ fontFamily:T.sans, fontSize:17, fontWeight:700, color:T.c100, letterSpacing:'-.3px' }}>{p.t}</div>
          </div>
          <button onClick={onSkip} aria-label="Saltear la guía" style={{ width:32, height:32, flex:'none', display:'grid', placeItems:'center', background:'transparent', border:'none', color:T.c500, fontSize:15, cursor:'pointer', padding:0 }}>✕</button>
        </div>
        <div style={{ fontFamily:T.sans, fontSize:13.5, lineHeight:1.55, color:T.c300 }}>{p.x}</div>
        <div style={{ display:'flex', alignItems:'center', gap:8, paddingTop:2 }}>
          <div style={{ display:'flex', gap:5, flex:1 }}>
            {pasos.map((_, n) => (
              <i key={n} style={{ height:3, flex:1, borderRadius:9, background:n <= i ? T.v600 : T.g800, display:'block' }} />
            ))}
          </div>
          {i > 0 && <button onClick={onBack} style={{ flex:'none', minHeight:44, fontFamily:T.sans, fontSize:13, fontWeight:600, color:T.c500, background:'transparent', border:'none', cursor:'pointer', padding:'0 6px' }}>← Atrás</button>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PASOS_ONB, Coach, FLUJOS, RUBROS });