// Doctores — Nav + Hero + mockup de la app del médico
// Reutiliza los primitivos de la home (P, Lockup, HWrap, HSection, Btn, Phone,
// TagPill, useIsMobile, HI…) para tener el MISMO estilo que la home de pacientes.

function DocNav() {
  const [open, setOpen] = React.useState(false);
  const links = [['Cómo funciona', '#como'], ['Ganancias', '#ganancias'], ['Beneficios', '#beneficios'], ['Requisitos', '#requisitos'], ['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="/" style={{ fontSize: 14, fontWeight: 800, color: P.inkSoft, textDecoration: 'none' }}>Soy paciente</a>
          <a href="/apply" style={{ padding: '12px 20px', borderRadius: 999, background: P.night, color: '#fff', fontSize: 14, fontWeight: 800, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            Aplicar ahora <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="/" style={{ fontSize: 16, fontWeight: 700, color: P.blue, textDecoration: 'none' }}>Soy paciente</a>
          <a href="/apply" style={{ marginTop: 6, textAlign: 'center', padding: '14px 0', borderRadius: 14, background: P.night, color: '#fff', fontWeight: 800, textDecoration: 'none' }}>Aplicar ahora</a>
        </div>
      )}
    </header>
  );
}

// Pantalla del teléfono: "nuevo pedido" en la app del médico.
function ScrDoctor({ u = 1 }) {
  return (
    <div style={{ fontSize: 10 * u, background: P.bgWarm }}>
      <div style={{ background: '#fff', padding: `${10 * u}px ${14 * u}px ${14 * u}px`, borderBottom: `1px solid ${P.line}` }}>
        <div style={{ fontSize: 9 * u, fontWeight: 800, letterSpacing: 1, textTransform: 'uppercase', color: P.inkMuted }}>Nuevo pedido</div>
        <div style={{ fontSize: 17 * u, fontWeight: 800, letterSpacing: -0.5, color: P.ink, marginTop: 3 }}>Visita disponible</div>
      </div>
      <div style={{ padding: 14 * u }}>
        <div style={{ margin: `${6 * u}px auto ${14 * u}px`, width: 56 * u, height: 56 * u, borderRadius: 999, background: P.blueSoft, display: 'grid', placeItems: 'center' }}>
          <HI.Stetho size={26 * u} color={P.blue}/>
        </div>
        <div style={{ background: '#fff', borderRadius: 14 * u, border: `1px solid ${P.line}`, padding: 13 * u }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 12.5 * u, fontWeight: 800, color: P.ink }}>Carla R., 34 años</span>
            <span style={{ fontSize: 15 * u, fontWeight: 800, letterSpacing: -0.4, color: P.green }}>S/ 120</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 * u, marginTop: 8 * u, fontSize: 11 * u, color: P.inkSoft }}>
            <HI.Pin size={12 * u} color={P.inkMuted}/> Miraflores · 2.1 km
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 * u, marginTop: 5 * u, fontSize: 11 * u, color: P.inkSoft }}>
            <HI.Heart size={12 * u} color={P.inkMuted}/> Fiebre y dolor de cabeza
          </div>
        </div>
        <div style={{ display: 'flex', gap: 9 * u, marginTop: 13 * u }}>
          <div style={{ flex: 1, textAlign: 'center', padding: `${11 * u}px 0`, borderRadius: 12 * u, background: '#fff', border: `1px solid ${P.line}`, fontSize: 11.5 * u, fontWeight: 800, color: P.inkSoft }}>Rechazar</div>
          <div style={{ flex: 2, textAlign: 'center', padding: `${11 * u}px 0`, borderRadius: 12 * u, background: `linear-gradient(135deg, ${P.blue}, ${P.blueDark})`, color: '#fff', fontSize: 11.5 * u, fontWeight: 800 }}>Aceptar visita</div>
        </div>
      </div>
    </div>
  );
}

function DocHero() {
  const mobile = useIsMobile(1040);
  const front = mobile ? Math.min(300, (typeof window !== 'undefined' ? window.innerWidth : 360) - 72) : 320;
  const stats = [['+340', 'médicos activos'], ['S/ 2.8k', 'promedio mensual'], ['4.9 ★', 'calificación']];
  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)" color={P.green}>Ahora recibiendo aplicaciones</TagPill>
            <h1 className="h1" style={{ margin: '20px 0 0', color: P.ink, maxWidth: 560 }}>Atiende pacientes a domicilio en tus horas libres</h1>
            <p style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.62, color: P.inkSoft, maxWidth: 460, margin: '18px 0 0' }}>
              Recibe visitas cerca de ti, atiéndelas cuando puedas y cobra directo a tu Yape o cuenta. MEDIKADO se encarga del resto.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
              <a href="/apply" 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)' }}>
                Empezar mi aplicación
                <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="#como" 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 cómo funciona
              </a>
            </div>
            <div style={{ display: 'flex', gap: 30, flexWrap: 'wrap', marginTop: 46 }}>
              {stats.map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontSize: 28, fontWeight: 800, color: P.ink, letterSpacing: -0.8 }}>{n}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: P.inkMuted, marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 26, fontSize: 13, fontWeight: 600, color: P.inkMuted }}>Toma 7 minutos · Sin costo · Respuesta en 48 h</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 : 48 }}>
              <div style={{ zIndex: 3, marginBottom: mobile ? -20 : -46 }}>
                <Phone w={front}><ScrDoctor u={front / 300}/></Phone>
              </div>
            </div>
            {!mobile && (
              <div className="floatchip" style={{ position: 'absolute', left: -20, bottom: 96, zIndex: 5, background: '#fff', borderRadius: 18, padding: '14px 16px', width: 196, 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={{ width: 38, height: 38, borderRadius: 999, background: P.greenSoft, display: 'grid', placeItems: 'center' }}><HI.Card size={19} color={P.green}/></div>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 700, color: P.inkMuted }}>Ganancia hoy</div>
                    <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.5, color: P.ink }}>S/ 480</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DocNav, DocHero, ScrDoctor });