/* Resultados, Contacto, Mobile preview */

function ResultadosPage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="08 Resultados">
      <section className="section page-hero">
        <div className="container">
          <div style={{display:"grid", gridTemplateColumns:"1.1fr .9fr", gap: 64, alignItems:"center"}}>
            <div>
              <div className="eyebrow">Acceso a resultados</div>
              <h1 className="text-balance" style={{marginTop: 14}}>
                Tus resultados, <em className="serif">cuando los necesites</em>, donde los necesites.
              </h1>
              <p className="lead text-pretty" style={{marginTop: 18}}>
                Portal seguro con tus estudios disponibles 24/7. Acceso confidencial
                con dos factores y posibilidad de compartir el informe directamente
                con tu médico tratante.
              </p>

              <div className="timeline" style={{marginTop: 36}}>
                <div className="tl-step">
                  <div className="num">1</div>
                  <div>
                    <h4>Ingresa con tus credenciales</h4>
                    <p>Tu número de paciente y código de acceso enviado por correo o SMS.</p>
                  </div>
                </div>
                <div className="tl-step">
                  <div className="num">2</div>
                  <div>
                    <h4>Verifica tu identidad</h4>
                    <p>Confirmación por código de seguridad. Tu información está protegida en todo momento.</p>
                  </div>
                </div>
                <div className="tl-step">
                  <div className="num">3</div>
                  <div>
                    <h4>Consulta y comparte</h4>
                    <p>Descarga el PDF firmado, compáralo con estudios previos o envíalo a tu médico.</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="portal-card">
              <div style={{display:"flex", alignItems:"center", gap:12, marginBottom: 8}}>
                <span style={{width:44,height:44,borderRadius:12,background:"var(--brand-primary)",color:"#fff",display:"flex",alignItems:"center",justifyContent:"center"}}>
                  <Icon name="shield" size={22}/>
                </span>
                <div>
                  <div style={{fontWeight:700}}>Portal de pacientes</div>
                  <div style={{fontSize:12.5, color:"var(--ink-500)"}}>Acceso seguro · cifrado TLS 1.3</div>
                </div>
              </div>

              <div className="field" style={{marginTop: 18}}>
                <label>Número de paciente</label>
                <input placeholder="Ej. P-2024-0184" />
              </div>
              <div className="field">
                <label>Código de acceso</label>
                <input type="password" placeholder="••••••••" />
              </div>

              <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", marginTop: 14, fontSize: 13}}>
                <label style={{display:"flex", alignItems:"center", gap: 8, color:"var(--ink-700)"}}>
                  <input type="checkbox" defaultChecked /> Recordar este dispositivo
                </label>
                <a href="#" style={{color:"var(--brand-primary)", fontWeight: 600}}>¿Olvidaste tu acceso?</a>
              </div>

              <button className="btn btn-primary" style={{width:"100%", justifyContent:"center", marginTop: 18}}>
                Ingresar al portal <Icon name="arrow" size={15}/>
              </button>

              <div style={{marginTop: 20, paddingTop: 20, borderTop: "1px solid var(--ink-200)", textAlign:"center"}}>
                <div style={{fontSize: 13, color:"var(--ink-500)"}}>¿Eres médico o clínica con convenio?</div>
                <button className="btn-link" style={{marginTop:6, fontSize:13.5}} onClick={onOpenLead}>Acceder al portal profesional →</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink-50)"}}>
        <div className="container">
          <SectionHead
            eyebrow="Confidencialidad y respaldo"
            title="Privacidad clínica, en serio."
          />
          <div className="benefits">
            <div className="benefit">
              <Icon name="shield" size={26} className="ic" />
              <h3>Cifrado punto a punto</h3>
              <p>TLS 1.3 en tránsito y AES-256 en reposo. Tu información clínica está protegida.</p>
            </div>
            <div className="benefit">
              <Icon name="user" size={26} className="ic" />
              <h3>Autenticación robusta</h3>
              <p>Doble factor por SMS o email para cada inicio de sesión sensible.</p>
            </div>
            <div className="benefit">
              <Icon name="link" size={26} className="ic" />
              <h3>Compartir controlado</h3>
              <p>Envía resultados a tu médico con enlaces temporales y permisos revocables.</p>
            </div>
          </div>
        </div>
      </section>

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

function ContactoPage({ navigate, onOpenLead }) {
  const [tipo, setTipo] = React.useState("paciente");
  const [sent, setSent] = React.useState(false);

  return (
    <main data-screen-label="09 Contacto">
      <section className="section page-hero" style={{padding:"72px 0 32px"}}>
        <div className="container">
          <div className="eyebrow">Contacto</div>
          <h1 className="text-balance" style={{marginTop: 14}}>
            ¿Cómo podemos ayudarte hoy?
          </h1>
          <p className="lead text-pretty" style={{marginTop: 18}}>
            Cuéntanos qué necesitas. Un asesor del equipo correspondiente te
            responderá en menos de 24 horas hábiles.
          </p>
        </div>
      </section>

      <section style={{padding: "0 0 96px"}}>
        <div className="container contact-grid">
          {!sent ? (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div style={{display:"flex", flexWrap:"wrap", gap: 8, marginBottom: 24}}>
                {[
                  ["paciente", "Soy paciente", "user"],
                  ["medico", "Soy médico", "stethoscope"],
                  ["clinica", "Represento una clínica", "hospital"],
                  ["empresa", "Represento una empresa", "building"],
                ].map(([k, l, ic]) => (
                  <button type="button" key={k}
                          onClick={() => setTipo(k)}
                          className={"btn " + (tipo === k ? "btn-secondary" : "btn-ghost")}>
                    <Icon name={ic} size={15} /> {l}
                  </button>
                ))}
              </div>

              <div className="field-grid">
                <div className="field">
                  <label>Nombre completo</label>
                  <input required placeholder="Ej. Ana Ramírez" />
                </div>
                <div className="field">
                  <label>{tipo === "paciente" ? "Teléfono" : "Institución / Organización"}</label>
                  <input required placeholder={tipo === "paciente" ? "55 0000 0000" : "Nombre de tu organización"} />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input required type="email" placeholder="correo@ejemplo.com" />
                </div>
                <div className="field">
                  <label>Tema de consulta</label>
                  <select defaultValue="">
                    <option value="" disabled>Selecciona una opción</option>
                    {tipo === "paciente" && <>
                      <option>Agendar un estudio</option>
                      <option>Consultar resultados</option>
                      <option>Preparación previa</option>
                    </>}
                    {tipo === "medico" && <>
                      <option>Solicitar acceso médico</option>
                      <option>Apoyo diagnóstico</option>
                      <option>Convenio profesional</option>
                    </>}
                    {tipo === "clinica" && <>
                      <option>Solicitar alianza</option>
                      <option>Integración LIS / HIS</option>
                      <option>Cotizar volumen</option>
                    </>}
                    {tipo === "empresa" && <>
                      <option>Cotizar campaña</option>
                      <option>Programa preventivo</option>
                      <option>Jornada de salud</option>
                    </>}
                    <option>Otro</option>
                  </select>
                </div>
                <div className="field field-full">
                  <label>Mensaje</label>
                  <textarea placeholder="Cuéntanos brevemente cómo podemos ayudarte." />
                </div>
              </div>

              <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:12, marginTop: 24}}>
                <label style={{fontSize: 13, color:"var(--ink-600)", display:"flex", gap:8, alignItems:"center"}}>
                  <input type="checkbox" defaultChecked /> Acepto el aviso de privacidad
                </label>
                <button type="submit" className="btn btn-primary btn-lg">
                  Enviar mensaje <Icon name="arrow" size={16}/>
                </button>
              </div>
            </form>
          ) : (
            <div style={{padding: 48, background: "#fff", border:"1px solid var(--ink-200)", borderRadius: "var(--radius-lg)", textAlign:"center"}}>
              <div style={{width:72,height:72,borderRadius:999,background:"#ecf8ef",color:"#2c8a4a",display:"flex",alignItems:"center",justifyContent:"center", margin:"0 auto"}}>
                <Icon name="check" size={36} />
              </div>
              <h2 style={{marginTop: 22, fontSize: 28}}>Mensaje enviado</h2>
              <p style={{marginTop: 12, color:"var(--ink-600)", maxWidth: 44+"ch", margin:"12px auto 0"}}>
                Gracias por contactarnos. Un asesor del equipo de InfectoLab te responderá en menos de 24 horas hábiles.
              </p>
              <button className="btn btn-ghost" style={{marginTop: 24}} onClick={() => setSent(false)}>Enviar otro mensaje</button>
            </div>
          )}

          <aside className="contact-side">
            <h4>Contacto directo</h4>
            <div className="contact-list">
              <div className="row">
                <Icon name="phone" size={18}/>
                <div>
                  <div style={{fontWeight:600, color:"var(--ink-900)"}}>+52 (000) 000 0000</div>
                  <div style={{fontSize:13, color:"var(--ink-500)", marginTop:2}}>Lun–Sáb · 7:00 a 20:00</div>
                </div>
              </div>
              <div className="row">
                <Icon name="mail" size={18}/>
                <div>
                  <div style={{fontWeight:600, color:"var(--ink-900)"}}>contacto@infectolab.mx</div>
                  <div style={{fontSize:13, color:"var(--ink-500)", marginTop:2}}>Respuesta &lt; 24 h</div>
                </div>
              </div>
              <div className="row">
                <Icon name="pin" size={18}/>
                <div>
                  <div style={{fontWeight:600, color:"var(--ink-900)"}}>Av. Ejemplo 1234</div>
                  <div style={{fontSize:13, color:"var(--ink-500)", marginTop:2}}>Ciudad de México, MX</div>
                </div>
              </div>
              <div className="row">
                <Icon name="whatsapp" size={18}/>
                <div>
                  <div style={{fontWeight:600, color:"var(--ink-900)"}}>WhatsApp directo</div>
                  <div style={{fontSize:13, color:"var(--ink-500)", marginTop:2}}>Chat con un asesor</div>
                </div>
              </div>
            </div>

            <div style={{marginTop: 28, padding: "0", borderRadius: 14, overflow:"hidden", border:"1px solid var(--ink-200)"}}>
              <div style={{height: 200, background: "linear-gradient(135deg, #eaf3f6 0%, #d6e7ec 100%)", position:"relative"}}>
                <svg viewBox="0 0 400 200" style={{position:"absolute", inset:0, width:"100%", height:"100%"}}>
                  <defs>
                    <pattern id="mapG" width="30" height="30" patternUnits="userSpaceOnUse">
                      <path d="M0 15 H30 M15 0 V30" stroke="rgba(57,83,164,.12)" strokeWidth="1" />
                    </pattern>
                  </defs>
                  <rect width="400" height="200" fill="url(#mapG)" />
                  <path d="M 40 130 Q 100 80 180 110 T 360 90" stroke="rgba(57,83,164,.35)" strokeWidth="2" fill="none" strokeLinecap="round" />
                  <path d="M 60 180 Q 140 140 220 160 T 380 130" stroke="rgba(126,185,199,.5)" strokeWidth="2" fill="none" strokeLinecap="round" />
                </svg>
                <div style={{position:"absolute", top:"50%", left:"50%", transform:"translate(-50%, -100%)"}}>
                  <div style={{width:36, height:36, borderRadius:999, background:"var(--brand-primary)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", boxShadow:"0 8px 18px -6px rgba(57,83,164,.6)"}}>
                    <Icon name="pin" size={18}/>
                  </div>
                </div>
              </div>
              <div style={{padding: 14, fontSize:13, color:"var(--ink-600)"}}>
                <b style={{color:"var(--ink-900)"}}>Sucursal Polanco</b> · Toma de muestra y atención al cliente
              </div>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

/* ─────────── Mobile preview page ─────────── */
function MobilePage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="10 Mobile">
      <section className="section page-hero" style={{padding:"72px 0 32px"}}>
        <div className="container">
          <div className="eyebrow">Versión móvil</div>
          <h1 className="text-balance" style={{marginTop: 14, maxWidth: 22+"ch"}}>
            Diseño responsivo: home y catálogo en móvil.
          </h1>
          <p className="lead text-pretty" style={{marginTop: 18}}>
            Misma jerarquía, mismas decisiones de marca. Adaptamos navegación,
            cards y CTAs al tamaño de pantalla sin sacrificar el carácter clínico.
          </p>
        </div>
      </section>

      <section style={{padding: "0 0 96px"}}>
        <div className="container">
          <div className="mobile-frames">
            {/* Home mobile */}
            <div className="mobile-frame">
              <div className="mob-inner">
                <div className="mob-status">
                  <span>9:41</span>
                  <span style={{display:"flex", gap:8, alignItems:"center"}}>
                    <span className="signal"><span></span><span></span><span></span><span></span></span>
                    <span>5G</span>
                    <span>100%</span>
                  </span>
                </div>
                <div className="mob-header">
                  <img src="assets/logo-light-bg.png" alt="InfectoLab" />
                  <span className="mob-burger"><Icon name="menu" size={16}/></span>
                </div>

                <div style={{padding: "20px 18px 16px"}}>
                  <div style={{fontSize:10, fontWeight:700, color:"var(--brand-primary)", letterSpacing:".12em", textTransform:"uppercase"}}>Diagnóstico clínico</div>
                  <div style={{fontSize:22, fontWeight:700, lineHeight:1.15, marginTop:8, letterSpacing:"-.02em"}}>
                    Diagnóstico <em className="serif" style={{color:"var(--brand-primary)"}}>confiable</em> para cuatro audiencias.
                  </div>
                  <div style={{fontSize:12, color:"var(--ink-600)", marginTop:10, lineHeight:1.5}}>
                    Pacientes, médicos, clínicas y empresas. Una sola plataforma.
                  </div>
                  <div style={{display:"flex", gap:6, marginTop:14}}>
                    <button className="btn btn-primary btn-sm" style={{height:32, padding:"0 14px", fontSize:11}}>Agendar prueba</button>
                    <button className="btn btn-ghost btn-sm" style={{height:32, padding:"0 14px", fontSize:11}}>Ver resultados</button>
                  </div>
                </div>

                <div style={{padding: "16px 18px", background:"var(--ink-50)"}}>
                  <div style={{fontSize:10, fontWeight:700, color:"var(--brand-primary)", letterSpacing:".12em", textTransform:"uppercase"}}>Audiencias</div>
                  <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginTop:10}}>
                    {[
                      ["user", "Pacientes"],
                      ["stethoscope", "Médicos"],
                      ["hospital", "Clínicas"],
                      ["building", "Empresas"],
                    ].map(([ic, l]) => (
                      <div key={l} style={{padding:10, background:"#fff", border:"1px solid var(--ink-200)", borderRadius:10}}>
                        <Icon name={ic} size={16} style={{color:"var(--brand-primary)"}}/>
                        <div style={{fontSize:11, fontWeight:600, marginTop:6}}>{l}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{padding:"16px 18px"}}>
                  <div style={{fontSize:10, fontWeight:700, color:"var(--brand-primary)", letterSpacing:".12em", textTransform:"uppercase"}}>Servicios</div>
                  <div style={{display:"flex", flexDirection:"column", gap:6, marginTop:10}}>
                    {[
                      ["beaker", "Estudios generales", 180],
                      ["dna", "PCR múltiplex", 36],
                      ["virus", "Carga viral", 28],
                    ].map(([ic, t, c]) => (
                      <div key={t} style={{padding:10, border:"1px solid var(--ink-200)", borderRadius:10, display:"flex", alignItems:"center", gap:10}}>
                        <Icon name={ic} size={16} style={{color:"var(--brand-primary)"}}/>
                        <div style={{flex:1, fontSize:11.5, fontWeight:600}}>{t}</div>
                        <div style={{fontSize:10, color:"var(--ink-500)"}}>{c}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <div style={{padding:"16px 18px 32px"}}>
                  <div style={{background:"linear-gradient(135deg, #2e4488, #3953a4)", color:"#fff", borderRadius:14, padding:18}}>
                    <div style={{fontSize:13, fontWeight:700, lineHeight:1.3}}>¿Necesitas una solución para tu organización?</div>
                    <button className="btn btn-primary btn-sm" style={{marginTop:12, height:32, fontSize:11}}>Hablar con un asesor</button>
                  </div>
                </div>
              </div>
            </div>

            {/* Catalog mobile */}
            <div className="mobile-frame">
              <div className="mob-inner">
                <div className="mob-status">
                  <span>9:41</span>
                  <span style={{display:"flex", gap:8, alignItems:"center"}}>
                    <span className="signal"><span></span><span></span><span></span><span></span></span>
                    <span>5G</span>
                    <span>100%</span>
                  </span>
                </div>
                <div className="mob-header">
                  <img src="assets/logo-light-bg.png" alt="InfectoLab" />
                  <span className="mob-burger"><Icon name="menu" size={16}/></span>
                </div>

                <div style={{padding: "16px 18px"}}>
                  <div style={{fontSize:10, fontWeight:700, color:"var(--brand-primary)", letterSpacing:".12em", textTransform:"uppercase"}}>Catálogo</div>
                  <div style={{fontSize:20, fontWeight:700, lineHeight:1.15, marginTop:6, letterSpacing:"-.02em"}}>
                    Estudios y perfiles
                  </div>

                  <div style={{marginTop:14, display:"flex", alignItems:"center", gap:8, padding:"8px 12px", border:"1px solid var(--ink-200)", borderRadius:10, background:"#fff"}}>
                    <Icon name="search" size={14} style={{color:"var(--ink-400)"}}/>
                    <div style={{fontSize:11, color:"var(--ink-400)"}}>Buscar estudio o código…</div>
                  </div>

                  <div style={{display:"flex", gap:6, marginTop:12, overflow:"hidden"}}>
                    {["Todos","Generales","Perfiles","PCR","Carga viral"].map((c, i) => (
                      <div key={c} style={{
                        padding:"5px 10px", borderRadius:999, fontSize:10.5, fontWeight:600,
                        background: i === 0 ? "var(--brand-primary)" : "var(--ink-50)",
                        color: i === 0 ? "#fff" : "var(--ink-700)",
                        border: i === 0 ? "none" : "1px solid var(--ink-200)",
                        whiteSpace:"nowrap"
                      }}>{c}</div>
                    ))}
                  </div>
                </div>

                <div style={{padding:"4px 18px 32px", display:"flex", flexDirection:"column", gap:8}}>
                  {STUDIES.slice(0,5).map(s => (
                    <div key={s.id} style={{padding:12, border:"1px solid var(--ink-200)", borderRadius:10}}>
                      <div style={{display:"flex", gap:6, alignItems:"center", flexWrap:"wrap"}}>
                        <span style={{fontFamily:"ui-monospace, monospace", fontSize:9.5, color:"var(--ink-500)"}}>{s.code}</span>
                        <span style={{padding:"2px 7px", fontSize:9, fontWeight:600, background:"var(--brand-cyan-50)", color:"var(--brand-deep)", borderRadius:999}}>{s.category}</span>
                      </div>
                      <div style={{fontWeight:600, fontSize:12.5, marginTop:6, lineHeight:1.3}}>{s.name}</div>
                      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginTop:10}}>
                        <div style={{fontSize:14, fontWeight:700, letterSpacing:"-.01em"}}>${s.price.toLocaleString("es-MX")}</div>
                        <button className="btn btn-primary btn-sm" style={{height:26, padding:"0 10px", fontSize:10}}>Agendar</button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div style={{textAlign:"center", marginTop: 48, color:"var(--ink-500)", fontSize:14}}>
            Misma plataforma, optimizada para móvil. Header colapsable, cards apiladas, CTAs táctiles.
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ResultadosPage, ContactoPage, MobilePage });