// Cómo funciona · Descarga · Opiniones · FAQ · Footer
function Como() {
  const cards = [
    { t: 'Pide desde la app', b: 'Eliges el motivo, tu dirección y la hora. Ves el precio y el médico antes de confirmar.', scr: <ScrHome u={0.74}/> },
    { t: 'Sigue la llegada en vivo', b: 'Ves quién viene, su registro CMP y cuánto falta. Puedes llamar o chatear en cualquier momento.', scr: <ScrTrack u={0.74}/> },
    { t: 'Tu historia queda guardada', b: 'Receta, informe y resultados quedan en la app para ti y tu familia.', scr: <ScrRecords u={0.74}/> },
  ];
  return (
    <HSection id="como" bg={`linear-gradient(180deg, ${P.lilac}, #F0F5FC 60%, #fff)`} padY={96}>
      <HWrap max={1180}>
        <Center eyebrow="Cómo funciona" eyebrowBg="rgba(255,255,255,0.75)" title="Tres pasos y el médico está en camino" lede="Sin llamadas, sin colas, sin papeles."/>
        <div className="g3cards">
          {cards.map((c, i) => (
            <div key={c.t} style={{ background: '#fff', border: `1px solid ${P.line}`, borderRadius: 24, padding: 26, paddingBottom: 0, overflow: 'hidden', boxShadow: '0 30px 60px -40px rgba(8,25,43,0.35)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                <span style={{ width: 30, height: 30, borderRadius: 999, background: P.night, color: '#fff', fontSize: 14, fontWeight: 800, display: 'grid', placeItems: 'center' }}>{i + 1}</span>
                <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: -0.5, color: P.ink }}>{c.t}</div>
              </div>
              <p style={{ margin: '12px 0 0', fontSize: 14.5, fontWeight: 500, lineHeight: 1.55, color: P.inkSoft, minHeight: 68 }}>{c.b}</p>
              <div style={{ marginTop: 20, marginBottom: -70, display: 'flex', justifyContent: 'center' }}>
                <Phone w={222}>{c.scr}</Phone>
              </div>
            </div>
          ))}
        </div>
      </HWrap>
    </HSection>
  );
}


function Descarga() {
  return (
    <HSection id="descargar" bg="#fff" padY={40}>
      <HWrap max={1180}>
        <div style={{ borderRadius: 32, padding: '68px 32px', textAlign: 'center', background: `linear-gradient(140deg, ${P.blueDark} 0%, ${P.blue} 45%, ${P.green} 100%)`, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(50% 60% at 15% 100%, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%)' }}/>
          <div style={{ position: 'relative' }}>
            <h2 className="h2" style={{ color: '#fff', margin: '0 auto', maxWidth: 620 }}>Descarga MEDIKADO y ten un médico a un toque</h2>
            <p style={{ fontSize: 16.5, fontWeight: 500, color: 'rgba(255,255,255,0.85)', maxWidth: 480, margin: '16px auto 0' }}>
              Disponible para iOS y Android. Escanea el código o descárgala desde tu tienda.
            </p>
            <div style={{ width: 132, height: 132, margin: '32px auto 0', background: '#fff', borderRadius: 18, padding: 12, display: 'grid', placeItems: 'center' }}>
              <div style={{ width: '100%', height: '100%', display: 'grid', gridTemplateColumns: 'repeat(9,1fr)', gridTemplateRows: 'repeat(9,1fr)', gap: 2 }}>
                {Array.from({ length: 81 }).map((_, i) => {
                  const r = Math.floor(i / 9), c = i % 9;
                  const corner = (r < 3 && c < 3) || (r < 3 && c > 5) || (r > 5 && c < 3);
                  const ring = corner && (r % 3 === 0 || c % 3 === 0 || (r % 3 === 1 && c % 3 === 1));
                  const on = corner ? ring : (r * 7 + c * 5 + (r * c)) % 3 !== 0;
                  return <span key={i} style={{ background: on ? P.night : 'transparent', borderRadius: 1 }}/>;
                })}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 28 }}>
              <StoreBtn top="Descárgala en" name="App Store"/>
              <StoreBtn top="Disponible en" name="Google Play"/>
            </div>
          </div>
        </div>
      </HWrap>
    </HSection>
  );
}

function Opiniones() {
  const t = [
    ['Rosa Mendoza', 'Miraflores', 'Mi mamá no puede salir sola. El médico llegó en 30 minutos y nos dejó todo explicado.'],
    ['Diego Alarcón', 'San Isidro', 'Videoconsulta a las 11 de la noche por la fiebre de mi hijo. Receta en la app al instante.'],
    ['Carla Ruiz', 'Surco', 'Ver al médico llegando en el mapa me dio mucha tranquilidad. Se siente serio y ordenado.'],
    ['Luis Paredes', 'La Molina', 'Pagué con Yape en dos toques. Precio claro desde el inicio, sin sorpresas.'],
    ['Ana Quispe', 'Magdalena', 'Tomaron las muestras en casa y los resultados llegaron a la app en un día.'],
    ['Jorge Salas', 'Barranco', 'El plan Familia nos ahorró tres viajes a la clínica este mes.'],
  ];
  return (
    <HSection id="opiniones" bg={P.bg} padY={96}>
      <HWrap max={1180}>
        <Center eyebrow="Opiniones" eyebrowBg={P.blueSoft} title="Familias que ya no salen de casa para atenderse" lede="4.9 de 5 en más de 4 mil visitas realizadas en Lima."/>
        <div className="g3">
          {t.map(([n, d, q]) => (
            <div key={n} style={{ background: '#fff', border: `1px solid ${P.line}`, borderRadius: 20, padding: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 999, background: P.blueSoft, color: P.blueDark, display: 'grid', placeItems: 'center', fontSize: 14, fontWeight: 800 }}>
                  {n.split(' ').map(w => w[0]).join('')}
                </div>
                <div style={{ lineHeight: 1.2 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 800, color: P.ink }}>{n}</div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: P.inkMuted }}>{d}</div>
                </div>
              </div>
              <p style={{ margin: '16px 0 14px', fontSize: 14.5, fontWeight: 500, lineHeight: 1.6, color: P.inkSoft, textWrap: 'pretty' }}>“{q}”</p>
              <Stars/>
            </div>
          ))}
        </div>
      </HWrap>
    </HSection>
  );
}

function Faq() {
  const qs = [
    ['¿En qué distritos atienden?', 'Cubrimos Lima Metropolitana y Callao. Al poner tu dirección en la app te mostramos los médicos disponibles y el tiempo estimado de llegada.'],
    ['¿Cuánto demora en llegar el médico?', 'El promedio es 38 minutos. Si eliges una hora futura, el médico llega dentro de la ventana que reservaste.'],
    ['¿Los médicos están certificados?', 'Sí. Todos tienen registro CMP vigente, verificado por nuestro equipo, y su número aparece en tu consulta.'],
    ['¿Atienden emergencias?', 'No reemplazamos una emergencia. Si hay riesgo de vida, llama al 106; para todo lo demás, una visita a domicilio resuelve.'],
    ['¿Cómo pago mi consulta?', 'Con Yape, Plin, tarjeta de débito o crédito desde la app. El precio se muestra antes de confirmar.'],
    ['¿La receta sirve en farmacias?', 'Sí. Es una receta digital firmada por el médico, válida en farmacias y boticas del país.'],
    ['¿Puedo agregar a mi familia?', 'Con el plan Familia agregas hasta 4 integrantes, cada uno con su propia historia clínica.'],
    ['¿Atienden de noche y fines de semana?', 'Sí, los 7 días. La disponibilidad nocturna depende de los médicos activos en tu zona en ese momento.'],
  ];
  const [open, setOpen] = React.useState(0);
  const cols = [qs.slice(0, 4), qs.slice(4)];
  const Item = ({ q, a, i }) => (
    <div style={{ background: open === i ? '#fff' : P.bgWarm, border: `1px solid ${open === i ? P.lineStrong : 'transparent'}`, borderRadius: 18, overflow: 'hidden', boxShadow: open === i ? '0 18px 40px -30px rgba(8,25,43,0.4)' : 'none' }}>
      <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', background: 'none', border: 'none', padding: '20px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, textAlign: 'left' }}>
        <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: -0.3, color: P.ink, lineHeight: 1.3 }}>{q}</span>
        <span style={{ width: 30, height: 30, borderRadius: 999, background: open === i ? P.blue : P.night, color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0, position: 'relative' }}>
          <span style={{ position: 'absolute', width: 12, height: 2, borderRadius: 2, background: '#fff' }}/>
          <span style={{ position: 'absolute', width: 12, height: 2, borderRadius: 2, background: '#fff', transform: open === i ? 'rotate(0deg)' : 'rotate(90deg)', transition: 'transform .18s' }}/>
        </span>
      </button>
      {open === i && <p style={{ margin: 0, padding: '0 20px 22px', fontSize: 14.5, fontWeight: 500, lineHeight: 1.6, color: P.inkSoft }}>{a}</p>}
    </div>
  );
  return (
    <HSection id="faq" bg="#fff" padY={96}>
      <HWrap max={1080}>
        <Center eyebrow="Preguntas frecuentes" title="Antes de pedir tu primera visita" lede="Si te queda alguna duda, escríbenos por WhatsApp y te respondemos al toque."/>
        <div className="faqcols">
          {cols.map((col, c) => (
            <div key={c} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {col.map((it, j) => <Item key={it[0]} q={it[0]} a={it[1]} i={c * 4 + j}/>)}
            </div>
          ))}
        </div>
      </HWrap>
    </HSection>
  );
}

function Newsletter() {
  return (
    <HSection bg="#fff" padY={40}>
      <HWrap max={1180}>
        <div style={{ borderRadius: 30, background: `linear-gradient(120deg, ${P.blueDark} 0%, ${P.blue} 42%, ${P.green} 100%)`, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 70% at 12% 110%, rgba(255,255,255,0.2), rgba(255,255,255,0) 70%)' }}/>
          <div className="nlgrid" style={{ position: 'relative' }}>
            <div style={{ padding: '56px 12px 56px 48px' }}>
              <h2 className="h2" style={{ color: '#fff', margin: 0, maxWidth: 420 }}>Cuida a los tuyos sin salir de casa</h2>
              <p style={{ fontSize: 15.5, fontWeight: 500, lineHeight: 1.6, color: 'rgba(255,255,255,0.82)', maxWidth: 380, marginTop: 14 }}>
                Déjanos tu correo y te enviamos el link de descarga más consejos de salud para tu familia.
              </p>
              <form onSubmit={e => e.preventDefault()} style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 8, background: '#fff', borderRadius: 999, padding: 7, maxWidth: 400 }}>
                <input type="email" placeholder="Tu correo electrónico" style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent', fontFamily: 'inherit', fontSize: 14.5, fontWeight: 600, color: P.ink, padding: '10px 14px' }}/>
                <button style={{ border: 'none', borderRadius: 999, background: `linear-gradient(135deg, ${P.blue}, ${P.blueDark})`, color: '#fff', fontSize: 14.5, fontWeight: 800, padding: '11px 12px 11px 20px', display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                  Enviar
                  <span style={{ width: 24, height: 24, borderRadius: 999, background: 'rgba(255,255,255,0.22)', display: 'grid', placeItems: 'center' }}><HI.Arrow size={13}/></span>
                </button>
              </form>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 24 }}>
                <StoreBtn top="Descárgala en" name="App Store" dark={false}/>
                <StoreBtn top="Disponible en" name="Google Play" dark={false}/>
              </div>
            </div>
            <div className="nlphone" style={{ position: 'relative', minHeight: 300 }}>
              <div style={{ position: 'absolute', right: 56, top: -46, transform: 'rotate(-6deg)' }}>
                <Phone w={250}><ScrVideo u={0.8}/></Phone>
              </div>
            </div>
          </div>
        </div>
      </HWrap>
    </HSection>
  );
}

function Footer() {
  const cols = [
    ['Servicio', [['Visita a domicilio', '#servicios'], ['Videoconsulta', '#servicios'], ['Laboratorio en casa', '#servicios'], ['Recetas digitales', '#servicios']]],
    ['MEDIKADO', [['Cómo funciona', '#como'], ['Opiniones', '#opiniones'], ['Preguntas', '#faq'], ['Para médicos', '/doctores'], ['Trabaja con nosotros', '/apply']]],
    ['Contacto', [['ayuda@medikado.pe', 'mailto:ayuda@medikado.pe'], ['WhatsApp 900 000 000', '#'], ['Lima y Callao, Perú', '#'], ['Libro de reclamaciones', '#']]],
  ];
  return (
    <footer style={{ background: '#fff', borderTop: `1px solid ${P.line}`, padding: '64px 0 34px' }}>
      <HWrap max={1180}>
        <div className="fgrid2">
          <div>
            <Lockup size={22} sub={null}/>
            <p style={{ fontSize: 14.5, fontWeight: 500, lineHeight: 1.6, color: P.inkSoft, maxWidth: 290, marginTop: 18 }}>
              Atención médica a domicilio y por video, con médicos certificados en Lima y Callao.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              {['IG', 'X', 'in', 'f'].map(s => (
                <a key={s} href="#" style={{ width: 34, height: 34, borderRadius: 999, background: P.bgWarm, color: P.inkSoft, fontSize: 12, fontWeight: 800, display: 'grid', placeItems: 'center', textDecoration: 'none' }}
                  onMouseEnter={e => { e.currentTarget.style.background = P.blueSoft; e.currentTarget.style.color = P.blue; }}
                  onMouseLeave={e => { e.currentTarget.style.background = P.bgWarm; e.currentTarget.style.color = P.inkSoft; }}>{s}</a>
              ))}
            </div>
            <a href="#descargar" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 22, padding: '12px 12px 12px 22px', borderRadius: 999, background: P.night, color: '#fff', fontSize: 14.5, fontWeight: 800, textDecoration: 'none' }}>
              Descargar app
              <span style={{ width: 26, height: 26, borderRadius: 999, background: 'rgba(255,255,255,0.2)', display: 'grid', placeItems: 'center' }}><HI.Arrow size={14}/></span>
            </a>
          </div>
          {cols.map(([t, items]) => (
            <div key={t}>
              <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: 1.6, textTransform: 'uppercase', color: P.inkMuted }}>{t}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11, marginTop: 16 }}>
                {items.map(([l, h]) => (
                  <a key={l} href={h} style={{ fontSize: 14.5, fontWeight: 600, color: P.inkSoft, textDecoration: 'none' }}
                    onMouseEnter={e => e.currentTarget.style.color = P.blue}
                    onMouseLeave={e => e.currentTarget.style.color = P.inkSoft}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ height: 1, background: P.line, margin: '46px 0 20px' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 14, fontSize: 13, fontWeight: 600, color: P.inkMuted }}>
          <span>© 2026 MEDIKADO. Todos los derechos reservados.</span>
          <span style={{ display: 'flex', gap: 22 }}>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Términos</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Privacidad</a>
          </span>
        </div>
      </HWrap>
    </footer>
  );
}

Object.assign(window, { Como, Descarga, Opiniones, Faq, Newsletter, Footer });