/* Homepage — all 7 sections */

function HomeHero({ navigate, onOpenLead }) {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="eyebrow">Diagnóstico clínico · Desde 2008</div>
          <h1 className="text-balance" style={{marginTop: 18}}>
            Diagnóstico <em>confiable</em> para pacientes, médicos, clínicas y empresas.
          </h1>
          <p className="hero-sub text-pretty">
            En InfectoLab conectamos precisión diagnóstica, atención profesional
            y soluciones operativas para distintos sectores de la salud.
          </p>
          <div className="hero-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("resultados")}>
              <Icon name="scan" size={16} /> Ver resultados
            </button>
            <a href="#" className="btn-link" onClick={(e) => { e.preventDefault(); navigate("catalogo"); }}>
              Conoce nuestros servicios →
            </a>
          </div>

          <div className="hero-meta">
            <div className="hero-meta-item">
              <b>+850</b>
              <span>Estudios y perfiles disponibles</span>
            </div>
            <div className="hero-meta-item">
              <b>24 h</b>
              <span>Tiempo de respuesta promedio</span>
            </div>
            <div className="hero-meta-item">
              <b>+120</b>
              <span>Clínicas y empresas en convenio</span>
            </div>
          </div>
        </div>

        <div className="hero-visual">
          <MoleculeSwirl color="rgba(255,255,255,.5)" />

          {/* Top "results" card */}
          <div className="hero-card hero-card-1">
            <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom: 10}}>
              <div style={{display:"flex", alignItems:"center", gap:8}}>
                <span style={{width:28,height:28,borderRadius:8,background:"var(--brand-cyan-50)",color:"var(--brand-primary)",display:"flex",alignItems:"center",justifyContent:"center"}}>
                  <Icon name="scan" size={14} />
                </span>
                <div style={{fontSize:12, fontWeight:600}}>Resultados recientes</div>
              </div>
              <span style={{fontSize: 11, color: "var(--ink-400)"}}>Hoy · 09:24</span>
            </div>

            <div className="hero-mini-row">
              <b>BH · Biometría hemática</b>
              <span className="tag tag-pos">Normal</span>
            </div>
            <div className="hero-mini-row">
              <b>Perfil lipídico</b>
              <span className="tag tag-pos">Normal</span>
            </div>
            <div className="hero-mini-row">
              <b>PCR múltiplex respiratorio</b>
              <span className="tag tag-pen">En análisis</span>
            </div>
          </div>

          {/* Bottom "metrics" card */}
          <div className="hero-card hero-card-2">
            <div style={{display:"flex", alignItems:"center", justifyContent:"space-between"}}>
              <div>
                <div style={{fontSize:11, color:"var(--ink-500)", textTransform:"uppercase", letterSpacing:".1em", fontWeight:600}}>Carga viral · seguimiento</div>
                <div style={{fontSize: 20, fontWeight: 700, marginTop: 6, letterSpacing:"-.02em"}}>1,240 <span style={{fontSize:13, fontWeight:500, color:"var(--ink-500)"}}>copias/mL</span></div>
              </div>
              <span className="badge" style={{background:"#ecf8ef", color:"#2c8a4a"}}>↓ 38%</span>
            </div>
            <div className="hero-chart">
              {[20, 32, 28, 44, 38, 50, 46, 36, 28, 22, 18, 14].map((h, i) => (
                <span key={i} style={{height: h + "px"}} />
              ))}
            </div>
            <div style={{display:"flex", justifyContent:"space-between", marginTop: 4, fontSize: 10, color:"var(--ink-400)"}}>
              <span>Ene</span><span>Mar</span><span>May</span><span>Jul</span><span>Sep</span><span>Nov</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SegmentSection({ navigate }) {
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="Cuatro frentes, una sola plataforma"
          title="Soluciones diseñadas para cada perfil clínico."
          sub="Cada audiencia accede a un flujo específico: información clara para pacientes, herramientas diagnósticas para médicos, integración para clínicas y programas preventivos para empresas."
        />
        <div className="segments">
          <SegmentCard
            icon="user"
            title="Pacientes"
            desc="Agenda estudios y accede a resultados con claridad y confianza."
            cta="Para pacientes"
            onClick={() => navigate("pacientes")}
          />
          <SegmentCard
            icon="stethoscope"
            title="Médicos"
            desc="Un aliado diagnóstico con enfoque clínico y respuesta eficiente."
            cta="Para médicos"
            onClick={() => navigate("medicos")}
          />
          <SegmentCard
            icon="hospital"
            title="Clínicas"
            desc="Integración, capacidad operativa y soporte para tu operación."
            cta="Para clínicas"
            onClick={() => navigate("clinicas")}
          />
          <SegmentCard
            icon="building"
            title="Empresas"
            desc="Soluciones preventivas y campañas de salud para tu organización."
            cta="Para empresas"
            onClick={() => navigate("empresas")}
          />
        </div>
      </div>
    </section>
  );
}

function ServicesSection({ navigate }) {
  const services = [
    { icon: "beaker", title: "Estudios generales", count: 180, tag: "Rutina" },
    { icon: "layers", title: "Perfiles", count: 64, tag: "Combinados" },
    { icon: "microscope", title: "Pruebas especiales", count: 92 },
    { icon: "virus", title: "Carga viral", count: 28, tag: "VIH · Hep" },
    { icon: "shield", title: "Tuberculosis", count: 14 },
    { icon: "dna", title: "PCR múltiplex", count: 36, tag: "Molecular" },
    { icon: "scan", title: "Tamizajes y paneles", count: 48 },
    { icon: "briefcase", title: "Soluciones empresariales", count: 12, tag: "B2B" },
  ];
  return (
    <section className="section" style={{background: "var(--ink-50)"}}>
      <div className="container">
        <SectionHead
          eyebrow="Catálogo diagnóstico"
          title="Un portafolio clínico amplio, organizado y trazable."
          sub="Explora por categoría o busca por nombre técnico. Cada estudio incluye preparación, tipo de muestra y tiempo de respuesta."
          aside={
            <button className="btn btn-ghost" onClick={() => navigate("catalogo")}>
              Ver catálogo completo <Icon name="arrow" size={15} />
            </button>
          }
        />
        <div className="services">
          {services.map(s => <ServiceCard key={s.title} {...s} />)}
        </div>
      </div>
    </section>
  );
}

function TrustSection() {
  const pillars = [
    { num: "01", title: "Precisión diagnóstica", desc: "Equipamiento de referencia y controles de calidad permanentes." },
    { num: "02", title: "Procesos confiables", desc: "Trazabilidad muestra–resultado con registros auditables." },
    { num: "03", title: "Enfoque preventivo", desc: "Paneles y tamizajes diseñados para detección temprana." },
    { num: "04", title: "Atención profesional", desc: "Equipo médico y técnico con experiencia clínica real." },
    { num: "05", title: "Soluciones por segmento", desc: "Adaptamos protocolos a pacientes, clínicas y empresas." },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="Lo que respaldamos"
          title="Cinco compromisos que sostienen cada resultado."
          sub="No es una promesa de marketing: es la manera en que operamos cada toma de muestra y cada entrega."
        />
        <div className="pillars">
          {pillars.map(p => (
            <div className="pillar" key={p.num}>
              <div className="num">{p.num}</div>
              <h4>{p.title}</h4>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowSection({ onOpenLead }) {
  return (
    <section className="section">
      <div className="container">
        <div className="how">
          <div className="how-grid">
            <div>
              <div className="eyebrow">Cómo funciona</div>
              <h2 className="text-balance" style={{marginTop: 14}}>Del agendamiento al resultado, sin pasos innecesarios.</h2>
              <p style={{marginTop: 18, color: "var(--ink-600)"}}>
                Tres pasos claros. Acompañamiento humano en cada uno.
              </p>
              <button className="btn btn-primary" style={{marginTop: 24}} onClick={onOpenLead}>
                Empezar ahora <Icon name="arrow" size={15} />
              </button>
            </div>
            <div className="how-steps">
              <div className="step">
                <div className="step-num">1</div>
                <h4>Agenda</h4>
                <p>Elige tu estudio y reserva fecha y hora en línea o por teléfono.</p>
              </div>
              <div className="step">
                <div className="step-num">2</div>
                <h4>Toma de muestra</h4>
                <p>Acude a la sucursal o solicita visita domiciliaria con personal certificado.</p>
              </div>
              <div className="step">
                <div className="step-num">3</div>
                <h4>Consulta resultados</h4>
                <p>Recibe tu informe en el portal o por correo, con accesibilidad médica.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function OpsSection({ navigate }) {
  const blocks = [
    { ic: "layers", title: "Procesamiento", desc: "Áreas analíticas separadas por línea de prueba con control de calidad continuo." },
    { ic: "link", title: "Integración", desc: "Conexión con sistemas LIS, HIS y plataformas de expediente electrónico." },
    { ic: "trending", title: "Escalabilidad", desc: "Capacidad operativa para volúmenes altos sin sacrificar tiempos de entrega." },
    { ic: "network", title: "Convenios", desc: "Atención a redes de clínicas, aseguradoras y programas institucionales." },
    { ic: "grid", title: "Multi-segmento", desc: "Protocolos diferenciados para B2C, B2B y entornos institucionales." },
    { ic: "shield", title: "Cumplimiento", desc: "Operación alineada con normatividad sanitaria y de protección de datos." },
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="ops">
          <div className="ops-grid">
            <div>
              <div className="eyebrow eyebrow--light">Capacidad operativa</div>
              <h2 className="text-balance" style={{marginTop: 14}}>
                No solo atendemos pacientes. <span className="serif">Sostenemos operaciones clínicas.</span>
              </h2>
              <p style={{marginTop: 18, color: "rgba(255,255,255,.78)", maxWidth: 50+"ch"}}>
                InfectoLab está construido para entornos donde la confiabilidad operativa
                es tan crítica como la precisión del diagnóstico. Clínicas y empresas
                trabajan con nosotros porque entregamos consistencia.
              </p>
              <div style={{display:"flex", gap: 12, marginTop: 28, flexWrap:"wrap"}}>
                <button className="btn btn-primary" onClick={() => navigate("clinicas")}>
                  Para clínicas <Icon name="arrow" size={15} />
                </button>
                <button className="btn btn-light" onClick={() => navigate("empresas")}>
                  Para empresas
                </button>
              </div>
            </div>
            <div className="ops-blocks">
              {blocks.map(b => (
                <div className="ops-block" key={b.title}>
                  <Icon name={b.ic} size={22} className="ic" />
                  <h4>{b.title}</h4>
                  <p>{b.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaBand({ navigate, onOpenLead }) {
  return (
    <section className="section">
      <div className="container">
        <div className="cta-band">
          <div>
            <div className="eyebrow eyebrow--light">Estamos listos</div>
            <h2 className="text-balance" style={{marginTop: 14}}>
              ¿Necesitas una solución para pacientes, médicos, clínicas o empresas?
            </h2>
            <p style={{marginTop: 14, color:"rgba(255,255,255,.8)", maxWidth: 48+"ch"}}>
              Un equipo de InfectoLab te orienta hacia la ruta correcta según tu perfil.
            </p>
          </div>
          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={onOpenLead}>
              Agendar prueba
            </button>
            <button className="btn btn-light btn-lg" onClick={() => navigate("contacto")}>
              Hablar con un asesor <Icon name="arrow" size={16} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="01 Home">
      <HomeHero navigate={navigate} onOpenLead={onOpenLead} />
      <SegmentSection navigate={navigate} />
      <ServicesSection navigate={navigate} />
      <TrustSection />
      <HowSection onOpenLead={onOpenLead} />
      <OpsSection navigate={navigate} />
      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

Object.assign(window, { HomePage });