/* Audience pages: Pacientes, Médicos, Clínicas, Empresas */

/* ─────────── Shared page hero ─────────── */
function AudienceHero({ eyebrow, title, sub, ctas, visual }) {
  return (
    <section className="page-hero">
      <div className="container page-hero-grid">
        <div>
          <div className="eyebrow">{eyebrow}</div>
          <h1 className="text-balance" style={{marginTop: 18}}>{title}</h1>
          <p className="text-pretty">{sub}</p>
          <div className="hero-ctas">{ctas}</div>
        </div>
        {visual}
      </div>
    </section>
  );
}

/* ────────────────────────── PACIENTES ────────────────────────── */
function PacientesPage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="02 Pacientes">
      <AudienceHero
        eyebrow="Para pacientes"
        title="Estudios claros, atención profesional, resultados accesibles."
        sub="Te acompañamos antes, durante y después de cada estudio: información comprensible, personal certificado y un portal de resultados sencillo."
        ctas={
          <>
            <button className="btn btn-primary btn-lg" onClick={onOpenLead}>Agendar prueba <Icon name="arrow" size={16}/></button>
            <button className="btn btn-ghost btn-lg" onClick={() => navigate("catalogo")}>Consultar estudios</button>
            <button className="btn-link" onClick={() => navigate("resultados")}>Ver resultados →</button>
          </>
        }
        visual={
          <div style={{position:"relative", aspectRatio:"1/1", borderRadius:"var(--radius-xl)", overflow:"hidden", background:"linear-gradient(160deg, #eaf3f6, #ffffff)"}}>
            <MoleculeSwirl color="rgba(57,83,164,.18)" />
            <div style={{position:"absolute", inset:0, display:"grid", placeItems:"center"}}>
              <div style={{background:"#fff", padding:"22px 26px", borderRadius:18, boxShadow:"var(--shadow-md)", display:"flex", flexDirection:"column", gap:14, minWidth:280}}>
                <div style={{display:"flex", alignItems:"center", gap:12}}>
                  <div style={{width:44,height:44,borderRadius:12,background:"var(--brand-primary)",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center"}}>
                    <Icon name="user" size={22} />
                  </div>
                  <div>
                    <div style={{fontSize: 13, color:"var(--ink-500)"}}>Próxima cita</div>
                    <div style={{fontWeight:700}}>Jueves · 8:30 AM</div>
                  </div>
                </div>
                <div style={{borderTop:"1px solid var(--ink-200)", paddingTop:14, fontSize:13, color:"var(--ink-600)"}}>
                  <div style={{display:"flex", justifyContent:"space-between"}}><span>Estudio</span><b style={{color:"var(--ink-900)"}}>Perfil tiroideo</b></div>
                  <div style={{display:"flex", justifyContent:"space-between", marginTop:6}}><span>Sucursal</span><b style={{color:"var(--ink-900)"}}>Polanco</b></div>
                  <div style={{display:"flex", justifyContent:"space-between", marginTop:6}}><span>Preparación</span><b style={{color:"var(--ink-900)"}}>Ayuno 8 h</b></div>
                </div>
                <button className="btn btn-primary btn-sm" style={{width:"100%", justifyContent:"center"}}>Ver detalles</button>
              </div>
            </div>
          </div>
        }
      />

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Beneficios"
            title="Pensado para que entiendas, decidas y avances con confianza."
          />
          <div className="benefits">
            <div className="benefit">
              <Icon name="scan" size={26} className="ic" />
              <h3>Claridad en el proceso</h3>
              <p>Información previa al estudio: preparación, duración, costos y siguiente paso.</p>
            </div>
            <div className="benefit">
              <Icon name="stethoscope" size={26} className="ic" />
              <h3>Atención profesional</h3>
              <p>Personal de toma de muestra certificado y un equipo médico de respaldo.</p>
            </div>
            <div className="benefit">
              <Icon name="shield" size={26} className="ic" />
              <h3>Resultados accesibles</h3>
              <p>Recibe tu informe en el portal, por correo o en sucursal cuando lo prefieras.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink-50)"}}>
        <div className="container">
          <SectionHead
            eyebrow="Cómo funciona"
            title="Tres pasos. Cero confusión."
          />
          <div className="how-steps" style={{position:"relative"}}>
            <div className="step">
              <div className="step-num">1</div>
              <h4>Agenda en minutos</h4>
              <p>Selecciona estudio, sucursal y horario que mejor te acomoden.</p>
            </div>
            <div className="step">
              <div className="step-num">2</div>
              <h4>Toma de muestra</h4>
              <p>Atención puntual en sucursal o servicio a domicilio con cita.</p>
            </div>
            <div className="step">
              <div className="step-num">3</div>
              <h4>Consulta resultados</h4>
              <p>Disponibles en tu portal personal, descargables y compartibles con tu médico.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Estudios destacados"
            title="Algunas categorías que los pacientes consultan con más frecuencia."
            aside={<button className="btn btn-ghost" onClick={() => navigate("catalogo")}>Ver catálogo <Icon name="arrow" size={14}/></button>}
          />
          <div className="services">
            <ServiceCard icon="beaker" title="Biometría hemática" count={1} tag="General" />
            <ServiceCard icon="layers" title="Perfil tiroideo" count={1} tag="Perfil" />
            <ServiceCard icon="drop" title="Glucosa y A1c" count={2} tag="Metabólico" />
            <ServiceCard icon="virus" title="Panel respiratorio PCR" count={1} tag="Molecular" />
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink-50)"}}>
        <div className="container">
          <SectionHead
            eyebrow="Preguntas frecuentes"
            title="Lo que más nos preguntan los pacientes."
          />
          <div className="faq">
            <FaqItem
              defaultOpen
              q="¿Necesito orden médica para realizarme un estudio?"
              a="Para la mayoría de los estudios no es indispensable, aunque siempre recomendamos compartir tus resultados con un médico. Algunos estudios especializados sí requieren indicación médica; te lo indicamos al momento de agendar."
            />
            <FaqItem
              q="¿Cuánto tarda en estar listo mi resultado?"
              a="La mayoría de los estudios generales se entregan en menos de 24 horas. Estudios moleculares, perfiles especializados y carga viral tienen tiempos específicos que se indican en cada ficha."
            />
            <FaqItem
              q="¿Cómo recibo mis resultados?"
              a="A través de tu portal personal, por correo electrónico cifrado o impresos en sucursal. Puedes compartirlos directamente con tu médico desde el portal."
            />
            <FaqItem
              q="¿Hay servicio a domicilio?"
              a="Sí, ofrecemos toma de muestra a domicilio bajo cita previa en zonas seleccionadas. El costo del servicio se confirma al momento de agendar."
            />
            <FaqItem
              q="¿Aceptan seguros médicos o convenios empresariales?"
              a="Sí, trabajamos con las principales aseguradoras y empresas a través de convenios. Pregunta por tu cobertura al agendar."
            />
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

/* ────────────────────────── MÉDICOS ────────────────────────── */
function MedicosPage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="03 Médicos">
      <AudienceHero
        eyebrow="Para médicos"
        title="Un aliado diagnóstico con respuesta clínica, no solo operativa."
        sub="Acceso digital a resultados, soporte interpretativo, perfiles diseñados para apoyo clínico y un equipo que entiende tu práctica."
        ctas={
          <>
            <button className="btn btn-primary btn-lg" onClick={onOpenLead}>Solicitar acceso <Icon name="arrow" size={16}/></button>
            <button className="btn btn-ghost btn-lg" onClick={() => navigate("contacto")}>Hablar con un asesor</button>
            <button className="btn-link" onClick={() => navigate("catalogo")}>Servicios para médicos →</button>
          </>
        }
        visual={
          <div style={{position:"relative", aspectRatio:"1/1", borderRadius:"var(--radius-xl)", overflow:"hidden", background:"linear-gradient(160deg, #1d2a4d, #3953a4)"}}>
            <MoleculeSwirl color="rgba(255,255,255,.35)" />
            <div style={{position:"absolute", inset:24, background:"#fff", borderRadius:14, padding:20, display:"flex", flexDirection:"column", gap:12}}>
              <div style={{display:"flex", alignItems:"center", justifyContent:"space-between"}}>
                <div style={{fontSize:12, color:"var(--ink-500)", textTransform:"uppercase", letterSpacing:".1em", fontWeight:600}}>Panel médico</div>
                <span className="badge badge--solid">En vivo</span>
              </div>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8}}>
                <div style={{padding:12, background:"var(--ink-50)", borderRadius:10}}>
                  <div style={{fontSize:11, color:"var(--ink-500)"}}>Pacientes activos</div>
                  <div style={{fontSize:22, fontWeight:700, letterSpacing:"-.02em"}}>148</div>
                </div>
                <div style={{padding:12, background:"var(--ink-50)", borderRadius:10}}>
                  <div style={{fontSize:11, color:"var(--ink-500)"}}>Resultados nuevos</div>
                  <div style={{fontSize:22, fontWeight:700, letterSpacing:"-.02em", color:"var(--brand-primary)"}}>12</div>
                </div>
              </div>
              <div style={{borderTop:"1px solid var(--ink-200)", paddingTop:12, display:"flex", flexDirection:"column", gap:8}}>
                {[
                  ["A. Méndez", "Perfil hepático", "tag-pos", "Normal"],
                  ["L. Ortega", "Carga viral HIV", "tag-pen", "Pendiente"],
                  ["R. Vargas", "PCR múltiplex", "tag-pos", "Listo"],
                ].map(([n, p, t, l]) => (
                  <div key={n} style={{display:"flex", justifyContent:"space-between", alignItems:"center", fontSize:12}}>
                    <div>
                      <div style={{fontWeight:600}}>{n}</div>
                      <div style={{color:"var(--ink-500)", fontSize:11}}>{p}</div>
                    </div>
                    <span className={"tag " + t}>{l}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        }
      />

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Lo que ofrecemos al médico"
            title="Soporte diagnóstico que respeta tu criterio clínico."
          />
          <div className="services">
            <div className="svc-card"><Icon name="pulse" size={28} className="svc-ic" /><h4>Respuesta eficiente</h4><p style={{fontSize:14, color:"var(--ink-600)"}}>Tiempos de entrega comprometidos por categoría de estudio.</p></div>
            <div className="svc-card"><Icon name="microscope" size={28} className="svc-ic" /><h4>Soporte diagnóstico</h4><p style={{fontSize:14, color:"var(--ink-600)"}}>Acceso a especialistas para interpretación cuando lo requieras.</p></div>
            <div className="svc-card"><Icon name="scan" size={28} className="svc-ic" /><h4>Acceso digital</h4><p style={{fontSize:14, color:"var(--ink-600)"}}>Portal médico con histórico, comparativos y descarga rápida.</p></div>
            <div className="svc-card"><Icon name="stethoscope" size={28} className="svc-ic" /><h4>Relación profesional</h4><p style={{fontSize:14, color:"var(--ink-600)"}}>Un punto de contacto humano, no un buzón genérico.</p></div>
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink-50)"}}>
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 56, alignItems:"center"}}>
            <div>
              <div className="eyebrow">Estudios y perfiles de apoyo clínico</div>
              <h2 className="text-balance" style={{marginTop:14}}>Perfiles diseñados para la decisión clínica real.</h2>
              <p style={{marginTop:18, color:"var(--ink-600)"}}>
                Más allá del estudio aislado: combinaciones validadas con el equipo
                médico de InfectoLab para tamizajes, seguimiento y diagnóstico
                diferencial en infectología, medicina interna y atención primaria.
              </p>
              <div className="bullet-grid" style={{marginTop: 24}}>
                {[
                  "Perfiles infectológicos por sistema",
                  "Tamizajes de tuberculosis y carga viral",
                  "PCR múltiplex respiratorio y gastrointestinal",
                  "Perfiles de seguimiento crónico-degenerativo",
                  "ITS — paneles ampliados",
                  "Perfiles prequirúrgicos",
                ].map(b => (
                  <div className="bullet" key={b}><Icon name="check" size={16}/> {b}</div>
                ))}
              </div>
            </div>
            <div className="ops" style={{borderRadius:"var(--radius-lg)", padding:36}}>
              <div className="eyebrow eyebrow--light">Acceso a resultados</div>
              <h3 style={{color:"#fff", marginTop:14, fontSize: 22}}>Portal médico</h3>
              <p style={{marginTop:14, color:"rgba(255,255,255,.78)", fontSize: 15}}>
                Consulta resultados de tus pacientes, históricos comparativos
                y descarga PDFs validados con firma digital.
              </p>
              <ul style={{listStyle:"none", padding:0, marginTop: 20, display:"flex", flexDirection:"column", gap:10}}>
                {[
                  "Resultados consolidados por paciente",
                  "Comparativo evolutivo de hasta 12 meses",
                  "Notificación al validar un resultado crítico",
                  "Compartido seguro con el paciente",
                ].map(t => (
                  <li key={t} style={{display:"flex", alignItems:"center", gap:10, color:"rgba(255,255,255,.9)", fontSize: 14.5}}>
                    <span style={{width:18,height:18,borderRadius:999,background:"var(--brand-yellow)",color:"var(--ink-900)",display:"flex",alignItems:"center",justifyContent:"center"}}>
                      <Icon name="check" size={12} />
                    </span> {t}
                  </li>
                ))}
              </ul>
              <button className="btn btn-primary" style={{marginTop:24}} onClick={onOpenLead}>Solicitar acceso</button>
            </div>
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

/* ────────────────────────── CLÍNICAS ────────────────────────── */
function ClinicasPage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="04 Clínicas">
      <AudienceHero
        eyebrow="Para clínicas"
        title="Capacidad diagnóstica e integración para fortalecer tu operación clínica."
        sub="Procesamiento robusto, integración con tus sistemas y soporte estratégico. Un partner diagnóstico que crece al ritmo de tu institución."
        ctas={
          <>
            <button className="btn btn-primary btn-lg" onClick={onOpenLead}>Solicitar alianza <Icon name="arrow" size={16}/></button>
            <button className="btn btn-ghost btn-lg" onClick={() => navigate("contacto")}>Hablar con un asesor</button>
            <button className="btn-link" onClick={() => navigate("catalogo")}>Conocer capacidades →</button>
          </>
        }
        visual={<ClinicasIntegrationDiagram />}
      />

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Bloques de valor"
            title="Cuatro frentes operativos que sostenemos contigo."
          />
          <div className="services" style={{gridTemplateColumns:"repeat(4, 1fr)"}}>
            {[
              ["link", "Integración operativa", "Conexión LIS / HIS y flujo de trabajo automatizado para reducir fricción administrativa."],
              ["layers", "Procesamiento eficiente", "Áreas dedicadas por tipo de prueba y trazabilidad muestra–resultado."],
              ["trending", "Soporte para volumen", "Capacidad analítica para picos estacionales sin sacrificar tiempos."],
              ["network", "Colaboración institucional", "Modelos de alianza para clínicas privadas, hospitales y redes de salud."],
            ].map(([ic, t, d]) => (
              <div className="svc-card" key={t}>
                <Icon name={ic} size={28} className="svc-ic" />
                <h4>{t}</h4>
                <p style={{fontSize:14, color:"var(--ink-600)"}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink-50)"}}>
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:56, alignItems:"center"}}>
            <div>
              <div className="eyebrow">Modelo de integración</div>
              <h2 className="text-balance" style={{marginTop: 14}}>De la solicitud al resultado, en un solo flujo.</h2>
              <p style={{marginTop:18, color:"var(--ink-600)"}}>
                Nuestra arquitectura técnica está pensada para integrarse con los
                sistemas que ya usas. Reducimos pasos manuales, eliminamos errores
                de transcripción y aceleramos la llegada del resultado al expediente.
              </p>
              <div className="bullet-grid" style={{marginTop:24}}>
                {[
                  "HL7 · FHIR · APIs REST",
                  "Códigos LOINC mapeados",
                  "Envío automatizado a expediente",
                  "Webhook para resultados críticos",
                  "Reportes operativos mensuales",
                  "Account manager dedicado",
                ].map(b => (
                  <div className="bullet" key={b}><Icon name="check" size={16}/>{b}</div>
                ))}
              </div>
              <div style={{display:"flex", gap:12, marginTop:28, flexWrap:"wrap"}}>
                <button className="btn btn-primary" onClick={onOpenLead}>Solicitar alianza</button>
                <button className="btn btn-ghost" onClick={() => navigate("contacto")}>Caso de uso</button>
              </div>
            </div>

            <ClinicasWorkflowCard />
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

function ClinicasIntegrationDiagram() {
  return (
    <div style={{position:"relative", aspectRatio:"1/1", borderRadius:"var(--radius-xl)", overflow:"hidden", background:"linear-gradient(160deg, #f7f8fc, #eaf3f6)", padding: 28}}>
      <svg viewBox="0 0 400 400" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
        <defs>
          <pattern id="dotG" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1" fill="rgba(57,83,164,.18)" />
          </pattern>
          <linearGradient id="lineG" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#3953a4" />
            <stop offset="1" stopColor="#7eb9c7" />
          </linearGradient>
        </defs>
        <rect width="400" height="400" fill="url(#dotG)" />
        {/* connecting lines */}
        <path d="M 80 200 L 200 100 L 320 200 L 200 300 Z" stroke="url(#lineG)" strokeWidth="1.5" fill="none" strokeDasharray="3 4" />
        <path d="M 200 100 L 200 300" stroke="url(#lineG)" strokeWidth="1.5" fill="none" strokeDasharray="3 4" />
        <path d="M 80 200 L 320 200" stroke="url(#lineG)" strokeWidth="1.5" fill="none" strokeDasharray="3 4" />
      </svg>
      {/* nodes */}
      {[
        { x: "50%", y: "20%", label: "Clínica", ic: "hospital", solid: true },
        { x: "10%", y: "50%", label: "InfectoLab LIS", ic: "layers" },
        { x: "90%", y: "50%", label: "Expediente", ic: "scan" },
        { x: "50%", y: "80%", label: "Médico tratante", ic: "stethoscope" },
        { x: "50%", y: "50%", label: "API", ic: "link", center: true },
      ].map((n, i) => (
        <div key={i} style={{
          position:"absolute", top:n.y, left:n.x, transform:"translate(-50%, -50%)",
          background: n.center ? "var(--brand-yellow)" : (n.solid ? "var(--brand-primary)" : "#fff"),
          color: n.center ? "var(--ink-900)" : (n.solid ? "#fff" : "var(--brand-primary)"),
          border: n.solid || n.center ? "none" : "1px solid var(--ink-200)",
          borderRadius: 12,
          padding: n.center ? "8px 14px" : "10px 16px",
          boxShadow: "var(--shadow-md)",
          display:"flex", alignItems:"center", gap:8,
          fontSize: 12, fontWeight: 600, whiteSpace:"nowrap"
        }}>
          <Icon name={n.ic} size={n.center? 14 : 16} /> {n.label}
        </div>
      ))}
    </div>
  );
}

function ClinicasWorkflowCard() {
  const steps = [
    ["Orden generada", "Desde el HIS de la clínica", "08:00"],
    ["Recolección", "Toma de muestra in situ o ruta", "09:12"],
    ["Procesamiento", "Análisis en línea correspondiente", "10:45"],
    ["Validación", "Doble validación por bioquímico", "13:20"],
    ["Entrega", "Resultado al expediente del paciente", "14:55"],
  ];
  return (
    <div style={{background:"#fff", border:"1px solid var(--ink-200)", borderRadius:"var(--radius-lg)", padding: 28, boxShadow:"var(--shadow-md)"}}>
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
        <div style={{fontSize:12, fontWeight:700, color:"var(--ink-500)", letterSpacing:".1em", textTransform:"uppercase"}}>Caso real · Orden #LX-2841</div>
        <span className="badge badge--solid">Activo</span>
      </div>
      <div style={{marginTop:20, position:"relative"}}>
        {steps.map(([t, d, h], i) => (
          <div key={i} style={{display:"grid", gridTemplateColumns:"32px 1fr auto", gap:14, alignItems:"start", padding:"14px 0", borderTop: i === 0 ? "none" : "1px solid var(--ink-100)"}}>
            <div style={{width:24, height:24, borderRadius:999, background: i < 4 ? "var(--brand-primary)" : "var(--brand-cyan-50)", color: i < 4 ? "#fff" : "var(--brand-primary)", display:"flex", alignItems:"center", justifyContent:"center", marginTop:2}}>
              {i < 4 ? <Icon name="check" size={12}/> : <span style={{fontSize: 12, fontWeight:700}}>{i+1}</span>}
            </div>
            <div>
              <div style={{fontWeight:600, fontSize:14}}>{t}</div>
              <div style={{fontSize: 12.5, color:"var(--ink-500)", marginTop:2}}>{d}</div>
            </div>
            <div style={{fontSize:12, color:"var(--ink-500)", fontFamily:"ui-monospace, monospace"}}>{h}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ────────────────────────── EMPRESAS ────────────────────────── */
function EmpresasPage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="05 Empresas">
      <AudienceHero
        eyebrow="Para empresas"
        title="Salud preventiva al servicio de tu organización."
        sub="Campañas de tamizaje, jornadas de salud y programas preventivos diseñados para los colaboradores de tu empresa o convenio institucional."
        ctas={
          <>
            <button className="btn btn-primary btn-lg" onClick={onOpenLead}>Solicitar propuesta <Icon name="arrow" size={16}/></button>
            <button className="btn btn-ghost btn-lg" onClick={() => navigate("contacto")}>Cotizar campaña</button>
            <button className="btn-link" onClick={() => navigate("contacto")}>Hablar con un asesor →</button>
          </>
        }
        visual={
          <div style={{position:"relative", aspectRatio:"1/1", borderRadius:"var(--radius-xl)", overflow:"hidden", background:"linear-gradient(160deg, #2e4488, #3953a4 60%, #7eb9c7)"}}>
            <MoleculeSwirl color="rgba(255,255,255,.35)" />
            <div style={{position:"absolute", left:24, right:24, top:24, background:"#fff", borderRadius:14, padding:18}}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                <div style={{fontSize:11, color:"var(--ink-500)", textTransform:"uppercase", letterSpacing:".1em", fontWeight:600}}>Campaña activa</div>
                <span className="badge" style={{background:"var(--brand-yellow-50)", color:"#8a6300"}}>Jornada Q3</span>
              </div>
              <div style={{display:"flex", alignItems:"baseline", gap:6, marginTop:8}}>
                <div style={{fontSize:30, fontWeight:700, letterSpacing:"-.02em"}}>312</div>
                <div style={{color:"var(--ink-500)", fontSize:13}}>/ 420 colaboradores</div>
              </div>
              <div style={{height:8, borderRadius:999, background:"var(--ink-100)", marginTop:10, overflow:"hidden"}}>
                <div style={{width:"74%", height:"100%", background:"linear-gradient(90deg, var(--brand-primary), var(--brand-cyan))"}} />
              </div>
              <div style={{display:"flex", justifyContent:"space-between", fontSize:11, color:"var(--ink-500)", marginTop:8}}>
                <span>74% cobertura</span><span>3 días restantes</span>
              </div>
            </div>
            <div style={{position:"absolute", left:24, right:24, bottom:24, background:"rgba(255,255,255,.94)", borderRadius:14, padding:16, display:"flex", justifyContent:"space-around"}}>
              {[["BH", 312], ["Glu", 298], ["Tiroideo", 184], ["COVID", 256]].map(([l, v]) => (
                <div key={l} style={{textAlign:"center"}}>
                  <div style={{fontSize:18, fontWeight:700, color:"var(--brand-primary)"}}>{v}</div>
                  <div style={{fontSize:11, color:"var(--ink-500)"}}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        }
      />

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Bloques corporativos"
            title="Cuatro frentes para construir tu programa de salud."
          />
          <div className="services">
            {[
              ["scan", "Campañas de tamizaje", "Programas masivos para detección oportuna en tu plantilla."],
              ["shield", "Salud preventiva", "Paquetes anuales por género, edad y perfil de riesgo."],
              ["user", "Soluciones para colaboradores", "Beneficios diagnósticos extendidos a familiares directos."],
              ["trending", "Atención por volumen", "Tarifas y logística adaptadas al tamaño de tu empresa."],
            ].map(([ic, t, d]) => (
              <div className="svc-card" key={t}>
                <Icon name={ic} size={28} className="svc-ic" />
                <h4>{t}</h4>
                <p style={{fontSize: 14, color:"var(--ink-600)"}}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink-50)"}}>
        <div className="container">
          <SectionHead
            eyebrow="Casos de uso"
            title="Programas diseñados para cuatro perfiles institucionales."
          />
          <div className="segments" style={{gridTemplateColumns:"repeat(4, 1fr)"}}>
            {[
              ["briefcase", "Empresas privadas", "Programas de salud corporativa anuales con reporte ejecutivo."],
              ["building", "Organizaciones", "Cámaras, asociaciones y ONG: campañas comunitarias controladas."],
              ["link", "Convenios", "Aseguradoras y planes médicos con tarifa preferencial y red de toma."],
              ["pulse", "Jornadas de salud", "Eventos puntuales con equipo móvil y entrega digital de resultados."],
            ].map(([ic, t, d]) => (
              <div className="seg-card" key={t}>
                <div className="ic"><Icon name={ic} size={22}/></div>
                <h3>{t}</h3>
                <p>{d}</p>
                <div className="more">
                  <span>Conocer más</span>
                  <span className="arrow"><Icon name="arrow" size={14}/></span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

Object.assign(window, { PacientesPage, MedicosPage, ClinicasPage, EmpresasPage, AudienceHero });