// Ticket Detail — full info view for one tenant request (Step 6)
// Reads window.BW_OPEN_TICKET (set before navigating here).

const TicketDetailPage = ({ onNav }) => {
  const D = window.BW_DATA;
  const openId = window.BW_OPEN_TICKET || (D.PM_TICKETS && D.PM_TICKETS[0]?.id);
  const ticket = D.PM_TICKETS.find(t => t.id === openId) || D.PM_TICKETS[0];

  if (!ticket) {
    return (
      <div style={{ padding: 40, textAlign:'center', color:'var(--color-text-muted)' }}>
        Ticket no encontrado.
        <div style={{ marginTop: 12 }}>
          <button className="btn btn-sm" onClick={() => onNav('tickets')}>Volver a Tickets</button>
        </div>
      </div>
    );
  }

  const cat = (D.PM_CATEGORIES && D.PM_CATEGORIES[ticket.category]) || { color:'var(--color-text-muted)', bg:'var(--color-surface-2)', icon:'Sparkle' };
  const CatIc = I[cat.icon] || I.Sparkle;
  const stateMap = {
    open:        { cls: 'amber',  label: 'Abierto'      },
    scheduled:   { cls: 'teal',   label: 'Programado'   },
    in_progress: { cls: 'blue',   label: 'En curso'     },
    follow_up:   { cls: 'violet', label: 'Seguimiento'  },
    resolved:    { cls: 'green',  label: 'Resuelto'     },
    escalated:   { cls: 'red',    label: 'Escalado'     },
  };
  const st = stateMap[ticket.state] || stateMap.open;

  const fu = D.PM_FOLLOWUPS && D.PM_FOLLOWUPS[ticket.id];
  const transcript = D.PM_TRANSCRIPTS[ticket.id] || D.PM_TRANSCRIPTS['PM-1042'] || [];
  const dispatch = D.DISPATCHES.find(d => d.ticket === ticket.id);

  // Build cronología from available data
  const events = buildLifecycle(ticket, fu, dispatch);

  return (
    <div className="page-enter" style={{ padding: '24px 32px 40px' }}>

      {/* Back + breadcrumb-style header */}
      <button onClick={() => onNav('tickets')} className="btn btn-ghost btn-sm" style={{ paddingLeft: 0, marginBottom: 12 }}>
        <I.ArrowR size={14} style={{ transform:'rotate(180deg)' }}/> Volver a Tickets
      </button>

      {/* Header */}
      <div style={{
        display:'flex', alignItems:'flex-start', gap: 18,
        padding:'20px 24px',
        background:'white', border:'1px solid var(--color-border)',
        borderRadius: 14,
        marginBottom: 16,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14, flex:'0 0 56px',
          background: cat.bg, color: cat.color,
          display:'grid', placeItems:'center',
        }}>
          <CatIc size={28}/>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 6 }}>
            <span className="mono" style={{ fontSize: 12, color:'var(--color-text-muted)' }}>{ticket.id}</span>
            <span className={'badge ' + st.cls + ' dot'} style={{ fontSize: 11 }}>{st.label}</span>
            <span style={{
              fontSize: 9.5, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase',
              padding:'2px 6px', borderRadius: 4,
              background: ticket.priority==='high'?'var(--color-danger-light)':ticket.priority==='medium'?'var(--color-warning-light)':'var(--color-surface-2)',
              color:     ticket.priority==='high'?'var(--color-danger)':     ticket.priority==='medium'?'var(--color-warning)':     'var(--color-text-secondary)',
            }}>{ticket.priority}</span>
            <span style={{ fontSize: 12, color:'var(--color-text-muted)' }}>· última actualización {ticket.last}</span>
          </div>
          <h1 style={{ fontFamily:'var(--font-ui)', fontWeight: 600, fontSize: 24, margin: 0, letterSpacing:'-0.015em', color:'var(--brand-navy)', lineHeight: 1.15 }}>{ticket.issue}</h1>
          <div style={{ display:'flex', gap: 16, marginTop: 10, fontSize: 13, color:'var(--color-text-secondary)' }}>
            <span><strong style={{ color:'var(--color-text-primary)' }}>{ticket.tenant}</strong> · {ticket.unit}</span>
            <span>·</span>
            <span>{ticket.category} · {ticket.subcategory}</span>
            <span>·</span>
            <span className="mono" style={{ fontSize: 12 }}>{ticket.property}</span>
          </div>
        </div>
        <div style={{ display:'flex', gap: 6 }}>
          <button className="btn btn-sm" onClick={() => onNav('conversations')}><I.Chat size={13}/> Hilo</button>
          <button className="btn btn-sm" onClick={() => onNav('technicians')}><I.Wrench size={13}/> Técnico</button>
          <button className="icon-btn"><I.Dots size={16}/></button>
        </div>
      </div>

      {/* Main grid */}
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap: 16 }}>

        {/* ── LEFT ── */}
        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>

          {/* Identificación IA card */}
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title" style={{ display:'flex', alignItems:'center', gap: 8 }}>
                  <I.Sparkle size={14} style={{ color:'var(--color-accent)' }}/> Identificación IA
                </div>
                <div className="card-sub">Análisis automatizado del problema</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize: 10.5, color:'var(--color-text-muted)', textTransform:'uppercase', letterSpacing:'0.08em' }}>Confianza</div>
                <div style={{ fontFamily:'var(--font-mono)', fontSize: 14, fontWeight: 600, color: ticket.confidence >= 0.9 ? 'var(--color-success)' : 'var(--color-warning)' }}>
                  {Math.round(ticket.confidence * 100)}%
                </div>
              </div>
            </div>
            <div className="card-body" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: '14px 24px' }}>
              <TDField label="Tipo"         value={ticket.category}/>
              <TDField label="Subcategoría" value={ticket.subcategory}/>
              <TDField label="Componente"   value={ticket.component}/>
              <TDField label="Recomendado"  value={ticket.recommendedSpecialty}/>
              <div style={{ gridColumn:'1 / -1' }}>
                <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--color-text-muted)', marginBottom: 6 }}>Síntomas detectados</div>
                <div style={{ display:'flex', gap: 6, flexWrap:'wrap' }}>
                  {ticket.symptoms.map((s, i) => (
                    <span key={i} style={{
                      fontSize: 11.5, fontWeight: 500,
                      padding:'3px 9px', borderRadius: 999,
                      background:'var(--color-surface-2)', color:'var(--color-text-primary)',
                      border:'1px solid var(--color-border)',
                    }}>{s}</span>
                  ))}
                </div>
              </div>
              <div style={{ gridColumn:'1 / -1', padding:'10px 12px', background:'var(--color-surface)', borderRadius: 8, border:'1px dashed var(--color-border)' }}>
                <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--color-text-muted)', marginBottom: 4 }}>Razonamiento de urgencia</div>
                <div style={{ fontSize: 13, color:'var(--color-text-primary)' }}>{ticket.urgencyReason}</div>
              </div>
            </div>
          </div>

          {/* Cronología */}
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Cronología</div>
                <div className="card-sub">{events.length} eventos · todos los cambios de estado</div>
              </div>
            </div>
            <div className="card-body">
              <Lifecycle events={events}/>
            </div>
          </div>

          {/* Conversación resumida */}
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Conversación con inquilino</div>
                <div className="card-sub">Últimos mensajes · canal {ticket.channel === 'whatsapp' ? 'WhatsApp' : ticket.channel === 'phone' ? 'Telefonía' : 'Email'}</div>
              </div>
              <button className="btn btn-sm" onClick={() => onNav('conversations')}>Ver hilo completo <I.ArrowRight size={12}/></button>
            </div>
            <div className="card-body">
              <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
                {transcript.slice(-4).map((m, i) => {
                  const isAi = m.who === 'agent';
                  return (
                    <div key={i} style={{ display:'flex', justifyContent: isAi ? 'flex-end' : 'flex-start' }}>
                      <div style={{
                        maxWidth: '78%',
                        padding:'10px 14px',
                        borderRadius: isAi ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
                        fontSize: 13.5, lineHeight: 1.5,
                        background: isAi ? 'var(--color-accent-light)' : 'white',
                        border: isAi ? 'none' : '1px solid var(--color-border)',
                      }}>
                        {m.text}
                        <div style={{ fontSize: 11, color:'var(--color-text-muted)', marginTop: 4, fontFamily:'var(--font-mono)' }}>
                          {isAi ? 'IA' : ticket.tenant.split(' ')[0]} · {m.t}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Follow-up timeline */}
          {fu && (
            <div className="card">
              <div className="card-head">
                <div>
                  <div className="card-title">Seguimiento de visita</div>
                  <div className="card-sub">{fu.visitDate}</div>
                </div>
              </div>
              <div className="card-body">
                <SimpleFollowupTimeline fu={fu}/>
              </div>
            </div>
          )}
        </div>

        {/* ── RIGHT ── */}
        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>

          {/* Inquilino */}
          <div className="card">
            <div className="card-head" style={{ padding: '14px 20px' }}>
              <div><div className="card-title">Inquilino</div></div>
            </div>
            <div className="card-body" style={{ padding: '14px 20px', display:'flex', flexDirection:'column', gap: 10 }}>
              <TDRow icon="User"  label={ticket.tenant} sub="Inquilino activo"/>
              <TDRow icon="Home"  label={ticket.unit}/>
              <TDRow icon="Phone" label={ticket.phone}/>
              <TDRow icon="Mail"  label={ticket.tenant.toLowerCase().replace(/\s+/g,'.') + '@tenant.es'}/>
              <TDRow icon="Tag"   label={ticket.property} mono/>
              <TDRow icon="Globe" label="Español · EN"/>
            </div>
          </div>

          {/* Técnico asignado */}
          <div className="card">
            <div className="card-head" style={{ padding: '14px 20px' }}>
              <div><div className="card-title">Técnico asignado</div></div>
            </div>
            <div className="card-body" style={{ padding: '14px 20px' }}>
              {fu && fu.technicianAssigned ? (
                <>
                  <div style={{ display:'flex', alignItems:'center', gap: 12, marginBottom: 12 }}>
                    <div style={{ width: 40, height: 40, borderRadius: 10, background:'var(--color-accent-light)', color:'var(--color-accent)', display:'grid', placeItems:'center' }}>
                      <I.Wrench size={18}/>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{fu.technicianAssigned.name}</div>
                      <div style={{ fontSize: 12, color:'var(--color-text-muted)' }}>{fu.technicianAssigned.company}</div>
                    </div>
                  </div>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10, fontSize: 12.5 }}>
                    <div>
                      <div style={{ fontSize: 11, color:'var(--color-text-muted)' }}>Rating</div>
                      <div style={{ display:'flex', alignItems:'center', gap: 3, fontFamily:'var(--font-mono)', fontWeight: 600 }}>
                        <I.Star size={11} style={{ color:'var(--color-warning)', fill:'var(--color-warning)' }}/>{fu.technicianAssigned.rating}
                      </div>
                    </div>
                    <div>
                      <div style={{ fontSize: 11, color:'var(--color-text-muted)' }}>Visita</div>
                      <div style={{ fontWeight: 500 }}>{fu.visitDate}</div>
                    </div>
                  </div>
                  <div style={{ display:'flex', gap: 6, marginTop: 12 }}>
                    {dispatch && (
                      <button className="btn btn-sm" style={{ flex: 1, justifyContent:'center' }} onClick={() => onNav('technicians')}>Ver dispatch</button>
                    )}
                    <button className="btn btn-sm" style={{ flex: 1, justifyContent:'center' }}>Llamar</button>
                  </div>
                </>
              ) : (
                <>
                  <div style={{ fontSize: 13, color:'var(--color-text-muted)', marginBottom: 12 }}>Sin técnico asignado.</div>
                  <button className="btn btn-primary btn-sm" style={{ width:'100%', justifyContent:'center' }} onClick={() => onNav('technicians')}>
                    <I.Send size={13}/> Asignar técnico
                  </button>
                </>
              )}
            </div>
          </div>

          {/* Coste estimado */}
          <div className="card">
            <div className="card-head" style={{ padding: '14px 20px' }}>
              <div><div className="card-title">Coste estimado</div></div>
            </div>
            <div className="card-body" style={{ padding: '14px 20px' }}>
              <CostBreakdown ticket={ticket}/>
            </div>
          </div>

          {/* Acciones */}
          <div className="card">
            <div className="card-head" style={{ padding: '14px 20px' }}>
              <div><div className="card-title">Acciones</div></div>
            </div>
            <div className="card-body" style={{ padding: '12px 14px', display:'flex', flexDirection:'column', gap: 6 }}>
              <ActionBtn icon="Refresh" label="Reasignar técnico" onClick={() => onNav('technicians')}/>
              <ActionBtn icon="ArrowRight" label="Escalar a supervisor"/>
              <ActionBtn icon="Send" label="Reenviar encuesta"/>
              <ActionBtn icon="Check" label="Cerrar ticket"/>
              <ActionBtn icon="X" label="Cancelar ticket" danger/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ─── helpers ───

const TDField = ({ label, value }) => (
  <div>
    <div style={{ fontSize: 10.5, fontWeight: 600, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--color-text-muted)', marginBottom: 3 }}>{label}</div>
    <div style={{ fontSize: 13.5, color:'var(--color-text-primary)' }}>{value}</div>
  </div>
);

const TDRow = ({ icon, label, sub, mono }) => {
  const Ic = I[icon];
  return (
    <div style={{ display:'flex', alignItems:'flex-start', gap: 10 }}>
      {Ic && <Ic size={14} style={{ color:'var(--color-text-muted)', marginTop: 2, flex:'0 0 14px' }}/>}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, color:'var(--color-text-primary)', fontFamily: mono ? 'var(--font-mono)' : 'inherit' }} className="truncate">{label}</div>
        {sub && <div style={{ fontSize: 11.5, color:'var(--color-text-muted)' }}>{sub}</div>}
      </div>
    </div>
  );
};

const ActionBtn = ({ icon, label, danger, onClick }) => {
  const Ic = I[icon];
  return (
    <button onClick={onClick} style={{
      display:'flex', alignItems:'center', gap: 10,
      padding:'10px 12px', borderRadius: 8,
      background:'transparent', border:'1px solid transparent',
      color: danger ? 'var(--color-danger)' : 'var(--color-text-primary)',
      cursor:'pointer', fontSize: 13.5, textAlign:'left', width:'100%',
    }}
      onMouseEnter={e => e.currentTarget.style.background = 'var(--color-surface)'}
      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
    >
      {Ic && <Ic size={14}/>}<span style={{ flex: 1 }}>{label}</span><I.ArrowR size={12} style={{ color:'var(--color-text-muted)' }}/>
    </button>
  );
};

// ─── cronología ───

function buildLifecycle(ticket, fu, dispatch) {
  const out = [];
  out.push({
    t: ticket.last ? `Hace ${ticket.last}` : 'Inicio',
    actor: 'IA', actorColor:'var(--color-accent)',
    title: 'Solicitud recibida', desc: `Canal ${ticket.channel === 'whatsapp' ? 'WhatsApp' : ticket.channel === 'phone' ? 'Telefonía' : 'Email'}.`,
    icon:'Chat',
  });
  out.push({
    t: 'A los pocos seg.',
    actor: 'IA', actorColor:'var(--color-accent)',
    title: 'Problema identificado',
    desc: `${ticket.category} · ${ticket.subcategory}. Confianza ${Math.round(ticket.confidence * 100)}%.`,
    icon:'Sparkle',
  });
  if (dispatch) {
    out.push({
      t: dispatch.sentAt,
      actor: 'IA', actorColor:'var(--color-accent)',
      title: 'Dispatch enviado al técnico',
      desc: dispatch.technician,
      icon:'Send',
    });
    if (dispatch.state === 'confirmed') {
      out.push({
        t: `Después de ${dispatch.sentAt.replace(/^Hoy /,'').replace(/^Ayer /,'')}…`,
        actor: 'Técnico', actorColor:'var(--color-success)',
        title: 'Disponibilidad confirmada',
        desc: 'ETA ' + dispatch.eta,
        icon:'Check',
      });
    }
  }
  if (fu && fu.steps) {
    fu.steps.forEach(s => {
      if (s.state === 'sent' || s.state === 'responded') {
        out.push({
          t: s.when,
          actor: 'IA', actorColor:'var(--color-accent)',
          title: s.label, desc: `Enviado por ${s.channel === 'whatsapp' ? 'WhatsApp' : s.channel === 'email' ? 'Email' : 'SMS'}.${s.response ? ' Inquilino respondió: \u201C' + s.response + '\u201D.' : ''}`,
          icon: s.stage === 'T+1' ? 'Star' : 'Send',
          rating: s.rating,
        });
      }
    });
  }
  if (ticket.state === 'resolved') {
    out.push({
      t: 'Cierre',
      actor: 'IA', actorColor:'var(--color-success)',
      title: 'Ticket resuelto',
      desc: 'Servicio completado y validado por el inquilino.',
      icon:'Check',
    });
  }
  return out;
}

const Lifecycle = ({ events }) => (
  <div style={{ position:'relative', paddingLeft: 8 }}>
    {events.map((e, i) => {
      const isLast = i === events.length - 1;
      const Ic = I[e.icon] || I.Sparkle;
      return (
        <div key={i} style={{ position:'relative', paddingLeft: 28, paddingBottom: isLast ? 0 : 18 }}>
          {!isLast && <div style={{ position:'absolute', left: 9, top: 22, bottom: -2, width: 2, background:'var(--color-border)' }}/>}
          <div style={{
            position:'absolute', left: 0, top: 0,
            width: 20, height: 20, borderRadius:'50%',
            background:'white', border: '2px solid ' + e.actorColor,
            color: e.actorColor,
            display:'grid', placeItems:'center',
          }}><Ic size={10}/></div>
          <div style={{ display:'flex', alignItems:'baseline', gap: 8, marginBottom: 4 }}>
            <span style={{ fontSize: 14, fontWeight: 600, color:'var(--color-text-primary)' }}>{e.title}</span>
            {e.rating != null && (
              <span style={{ display:'inline-flex', alignItems:'center', gap: 2 }}>
                {[1,2,3,4,5].map(n => (
                  <I.Star key={n} size={11} style={{ color: n <= e.rating ? 'var(--color-warning)' : 'var(--color-border-strong)', fill: n <= e.rating ? 'var(--color-warning)' : 'transparent' }}/>
                ))}
              </span>
            )}
            <span style={{ marginLeft:'auto', fontSize: 11.5, color:'var(--color-text-muted)', fontFamily:'var(--font-mono)' }}>{e.t}</span>
          </div>
          <div style={{ fontSize: 12.5, color:'var(--color-text-secondary)', lineHeight: 1.5 }}>{e.desc}</div>
          <div style={{ fontSize: 10.5, color: e.actorColor, fontWeight: 600, textTransform:'uppercase', letterSpacing:'0.06em', marginTop: 4 }}>{e.actor}</div>
        </div>
      );
    })}
  </div>
);

// Simple follow-up timeline (compact version of the conversations panel's)
const SimpleFollowupTimeline = ({ fu }) => {
  const stateStyle = {
    sent:      { bg:'var(--color-accent-light)',   fg:'var(--color-accent)',   label:'Enviado'     },
    pending:   { bg:'var(--color-warning-light)',  fg:'var(--color-warning)',  label:'Pendiente'   },
    scheduled: { bg:'var(--color-surface-2)',      fg:'var(--color-text-secondary)', label:'Programado' },
    responded: { bg:'var(--color-success-light)',  fg:'var(--color-success)',  label:'Respondido'  },
    skipped:   { bg:'var(--color-surface-2)',      fg:'var(--color-text-muted)', label:'Omitido'    },
  };
  return (
    <div style={{ display:'flex', gap: 10 }}>
      {fu.steps.map((s, i) => {
        const ss = stateStyle[s.state] || stateStyle.scheduled;
        return (
          <div key={i} style={{ flex: 1, padding:'12px 14px', borderRadius: 10, border:'1px solid var(--color-border)', background:'var(--color-surface)' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 6, marginBottom: 6 }}>
              <span className="mono" style={{ fontSize: 10.5, fontWeight: 600, color:'var(--color-text-muted)' }}>{s.stage}</span>
              <span style={{
                fontSize: 9, fontWeight: 700, letterSpacing:'0.08em', textTransform:'uppercase',
                padding:'1px 6px', borderRadius: 4,
                background: ss.bg, color: ss.fg, marginLeft:'auto',
              }}>{ss.label}</span>
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>{s.label}</div>
            <div style={{ fontSize: 11, color:'var(--color-text-muted)', marginTop: 2 }}>{s.when}</div>
            {s.rating != null && (
              <div style={{ display:'flex', alignItems:'center', gap: 2, marginTop: 8 }}>
                {[1,2,3,4,5].map(n => (
                  <I.Star key={n} size={11} style={{ color: n <= s.rating ? 'var(--color-warning)' : 'var(--color-border-strong)', fill: n <= s.rating ? 'var(--color-warning)' : 'transparent' }}/>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

// ─── cost ───

const CostBreakdown = ({ ticket }) => {
  // Mock estimate based on category
  const rateByCat = { 'HVAC':45, 'Fontanería':38, 'Electricidad':42, 'Electrodoméstico':52, 'Carpintería':42, 'Seguridad':80, 'Sanidad':180, 'Exterior':32 };
  const rate = rateByCat[ticket.category] || 40;
  const hours = ticket.category === 'Seguridad' ? 1 : ticket.category === 'Sanidad' ? 1 : ticket.priority === 'high' ? 2 : 1.5;
  const parts = ticket.category === 'HVAC' ? 95 : ticket.category === 'Fontanería' ? 28 : ticket.category === 'Electrodoméstico' ? 65 : 12;
  const labour = Math.round(rate * hours);
  const total = labour + parts;
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
      <Row label={`Mano de obra · ${hours}h × ${rate} €/h`} value={`${labour} €`}/>
      <Row label="Piezas / desplazamiento" value={`${parts} €`}/>
      <div style={{ borderTop:'1px solid var(--color-border)', paddingTop: 8, marginTop: 4, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
        <span style={{ fontSize: 12, color:'var(--color-text-secondary)', fontWeight: 500 }}>Total estimado</span>
        <span style={{ fontFamily:'var(--font-ui)', fontWeight: 600, fontSize: 22, color:'var(--brand-navy)' }}>{total} €</span>
      </div>
      <div style={{ fontSize: 11, color:'var(--color-text-muted)', lineHeight: 1.5, marginTop: 4 }}>
        Estimación pre-visita. El coste final se ajusta tras la intervención.
      </div>
    </div>
  );
};

const Row = ({ label, value }) => (
  <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12.5 }}>
    <span style={{ color:'var(--color-text-secondary)' }}>{label}</span>
    <span style={{ color:'var(--color-text-primary)', fontWeight: 500 }} className="mono">{value}</span>
  </div>
);

window.TicketDetailPage = TicketDetailPage;