// Doctores — secciones (mismos primitivos que la home de pacientes)

// ── Cómo funciona ──────────────────────────────────────────
function DocComo() {
  const steps = [
    ['01', 'Aplica en 7 minutos', 'Llena el formulario con tu CMP, sube tu DNI y foto. Validamos en 48 horas hábiles.', <HI.Card size={22}/>],
    ['02', 'Configura tu disponibilidad', 'Escoge tus zonas y horarios. Activas y desactivas el modo “Disponible” cuando quieras.', <HI.Clock size={22}/>],
    ['03', 'Recibe pedidos cercanos', 'Te llega una notificación con síntomas, dirección y tarifa. Aceptas o rechazas en segundos.', <HI.Pin size={22}/>],
    ['04', 'Atiende y cobra', 'Llegas, consultas y emites la receta. Te pagamos por Yape o cuenta bancaria.', <HI.Badge size={22}/>],
  ];
  return (
    <HSection id="como" bg={P.bgWarm}>
      <HWrap max={1180}>
        <Center eyebrow="Cómo funciona" title={<>Cuatro pasos para empezar.</>} lede="Sin entrevistas, sin burocracia. Si eres médico colegiado en Perú, puedes estar recibiendo pedidos esta misma semana."/>
        <div className="g4">
          {steps.map(([n, t, d, icon]) => (
            <Card key={n} pad={26}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                <IconBubble hue={255} size={44}>{icon}</IconBubble>
                <span style={{ fontSize: 14, fontWeight: 800, color: P.inkMuted, letterSpacing: 1 }}>{n}</span>
              </div>
              <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: -0.4, color: P.ink, lineHeight: 1.25 }}>{t}</div>
              <p style={{ margin: '8px 0 0', fontSize: 14, fontWeight: 500, lineHeight: 1.55, color: P.inkSoft }}>{d}</p>
            </Card>
          ))}
        </div>
      </HWrap>
    </HSection>
  );
}

// ── Ganancias (calculadora) ────────────────────────────────
function CalcSlider({ label, value, min, max, step, display, onChange }) {
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 9 }}>
        <span style={{ fontSize: 13, fontWeight: 600, color: 'rgba(255,255,255,0.85)' }}>{label}</span>
        <span style={{ fontSize: 18, fontWeight: 800 }}>{display}</span>
      </div>
      <input type="range" value={value} min={min} max={max} step={step}
        onChange={e => onChange(Number(e.target.value))}
        style={{ width: '100%', background: 'rgba(255,255,255,0.2)' }}/>
    </div>
  );
}

function DocGanancias() {
  const mobile = useIsMobile(900);
  const [visits, setVisits] = React.useState(4);
  const [days, setDays] = React.useState(5);
  const [fee, setFee] = React.useState(120);
  const monthly = visits * days * fee * 4;
  return (
    <HSection id="ganancias" bg="#fff">
      <HWrap max={1180}>
        <div className="g2c">
          <div>
            <TagPill>Calculadora de ingresos</TagPill>
            <h2 className="h2" style={{ margin: '16px 0 0', color: P.ink }}>Tú decides cuánto trabajas <span style={{ color: P.blue }}>y cuánto ganas.</span></h2>
            <p style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.6, color: P.inkSoft, marginTop: 16, maxWidth: 460 }}>
              Mueve los controles y mira tu ingreso mensual estimado. Cobras el 82% de cada visita — la comisión de MEDIKADO cubre soporte, seguro y pagos.
            </p>
            <div style={{ marginTop: 30 }}>
              <a href="/apply" style={{ padding: '15px 26px', borderRadius: 999, background: `linear-gradient(135deg, ${P.blue}, ${P.blueDark})`, color: '#fff', fontSize: 15.5, fontWeight: 800, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, boxShadow: '0 14px 30px -14px rgba(24,99,224,0.6)' }}>
                Quiero empezar <HI.Arrow size={16}/>
              </a>
            </div>
          </div>
          <div style={{ padding: mobile ? 26 : 38, borderRadius: 28, background: `linear-gradient(160deg, ${P.blueInk} 0%, ${P.blue} 100%)`, color: '#fff', boxShadow: '0 30px 70px -30px rgba(24,99,224,0.5)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -80, right: -80, width: 220, height: 220, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }}/>
            <div style={{ position: 'relative' }}>
              <div style={{ fontSize: 12.5, fontWeight: 800, letterSpacing: 1.4, textTransform: 'uppercase', opacity: 0.72 }}>Ganancia estimada mensual</div>
              <div style={{ fontSize: mobile ? 44 : 60, fontWeight: 800, letterSpacing: -2, lineHeight: 1, marginTop: 10 }}>
                S/ {Math.round(monthly * 0.82).toLocaleString('es-PE')}
              </div>
              <div style={{ fontSize: 13.5, opacity: 0.8, marginTop: 8 }}>después de la comisión de MEDIKADO (18%)</div>
              <div style={{ height: 1, background: 'rgba(255,255,255,0.16)', margin: '28px 0' }}/>
              <CalcSlider label="Visitas por día" value={visits} min={1} max={12} step={1} display={visits} onChange={setVisits}/>
              <CalcSlider label="Días por semana" value={days} min={1} max={7} step={1} display={days} onChange={setDays}/>
              <CalcSlider label="Tarifa por visita" value={fee} min={60} max={250} step={10} display={`S/ ${fee}`} onChange={setFee}/>
              <div style={{ marginTop: 20, padding: 14, borderRadius: 14, background: 'rgba(255,255,255,0.1)', fontSize: 13, lineHeight: 1.5 }}>
                Por visita de S/ {fee}: <b style={{ color: '#B4F0D8' }}>tu neto S/ {Math.round(fee * 0.82)}</b> · comisión S/ {Math.round(fee * 0.18)}
              </div>
            </div>
          </div>
        </div>
      </HWrap>
    </HSection>
  );
}

// ── Beneficios ─────────────────────────────────────────────
function DocBeneficios() {
  const items = [
    [255, <HI.Clock size={22}/>, 'Horario 100% flexible', 'Decides qué días y horas trabajas. Sin penalizaciones por rechazar pedidos.'],
    [150, <HI.Card size={22}/>, 'Pagos semanales', 'Cada semana depositamos tus ganancias a tu Yape o cuenta bancaria.'],
    [210, <HI.Shield size={22}/>, 'Seguro incluido', 'Cubrimos responsabilidad civil profesional sin costo adicional para ti.'],
    [190, <HI.Pin size={22}/>, 'Pedidos cerca de ti', 'Solo recibes visitas en las zonas que elegiste — nunca te enviamos lejos.'],
    [275, <HI.Badge size={22}/>, 'Pacientes verificados', 'Todo paciente se identifica con DNI y teléfono antes de que aceptes la visita.'],
    [235, <HI.Chat size={22}/>, 'Soporte cuando lo necesitas', 'Chat directo con el equipo MEDIKADO ante cualquier duda o urgencia.'],
  ];
  return (
    <HSection id="beneficios" bg={P.bgWarm}>
      <HWrap max={1180}>
        <Center eyebrow="Beneficios" title={<>Hecho para que te concentres en lo que importa: atender.</>}/>
        <div className="g3cards">
          {items.map(([hue, icon, t, d]) => (
            <Card key={t} pad={28}>
              <IconBubble hue={hue} size={48}>{icon}</IconBubble>
              <div style={{ fontSize: 18.5, fontWeight: 800, letterSpacing: -0.4, color: P.ink, margin: '16px 0 8px' }}>{t}</div>
              <p style={{ margin: 0, fontSize: 14.5, fontWeight: 500, lineHeight: 1.55, color: P.inkSoft }}>{d}</p>
            </Card>
          ))}
        </div>
      </HWrap>
    </HSection>
  );
}

// ── Requisitos ─────────────────────────────────────────────
function DocRequisitos() {
  const reqs = [
    ['Colegiado vigente en el CMP', 'Registrado en el Colegio Médico del Perú con habilitación al día.'],
    ['Título profesional', 'Título de médico cirujano de una universidad peruana o revalidado.'],
    ['Documentos al día', 'DNI vigente y antecedentes penales y policiales limpios.'],
    ['Equipo básico', 'Maletín con lo esencial: tensiómetro, estetoscopio, termómetro, oxímetro.'],
    ['Smartphone', 'Android 9+ o iOS 14+ con datos móviles o WiFi estable.'],
    ['Movilidad propia', 'Vehículo propio o forma de movilizarte rápido por tu zona.'],
  ];
  return (
    <HSection id="requisitos" bg="#fff">
      <HWrap max={1180}>
        <div className="g2c">
          <div>
            <TagPill>Requisitos</TagPill>
            <h2 className="h2" style={{ margin: '16px 0 0', color: P.ink }}>¿Cumples con esto?</h2>
            <p style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.6, color: P.inkSoft, marginTop: 16, maxWidth: 420 }}>
              Priorizamos la seguridad del paciente y la confianza en cada visita. Si cumples, tu aplicación avanza rápido.
            </p>
            <div style={{ marginTop: 26, padding: 18, borderRadius: 16, background: P.amberSoft, border: `1px solid ${P.amber}`, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <HI.Shield size={20} color={P.amber}/>
              <div style={{ fontSize: 13.5, color: '#8A5A0D', lineHeight: 1.5 }}>
                <b>Verificación obligatoria.</b> Validamos tu CMP con el Colegio Médico y tu identidad. Esto los protege a ti y a los pacientes.
              </div>
            </div>
          </div>
          <Card pad={0} style={{ overflow: 'hidden' }}>
            {reqs.map(([t, d], i) => (
              <div key={t} style={{ display: 'flex', gap: 14, padding: '20px 24px', borderBottom: i < reqs.length - 1 ? `1px solid ${P.line}` : 'none' }}>
                <div style={{ flexShrink: 0, width: 26, height: 26, borderRadius: 999, background: P.greenSoft, display: 'grid', placeItems: 'center' }}><HI.Check size={16} color={P.green}/></div>
                <div>
                  <div style={{ fontSize: 15.5, fontWeight: 800, color: P.ink }}>{t}</div>
                  <div style={{ fontSize: 13.5, color: P.inkSoft, marginTop: 3, lineHeight: 1.5 }}>{d}</div>
                </div>
              </div>
            ))}
          </Card>
        </div>
      </HWrap>
    </HSection>
  );
}

// ── Opiniones ──────────────────────────────────────────────
function DocOpiniones() {
  const tms = [
    ['Dra. Ana Morales', 'Medicina general · 6 años', 'Lima — San Isidro', 'En mis horas libres hago 3–4 visitas por semana. Los pagos caen puntuales cada semana.', 'AM'],
    ['Dr. Luis Vargas', 'Medicina general · 11 años', 'Arequipa — Cayma', 'Lo mejor es que yo elijo mis zonas. El soporte siempre responde, incluso domingos.', 'LV'],
    ['Dra. Patricia Flores', 'Pediatría · 8 años', 'Trujillo', 'Para los papás que no quieren llevar a su bebé con fiebre a la clínica, la visita a domicilio es oro.', 'PF'],
  ];
  return (
    <HSection id="opiniones" bg={P.bgWarm}>
      <HWrap max={1180}>
        <Center eyebrow="Lo que dicen nuestros médicos" title={<>Historias reales, en todo el Perú.</>}/>
        <div className="g3cards">
          {tms.map(([name, role, city, quote, ini], i) => (
            <Card key={name} pad={28} style={i === 1 ? { background: P.ink, border: 'none' } : undefined}>
              <Stars n={5} size={15}/>
              <p style={{ fontSize: 15.5, fontWeight: 500, lineHeight: 1.55, margin: '14px 0 0', color: i === 1 ? 'rgba(255,255,255,0.92)' : P.inkSoft }}>“{quote}”</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 22, paddingTop: 18, borderTop: `1px solid ${i === 1 ? 'rgba(255,255,255,0.15)' : P.line}` }}>
                <div style={{ width: 44, height: 44, borderRadius: 999, background: i === 1 ? 'rgba(255,255,255,0.15)' : P.blueSoft, color: i === 1 ? '#fff' : P.blueInk, display: 'grid', placeItems: 'center', fontSize: 15, fontWeight: 800 }}>{ini}</div>
                <div>
                  <div style={{ fontSize: 14.5, fontWeight: 800, color: i === 1 ? '#fff' : P.ink }}>{name}</div>
                  <div style={{ fontSize: 12.5, color: i === 1 ? 'rgba(255,255,255,0.65)' : P.inkSoft, marginTop: 2 }}>{role} · {city}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </HWrap>
    </HSection>
  );
}

// ── FAQ ────────────────────────────────────────────────────
function DocFaqItem({ q, a, open, onToggle }) {
  return (
    <div style={{ background: '#fff', border: `1px solid ${P.line}`, borderRadius: 16, overflow: 'hidden' }}>
      <button onClick={onToggle} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: '18px 20px', background: 'transparent', border: 'none', textAlign: 'left' }}>
        <span style={{ fontSize: 15.5, fontWeight: 800, color: P.ink }}>{q}</span>
        <span style={{ flexShrink: 0, width: 30, height: 30, borderRadius: 999, background: open ? P.blue : P.bgWarm, color: open ? '#fff' : P.ink, display: 'grid', placeItems: 'center', fontSize: 18, fontWeight: 700 }}>{open ? '−' : '+'}</span>
      </button>
      {open && <div style={{ padding: '0 20px 20px', fontSize: 14.5, lineHeight: 1.6, color: P.inkSoft }}>{a}</div>}
    </div>
  );
}

function DocFaq() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    ['¿Cuánto cuesta registrarme?', 'Nada. La aplicación y el uso de MEDIKADO Pro es gratuito. Solo descontamos una comisión del 18% sobre cada visita que atiendes.'],
    ['¿Cuándo me pagan?', 'Depositamos tus ganancias a tu Yape o cuenta bancaria con las visitas completadas. Sin mínimos, sin demoras.'],
    ['¿Estoy obligado a aceptar todos los pedidos?', 'No. Puedes rechazar cualquier pedido sin penalización.'],
    ['¿Cómo protegen mi responsabilidad profesional?', 'Los médicos activos están cubiertos por una póliza de responsabilidad civil profesional sin costo adicional.'],
    ['¿Puedo trabajar fuera de Lima?', 'Estamos en Lima y Callao y expandiéndonos. Si aún no ves tu zona, igual puedes aplicar.'],
    ['¿Cuánto tarda la aprobación?', 'En promedio 48 horas hábiles después de subir todos tus documentos.'],
  ];
  return (
    <HSection id="faq" bg="#fff">
      <HWrap max={980}>
        <Center eyebrow="Preguntas frecuentes" title={<>Todo lo que quieres saber.</>}/>
        <div className="faqcols">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {faqs.filter((_, i) => i % 2 === 0).map((f) => { const idx = faqs.indexOf(f); return <DocFaqItem key={idx} q={f[0]} a={f[1]} open={open === idx} onToggle={() => setOpen(open === idx ? -1 : idx)}/>; })}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {faqs.filter((_, i) => i % 2 === 1).map((f) => { const idx = faqs.indexOf(f); return <DocFaqItem key={idx} q={f[0]} a={f[1]} open={open === idx} onToggle={() => setOpen(open === idx ? -1 : idx)}/>; })}
          </div>
        </div>
      </HWrap>
    </HSection>
  );
}

// ── CTA final ──────────────────────────────────────────────
function DocCta() {
  return (
    <HSection bg="#fff" padY={40}>
      <HWrap max={1180}>
        <div style={{ borderRadius: 30, background: `linear-gradient(120deg, ${P.blueInk} 0%, ${P.blue} 60%, #3D7BF0 100%)`, position: 'relative', overflow: 'hidden', padding: '64px 24px', textAlign: 'center' }}>
          <div style={{ position: 'absolute', top: -120, left: -80, width: 300, height: 300, borderRadius: '50%', background: 'rgba(255,255,255,0.06)' }}/>
          <div style={{ position: 'relative', maxWidth: 640, margin: '0 auto' }}>
            <div style={{ display: 'inline-block' }}><TagPill bg="rgba(255,255,255,0.16)" color="#fff">Aplicar toma 7 minutos</TagPill></div>
            <h2 className="h2" style={{ color: '#fff', margin: '18px 0 0' }}>Empieza a ver pacientes esta semana</h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', margin: '14px auto 30px', maxWidth: 500 }}>
              Miles de peruanos buscan atención médica a domicilio cada día. Tu próximo paciente te está esperando.
            </p>
            <a href="/apply" style={{ padding: '16px 30px', borderRadius: 999, background: '#fff', color: P.blueDark, fontSize: 16, fontWeight: 800, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 10, boxShadow: '0 14px 34px -14px rgba(0,0,0,0.4)' }}>
              Empezar mi aplicación <HI.Arrow size={16} color={P.blueDark}/>
            </a>
          </div>
        </div>
      </HWrap>
    </HSection>
  );
}

// ── Footer ─────────────────────────────────────────────────
function DocFooter() {
  const cols = [
    ['Para médicos', [['Cómo funciona', '#como'], ['Ganancias', '#ganancias'], ['Beneficios', '#beneficios'], ['Requisitos', '#requisitos'], ['Aplicar ahora', '/apply']]],
    ['MEDIKADO', [['Soy paciente', '/'], ['Preguntas', '#faq'], ['Opiniones', '#opiniones']]],
    ['Contacto', [['medicos@medikado.pe', 'mailto:medicos@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 }}>
              La red peruana de médicos que atienden a domicilio con flexibilidad, transparencia y buenos pagos.
            </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' }}>{s}</a>
              ))}
            </div>
            <a href="/apply" 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' }}>
              Aplicar ahora
              <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, { DocComo, DocGanancias, DocBeneficios, DocRequisitos, DocOpiniones, DocFaq, DocCta, DocFooter });