// Nav + Hero + Features
function Nav() {
  const [open, setOpen] = React.useState(false);
  const links = [['Cómo funciona', '#como'], ['Servicios', '#servicios'], ['Opiniones', '#opiniones'], ['Preguntas', '#faq']];
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(255,255,255,0.82)', backdropFilter: 'blur(14px)', borderBottom: `1px solid ${P.line}` }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '14px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
        <a href="#" style={{ textDecoration: 'none' }}><Lockup/></a>
        <nav className="navlinks" style={{ display: 'flex', gap: 28 }}>
          {links.map(([t, h]) => (
            <a key={t} href={h} style={{ fontSize: 14.5, fontWeight: 700, color: P.inkSoft, textDecoration: 'none' }}
              onMouseEnter={e => e.currentTarget.style.color = P.blue}
              onMouseLeave={e => e.currentTarget.style.color = P.inkSoft}>{t}</a>
          ))}
        </nav>
        <div className="navcta" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href="/doctores" style={{ fontSize: 14, fontWeight: 800, color: P.inkSoft, textDecoration: 'none' }}>Soy Doctor</a>
          <a href="#descargar" style={{ padding: '12px 20px', borderRadius: 999, background: P.night, color: '#fff', fontSize: 14, fontWeight: 800, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            Descargar app <HI.Arrow size={15}/>
          </a>
        </div>
        <button className="navburger" onClick={() => setOpen(o => !o)} style={{ display: 'none', background: '#fff', border: `1px solid ${P.lineStrong}`, borderRadius: 12, padding: '10px 12px', flexDirection: 'column', gap: 4 }}>
          {[0, 1, 2].map(i => <span key={i} style={{ width: 18, height: 2, background: P.ink, borderRadius: 2 }}/>)}
        </button>
      </div>
      {open && (
        <div style={{ borderTop: `1px solid ${P.line}`, background: '#fff', padding: '16px 24px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {links.map(([t, h]) => <a key={t} href={h} onClick={() => setOpen(false)} style={{ fontSize: 16, fontWeight: 700, color: P.ink, textDecoration: 'none' }}>{t}</a>)}
          <a href="#descargar" style={{ marginTop: 6, textAlign: 'center', padding: '14px 0', borderRadius: 14, background: P.night, color: '#fff', fontWeight: 800, textDecoration: 'none' }}>Descargar app</a>
        </div>
      )}
    </header>
  );
}

function Hero() {
  const mobile = useIsMobile(1040);
  // Teléfonos más grandes que antes (se veían chicos). En móvil, uno solo y
  // acotado para que no desborde la pantalla.
  const front = mobile ? Math.min(300, (typeof window !== 'undefined' ? window.innerWidth : 360) - 72) : 356;
  const back = 300;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: `linear-gradient(155deg, ${P.lilac} 0%, #EAF1FC 42%, ${P.cream} 100%)` }}>
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(55% 50% at 88% 6%, rgba(255,231,205,0.8), rgba(255,231,205,0) 70%)' }}/>
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', padding: '64px 24px 0' }}>
        <div className="herogrid">
          <div style={{ paddingBottom: 56 }}>
            <TagPill bg="rgba(255,255,255,0.8)">Un médico en tu casa · Lima</TagPill>
            <h1 className="h1" style={{ margin: '20px 0 0', color: P.ink, maxWidth: 560 }}>Atención médica que llega a tu puerta</h1>
            <p style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.62, color: P.inkSoft, maxWidth: 430, margin: '18px 0 0' }}>
              Pide una visita a domicilio, habla por video con un doctor certificado y guarda tus recetas y resultados — todo en una sola app.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
              <a href="#descargar" style={{ padding: '13px 10px 13px 24px', borderRadius: 999, background: `linear-gradient(135deg, ${P.blue}, ${P.blueDark})`, color: '#fff', fontSize: 15, fontWeight: 800, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 11, boxShadow: '0 14px 30px -14px rgba(24,99,224,0.6)' }}>
                Descargar la app
                <span style={{ width: 28, height: 28, borderRadius: 999, background: 'rgba(255,255,255,0.22)', display: 'grid', placeItems: 'center' }}><HI.Arrow size={15}/></span>
              </a>
              <a href="#servicios" style={{ padding: '15px 26px', borderRadius: 999, background: 'rgba(255,255,255,0.7)', border: `1.5px solid ${P.blue}`, color: P.blueDark, fontSize: 15, fontWeight: 800, textDecoration: 'none' }}>
                Ver servicios
              </a>
            </div>
          </div>
          <div className="herophones" style={{ position: 'relative', minHeight: mobile ? 0 : 600 }}>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'center', paddingTop: mobile ? 20 : 44 }}>
              {!mobile && (
                <div style={{ marginRight: -78, marginBottom: 56, zIndex: 1 }}>
                  <PhoneImage w={back} src="/img/cliente2.jpg"/>
                </div>
              )}
              <div style={{ zIndex: 3, marginBottom: mobile ? -20 : -52 }}>
                <PhoneImage w={front} src="/img/cliente1.jpg"/>
              </div>
            </div>
            {!mobile && <div className="floatchip" style={{ position: 'absolute', right: -14, bottom: 42, zIndex: 5, background: '#fff', borderRadius: 18, padding: '14px 16px', width: 216, boxShadow: '0 22px 46px -20px rgba(8,25,43,0.4)', border: `1px solid ${P.line}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ display: 'flex' }}>
                  {[[P.blueSoft, P.blueDark, 'RM'], [P.greenSoft, '#0B6B4E', 'DA'], [P.amberSoft, '#8A5A00', 'CR']].map(([bg, fg, ini], i) => (
                    <span key={ini} style={{ width: 28, height: 28, borderRadius: 999, background: bg, color: fg, fontSize: 10, fontWeight: 800, display: 'grid', placeItems: 'center', border: '2px solid #fff', marginLeft: i ? -9 : 0 }}>{ini}</span>
                  ))}
                </div>
                <span style={{ fontSize: 19, fontWeight: 800, letterSpacing: -0.6, color: P.ink }}>4 mil+</span>
              </div>
              <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.45, color: P.inkSoft, marginTop: 8 }}>
                visitas médicas atendidas en Lima y Callao con 4.9 de 5.
              </div>
            </div>}
          </div>
        </div>
      </div>
    </section>
  );
}

function Servicios() {
  return (
    <HSection id="servicios" bg="#fff" padY={96}>
      <HWrap max={1180}>
        <Center eyebrow="Servicios" title={<>Todo lo que tu casa necesita.<br/>Nada que no.</>} lede="Atención médica completa, sin salas de espera ni trámites."/>
        <div className="bento3">
          {/* Columna izquierda */}
          <div className="bcol">
            <FeatCard hue={255} icon={<HI.Home size={22}/>} title="Visita médica a domicilio"
              body="Un médico general o especialista llega a tu puerta el mismo día. Eliges la hora y ves el precio antes de confirmar."/>
            <FeatCard hue={215} icon={<HI.Badge size={22}/>} title="Recetas digitales"
              body="Recibes la receta firmada en la app y la muestras en cualquier farmacia."/>
          </div>
          {/* Columna central: teléfono destacado + tarjeta */}
          <div className="bcol">
            <div style={{ background: `linear-gradient(160deg, ${P.blue}, #3D7BF0 55%, ${P.green})`, borderRadius: 22, padding: 26, display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'hidden', minHeight: 360 }}>
              <div style={{ textAlign: 'center', color: '#fff' }}>
                <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 1.8, textTransform: 'uppercase', opacity: 0.75 }}>En vivo</div>
                <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: -0.6, marginTop: 6, lineHeight: 1.2 }}>Sigue al médico<br/>hasta tu puerta</div>
              </div>
              <div style={{ marginTop: 22, marginBottom: -120 }}>
                <Phone w={238}><ScrTrack u={0.78}/></Phone>
              </div>
            </div>
            <FeatCard hue={285} icon={<HI.Card size={22}/>} title="Pago simple y claro"
              body="Precio fijo por consulta. Pagas con Yape, Plin o tarjeta desde la app."/>
          </div>
          {/* Columna derecha */}
          <div className="bcol">
            <FeatCard hue={195} icon={<HI.Chat size={22}/>} title="Videoconsulta inmediata"
              body="Habla con un doctor en minutos desde el celular. Ideal para dudas, controles y recetas."/>
            <FeatCard hue={160} icon={<HI.Flask size={22}/>} title="Laboratorio en casa"
              body="Toma de muestras a domicilio y resultados que llegan directo a tu historia."/>
          </div>
        </div>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Btn href="#descargar" kind="ghost">Ver todo en la app <HI.Arrow size={15} color={P.ink}/></Btn>
        </div>
      </HWrap>
    </HSection>
  );
}

Object.assign(window, { Nav, Hero, Servicios });
