// Mockups de la app (marco + pantallas estáticas)
function Phone({ w = 300, children, style, shadow = true, tilt = 0 }) {
  const r = w * 0.135;
  return (
    <div style={{
      width: w, flexShrink: 0, borderRadius: r, background: '#0B1F33', padding: w * 0.028,
      boxShadow: shadow ? '0 48px 90px -34px rgba(8,25,43,0.5), 0 10px 26px -14px rgba(8,25,43,0.28)' : 'none',
      transform: tilt ? `rotate(${tilt}deg)` : undefined, position: 'relative', ...style,
    }}>
      <div style={{ borderRadius: r * 0.9, background: P.bgWarm, overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', top: w * 0.028, left: '50%', transform: 'translateX(-50%)', width: w * 0.26, height: w * 0.062, borderRadius: 999, background: '#0B1F33', zIndex: 5 }}/>
        <div style={{ fontSize: w * 0.036, fontWeight: 800, color: P.ink, display: 'flex', justifyContent: 'space-between', padding: `${w * 0.042}px ${w * 0.062}px ${w * 0.02}px`, background: '#fff' }}>
          <span>9:41</span><span style={{ opacity: 0.45, letterSpacing: 1 }}>▮▮▮</span>
        </div>
        {children}
      </div>
    </div>
  );
}

// Teléfono con una CAPTURA real de la app a pantalla completa (la imagen ya trae
// su propia barra de estado; solo agregamos el marco y el notch).
function PhoneImage({ w = 300, src, alt = 'App MEDIKADO', style, shadow = true, tilt = 0 }) {
  const r = w * 0.135;
  return (
    <div style={{
      width: w, flexShrink: 0, borderRadius: r, background: '#0B1F33', padding: w * 0.028,
      boxShadow: shadow ? '0 48px 90px -34px rgba(8,25,43,0.5), 0 10px 26px -14px rgba(8,25,43,0.28)' : 'none',
      transform: tilt ? `rotate(${tilt}deg)` : undefined, position: 'relative', ...style,
    }}>
      <div style={{ borderRadius: r * 0.9, overflow: 'hidden', position: 'relative', background: '#fff' }}>
        <div style={{ position: 'absolute', top: w * 0.028, left: '50%', transform: 'translateX(-50%)', width: w * 0.30, height: w * 0.05, borderRadius: 999, background: '#0B1F33', zIndex: 5 }}/>
        <img src={src} alt={alt} style={{ display: 'block', width: '100%' }}/>
      </div>
    </div>
  );
}

// ── Pantalla: inicio / pedir visita ────────────────────────
function ScrHome({ u = 1 }) {
  const cats = [['Medicina general', 'S/ 120', 255, HI.Stetho], ['Pediatría', 'S/ 140', 195, HI.Heart], ['Respiratorio', 'S/ 130', 190, HI.Lungs], ['Adulto mayor', '', 215, HI.Shield]];
  return (
    <div style={{ fontSize: 10 * u }}>
      <div style={{ background: '#fff', padding: `${8 * u}px ${13 * u}px ${13 * u}px`, borderBottom: `1px solid ${P.line}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 * u }}>
          <HI.Pin size={15 * u} color={P.blue}/>
          <div style={{ lineHeight: 1.2 }}>
            <div style={{ fontSize: 8.5 * u, fontWeight: 800, color: P.inkMuted, letterSpacing: 0.5, textTransform: 'uppercase' }}>Tu ubicación</div>
            <div style={{ fontSize: 12 * u, fontWeight: 800, color: P.ink }}>Av. Pardo 610, Miraflores</div>
          </div>
        </div>
        <div style={{ marginTop: 11 * u, display: 'flex', alignItems: 'center', gap: 7 * u, background: P.bgWarm, border: `1px solid ${P.line}`, borderRadius: 11 * u, padding: `${9 * u}px ${11 * u}px` }}>
          <HI.Search size={14 * u} color={P.inkMuted}/>
          <span style={{ fontSize: 11.5 * u, color: P.inkMuted, fontWeight: 600 }}>¿Qué necesitas hoy?</span>
        </div>
      </div>
      <div style={{ padding: 13 * u, display: 'flex', flexDirection: 'column', gap: 11 * u }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span style={{ fontSize: 11.5 * u, fontWeight: 800, color: P.ink }}>Motivo de consulta</span>
          <span style={{ fontSize: 10 * u, fontWeight: 800, color: P.blue }}>Ver todo</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 * u }}>
          {cats.map(([t, p, h, Icon]) => (
            <div key={t} style={{ background: '#fff', border: `1px solid ${P.line}`, borderRadius: 11 * u, padding: 9 * u }}>
              <div style={{ width: 25 * u, height: 25 * u, borderRadius: 8 * u, background: hueSoft(h), color: hueIcon(h), display: 'grid', placeItems: 'center', marginBottom: 6 * u }}><Icon size={14 * u}/></div>
              <div style={{ fontSize: 10.5 * u, fontWeight: 800, color: P.ink, lineHeight: 1.25 }}>{t}</div>
            </div>
          ))}
        </div>
        <div style={{ background: `linear-gradient(135deg, ${P.blue}, ${P.blueDark})`, borderRadius: 11 * u, padding: `${12 * u}px 0`, textAlign: 'center', color: '#fff', fontSize: 11.5 * u, fontWeight: 800 }}>
          Solicitar visita médica
        </div>
        <div style={{ display: 'flex', gap: 7 * u, alignItems: 'center', background: P.greenSoft, borderRadius: 11 * u, padding: `${10 * u}px ${11 * u}px` }}>
          <HI.Clock size={15 * u} color={P.green}/>
          <span style={{ fontSize: 10.5 * u, fontWeight: 800, color: '#0B6B4E' }}>7 médicos disponibles ahora</span>
        </div>
      </div>
    </div>
  );
}

// ── Pantalla: seguimiento de llegada ───────────────────────
function ScrTrack({ u = 1 }) {
  return (
    <div style={{ fontSize: 10 * u }}>
      <div style={{ height: 150 * u, background: `linear-gradient(160deg, ${P.bgCool}, #E3ECF7)`, position: 'relative', overflow: 'hidden' }}>
        {[0, 1, 2, 3, 4].map(i => <div key={i} style={{ position: 'absolute', left: 0, right: 0, top: (18 + i * 30) * u, height: 1, background: 'rgba(11,31,51,0.07)' }}/>)}
        {[0, 1, 2, 3].map(i => <div key={i} style={{ position: 'absolute', top: 0, bottom: 0, left: (22 + i * 34) * u, width: 1, background: 'rgba(11,31,51,0.07)' }}/>)}
        <div style={{ position: 'absolute', left: '22%', top: '62%', width: 12 * u, height: 12 * u, borderRadius: 999, background: P.blue, boxShadow: `0 0 0 ${5 * u}px rgba(24,99,224,0.18)` }}/>
        <div style={{ position: 'absolute', right: '24%', top: '24%', width: 12 * u, height: 12 * u, borderRadius: 3 * u, background: P.green, boxShadow: `0 0 0 ${5 * u}px rgba(19,165,121,0.18)` }}/>
        <div style={{ position: 'absolute', left: '26%', top: '30%', right: '28%', height: 2 * u, background: P.blue, opacity: 0.55, transform: 'rotate(22deg)', transformOrigin: 'left' }}/>
      </div>
      <div style={{ background: '#fff', borderRadius: `${16 * u}px ${16 * u}px 0 0`, marginTop: -14 * u, position: 'relative', padding: 13 * u, display: 'flex', flexDirection: 'column', gap: 11 * u }}>
        <div style={{ width: 34 * u, height: 3 * u, borderRadius: 999, background: P.lineStrong, margin: '0 auto' }}/>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 * u }}>
          <div style={{ width: 38 * u, height: 38 * u, borderRadius: 12 * u, background: hueSoft(195), color: hueIcon(195), display: 'grid', placeItems: 'center', fontSize: 13 * u, fontWeight: 800 }}>CD</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12 * u, fontWeight: 800, color: P.ink }}>Dra. Carmen Díaz</div>
            <div style={{ fontSize: 10 * u, fontWeight: 700, color: P.inkMuted }}>Pediatría · CMP 60781</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 15 * u, fontWeight: 800, color: P.ink, letterSpacing: -0.5 }}>12 min</div>
            <div style={{ fontSize: 9 * u, fontWeight: 700, color: P.inkMuted }}>en camino</div>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 * u }}>
          {[['Solicitud confirmada', true], ['Médico asignado', true], ['En camino a tu casa', true], ['Consulta en casa', false]].map(([t, done], i) => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 * u }}>
              <div style={{ width: 14 * u, height: 14 * u, borderRadius: 999, background: done ? P.green : '#fff', border: `${1.6 * u}px solid ${done ? P.green : P.lineStrong}` }}/>
              <span style={{ fontSize: 10.5 * u, fontWeight: done ? 800 : 700, color: done ? P.ink : P.inkMuted }}>{t}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8 * u }}>
          <div style={{ flex: 1, textAlign: 'center', border: `1px solid ${P.lineStrong}`, borderRadius: 10 * u, padding: `${10 * u}px 0`, fontSize: 10.5 * u, fontWeight: 800, color: P.ink }}>Llamar</div>
          <div style={{ flex: 1, textAlign: 'center', background: P.blue, borderRadius: 10 * u, padding: `${10 * u}px 0`, fontSize: 10.5 * u, fontWeight: 800, color: '#fff' }}>Chatear</div>
        </div>
      </div>
    </div>
  );
}

// ── Pantalla: videoconsulta ────────────────────────────────
function ScrVideo({ u = 1 }) {
  return (
    <div style={{ fontSize: 10 * u, background: P.night, minHeight: 330 * u, position: 'relative' }}>
      <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(70% 50% at 50% 30%, rgba(24,99,224,0.4), rgba(8,25,43,0) 70%)` }}/>
      <div style={{ position: 'relative', padding: 13 * u, display: 'flex', flexDirection: 'column', height: '100%', gap: 11 * u }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7 * u }}>
          <span style={{ width: 7 * u, height: 7 * u, borderRadius: 999, background: '#FF5A5F' }}/>
          <span style={{ fontSize: 10 * u, fontWeight: 800, color: '#fff' }}>En consulta · 06:42</span>
        </div>
        <div style={{ borderRadius: 14 * u, background: 'rgba(255,255,255,0.09)', border: '1px solid rgba(255,255,255,0.16)', height: 175 * u, display: 'grid', placeItems: 'center' }}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ width: 58 * u, height: 58 * u, borderRadius: 999, background: 'rgba(255,255,255,0.16)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 19 * u, fontWeight: 800, margin: '0 auto' }}>JR</div>
            <div style={{ fontSize: 11.5 * u, fontWeight: 800, color: '#fff', marginTop: 9 * u }}>Dr. Javier Rojas</div>
            <div style={{ fontSize: 9.5 * u, fontWeight: 700, color: 'rgba(255,255,255,0.6)' }}>Medicina general · CMP 48210</div>
          </div>
        </div>
        <div style={{ background: 'rgba(255,255,255,0.1)', borderRadius: 12 * u, padding: 11 * u }}>
          <div style={{ fontSize: 9 * u, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>Receta enviada</div>
          <div style={{ fontSize: 11 * u, fontWeight: 800, color: '#fff', marginTop: 4 * u }}>Amoxicilina 500 mg · 7 días</div>
        </div>
        <div style={{ display: 'flex', gap: 9 * u, justifyContent: 'center', marginTop: 'auto' }}>
          {['#FFFFFF22', '#FFFFFF22', '#FF5A5F'].map((bg, i) => (
            <div key={i} style={{ width: 38 * u, height: 38 * u, borderRadius: 999, background: bg, display: 'grid', placeItems: 'center' }}>
              <span style={{ width: 14 * u, height: 14 * u, borderRadius: i === 2 ? 3 * u : 999, border: `${1.8 * u}px solid #fff` }}/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Pantalla: historia clínica / recetas ───────────────────
function ScrRecords({ u = 1 }) {
  const items = [['Receta · Amoxicilina', 'Dr. Javier Rojas · 12 set', P.blueSoft, P.blueDark], ['Resultados de laboratorio', 'Hemograma completo · 4 set', P.greenSoft, '#0B6B4E'], ['Informe de visita', 'Dra. Carmen Díaz · 28 ago', P.amberSoft, '#8A5A00'], ['Receta · Ibuprofeno', 'Dra. Lucía Vera · 15 ago', P.yapeSoft, P.yape]];
  return (
    <div style={{ fontSize: 10 * u, background: '#fff' }}>
      <div style={{ padding: `${10 * u}px ${13 * u}px ${13 * u}px` }}>
        <div style={{ fontSize: 15 * u, fontWeight: 800, color: P.ink, letterSpacing: -0.5 }}>Mi historia</div>
        <div style={{ fontSize: 10.5 * u, fontWeight: 600, color: P.inkMuted, marginTop: 2 }}>Todo tu historial en un solo lugar</div>
        <div style={{ display: 'flex', gap: 6 * u, marginTop: 11 * u }}>
          {['Todo', 'Recetas', 'Exámenes'].map((t, i) => (
            <span key={t} style={{ fontSize: 9.5 * u, fontWeight: 800, padding: `${6 * u}px ${10 * u}px`, borderRadius: 999, background: i === 0 ? P.ink : P.bgWarm, color: i === 0 ? '#fff' : P.inkSoft }}>{t}</span>
          ))}
        </div>
      </div>
      <div style={{ background: P.bgWarm, padding: 13 * u, display: 'flex', flexDirection: 'column', gap: 8 * u, minHeight: 210 * u }}>
        {items.map(([t, s, bg, fg]) => (
          <div key={t} style={{ background: '#fff', border: `1px solid ${P.line}`, borderRadius: 12 * u, padding: 10 * u, display: 'flex', alignItems: 'center', gap: 9 * u }}>
            <div style={{ width: 28 * u, height: 28 * u, borderRadius: 9 * u, background: bg, color: fg, display: 'grid', placeItems: 'center' }}><HI.Badge size={15 * u}/></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 10.5 * u, fontWeight: 800, color: P.ink }}>{t}</div>
              <div style={{ fontSize: 9.5 * u, fontWeight: 600, color: P.inkMuted, marginTop: 1 }}>{s}</div>
            </div>
            <HI.Arrow size={13 * u} color={P.inkMuted}/>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Phone, PhoneImage, ScrHome, ScrTrack, ScrVideo, ScrRecords });