// Modules — the breadth of the platform with mini-mockups
// Mix of large feature cards with embedded UI mockups + smaller text-only cards.

const Modules = () => {
  return (
    <section id="producto" style={{ padding:'140px 0', background:'var(--bg-2)', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="03" label="La plataforma" style={{ marginBottom: 28 }}/>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:60, alignItems:'end', marginBottom:64 }} className="mod-head">
          <h2 className="serif" style={{
            fontSize:'clamp(36px, 4.5vw, 60px)', lineHeight:1.02,
            letterSpacing:'-0.02em', fontWeight:400, margin:0, textWrap:'balance'
          }}>
            Todo lo que tu clínica necesita,<br/>
            <span style={{ fontStyle:'italic', color:'var(--primary)' }}>en una sola pestaña.</span>
          </h2>
          <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55, margin:0, maxWidth:480 }}>
            Sin integraciones a medias. Sin software clínico aquí y ERP allá.
            Agenda, historia, caja, comunicaciones e IA — un solo producto, una sola fuente de verdad.
          </p>
        </div>

        {/* Featured row: 2 big cards */}
        <div style={{ display:'grid', gridTemplateColumns:'1.15fr 0.85fr', gap:20, marginBottom: 20 }} className="mod-row">
          <FeatureCard
            tag="Agenda"
            title="Flowboard en tiempo real."
            body="Tablero Kanban del día: espera → consulta → tratamiento → cirugía → recuperación → alta. Cada cita reserva vet, sala y equipo y bloquea conflictos."
            mockup={<FlowboardMock/>}
            accent="var(--primary)"
          />
          <FeatureCard
            tag="Comunicaciones"
            title="WhatsApp, sin pegar a mano."
            body="Recordatorios T-24h y T-2h, tutoriales pre-visita, recetas y re-engagement nocturno. Plantillas con variables por tenant."
            mockup={<WhatsappMock/>}
            accent="#25D366"
          />
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap:20, marginBottom: 20 }} className="mod-row">
          <FeatureCard
            tag="Caja & ERP"
            title="Charge capture automático."
            body="Cada procedure que registras en la historia clínica genera una venta DRAFT lista para cobrar. Catálogo de productos, proveedores con OCR Gemini Vision."
            mockup={<CajaMock/>}
            accent="var(--accent)"
          />
          <FeatureCard
            tag="Historia clínica"
            title="SOAP estructurado, sin teclear."
            body="Dicta libremente. AI Scribe convierte tu voz en Subjetivo / Objetivo / Diagnóstico / Plan + sugiere procedures del catálogo."
            mockup={<SoapMock/>}
            accent="var(--primary-2)"
          />
        </div>

        {/* Third featured row: Hotel & Peluquería */}
        <div style={{ display:'grid', gridTemplateColumns:'1.15fr 0.85fr', gap:20, marginBottom: 20 }} className="mod-row">
          <FeatureCard
            tag="Hotel"
            title="Pensión con bitácora diaria."
            body="Reservas con conflict-check por habitación. Check-in/out con foto. Log diario de apetito, comportamiento, deposiciones y medicación. Cobro automático por días reales."
            mockup={<HotelMock/>}
            accent="var(--primary-2)"
          />
          <FeatureCard
            tag="Peluquería"
            title="Estética con foto antes/después."
            body="Servicios por talla, addons, recordatorios automáticos cada 4-6 semanas según tipo. Foto antes/después adjunta a cada cita."
            mockup={<GroomingMock/>}
            accent="var(--accent)"
          />
        </div>

        {/* Fourth featured row: TutorBot & Campaigns */}
        <div style={{ display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap:20, marginBottom: 20 }} className="mod-row">
          <FeatureCard
            tag="Campañas"
            title="Retención dirigida por segmentos."
            body="Reglas por última visita, especie, edad y status del tutor. Preview de destinatarios antes de enviar. Tracking de respuestas, conversiones y opt-outs."
            mockup={<CampaignsMock/>}
            accent="var(--primary)"
          />
          <FeatureCard
            tag="TutorBot"
            title="Asistente WhatsApp para tutores."
            body="Detecta intent (tratamiento, vacuna, alimentación, próxima cita, emergencia) por reglas + Gemini Flash. Bloquea reservas en sospecha de emergencia y escala a humano."
            mockup={<TutorBotMock/>}
            accent="#25D366"
          />
        </div>

        {/* Fifth featured row: Hospitalización & Telemedicina */}
        <div style={{ display:'grid', gridTemplateColumns:'1.15fr 0.85fr', gap:20, marginBottom: 20 }} className="mod-row">
          <FeatureCard
            tag="Hospitalización"
            title="UCI con hoja de órdenes."
            body="Pacientes internados con jaula asignada, signos vitales por turno, medicación pautada y evoluciones. Alertas cuando un parámetro sale del rango definido."
            mockup={<HospitalMock/>}
            accent="var(--warn)"
          />
          <FeatureCard
            tag="Telemedicina"
            title="Consulta remota integrada."
            body="Sesiones con vet asignado y enlace al tutor. Notas registradas en historia clínica, cobro automático al cerrar. Triaje IA decide si requiere derivar a presencial."
            mockup={<TelemedMock/>}
            accent="var(--primary)"
          />
        </div>

        {/* Sixth featured row: Care Tips & Seguros */}
        <div style={{ display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap:20, marginBottom: 20 }} className="mod-row">
          <FeatureCard
            tag="Seguros"
            title="Pólizas y reclamos integrados."
            body="Carga la póliza por mascota con cobertura, deducible y vigencia. Submit de claims al backoffice de la aseguradora con adjuntos de la historia."
            mockup={<InsuranceMock/>}
            accent="var(--ink-2)"
          />
          <FeatureCard
            tag="Care Tips"
            title="Biblioteca de cuidados curada."
            body="Tips filtrables por especie, edad, tópico y temporada. Sugerencias automáticas por mascota. Convierte cualquier tip en campaña recurrente con un toque."
            mockup={<CareTipsMock/>}
            accent="var(--accent)"
          />
        </div>

        {/* Smaller modules grid */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }} className="mod-small-grid">
          {[
            { tag:'Booking público', t:'Reserva online con triaje IA', d:'/booking/tu-clinica con bloqueo automático para emergencias.' },
            { tag:'Laboratorio', t:'Lectura HL7 ORU^R01', d:'Resultados externos pueblan LabResult; visor con análisis Gemini.' },
            { tag:'Imagen médica', t:'Visor de radiografías con IA', d:'Análisis de hallazgos, comparativa entre estudios y exportación.' },
            { tag:'Ratings internos', t:'Notas privadas del staff', d:'Calificación de tutor y mascota visible solo al equipo: puntualidad, temperamento.' },
            { tag:'Portal tutor', t:'Historial accesible al cliente', d:'Receta, vacunas, próximas citas, calendario nativo. Bot conversacional incluido.' },
            { tag:'Multi-tenant', t:'Schema-per-tenant aislado', d:'Cada clínica con su slug, plantillas WhatsApp e integraciones cifradas.' },
            { tag:'Reportes', t:'Retención y cohorts en vivo', d:'Exporta tutores y ventas a CSV. KPIs por médico, sucursal, mes.' },
            { tag:'SuperAdmin', t:'Configuración Maestra de APIs', d:'Gemini, Stripe, Telegram, Meta, Lab — cifradas con AES-256-GCM.' },
            { tag:'Onboarding', t:'Wizard auto-detectado', d:'5 pasos guiados para clínicas nuevas: sucursal, salas, equipo, plantillas, integraciones.' },
          ].map((m,i) => (
            <div key={i} style={{
              background:'#fff', border:'1px solid var(--line)', borderRadius:12,
              padding:'22px 22px 24px',
            }}>
              <Pill tone="default" style={{ marginBottom:14 }}>{m.tag}</Pill>
              <h4 className="serif" style={{ margin:'0 0 8px', fontSize:21, fontWeight:500, letterSpacing:'-0.01em', lineHeight:1.2 }}>{m.t}</h4>
              <p style={{ margin:0, fontSize:13.5, color:'var(--ink-2)', lineHeight:1.5 }}>{m.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){
          .mod-head { grid-template-columns: 1fr !important; gap: 20px !important; }
          .mod-row  { grid-template-columns: 1fr !important; }
          .mod-small-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 640px){ .mod-small-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

const FeatureCard = ({ tag, title, body, mockup, accent }) => (
  <div style={{
    background:'#fff', border:'1px solid var(--line)', borderRadius:14,
    padding:'28px 28px 0', display:'flex', flexDirection:'column',
    overflow:'hidden', minHeight: 460
  }}>
    <Pill tone="default" style={{ marginBottom:14, color: accent, borderColor: `${accent}33` }}>{tag}</Pill>
    <h3 className="serif" style={{ margin:'0 0 10px', fontSize: 30, fontWeight: 500, letterSpacing:'-0.015em', lineHeight: 1.1, textWrap:'balance' }}>{title}</h3>
    <p style={{ margin:'0 0 24px', fontSize:14, color:'var(--ink-2)', lineHeight:1.55, maxWidth: 460 }}>{body}</p>
    <div style={{ marginTop:'auto', marginLeft:-2, marginRight:-2 }}>{mockup}</div>
  </div>
);

// === Mockups ===

const FlowboardMock = () => {
  const cols = [
    { name:'Espera',    color:'var(--muted)', cards:[ {n:'Luna · Felina', t:'09:00'}, {n:'Roco · Canino', t:'09:30'} ] },
    { name:'Consulta',  color:'var(--primary)', cards:[ {n:'Mía · Canino', t:'En curso', live:true} ] },
    { name:'Cirugía',   color:'var(--warn)', cards:[ {n:'Toby · Canino', t:'Quirófano A'} ] },
    { name:'Alta',      color:'var(--ok)', cards:[ {n:'Coco · Felina', t:'Listo cobrar'} ] },
  ];
  return (
    <div style={{
      background:'var(--bg-2)', borderTop:'1px solid var(--line)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'18px 18px 0',
    }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:8 }}>
        {cols.map((c,i) => (
          <div key={i} style={{ background:'#fff', borderRadius:8, padding:8, border:'1px solid var(--line-2)', minHeight:160 }}>
            <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:8 }}>
              <span style={{ width:6, height:6, borderRadius:99, background:c.color }}/>
              <span style={{ fontSize:10, fontWeight:600, color:'var(--ink-2)' }}>{c.name}</span>
              <span style={{ marginLeft:'auto', fontSize:10, color:'var(--muted)' }}>{c.cards.length}</span>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {c.cards.map((card,j) => (
                <div key={j} style={{
                  background:'var(--bg)', borderRadius:6, padding:'8px 10px',
                  border:'1px solid var(--line-2)',
                  borderLeft:`3px solid ${c.color}`,
                  position:'relative', overflow:'hidden'
                }}>
                  <div style={{ fontSize:11, fontWeight:600 }}>{card.n}</div>
                  <div style={{ fontSize:9.5, color:'var(--muted)', display:'flex', alignItems:'center', gap:4, marginTop:2 }}>
                    {card.live && <span style={{ width:5, height:5, borderRadius:99, background:'var(--ok)', animation:'pulse-dot 1.4s infinite' }}/>}
                    {card.t}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const WhatsappMock = () => {
  return (
    <div style={{
      background:'#075E54', margin:'0 -28px', padding:'14px 18px 0',
      borderTop:'1px solid var(--line)', borderRadius:'8px 8px 0 0', position:'relative'
    }}>
      <div style={{
        background:'#ECE5DD', borderRadius:'8px 8px 0 0', padding:'14px 14px 18px',
        backgroundImage:'repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 13px)',
      }}>
        {[
          { side:'r', t:'Hola Carolina 🐾 Recordatorio: Firulais tiene control anual el viernes 7 a las 10:30.', time:'10:32' },
          { side:'l', t:'¡Gracias! Confirmo ✅', time:'10:34' },
          { side:'r', t:'Tutorial pre-visita: trae a Firulais en ayuno de 8h. 📎 cuidados.pdf', time:'10:35' },
          { side:'r', t:'Receta digital de la última visita lista 💊', time:'10:35', meta:'Auto · Re-engagement' },
        ].map((m,i) => (
          <div key={i} style={{
            display:'flex', justifyContent: m.side==='r' ? 'flex-end' : 'flex-start', marginBottom:6
          }}>
            <div style={{
              background: m.side==='r' ? '#DCF8C6' : '#fff',
              borderRadius:8, padding:'7px 10px', maxWidth:'78%',
              fontSize:12, lineHeight:1.4, position:'relative',
              boxShadow:'0 1px 0 rgba(0,0,0,0.06)'
            }}>
              <div>{m.t}</div>
              <div style={{ fontSize:9, color:'#7B8B86', marginTop:3, textAlign:'right', display:'flex', justifyContent:'flex-end', alignItems:'center', gap:4 }}>
                {m.meta && <span style={{ background:'rgba(0,0,0,0.05)', padding:'1px 5px', borderRadius:3, fontFamily:"'JetBrains Mono', monospace", fontSize:8 }}>{m.meta}</span>}
                {m.time}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const CajaMock = () => {
  const items = [
    { name:'Consulta general',     qty:1, price:35.00, auto:true },
    { name:'Vacuna polivalente',   qty:1, price:28.00, auto:true },
    { name:'Desparasitación oral', qty:1, price:12.00, auto:true },
  ];
  const total = items.reduce((a,b) => a + b.price * b.qty, 0);
  return (
    <div style={{
      background:'var(--ink)', color:'#FAFAF7', margin:'0 -28px', padding:'18px 22px 0',
      borderTop:'1px solid var(--line)', borderRadius:'8px 8px 0 0',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
        <span className="mono" style={{ fontSize:10, opacity:0.6, textTransform:'uppercase', letterSpacing:'0.1em' }}>Venta DRAFT · #2847</span>
        <Pill tone="success" style={{ background:'rgba(79,121,66,0.2)', color:'#9DD089', border:'1px solid rgba(79,121,66,0.4)' }}>
          Auto-generada desde historia
        </Pill>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:6, marginBottom:14 }}>
        {items.map((it,i) => (
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'1fr auto auto', gap:14,
            padding:'8px 0', borderBottom:'1px dashed rgba(255,255,255,0.1)',
            fontSize:13, alignItems:'center'
          }}>
            <span style={{ display:'flex', alignItems:'center', gap:8 }}>
              {it.auto && <span style={{ color:'var(--accent)', fontSize:10 }}>{Ico.spark()}</span>}
              {it.name}
            </span>
            <span style={{ opacity:0.6, fontFamily:"'JetBrains Mono', monospace", fontSize:11 }}>×{it.qty}</span>
            <span className="mono" style={{ fontSize:12 }}>${it.price.toFixed(2)}</span>
          </div>
        ))}
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', paddingBottom: 16 }}>
        <span style={{ fontSize:11, opacity:0.6 }}>Total</span>
        <span className="serif" style={{ fontSize:32, fontWeight:400, letterSpacing:'-0.02em' }}>
          ${total.toFixed(2)}
        </span>
      </div>
    </div>
  );
};

const SoapMock = () => {
  return (
    <div style={{
      background:'#fff', border:'1px solid var(--line)',
      margin:'0 -28px', padding:'14px 20px 0',
      borderTop:'1px solid var(--line)', borderRadius:'8px 8px 0 0', borderRight:0, borderLeft:0
    }}>
      {/* Mic */}
      <div style={{
        display:'flex', alignItems:'center', gap:10, padding:'10px 12px',
        background:'var(--bg-2)', borderRadius:8, marginBottom:14, border:'1px solid var(--line-2)'
      }}>
        <span style={{ width:10, height:10, borderRadius:99, background:'var(--warn)', animation:'pulse-dot 1s infinite' }}/>
        <span style={{ fontSize:11, color:'var(--muted)', fontFamily:"'JetBrains Mono', monospace" }}>Grabando · 00:42</span>
        <div style={{ flex:1, display:'flex', alignItems:'center', gap:2, height:18 }}>
          {[6,12,8,14,10,16,12,8,14,10,18,12,6,10,14].map((h,i) => (
            <span key={i} style={{ width:2, height:h, background:'var(--ink-2)', borderRadius:1, opacity:0.7 }}/>
          ))}
        </div>
      </div>
      {/* SOAP blocks */}
      {[
        { k:'S', label:'Subjetivo', t:'Tutor reporta vómito intermitente últimas 48h, reduce ingesta de alimento.' },
        { k:'O', label:'Objetivo', t:'T° 39.1 · FC 110 · mucosas rosadas · abdomen sensible cuadrante craneal.' },
        { k:'A', label:'Diagnóstico', t:'Sosp. gastritis aguda. Descartar cuerpo extraño con Rx.' },
        { k:'P', label:'Plan', t:'Rx abdomen · maropitant 1mg/kg SC · ranitidina 2mg/kg PO · ayuno 12h.' },
      ].map((s,i) => (
        <div key={i} style={{ display:'grid', gridTemplateColumns:'28px 1fr', gap:10, padding:'8px 0', borderBottom: i<3 ? '1px solid var(--line-2)' : 'none' }}>
          <div style={{
            width:24, height:24, borderRadius:6, background:'var(--primary)', color:'#fff',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontFamily:"'Newsreader', serif", fontSize:14, fontStyle:'italic'
          }}>{s.k}</div>
          <div>
            <div className="mono" style={{ fontSize:9.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:2 }}>{s.label}</div>
            <div style={{ fontSize:12, color:'var(--ink)', lineHeight:1.45 }}>{s.t}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

// === Hotel mockup: panel con habitaciones + ocupación + log del día ===
const HotelMock = () => {
  const rooms = [
    { n:'Suite 01', type:'Grande', guest:'Toby', day:'Día 3 / 5', state:'occ' },
    { n:'Suite 02', type:'Mediana', guest:'Pelusa', day:'Día 1 / 2', state:'occ' },
    { n:'Suite 03', type:'Pequeña', guest:null, state:'free' },
    { n:'Felina 01', type:'Gato', guest:'Mochi', day:'Día 4 / 7', state:'occ' },
    { n:'Felina 02', type:'Gato', guest:null, state:'free' },
    { n:'Suite 04', type:'Grande', guest:null, state:'reserved' },
  ];
  const stateColor = (s) => s==='occ' ? 'var(--primary)' : s==='reserved' ? 'var(--warn)' : 'var(--ok)';
  const stateLabel = (s) => s==='occ' ? 'Ocupada' : s==='reserved' ? 'Reservada' : 'Libre';
  return (
    <div style={{
      background:'var(--bg-2)', borderTop:'1px solid var(--line)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'16px 18px 0',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
        <span className="mono" style={{ fontSize:9.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.1em' }}>
          Ocupación · 4 / 6 hab
        </span>
        <span style={{ fontSize:10, color:'var(--ink-2)' }}>67%</span>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8, marginBottom:10 }}>
        {rooms.map((r,i) => (
          <div key={i} style={{
            background:'#fff', border:'1px solid var(--line-2)', borderRadius:6, padding:'8px 10px',
            borderLeft:`3px solid ${stateColor(r.state)}`
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <span style={{ fontSize:11, fontWeight:600 }}>{r.n}</span>
              <span style={{ fontSize:8.5, color:'var(--muted)' }}>{r.type}</span>
            </div>
            <div style={{ fontSize:10, color: r.guest ? 'var(--ink)' : 'var(--muted)', marginTop:2 }}>
              {r.guest || stateLabel(r.state)}
            </div>
            {r.day && <div style={{ fontSize:9, color:'var(--muted)', marginTop:1 }}>{r.day}</div>}
          </div>
        ))}
      </div>
      {/* Log del día */}
      <div style={{
        background:'#fff', border:'1px solid var(--line-2)', borderRadius:'6px 6px 0 0',
        padding:'10px 12px', borderBottom:0
      }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6 }}>
          <span className="mono" style={{ fontSize:9, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.1em' }}>
            Bitácora · Toby · hoy
          </span>
          <span style={{ fontSize:9, color:'var(--ok)' }}>● Guardado</span>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap:6 }}>
          {[
            { l:'Apetito', v:'Bueno' },
            { l:'Conducta', v:'Normal' },
            { l:'Heces', v:'Normal' },
            { l:'Med.', v:'Aplicada' },
          ].map((c,i) => (
            <div key={i} style={{ background:'var(--bg-2)', borderRadius:4, padding:'5px 7px' }}>
              <div style={{ fontSize:8, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.06em' }}>{c.l}</div>
              <div style={{ fontSize:10.5, fontWeight:600, marginTop:1 }}>{c.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// === Peluquería: foto antes/después + servicios ===
const GroomingMock = () => {
  return (
    <div style={{
      background:'var(--bg-2)', borderTop:'1px solid var(--line)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'16px 18px 0',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
        <span style={{ fontSize:11, fontWeight:600 }}>Luna · Schnauzer</span>
        <Pill tone="default" style={{ fontSize:9, padding:'1px 8px' }}>Completada</Pill>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:10 }}>
        {[
          { l:'Antes', emoji:'🐕‍🦺', bg:'linear-gradient(135deg, #d4c5b0, #b8a486)' },
          { l:'Después', emoji:'✨', bg:'linear-gradient(135deg, #e8d9c3, #d4bf9e)' },
        ].map((p,i) => (
          <div key={i} style={{
            position:'relative', height:84, borderRadius:6, overflow:'hidden',
            background: p.bg, display:'flex', alignItems:'center', justifyContent:'center',
            border:'1px solid var(--line-2)'
          }}>
            <span style={{ fontSize:32, opacity:0.55 }}>{p.emoji}</span>
            <span className="mono" style={{
              position:'absolute', top:5, left:6, fontSize:8.5,
              background:'rgba(0,0,0,0.55)', color:'#fff', padding:'1px 6px', borderRadius:3,
              textTransform:'uppercase', letterSpacing:'0.08em'
            }}>{p.l}</span>
          </div>
        ))}
      </div>
      {/* Servicios */}
      <div style={{ background:'#fff', border:'1px solid var(--line-2)', borderRadius:'6px 6px 0 0', borderBottom:0, padding:'8px 10px' }}>
        {[
          { n:'Baño + corte completo', p:'$28' },
          { n:'Limpieza de oídos', p:'$5' },
          { n:'Corte de uñas', p:'$4' },
        ].map((s,i) => (
          <div key={i} style={{
            display:'flex', justifyContent:'space-between', fontSize:10.5,
            padding:'5px 0', borderBottom: i<2 ? '1px dashed var(--line-2)' : 'none'
          }}>
            <span>{s.n}</span>
            <span className="mono" style={{ color:'var(--ink-2)' }}>{s.p}</span>
          </div>
        ))}
        <div style={{ display:'flex', justifyContent:'space-between', fontSize:11, fontWeight:600, paddingTop:6, marginTop:4, borderTop:'1px solid var(--line)' }}>
          <span>Próximo turno</span>
          <span style={{ color:'var(--primary)' }}>en 5 semanas</span>
        </div>
      </div>
    </div>
  );
};

// === Campañas: segmentación + métricas ===
const CampaignsMock = () => {
  return (
    <div style={{
      background:'var(--ink)', color:'#FAFAF7', margin:'0 -28px', padding:'16px 20px 0',
      borderTop:'1px solid var(--line)', borderRadius:'8px 8px 0 0',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 }}>
        <span className="mono" style={{ fontSize:9.5, opacity:0.55, textTransform:'uppercase', letterSpacing:'0.1em' }}>
          Campaña · Re-activación felinos sénior
        </span>
        <span style={{ fontSize:9, color:'#9DD089' }}>● Corriendo</span>
      </div>
      {/* Segmentación */}
      <div style={{
        background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)',
        borderRadius:6, padding:'8px 10px', marginBottom:10
      }}>
        <div className="mono" style={{ fontSize:8.5, opacity:0.5, marginBottom:5, textTransform:'uppercase', letterSpacing:'0.08em' }}>Segmento</div>
        <div style={{ display:'flex', flexWrap:'wrap', gap:5 }}>
          {['Sin visita ≥ 90d', 'Especie: Felino', '≥ 2 visitas', 'Tutor activo'].map((t,i) => (
            <span key={i} className="mono" style={{
              fontSize:9, padding:'2px 7px', borderRadius:99,
              background:'rgba(217,176,140,0.15)', color:'var(--accent)', border:'1px solid rgba(217,176,140,0.3)'
            }}>{t}</span>
          ))}
        </div>
      </div>
      {/* Funnel */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:6, marginBottom:14 }}>
        {[
          { l:'Enviados', v:'342', sub:'WhatsApp' },
          { l:'Leídos', v:'287', sub:'84%' },
          { l:'Respuestas', v:'94', sub:'27%' },
          { l:'Reservaron', v:'31', sub:'9%' },
        ].map((k,i) => (
          <div key={i} style={{ background:'rgba(255,255,255,0.04)', borderRadius:5, padding:'7px 8px' }}>
            <div className="mono" style={{ fontSize:8, opacity:0.5, textTransform:'uppercase', letterSpacing:'0.08em' }}>{k.l}</div>
            <div className="serif" style={{ fontSize:18, fontWeight:400, letterSpacing:'-0.02em', marginTop:1 }}>{k.v}</div>
            <div style={{ fontSize:8.5, opacity:0.55, marginTop:1 }}>{k.sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// === TutorBot: chat con detección de intents ===
const TutorBotMock = () => {
  return (
    <div style={{
      background:'#075E54', margin:'0 -28px', padding:'14px 18px 0',
      borderTop:'1px solid var(--line)', borderRadius:'8px 8px 0 0'
    }}>
      <div style={{
        background:'#ECE5DD', borderRadius:'8px 8px 0 0', padding:'12px 12px 16px',
        backgroundImage:'repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 13px)',
      }}>
        {[
          { side:'l', t:'¿Cuándo le toca la próxima vacuna a Mía?', time:'14:02' },
          { side:'r', t:'Mía tiene programada la séxtuple el 18 de mayo (en 12 días). Puedes agendarla en 1 toque ⬇️', time:'14:02', meta:'Intent: ASK_VACCINATION' },
          { side:'r', t:'📅 Reservar para el 18 de mayo · 10:30 con Dr. Ramírez', time:'14:02', cta:true },
          { side:'l', t:'Está vomitando hace 2 horas, no come 😟', time:'14:08' },
          { side:'r', t:'⚠️ Esto puede ser una emergencia. Te paso con Recepción ahora — no esperes.', time:'14:08', meta:'Intent: EMERGENCY · Escalado a humano', urgent:true },
        ].map((m,i) => (
          <div key={i} style={{
            display:'flex', justifyContent: m.side==='r' ? 'flex-end' : 'flex-start', marginBottom:5
          }}>
            <div style={{
              background: m.cta ? '#fff' : m.urgent ? '#FEE7E2' : m.side==='r' ? '#DCF8C6' : '#fff',
              border: m.cta ? '1px solid #25D366' : m.urgent ? '1px solid #E8857A' : 'none',
              borderRadius:8, padding:'6px 9px', maxWidth:'82%',
              fontSize:11.5, lineHeight:1.4, position:'relative',
              boxShadow:'0 1px 0 rgba(0,0,0,0.06)',
              color: m.cta ? '#25D366' : 'inherit',
              fontWeight: m.cta ? 600 : 400
            }}>
              <div>{m.t}</div>
              <div style={{ fontSize:8.5, color:'#7B8B86', marginTop:2, textAlign:'right', display:'flex', justifyContent:'flex-end', alignItems:'center', gap:4 }}>
                {m.meta && <span style={{
                  background: m.urgent ? 'rgba(232,133,122,0.2)' : 'rgba(0,0,0,0.05)',
                  color: m.urgent ? '#A04030' : '#7B8B86',
                  padding:'1px 5px', borderRadius:3, fontFamily:"'JetBrains Mono', monospace", fontSize:7.5
                }}>{m.meta}</span>}
                {m.time}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// === Hospitalización: hoja de órdenes con signos vitales ===
const HospitalMock = () => {
  return (
    <div style={{
      background:'#fff', borderTop:'1px solid var(--line)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'14px 20px 0',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
        <div>
          <div style={{ fontSize:12, fontWeight:600 }}>Rocky · Bóxer · 8a</div>
          <div className="mono" style={{ fontSize:9, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop:2 }}>
            Jaula UCI 02 · Día 3 · Dx: Pancreatitis aguda
          </div>
        </div>
        <Pill tone="warn" style={{ fontSize:9, padding:'1px 7px' }}>● Crítico</Pill>
      </div>
      {/* Signos vitales tabla */}
      <div style={{ background:'var(--bg-2)', border:'1px solid var(--line-2)', borderRadius:6, padding:'8px 10px', marginBottom:10 }}>
        <div style={{ display:'grid', gridTemplateColumns:'40px repeat(4, 1fr)', gap:6 }}>
          <div className="mono" style={{ fontSize:8, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em' }}>Hora</div>
          <div className="mono" style={{ fontSize:8, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em' }}>T°</div>
          <div className="mono" style={{ fontSize:8, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em' }}>FC</div>
          <div className="mono" style={{ fontSize:8, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em' }}>FR</div>
          <div className="mono" style={{ fontSize:8, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em' }}>Mucosa</div>
          {[
            ['08:00', '38.9', '108', '32', 'rosadas'],
            ['12:00', '39.4', '124', '38', 'pálidas', true],
            ['16:00', '39.1', '116', '34', 'rosadas'],
          ].flatMap((row, ri) => row.slice(0,5).map((c, ci) => (
            <div key={`${ri}-${ci}`} className="mono" style={{
              fontSize:9.5, padding:'3px 0',
              color: row[5] && (ci===2 || ci===3) ? 'var(--warn)' : 'var(--ink)',
              fontWeight: row[5] && (ci===2 || ci===3) ? 600 : 400,
              borderTop: ri>0 ? '1px dashed var(--line-2)' : 'none'
            }}>{c}</div>
          )))}
        </div>
      </div>
      {/* Órdenes activas */}
      <div style={{
        background:'var(--bg-2)', border:'1px solid var(--line-2)', borderRadius:'6px 6px 0 0',
        borderBottom:0, padding:'8px 10px'
      }}>
        <div className="mono" style={{ fontSize:8.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:5 }}>
          Órdenes activas · 4
        </div>
        {[
          { t:'Maropitant 1mg/kg SC', s:'cada 24h · próx. 20:00', ok:true },
          { t:'Buprenorfina 0.02mg/kg IV', s:'cada 8h · próx. 18:00', ok:true },
          { t:'Ringer L. 60ml/h CRI', s:'continuo', ok:true },
        ].map((o,i) => (
          <div key={i} style={{
            display:'flex', justifyContent:'space-between', alignItems:'center',
            padding:'4px 0', borderTop: i>0 ? '1px dashed var(--line-2)' : 'none', fontSize:10
          }}>
            <div>
              <div style={{ fontWeight:500 }}>{o.t}</div>
              <div style={{ fontSize:8.5, color:'var(--muted)', marginTop:1 }}>{o.s}</div>
            </div>
            {o.ok && <span style={{ width:6, height:6, borderRadius:99, background:'var(--ok)' }}/>}
          </div>
        ))}
      </div>
    </div>
  );
};

// === Telemedicina: video call con tutor ===
const TelemedMock = () => {
  return (
    <div style={{
      background:'#0f1419', borderTop:'1px solid var(--line)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'14px 16px 0', color:'#fff'
    }}>
      {/* Video tile */}
      <div style={{
        height:140, borderRadius:6, position:'relative', overflow:'hidden',
        background:'linear-gradient(135deg, #3a4a52, #1f2a30)', marginBottom:8
      }}>
        <div style={{
          position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
          fontSize:46, opacity:0.35
        }}>🐱</div>
        {/* tutor PiP */}
        <div style={{
          position:'absolute', bottom:8, right:8, width:48, height:36, borderRadius:4,
          background:'linear-gradient(135deg, #d4a574, #8b6841)', border:'2px solid #fff',
          display:'flex', alignItems:'center', justifyContent:'center', fontSize:18, opacity:0.85
        }}>👤</div>
        {/* status */}
        <div style={{
          position:'absolute', top:8, left:8, display:'flex', alignItems:'center', gap:5,
          background:'rgba(0,0,0,0.55)', padding:'3px 8px', borderRadius:99
        }}>
          <span style={{ width:6, height:6, borderRadius:99, background:'#E8857A', animation:'pulse-dot 1.2s infinite' }}/>
          <span className="mono" style={{ fontSize:9, letterSpacing:'0.08em', textTransform:'uppercase' }}>EN VIVO · 12:34</span>
        </div>
        <div style={{
          position:'absolute', top:8, right:8, fontSize:10,
          background:'rgba(0,0,0,0.55)', padding:'3px 8px', borderRadius:99
        }}>Mochi · Felina · 7a</div>
      </div>
      {/* Notas en vivo */}
      <div style={{ background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:6, padding:'8px 10px', marginBottom:10 }}>
        <div className="mono" style={{ fontSize:8, opacity:0.5, textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:4 }}>
          Notas → Historia clínica
        </div>
        <div style={{ fontSize:11, lineHeight:1.45, opacity:0.9 }}>
          Tutor reporta apatía 24h. Examen visual: alerta, postura normal, sin secreciones oculares.
        </div>
      </div>
      {/* Footer toolbar */}
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'10px 0 14px', borderTop:'1px solid rgba(255,255,255,0.08)'
      }}>
        <div style={{ display:'flex', gap:8 }}>
          {['🎤','📹','💬'].map((i,k) => (
            <span key={k} style={{
              width:30, height:30, borderRadius:99, background:'rgba(255,255,255,0.08)',
              display:'flex', alignItems:'center', justifyContent:'center', fontSize:13
            }}>{i}</span>
          ))}
        </div>
        <span style={{
          fontSize:10, fontWeight:600, padding:'5px 12px', borderRadius:99,
          background:'#E8857A', color:'#fff'
        }}>Cerrar y cobrar</span>
      </div>
    </div>
  );
};

// === Seguros: pólizas + claims ===
const InsuranceMock = () => {
  return (
    <div style={{
      background:'var(--bg-2)', borderTop:'1px solid var(--line)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'14px 18px 0',
    }}>
      {/* Póliza activa */}
      <div style={{
        background:'#fff', border:'1px solid var(--line-2)', borderRadius:6,
        padding:'12px 14px', marginBottom:10, position:'relative', overflow:'hidden'
      }}>
        <div style={{
          position:'absolute', top:0, right:0, bottom:0, width:6,
          background:'linear-gradient(180deg, var(--primary), var(--primary-2))'
        }}/>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:8 }}>
          <div>
            <div className="mono" style={{ fontSize:8.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em' }}>Póliza activa</div>
            <div style={{ fontSize:13, fontWeight:600, marginTop:2 }}>VetSeguro · Plan Plata</div>
          </div>
          <Pill tone="success" style={{ fontSize:8.5, padding:'1px 7px' }}>Vigente</Pill>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8, fontSize:10 }}>
          <div>
            <div style={{ color:'var(--muted)', fontSize:8.5 }}>Cobertura</div>
            <div style={{ fontWeight:600, marginTop:1 }}>80%</div>
          </div>
          <div>
            <div style={{ color:'var(--muted)', fontSize:8.5 }}>Deducible</div>
            <div style={{ fontWeight:600, marginTop:1 }}>$50</div>
          </div>
          <div>
            <div style={{ color:'var(--muted)', fontSize:8.5 }}>Vence</div>
            <div style={{ fontWeight:600, marginTop:1 }}>Mar 2027</div>
          </div>
        </div>
      </div>
      {/* Claims */}
      <div style={{
        background:'#fff', border:'1px solid var(--line-2)', borderRadius:'6px 6px 0 0', borderBottom:0,
        padding:'10px 12px'
      }}>
        <div className="mono" style={{ fontSize:8.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6 }}>
          Reclamos · 2 abiertos
        </div>
        {[
          { id:'#CL-7821', t:'Cirugía OVH', a:'$340', s:'En revisión', tone:'warn' },
          { id:'#CL-7806', t:'Estudios laboratorio', a:'$85', s:'Aprobado', tone:'success' },
        ].map((c,i) => (
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'auto 1fr auto auto', gap:10, alignItems:'center',
            padding:'5px 0', borderTop: i>0 ? '1px dashed var(--line-2)' : 'none', fontSize:10
          }}>
            <span className="mono" style={{ fontSize:9, color:'var(--muted)' }}>{c.id}</span>
            <span style={{ fontWeight:500 }}>{c.t}</span>
            <span className="mono" style={{ fontSize:10 }}>{c.a}</span>
            <Pill tone={c.tone} style={{ fontSize:8, padding:'1px 6px' }}>{c.s}</Pill>
          </div>
        ))}
      </div>
    </div>
  );
};

// === Care Tips: biblioteca filtrable ===
const CareTipsMock = () => {
  const tips = [
    { topic:'Nutrición', emoji:'🥣', title:'Senior felino: control de proteína renal', age:'Senior', species:'Felino' },
    { topic:'Vacunación', emoji:'💉', title:'Refuerzo polivalente cachorros: 6, 9 y 12 sem', age:'Cachorro', species:'Canino' },
    { topic:'Verano', emoji:'☀️', title:'Golpe de calor en braquicéfalos', age:'Adulto', species:'Canino' },
    { topic:'Higiene', emoji:'🦷', title:'Cepillado dental progresivo: 7 días', age:'Todas', species:'Canino' },
  ];
  return (
    <div style={{
      background:'var(--bg-2)', borderTop:'1px solid var(--line)',
      borderRadius:'8px 8px 0 0', margin:'0 -28px', padding:'14px 18px 0',
    }}>
      {/* Filtros */}
      <div style={{ display:'flex', gap:5, flexWrap:'wrap', marginBottom:8 }}>
        {[
          { l:'Felino', active:true },
          { l:'Senior', active:true },
          { l:'Todos los tópicos', active:false },
          { l:'Verano', active:false },
        ].map((f,i) => (
          <span key={i} className="mono" style={{
            fontSize:9, padding:'3px 8px', borderRadius:99,
            background: f.active ? 'var(--ink)' : '#fff',
            color: f.active ? '#fff' : 'var(--ink-2)',
            border: f.active ? 'none' : '1px solid var(--line-2)',
            textTransform:'uppercase', letterSpacing:'0.05em'
          }}>{f.l}</span>
        ))}
      </div>
      {/* Tip cards */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:6, marginBottom:8 }}>
        {tips.map((t,i) => (
          <div key={i} style={{
            background:'#fff', border:'1px solid var(--line-2)', borderRadius:6,
            padding:'8px 10px', display:'flex', gap:8, alignItems:'flex-start'
          }}>
            <span style={{ fontSize:18, lineHeight:1 }}>{t.emoji}</span>
            <div style={{ flex:1, minWidth:0 }}>
              <div className="mono" style={{ fontSize:8, color:'var(--primary)', textTransform:'uppercase', letterSpacing:'0.08em' }}>{t.topic}</div>
              <div style={{ fontSize:10.5, fontWeight:500, lineHeight:1.3, marginTop:2, textWrap:'balance' }}>{t.title}</div>
              <div style={{ fontSize:8.5, color:'var(--muted)', marginTop:3 }}>{t.species} · {t.age}</div>
            </div>
          </div>
        ))}
      </div>
      {/* Convertir en campaña CTA */}
      <div style={{
        background:'#fff', border:'1px dashed var(--line)', borderRadius:'6px 6px 0 0',
        borderBottom:0, padding:'8px 10px', display:'flex', alignItems:'center', justifyContent:'space-between'
      }}>
        <span style={{ fontSize:10, color:'var(--ink-2)' }}>
          <span style={{ color:'var(--accent)' }}>{Ico.spark()}</span>{' '}
          Convertir tip en campaña recurrente
        </span>
        <span className="mono" style={{ fontSize:9, color:'var(--muted)' }}>342 destinatarios</span>
      </div>
    </div>
  );
};

window.Modules = Modules;