// Pages.jsx — All dashboard pages with REAL Mostto data

// ─── REAL DATA ───────────────────────────────────────────────────────────────

const MOSTTO_DATA = {
  // KPIs globales (datos mostto.xlsx — Dashboard sheet)
  periodo: 'Abr 7 – May 4, 2026',
  conversaciones: 655,
  mensajes: 17271,
  msgPorConv: 26.4,
  tiempoRespMediano: '0,1 min',
  tiempoRespPromedio: '19 min',
  tiempoRespP90: '15,4 min',
  conAtencionHumana: 651,
  pctHumana: 99.4,
  soloBot: 4,
  horaPico: '14:00 hs',
  diaPico: 'Miércoles',
  paresAnalizados: 6013,

  // Informe inicial KPIs
  totalMensajesInforme: 25345,
  mensajesInbound: 9121,
  mensajesAI: 7250,
  mensajesHuman: 7153,
  mensajesManual: 1811,
  convsResueltas: 769,
  convsEscaladaHumano: 735,
  convsSoloHumano: 15,
  convsSinRespuesta: 19,
  duracionMediana: 179.8,
  primerRespPromedio: 84.7,
  primerRespMediana: 0.1,
  msgPromPorConv: 32.9,

  // _Volumen (fechas como serial Excel → reales)
  // Serial 46119 = 7 Abr 2026
  volumenDiario: [
    { fecha: '07 Abr', dia: 'Mar', nuevas: 36, msgs: 141 },
    { fecha: '08 Abr', dia: 'Mié', nuevas: 42, msgs: 562 },
    { fecha: '09 Abr', dia: 'Jue', nuevas: 50, msgs: 572 },
    { fecha: '10 Abr', dia: 'Vie', nuevas: 32, msgs: 422 },
    { fecha: '11 Abr', dia: 'Sáb', nuevas: 2,  msgs: 29  },
    { fecha: '12 Abr', dia: 'Dom', nuevas: 0,  msgs: 3   },
    { fecha: '13 Abr', dia: 'Lun', nuevas: 41, msgs: 462 },
    { fecha: '14 Abr', dia: 'Mar', nuevas: 42, msgs: 480 },
    { fecha: '15 Abr', dia: 'Mié', nuevas: 52, msgs: 557 },
    { fecha: '16 Abr', dia: 'Jue', nuevas: 21, msgs: 250 },
    { fecha: '17 Abr', dia: 'Vie', nuevas: 35, msgs: 454 },
    { fecha: '18 Abr', dia: 'Sáb', nuevas: 3,  msgs: 30  },
    { fecha: '19 Abr', dia: 'Dom', nuevas: 2,  msgs: 3   },
    { fecha: '20 Abr', dia: 'Lun', nuevas: 18, msgs: 331 },
    { fecha: '21 Abr', dia: 'Mar', nuevas: 9,  msgs: 139 },
    { fecha: '22 Abr', dia: 'Mié', nuevas: 45, msgs: 549 },
    { fecha: '23 Abr', dia: 'Jue', nuevas: 35, msgs: 411 },
    { fecha: '24 Abr', dia: 'Vie', nuevas: 44, msgs: 482 },
    { fecha: '25 Abr', dia: 'Sáb', nuevas: 7,  msgs: 58  },
    { fecha: '26 Abr', dia: 'Dom', nuevas: 4,  msgs: 25  },
    { fecha: '27 Abr', dia: 'Lun', nuevas: 38, msgs: 498 },
    { fecha: '28 Abr', dia: 'Mar', nuevas: 41, msgs: 463 },
    { fecha: '29 Abr', dia: 'Mié', nuevas: 48, msgs: 521 },
    { fecha: '30 Abr', dia: 'Jue', nuevas: 33, msgs: 388 },
    { fecha: '01 May', dia: 'Vie', nuevas: 29, msgs: 312 },
    { fecha: '02 May', dia: 'Sáb', nuevas: 5,  msgs: 48  },
    { fecha: '03 May', dia: 'Dom', nuevas: 2,  msgs: 11  },
    { fecha: '04 May', dia: 'Lun', nuevas: 19, msgs: 190 },
  ],

  // _Temas
  temas: [
    { label: 'Entrega/Flete',           value: 287, color: '#7D2574' },
    { label: 'Presupuesto/Cotización',  value: 162, color: '#29265B' },
    { label: 'Horarios/Sucursales',     value: 158, color: '#2E90FA' },
    { label: 'Bot/Registro',            value: 137, color: '#12B76A' },
    { label: 'Factura/Pago',            value: 106, color: '#F79009' },
    { label: 'Seguimiento/Tracking',    value: 104, color: '#B16AAB' },
    { label: 'Retiro/Pickup',           value: 103, color: '#545A71' },
    { label: 'Reclamo/Queja',           value: 26,  color: '#F04438' },
    { label: 'Derivación/Asignación',   value: 23,  color: '#94A3B8' },
  ],

  // Temas informe
  temasInforme: [
    { label: 'Presupuesto/Cotización',  value: 121 },
    { label: 'Envío/Encomienda',        value: 108 },
    { label: 'Retiro a domicilio',      value: 106 },
    { label: 'Horarios/Sucursal',       value: 91  },
    { label: 'Carga grande/Flete',      value: 82  },
    { label: 'Documentación/DNI',       value: 69  },
    { label: 'Pago/Transferencia',      value: 38  },
    { label: 'Seguimiento/Tracking',    value: 33  },
  ],

  // _Geo
  geo: [
    { label: 'Entre Ríos',          value: 713 },
    { label: 'Buenos Aires / AMBA', value: 293 },
    { label: 'Rosario / Santa Fe',  value: 245 },
    { label: 'Córdoba',             value: 65  },
    { label: 'Salta',               value: 3   },
    { label: 'Mendoza',             value: 3   },
    { label: 'Corrientes',          value: 2   },
    { label: 'Misiones',            value: 2   },
    { label: 'San Luis/La Pampa',   value: 1   },
    { label: 'Tucumán',             value: 1   },
  ],

  // _Respuesta (datos mostto)
  respuesta: [
    { label: '< 5 min',    value: 5223, color: '#12B76A' },
    { label: '5–15 min',   value: 182,  color: '#F79009' },
    { label: '15–60 min',  value: 272,  color: '#F79009' },
    { label: '1–4 horas',  value: 253,  color: '#F04438' },
    { label: '> 4 horas',  value: 83,   color: '#D92D20' },
  ],

  // Tiempos informe
  primerRespuesta: [
    { label: '< 1 min',    value: 699, color: '#12B76A' },
    { label: '1–5 min',    value: 23,  color: '#F79009' },
    { label: '5–30 min',   value: 4,   color: '#F79009' },
    { label: '30 min–2 h', value: 1,   color: '#F04438' },
    { label: '2 h–24 h',   value: 15,  color: '#D92D20' },
    { label: '> 24 h',     value: 7,   color: '#B42318' },
    { label: 'Sin respuesta', value: 19, color: '#94A3B8' },
  ],

  duracionConv: [
    { label: '< 5 min',    value: 39,  color: '#12B76A' },
    { label: '5–30 min',   value: 49,  color: '#34D399' },
    { label: '30 min–2 h', value: 244, color: '#F79009' },
    { label: '2 h–24 h',   value: 256, color: '#F04438' },
    { label: '> 24 h',     value: 181, color: '#D92D20' },
  ],

  // _Agentes
  agentes: [
    { nombre: 'Agente Principal', msgs: 7291, convs: 650, color: '#7D2574' },
    { nombre: 'Agente 20',        msgs: 653,  convs: 228, color: '#29265B' },
  ],

  // _DiaSemana
  diaSemana: [
    { label: 'Lun', value: 3090 },
    { label: 'Mar', value: 2601 },
    { label: 'Mié', value: 4168 },
    { label: 'Jue', value: 2661 },
    { label: 'Vie', value: 2840 },
    { label: 'Sáb', value: 241  },
    { label: 'Dom', value: 21   },
  ],

  // _Horarios (fracciones → horas)
  horarios: [
    { h: '00', v: 61 }, { h: '01', v: 69 }, { h: '02', v: 46 }, { h: '03', v: 6 },
    { h: '04', v: 23 }, { h: '05', v: 3  }, { h: '06', v: 1  }, { h: '07', v: 0 },
    { h: '08', v: 2  }, { h: '09', v: 1  }, { h: '10', v: 168 }, { h: '11', v: 917 },
    { h: '12', v: 2134 }, { h: '13', v: 2239 }, { h: '14', v: 2263 }, { h: '15', v: 1642 },
    { h: '16', v: 1032 }, { h: '17', v: 1579 }, { h: '18', v: 1332 }, { h: '19', v: 926 },
    { h: '20', v: 407  }, { h: '21', v: 175  }, { h: '22', v: 134  }, { h: '23', v: 112 },
  ],

  // Menu
  menu: [
    { label: '6 – Hablar con asesor', value: 241, pct: 33.8 },
    { label: '4 – Presupuestos',      value: 187, pct: 26.3 },
    { label: '3 – Seguimiento',       value: 162, pct: 22.8 },
    { label: '1 – Servicios',         value: 56,  pct: 7.9  },
    { label: '2 – Sucursales',        value: 39,  pct: 5.5  },
    { label: '5 – Reclamos',          value: 27,  pct: 3.8  },
  ],

  // Bot
  bot: {
    totalConvs: 769,
    conBot: 735,
    resueltoSoloBot: 0,
    escaladaHumano: 735,
    soloHumano: 15,
    sinRespuesta: 19,
    tasaEscalacion: 100,
    msgsAIporConv: 9.4,
  },
};

// ─── HELPERS ─────────────────────────────────────────────────────────────────

function fmt(n) { return n.toLocaleString('es-AR'); }
function pct(a, b) { return ((a / b) * 100).toFixed(1).replace('.', ',') + '%'; }

function ChartLegend({ items }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 16px', marginTop: 8 }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 10, height: 10, borderRadius: 3, background: it.color, flexShrink: 0 }} />
          <span style={{ fontSize: 12, color: 'var(--fg-2)' }}>{it.label}</span>
        </div>
      ))}
    </div>
  );
}

// ─── OVERVIEW PAGE ───────────────────────────────────────────────────────────

function OverviewPage() {
  const D = MOSTTO_DATA;
  const totalMsgsResp = D.respuesta.reduce((a, r) => a + r.value, 0);
  const pctRapida = ((D.respuesta[0].value / totalMsgsResp) * 100).toFixed(1).replace('.', ',');

  // Build volume series for line chart (last 21 days weekdays only)
  const weekdays = D.volumenDiario.filter(d => !['Sáb', 'Dom'].includes(d.dia));
  const last14 = weekdays.slice(-14);
  const labels = last14.map(d => d.fecha.split(' ')[0]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

      {/* Período badge */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--fg-1)' }}>Vista general</div>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 2 }}>Período: {D.periodo} · Canal: WhatsApp</div>
        </div>
        <div style={{ background: 'var(--primary-50)', border: '1px solid var(--primary-200)', borderRadius: 8, padding: '6px 14px', fontSize: 12, fontWeight: 600, color: 'var(--primary-700)' }}>
          27 días analizados
        </div>
      </div>

      {/* Alert resumen */}
      <Alert level="reco"
        title="Situación del período"
        body={`${fmt(D.conversaciones)} conversaciones en WhatsApp · ${pctRapida}% de respuestas en menos de 5 minutos · Día pico: ${D.diaPico} · Hora pico: ${D.horaPico}`}
      />

      {/* KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KpiCard label="Conversaciones" value={fmt(D.conversaciones)} sub={D.periodo} icon="message-square" delta="27 días" />
        <KpiCard label="Mensajes totales" value={fmt(D.mensajes)} sub={`~${D.msgPorConv} por conversación`} icon="messages-square" />
        <KpiCard label="Tiempo de respuesta" value={D.tiempoRespMediano} sub={`Mediana · Promedio: ${D.tiempoRespPromedio}`} icon="clock" variant="success" />
        <KpiCard label="Atención humana" value={`${D.pctHumana}%`} sub={`${fmt(D.conAtencionHumana)} de ${fmt(D.conversaciones)} convs`} icon="users" variant="warning" />
      </div>

      {/* Segunda fila KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KpiCard label="Respuesta rápida" value={`${pctRapida}%`} sub="Respondido en < 5 min" icon="zap" variant="success" />
        <KpiCard label="Hora pico" value={D.horaPico} sub="Mayor concentración de msgs" icon="activity" />
        <KpiCard label="Día pico" value={D.diaPico} sub="Más mensajes en el período" icon="calendar" />
        <KpiCard label="Pares analizados" value={fmt(D.paresAnalizados)} sub="Conversaciones con respuesta" icon="git-branch-plus" />
      </div>

      {/* Volumen + respuesta */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
        <SectionCard title="Nuevas conversaciones por día" subtitle="Días hábiles — últimas 2 semanas">
          <LineChart
            labels={labels}
            series={[{ name: 'Nuevas', color: '#7D2574', data: last14.map(d => d.nuevas) }]}
            height={180}
          />
        </SectionCard>
        <SectionCard title="Tiempo de respuesta" subtitle={`${fmt(totalMsgsResp)} pares analizados`}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.respuesta.map((r, i) => (
              <StatRow key={i} label={r.label} value={r.value} total={totalMsgsResp} barColor={r.color} />
            ))}
          </div>
        </SectionCard>
      </div>

      {/* Temas + Geo */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SectionCard title="Temas de conversación" subtitle="Por número de conversaciones">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.temas.slice(0, 7).map((t, i) => (
              <StatRow key={i} label={t.label} value={t.value} total={D.conversaciones} barColor={t.color} />
            ))}
          </div>
        </SectionCard>
        <SectionCard title="Distribución geográfica" subtitle="Menciones por región">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.geo.slice(0, 8).map((g, i) => (
              <StatRow key={i} label={g.label} value={g.value} total={D.geo.reduce((a, x) => a + x.value, 0)} barColor='#7D2574' />
            ))}
          </div>
        </SectionCard>
      </div>
    </div>
  );
}

// ─── VOLUMEN PAGE ─────────────────────────────────────────────────────────────

function VolumenPage() {
  const D = MOSTTO_DATA;
  const [view, setView] = React.useState('convs');
  const all = D.volumenDiario;
  const labels = all.map(d => d.fecha.replace(' ', '\n'));
  const dataConvs = all.map(d => d.nuevas);
  const dataMsgs = all.map(d => d.msgs);

  const totalConvsSem = [0, 1, 2, 3].map(w => {
    const seg = all.filter(d => !['Sáb', 'Dom'].includes(d.dia)).slice(w * 5, w * 5 + 5);
    return seg.reduce((a, d) => a + d.nuevas, 0);
  });

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Volumen diario</div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KpiCard label="Total conversaciones" value={fmt(D.conversaciones)} sub="Todo el período" icon="message-square" />
        <KpiCard label="Promedio diario" value={(D.conversaciones / 28).toFixed(1).replace('.', ',')} sub="Conversaciones/día" icon="trending-up" />
        <KpiCard label="Pico semanal" value={`${Math.max(...totalConvsSem)}`} sub="Mejor semana del mes" icon="bar-chart-2" variant="success" />
        <KpiCard label="Día más activo" value="15 Abr" sub="52 nuevas conversaciones" icon="calendar" variant="brand" />
      </div>

      <SectionCard
        title="Nuevas conversaciones por día"
        subtitle={`Abr 7 – May 4, 2026 · ${D.conversaciones} total`}
        action={
          <div style={{ display: 'flex', gap: 4 }}>
            {[['convs', 'Conversaciones'], ['msgs', 'Mensajes']].map(([id, lab]) => (
              <button key={id} onClick={() => setView(id)} style={{
                fontSize: 12, fontWeight: 600, padding: '5px 10px', borderRadius: 6, cursor: 'pointer',
                border: view === id ? '1.5px solid var(--primary-500)' : '1px solid var(--border-default)',
                background: view === id ? 'var(--primary-50)' : '#fff',
                color: view === id ? 'var(--primary-700)' : 'var(--fg-2)', fontFamily: 'var(--font-sans)',
              }}>{lab}</button>
            ))}
          </div>
        }
      >
        <LineChart
          labels={labels}
          series={[{
            name: view === 'convs' ? 'Conversaciones' : 'Mensajes',
            color: '#7D2574',
            data: view === 'convs' ? dataConvs : dataMsgs
          }]}
          height={220}
        />
      </SectionCard>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SectionCard title="Mensajes por día de semana" subtitle="Total del período">
          <BarChart
            data={D.diaSemana.map(d => ({ label: d.label, value: d.value, color: d.label === 'Mié' ? '#7D2574' : 'var(--primary-200)' }))}
            height={200}
          />
          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--fg-3)' }}>
            Miércoles concentra el <strong>{((4168 / D.mensajes) * 100).toFixed(0)}%</strong> del tráfico semanal
          </div>
        </SectionCard>

        <SectionCard title="Top 10 conversaciones más largas" subtitle="Por duración total (informe extendido)">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              { id: 5252, msgs: 142, dur: '27.708 min', cat: 'Escalada a humano' },
              { id: 7730, msgs: 141, dur: '20.137 min', cat: 'Escalada a humano' },
              { id: 4960, msgs: 134, dur: '12.709 min', cat: 'Escalada a humano' },
              { id: 7958, msgs: 129, dur: '11.920 min', cat: 'Escalada a humano' },
              { id: 7090, msgs: 112, dur: '5.901 min',  cat: 'Escalada a humano' },
              { id: 8235, msgs: 112, dur: '7.395 min',  cat: 'Escalada a humano' },
            ].map((c, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 0', borderBottom: i < 5 ? '1px solid var(--border-subtle)' : 'none' }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--fg-4)', width: 20, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>#{i+1}</span>
                <span style={{ fontSize: 12, fontVariantNumeric: 'tabular-nums', fontFamily: 'var(--font-mono)', color: 'var(--fg-2)', width: 52 }}>#{c.id}</span>
                <span style={{ flex: 1, fontSize: 12, color: 'var(--fg-3)' }}>{c.dur}</span>
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-1)', fontVariantNumeric: 'tabular-nums' }}>{c.msgs} msgs</span>
              </div>
            ))}
          </div>
        </SectionCard>
      </div>
    </div>
  );
}

// ─── TEMAS PAGE ───────────────────────────────────────────────────────────────

function TopicsPage() {
  const D = MOSTTO_DATA;
  const totalTemas = D.temas.reduce((a, t) => a + t.value, 0);
  const totalGeo = D.geo.reduce((a, g) => a + g.value, 0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Temas frecuentes</div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        <KpiCard label="Tema principal" value="Entrega/Flete" sub="287 conversaciones · 43,8% del total" icon="truck" variant="brand" />
        <KpiCard label="Total menciones geo" value={fmt(totalGeo)} sub="Regiones identificadas: 10" icon="map-pin" />
        <KpiCard label="Reclamos" value="26" sub="3,9% del total — bajo" icon="alert-circle" variant="success" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SectionCard title="Temas de consulta" subtitle={`${fmt(totalTemas)} conversaciones clasificadas`}>
          <BarChart data={D.temas.map(t => ({ label: t.label.split('/')[0], value: t.value, color: t.color }))} height={220} />
          <ChartLegend items={D.temas.map(t => ({ label: t.label, color: t.color }))} />
        </SectionCard>

        <SectionCard title="Distribución geográfica" subtitle={`${fmt(totalGeo)} menciones en mensajes`}>
          <BarChart data={D.geo.map(g => ({ label: g.label.split(' ')[0], value: g.value, color: '#7D2574' }))} height={220} />
        </SectionCard>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SectionCard title="Consultas frecuentes — detalle" subtitle="Conversaciones por tema (fuente: informe extendido)">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.temasInforme.map((t, i) => (
              <StatRow key={i} label={t.label} value={t.value} total={D.convsResueltas} barColor='#7D2574' />
            ))}
          </div>
        </SectionCard>

        <SectionCard title="Opciones del menú principal" subtitle="Veces seleccionadas (total: 712 selecciones de 860 mostreos)">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {D.menu.map((m, i) => (
              <StatRow key={i} label={m.label} value={m.value} total={712} barColor='#29265B' />
            ))}
          </div>
          <div style={{ marginTop: 12, padding: '10px 14px', background: 'var(--gray-50)', borderRadius: 8 }}>
            <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>Tasa de selección: <strong style={{ color: 'var(--fg-1)' }}>82,8%</strong> · Tasa de abandono: <strong style={{ color: 'var(--danger-700)' }}>17,2%</strong></div>
          </div>
        </SectionCard>
      </div>
    </div>
  );
}

// ─── TIMING PAGE ──────────────────────────────────────────────────────────────

function TimingPage() {
  const D = MOSTTO_DATA;
  const totalPR = D.primerRespuesta.reduce((a, r) => a + r.value, 0);
  const totalDur = D.duracionConv.reduce((a, r) => a + r.value, 0);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Tiempos de respuesta</div>

      <Alert level="success"
        title="Tiempo de respuesta excelente"
        body="El 91% de las conversaciones reciben primera respuesta en menos de 1 minuto. Mediana: 0,1 min (6 segundos). Solo el 1,2% supera 24 horas."
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KpiCard label="1er respuesta promedio" value="84,7 min" sub="Afectado por outliers" icon="clock" variant="warning" />
        <KpiCard label="1er respuesta mediana" value="0,1 min" sub="P50 — dato representativo" icon="zap" variant="success" />
        <KpiCard label="1er respuesta P90" value="0,5 min" sub="90% responde en < 30 s" icon="trending-up" variant="success" />
        <KpiCard label="Duración mediana conv." value="179,8 min" sub="~3 horas por conversación" icon="timer" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SectionCard title="Distribución de 1ª respuesta" subtitle={`${fmt(totalPR)} conversaciones analizadas`}>
          <BarChart data={D.primerRespuesta.map(r => ({ label: r.label, value: r.value, color: r.color }))} height={200} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
            {D.primerRespuesta.map((r, i) => (
              <StatRow key={i} label={r.label} value={r.value} total={totalPR} barColor={r.color} />
            ))}
          </div>
        </SectionCard>

        <SectionCard title="Duración de conversaciones" subtitle={`${fmt(totalDur)} conversaciones`}>
          <BarChart data={D.duracionConv.map(r => ({ label: r.label, value: r.value, color: r.color }))} height={200} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }}>
            {D.duracionConv.map((r, i) => (
              <StatRow key={i} label={r.label} value={r.value} total={totalDur} barColor={r.color} />
            ))}
          </div>
        </SectionCard>
      </div>

      <SectionCard title="KPIs de tiempo — resumen completo" subtitle="Todos los percentiles">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
            { label: 'Primer respuesta — Promedio', value: '84,7 min', note: 'Promedio sesgado por outliers (> 24 h)' },
            { label: 'Primer respuesta — Mediana (P50)', value: '0,1 min', note: '~6 segundos. Excelente.' },
            { label: 'Primer respuesta — P75', value: '0,1 min', note: '75% respondido en segundos' },
            { label: 'Primer respuesta — P90', value: '0,5 min', note: '90% en menos de 30 segundos' },
            { label: 'Duración conversación — Promedio', value: '2.229 min', note: '~37 horas promedio (outliers)' },
            { label: 'Duración conversación — Mediana', value: '179,8 min', note: '~3 horas por conversación' },
            { label: 'Duración conversación — P75', value: '1.338,5 min', note: '~22 horas para el 25% más largo' },
            { label: 'Duración conversación — P90', value: '6.194 min', note: '~4,3 días para el 10% más largo' },
            { label: 'Mensajes por conversación', value: '32,9', note: 'Mediana: 31 msgs/conv' },
          ].map((k, i) => (
            <div key={i} style={{ padding: '12px 16px', background: 'var(--gray-50)', borderRadius: 10, border: '1px solid var(--border-subtle)' }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>{k.label}</div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', color: 'var(--fg-1)' }}>{k.value}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 3 }}>{k.note}</div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

// ─── HEATMAP PAGE ─────────────────────────────────────────────────────────────

function HeatmapPage() {
  const D = MOSTTO_DATA;

  // Build heatmap data from diaSemana x horarios approximation
  // Using Por Hora data from informe: rows 2-8 have per-day-per-hour
  const days = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
  const hours = ['07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21'];

  // Approximate data based on informe "Por Hora" day/hour matrix
  const heatData = [
    // Lunes
    {day:'Lun',hour:'07',value:34},{day:'Lun',hour:'08',value:303},{day:'Lun',hour:'09',value:505},
    {day:'Lun',hour:'10',value:711},{day:'Lun',hour:'11',value:702},{day:'Lun',hour:'12',value:674},
    {day:'Lun',hour:'13',value:325},{day:'Lun',hour:'14',value:355},{day:'Lun',hour:'15',value:181},
    {day:'Lun',hour:'16',value:180},{day:'Lun',hour:'17',value:165},{day:'Lun',hour:'18',value:160},
    {day:'Lun',hour:'19',value:44},{day:'Lun',hour:'20',value:23},{day:'Lun',hour:'21',value:16},
    // Martes
    {day:'Mar',hour:'07',value:73},{day:'Mar',hour:'08',value:286},{day:'Mar',hour:'09',value:423},
    {day:'Mar',hour:'10',value:857},{day:'Mar',hour:'11',value:582},{day:'Mar',hour:'12',value:518},
    {day:'Mar',hour:'13',value:357},{day:'Mar',hour:'14',value:584},{day:'Mar',hour:'15',value:552},
    {day:'Mar',hour:'16',value:398},{day:'Mar',hour:'17',value:176},{day:'Mar',hour:'18',value:21},
    {day:'Mar',hour:'19',value:80},{day:'Mar',hour:'20',value:6},{day:'Mar',hour:'21',value:4},
    // Miércoles
    {day:'Mié',hour:'07',value:69},{day:'Mié',hour:'08',value:417},{day:'Mié',hour:'09',value:708},
    {day:'Mié',hour:'10',value:824},{day:'Mié',hour:'11',value:789},{day:'Mié',hour:'12',value:606},
    {day:'Mié',hour:'13',value:477},{day:'Mié',hour:'14',value:613},{day:'Mié',hour:'15',value:635},
    {day:'Mié',hour:'16',value:417},{day:'Mié',hour:'17',value:192},{day:'Mié',hour:'18',value:106},
    {day:'Mié',hour:'19',value:20},{day:'Mié',hour:'20',value:96},{day:'Mié',hour:'21',value:63},
    // Jueves
    {day:'Jue',hour:'06',value:27},{day:'Jue',hour:'07',value:84},{day:'Jue',hour:'08',value:210},
    {day:'Jue',hour:'09',value:971},{day:'Jue',hour:'10',value:715},{day:'Jue',hour:'11',value:688},
    {day:'Jue',hour:'12',value:445},{day:'Jue',hour:'13',value:406},{day:'Jue',hour:'14',value:706},
    {day:'Jue',hour:'15',value:457},{day:'Jue',hour:'16',value:540},{day:'Jue',hour:'17',value:131},
    {day:'Jue',hour:'18',value:50},{day:'Jue',hour:'19',value:22},{day:'Jue',hour:'20',value:7},
    // Viernes
    {day:'Vie',hour:'07',value:36},{day:'Vie',hour:'08',value:135},{day:'Vie',hour:'09',value:433},
    {day:'Vie',hour:'10',value:616},{day:'Vie',hour:'11',value:846},{day:'Vie',hour:'12',value:447},
    {day:'Vie',hour:'13',value:237},{day:'Vie',hour:'14',value:332},{day:'Vie',hour:'15',value:404},
    {day:'Vie',hour:'16',value:263},{day:'Vie',hour:'17',value:145},{day:'Vie',hour:'18',value:66},
    {day:'Vie',hour:'19',value:8},{day:'Vie',hour:'20',value:0},{day:'Vie',hour:'21',value:1},
    // Sábado
    {day:'Sáb',hour:'08',value:33},{day:'Sáb',hour:'09',value:137},{day:'Sáb',hour:'10',value:39},
    {day:'Sáb',hour:'11',value:52},{day:'Sáb',hour:'12',value:19},{day:'Sáb',hour:'13',value:2},
    // Domingo
    {day:'Dom',hour:'10',value:3},{day:'Dom',hour:'11',value:1},{day:'Dom',hour:'13',value:3},
    {day:'Dom',hour:'14',value:1},{day:'Dom',hour:'16',value:4},{day:'Dom',hour:'17',value:6},
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Horarios y días</div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KpiCard label="Hora pico" value="14:00 hs" sub="Mayor concentración de mensajes" icon="clock" variant="brand" />
        <KpiCard label="Día pico" value="Miércoles" sub={`${fmt(4168)} mensajes en el período`} icon="calendar" />
        <KpiCard label="Fin de semana" value="1,1%" sub="Sáb+Dom vs. total de mensajes" icon="moon" variant="success" />
        <KpiCard label="Horario laboral" value="87,3%" sub="09:00–18:00 hs (est.)" icon="sun" />
      </div>

      <SectionCard title="Mapa de calor — Mensajes por día y hora" subtitle="Todo el período · Más oscuro = más mensajes">
        <div style={{ overflowX: 'auto' }}>
          <HeatmapChart
            data={heatData}
            days={days}
            hours={['06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21']}
          />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }}>
          <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>Poco tráfico</span>
          {['#e9d5f5','#c084d4','#9a3f90','#7d2574','#4a1545'].map((c, i) => (
            <span key={i} style={{ width: 20, height: 12, background: c, borderRadius: 2 }} />
          ))}
          <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>Mucho tráfico</span>
        </div>
      </SectionCard>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SectionCard title="Mensajes por día de semana" subtitle="Total del período completo">
          <BarChart
            data={D.diaSemana.map(d => ({
              label: d.label,
              value: d.value,
              color: d.label === 'Mié' ? '#7D2574' : d.label === 'Sáb' || d.label === 'Dom' ? 'var(--gray-300)' : 'var(--primary-300)'
            }))}
            height={200}
          />
        </SectionCard>

        <SectionCard title="Mensajes por hora del día" subtitle="Distribución acumulada">
          <BarChart
            data={D.horarios.map(h => ({
              label: parseInt(h.h) % 3 === 0 ? h.h + 'h' : '',
              value: h.v,
              color: h.h === '14' ? '#7D2574' : h.v > 1000 ? 'var(--primary-400)' : 'var(--primary-200)'
            }))}
            height={200}
          />
          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--fg-3)' }}>
            Ventana activa: <strong>10:00–18:00 hs</strong> concentra el 78% del tráfico
          </div>
        </SectionCard>
      </div>
    </div>
  );
}

// ─── GEO PAGE ─────────────────────────────────────────────────────────────────

function GeoPage() {
  const D = MOSTTO_DATA;
  const total = D.geo.reduce((a, g) => a + g.value, 0);
  const colors = ['#7D2574','#29265B','#2E90FA','#12B76A','#F79009','#F04438','#B16AAB','#545A71','#94A3B8','#CBD5E1'];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Geografía</div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
        <KpiCard label="Región principal" value="Entre Ríos" sub={`${fmt(713)} menciones · ${((713/total)*100).toFixed(1).replace('.',',')}% del total`} icon="map-pin" variant="brand" />
        <KpiCard label="Total menciones" value={fmt(total)} sub="10 regiones identificadas" icon="globe" />
        <KpiCard label="Buenos Aires + SF" value={`${((293+245)/total*100).toFixed(0)}%`} sub={`${fmt(293+245)} menciones combinadas`} icon="building" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
        <SectionCard title="Menciones por región" subtitle={`${fmt(total)} menciones totales en mensajes de agentes`}>
          <BarChart
            data={D.geo.map((g, i) => ({ label: g.label.split('/')[0].split(' ')[0], value: g.value, color: colors[i] || '#94A3B8' }))}
            height={220}
          />
        </SectionCard>

        <SectionCard title="Distribución regional" subtitle="Porcentaje del total">
          <DonutChart
            segments={D.geo.slice(0, 5).map((g, i) => ({ value: g.value, color: colors[i] }))}
            size={180}
            label={fmt(total)}
            sub="menciones"
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 12 }}>
            {D.geo.slice(0, 5).map((g, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 10, height: 10, borderRadius: 3, background: colors[i], flexShrink: 0 }} />
                <span style={{ flex: 1, fontSize: 12, color: 'var(--fg-2)' }}>{g.label}</span>
                <span style={{ fontSize: 12, fontWeight: 600, fontVariantNumeric: 'tabular-nums', color: 'var(--fg-1)' }}>{((g.value/total)*100).toFixed(1).replace('.',',')}%</span>
              </div>
            ))}
          </div>
        </SectionCard>
      </div>

      <SectionCard title="Detalle por región" subtitle="Todos los orígenes identificados">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {D.geo.map((g, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: 'var(--gray-50)', borderRadius: 8, border: '1px solid var(--border-subtle)' }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: colors[i] || '#94A3B8', flexShrink: 0 }} />
              <span style={{ flex: 1, fontSize: 13, color: 'var(--fg-2)', fontWeight: 500 }}>{g.label}</span>
              <span style={{ fontSize: 13, fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: 'var(--fg-1)' }}>{fmt(g.value)}</span>
              <span style={{ fontSize: 11, color: 'var(--fg-3)', minWidth: 40, textAlign: 'right' }}>{((g.value/total)*100).toFixed(1).replace('.',',')}%</span>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

// ─── AGENTS PAGE ──────────────────────────────────────────────────────────────

function AgentsPage() {
  const D = MOSTTO_DATA;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Agentes</div>

      <Alert level="info"
        title="Equipo de 2 agentes activos"
        body="El Agente Principal gestionó el 92,3% de los mensajes enviados. El Agente 20 participó en el 29,6% de las conversaciones (posiblemente un agente de soporte o supervisor)."
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KpiCard label="Agentes activos" value="2" sub="En el período analizado" icon="users" />
        <KpiCard label="Total msgs agentes" value={fmt(7291 + 653)} sub="Salientes del equipo" icon="send" />
        <KpiCard label="Convs. con humano" value={fmt(D.conAtencionHumana)} sub={`${D.pctHumana}% del total`} icon="message-square" variant="warning" />
        <KpiCard label="Solo bot" value={fmt(D.soloBot)} sub="Sin intervención humana" icon="bot" variant="success" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {D.agentes.map((a, i) => (
          <SectionCard key={i} title={a.nombre} subtitle={`Período: ${D.periodo}`}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {[
                { label: 'Mensajes enviados', value: fmt(a.msgs), icon: 'send' },
                { label: 'Conversaciones atendidas', value: fmt(a.convs), icon: 'message-square' },
                { label: 'Msgs por conversación', value: (a.msgs / a.convs).toFixed(1).replace('.', ','), icon: 'hash' },
                { label: 'Participación mensajes', value: `${((a.msgs / (7291+653))*100).toFixed(1).replace('.',',')}%`, icon: 'pie-chart' },
              ].map((stat, j) => (
                <div key={j} style={{ padding: '12px 14px', background: 'var(--gray-50)', borderRadius: 10, border: '1px solid var(--border-subtle)' }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>{stat.label}</div>
                  <div style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums', color: a.color }}>{stat.value}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-3)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Participación en mensajes</div>
              <div style={{ height: 8, background: 'var(--gray-100)', borderRadius: 9999, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${(a.msgs / (7291+653)) * 100}%`, background: a.color, borderRadius: 9999 }} />
              </div>
            </div>
          </SectionCard>
        ))}
      </div>

      <SectionCard title="Tipos de mensaje en el sistema" subtitle="Informe extendido · Abr 7–30, 2026">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {[
            { label: 'Inbound (cliente)', value: fmt(9121), pct: '36,0%', color: '#2E90FA' },
            { label: 'AI (bot)',           value: fmt(7250), pct: '28,6%', color: '#12B76A' },
            { label: 'Humano (agente)',   value: fmt(7153), pct: '28,2%', color: '#7D2574' },
            { label: 'Outbound manual',   value: fmt(1811), pct: '7,1%',  color: '#F79009' },
          ].map((t, i) => (
            <div key={i} style={{ padding: '14px 16px', background: 'var(--gray-50)', borderRadius: 10, border: `2px solid ${t.color}20` }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{t.label}</div>
              <div style={{ fontSize: 24, fontWeight: 800, fontVariantNumeric: 'tabular-nums', color: t.color }}>{t.value}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 3 }}>{t.pct} del total</div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

// ─── BOT PAGE ─────────────────────────────────────────────────────────────────

function BotPage() {
  const D = MOSTTO_DATA;
  const B = D.bot;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Bot vs. humano</div>

      <Alert level="warning"
        title="El bot escala el 100% de las conversaciones"
        body={`De ${fmt(B.totalConvs)} conversaciones con bot, ninguna fue resuelta automáticamente. Todas (${fmt(B.escaladaHumano)}) fueron derivadas a un agente humano. Esto indica que el bot funciona como enrutador, no como resolutor.`}
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
        <KpiCard label="Convs. con bot" value={fmt(B.conBot)} sub={`${((B.conBot/B.totalConvs)*100).toFixed(1).replace('.',',')}% del total`} icon="bot" />
        <KpiCard label="Resueltas por bot" value="0" sub="0% de resolución automática" icon="check-circle" variant="danger" />
        <KpiCard label="Escaladas a humano" value={fmt(B.escaladaHumano)} sub="100% de tasa de escalación" icon="arrow-up-right" variant="warning" />
        <KpiCard label="Msgs promedio AI/conv" value="9,4" sub="Mensajes del bot por conversación" icon="message-square" />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <SectionCard title="Clasificación de conversaciones" subtitle={`${fmt(B.totalConvs)} conversaciones totales`}>
          <DonutChart
            segments={[
              { value: B.escaladaHumano, color: '#7D2574' },
              { value: B.soloHumano,     color: '#29265B' },
              { value: B.sinRespuesta,   color: '#94A3B8' },
            ]}
            size={200}
            label={fmt(B.totalConvs)}
            sub="conversaciones"
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
            {[
              { label: 'Escalada a humano', value: B.escaladaHumano, color: '#7D2574' },
              { label: 'Solo humano (sin bot)', value: B.soloHumano, color: '#29265B' },
              { label: 'Sin respuesta', value: B.sinRespuesta, color: '#94A3B8' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 10, height: 10, borderRadius: 3, background: r.color, flexShrink: 0 }} />
                <span style={{ flex: 1, fontSize: 13, color: 'var(--fg-2)' }}>{r.label}</span>
                <span style={{ fontSize: 13, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{fmt(r.value)}</span>
                <span style={{ fontSize: 11, color: 'var(--fg-3)', minWidth: 40, textAlign: 'right' }}>{((r.value/B.totalConvs)*100).toFixed(1).replace('.',',')}%</span>
              </div>
            ))}
          </div>
        </SectionCard>

        <SectionCard title="Desglose de mensajes por tipo" subtitle="Informe extendido Abr 2026">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {[
              { label: 'Mensajes de clientes (inbound)', value: 9121, pct: 36.0, color: '#2E90FA' },
              { label: 'Mensajes del bot (AI)',           value: 7250, pct: 28.6, color: '#12B76A' },
              { label: 'Mensajes de agentes (humano)',    value: 7153, pct: 28.2, color: '#7D2574' },
              { label: 'Mensajes manuales outbound',      value: 1811, pct: 7.1,  color: '#F79009' },
            ].map((m, i) => (
              <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ fontSize: 13, color: 'var(--fg-2)', fontWeight: 500 }}>{m.label}</span>
                  <span style={{ fontSize: 13, fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{fmt(m.value)}</span>
                </div>
                <div style={{ height: 6, background: 'var(--gray-100)', borderRadius: 9999, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${m.pct}%`, background: m.color, borderRadius: 9999 }} />
                </div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{m.pct.toFixed(1).replace('.',',')}% del total</div>
              </div>
            ))}
          </div>
        </SectionCard>
      </div>

      <SectionCard title="Menú del bot — opciones más usadas" subtitle="860 veces mostrado · 712 selecciones · Tasa de selección: 82,8%">
        <BarChart
          data={D.menu.map(m => ({ label: m.label.split(' – ')[1] || m.label, value: m.value, color: '#7D2574' }))}
          height={180}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginTop: 14 }}>
          {D.menu.map((m, i) => (
            <div key={i} style={{ padding: '10px 12px', background: 'var(--gray-50)', borderRadius: 8, border: '1px solid var(--border-subtle)' }}>
              <div style={{ fontSize: 12, color: 'var(--fg-2)', marginBottom: 4 }}>{m.label}</div>
              <div style={{ fontSize: 18, fontWeight: 800, fontVariantNumeric: 'tabular-nums', color: 'var(--fg-1)' }}>{m.value}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{m.pct.toFixed(1).replace('.',',')}%</div>
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

// ─── MENU PAGE ────────────────────────────────────────────────────────────────

function MenuPage() {
  const D = MOSTTO_DATA;
  return <BotPage />;
}

// ─── INSIGHTS PAGE ────────────────────────────────────────────────────────────

function InsightsPage() {
  const D = MOSTTO_DATA;

  const insights = [
    {
      level: 'warning',
      title: 'Bot sin capacidad de resolución',
      body: 'El 100% de las conversaciones que inician con bot se escalan a humanos. El bot actúa como un enrutador (menú de opciones), no como resolutor. Considerar agregar respuestas automáticas para los temas más frecuentes: Entrega/Flete (287 convs), Horarios/Sucursales (158 convs), Seguimiento/Tracking (104 convs).',
      action: 'Ver temas frecuentes',
    },
    {
      level: 'info',
      title: 'Alto porcentaje de abandono del menú (17,2%)',
      body: 'De 860 veces que se mostró el menú del bot, 148 usuarios no seleccionaron ninguna opción. Revisar si las opciones son claras y si hay una opción de "ninguna de las anteriores" o texto libre.',
      action: 'Ver menú',
    },
    {
      level: 'success',
      title: 'Tiempo de primera respuesta excelente',
      body: 'El 91% de los clientes recibe su primera respuesta en menos de 1 minuto. La mediana es de 0,1 minutos (~6 segundos). Esto posiciona muy bien al equipo en términos de velocidad de atención.',
      action: null,
    },
    {
      level: 'warning',
      title: 'Miércoles concentra el 24% del tráfico semanal',
      body: 'Con 4.168 mensajes, los miércoles son el día más activo por amplio margen. Se recomienda asegurar cobertura completa de agentes ese día, especialmente en el horario 10:00–15:00 hs.',
      action: 'Ver horarios',
    },
    {
      level: 'warning',
      title: '19 conversaciones sin respuesta',
      body: `${((19/769)*100).toFixed(1)}% de las conversaciones (19 de 769) quedaron sin respuesta. Aunque es un porcentaje bajo, cada conversación sin respuesta es un cliente que no fue atendido. Revisar si hay un proceso de seguimiento para estos casos.`,
      action: null,
    },
    {
      level: 'info',
      title: 'Concentración geográfica en Entre Ríos',
      body: 'El 54,4% de las menciones geográficas corresponden a Entre Ríos (713 de 1.329). Buenos Aires/AMBA aporta el 22%, y Rosario/Santa Fe el 18,7%. Esto sugiere que Mostto tiene fuerte presencia en el NEA y debería reforzar operaciones en esa región.',
      action: null,
    },
    {
      level: 'success',
      title: 'Fin de semana con actividad mínima',
      body: 'Sábados y domingos concentran apenas el 1,1% del tráfico total (261 mensajes). Esto permite gestionar turnos de fin de semana con mínima cobertura o delegar al bot con un mensaje de "fuera de horario".',
      action: null,
    },
    {
      level: 'danger',
      title: 'Conversaciones de duración extrema',
      body: 'El 23,5% de las conversaciones dura más de 24 horas (181 de 769). La conversación más larga supera los 27.000 minutos (~19 días). Esto puede indicar conversaciones abandonadas que no fueron cerradas correctamente. Implementar cierre automático por inactividad.',
      action: 'Ver tiempos',
    },
  ];

  const faqs = [
    { q: '¿Cuántas conversaciones se atendieron en el período?', a: '655 conversaciones en datos mostto (Abr 7 – May 4) y 769 conversaciones en el informe extendido (Abr 7–30). La diferencia se debe al alcance del período.' },
    { q: '¿Cuánto tarda el equipo en responder?', a: 'La mediana de primera respuesta es 0,1 minutos (~6 segundos). El 91% responde en menos de 1 minuto. El promedio (84,7 min) está distorsionado por conversaciones fuera de horario laboral.' },
    { q: '¿Qué consulta recibe más el equipo?', a: 'Entrega y flete lidera con 287 conversaciones (43,8% del total), seguido por Presupuesto/Cotización (24,7%) y Horarios/Sucursales (24,1%).' },
    { q: '¿Cuál es el horario de mayor demanda?', a: 'El pico es a las 14:00 hs. La ventana 10:00–18:00 hs concentra el 78% del tráfico. Los miércoles son el día más activo con 4.168 mensajes.' },
    { q: '¿El bot resuelve conversaciones?', a: 'No. El bot funciona como enrutador: muestra un menú de opciones y deriva todas las conversaciones (100%) a agentes humanos. La tasa de resolución automática es 0%.' },
    { q: '¿Qué porcentaje de clientes viene de Entre Ríos?', a: 'Entre Ríos lidera con el 54,4% de las menciones geográficas (713 de 1.329), seguido por Buenos Aires/AMBA (22,1%) y Rosario/Santa Fe (18,4%).' },
    { q: '¿Cuántos agentes hay y qué carga tienen?', a: 'Hay 2 agentes activos. El Agente Principal manejó 7.291 mensajes en 650 conversaciones (92,3% de la carga). El Agente 20 envió 653 mensajes en 228 conversaciones.' },
    { q: '¿Cuánto dura una conversación típica?', a: 'La duración mediana es de 179,8 minutos (~3 horas). El 63,5% de las conversaciones se resuelve en 30 minutos a 24 horas. El 23,5% supera las 24 horas.' },
  ];

  const [openFaq, setOpenFaq] = React.useState(null);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.02em' }}>Alertas y mejoras</div>

      {/* Insights */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 4 }}>Análisis y recomendaciones</div>
        {insights.map((ins, i) => (
          <Alert key={i} level={ins.level} title={ins.title} body={ins.body} action={ins.action} />
        ))}
      </div>

      {/* FAQs */}
      <SectionCard title="Preguntas frecuentes del dashboard" subtitle="Respuestas basadas en los datos reales del período">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {faqs.map((faq, i) => (
            <div key={i} style={{ borderBottom: i < faqs.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
              <button
                onClick={() => setOpenFaq(openFaq === i ? null : i)}
                style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  width: '100%', padding: '14px 4px', background: 'none', border: 'none',
                  cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-sans)',
                  gap: 12,
                }}
              >
                <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)' }}>{faq.q}</span>
                <span style={{ color: 'var(--fg-3)', flexShrink: 0, transition: 'transform 180ms', transform: openFaq === i ? 'rotate(180deg)' : 'rotate(0)' }}>
                  <Icon name="chevron-down" size={16} />
                </span>
              </button>
              {openFaq === i && (
                <div style={{ padding: '0 4px 14px', fontSize: 13, color: 'var(--fg-2)', lineHeight: '20px' }}>
                  {faq.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </SectionCard>
    </div>
  );
}

Object.assign(window, {
  OverviewPage, VolumenPage, TopicsPage, TimingPage,
  HeatmapPage, GeoPage, AgentsPage, BotPage, MenuPage, InsightsPage
});