// Home Pacientes v2 — primitivos (extiende HC/HI de home-ui.jsx)
const P = {
  ...HC,
  cream: '#FDF8F3',
  lilac: '#EAF2FC',
  night: '#08192B',
  nightSoft: '#0E2740',
};

function DHMark({ size = 30, color = P.blueInk }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
      <path d="M24 5 5 20v22a2 2 0 0 0 2 2h34a2 2 0 0 0 2-2V20L24 5z" stroke={color} strokeWidth="3.2" strokeLinejoin="round"/>
      <rect x="20" y="22" width="8" height="4" fill={color}/>
      <rect x="22" y="18" width="4" height="15" fill={color}/>
    </svg>
  );
}

function Lockup({ size = 22, color, sub }) {
  // Logo oficial MEDIKADO (imagen). La altura escala con `size`.
  return (
    <img src="/img/medikado-logo.png" alt="MEDIKADO"
      style={{ height: Math.round(size * 1.55), width: 'auto', display: 'block' }}/>
  );
}

// Botón de tienda (sin logos de marca)
function StoreBtn({ top, name, dark = true }) {
  return (
    <a href="#descargar" style={{
      display: 'inline-flex', alignItems: 'center', gap: 11, padding: '11px 20px 12px', borderRadius: 14,
      background: dark ? P.night : '#fff', color: dark ? '#fff' : P.night, textDecoration: 'none',
      boxShadow: dark ? '0 10px 26px -12px rgba(8,25,43,0.55)' : '0 10px 26px -14px rgba(8,25,43,0.35)',
      transition: 'transform .13s',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}>
      <span style={{ width: 22, height: 22, borderRadius: 7, border: `1.8px solid ${dark ? 'rgba(255,255,255,.55)' : 'rgba(8,25,43,.35)'}`, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
        <span style={{ width: 7, height: 7, borderRadius: 2, background: dark ? '#fff' : P.night }}/>
      </span>
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1, textAlign: 'left' }}>
        <span style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', opacity: 0.7 }}>{top}</span>
        <span style={{ fontSize: 15, fontWeight: 800, letterSpacing: -0.3 }}>{name}</span>
      </span>
    </a>
  );
}

function TagPill({ children, color = P.blue, bg = P.blueSoft }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '7px 14px', borderRadius: 999, background: bg, color, fontSize: 12, fontWeight: 800, letterSpacing: 1.4, textTransform: 'uppercase' }}>{children}</span>
  );
}

function Center({ eyebrowBg, eyebrow, title, lede, max = 720 }) {
  return (
    <div style={{ textAlign: 'center', maxWidth: max, margin: '0 auto 54px' }}>
      {eyebrow && <div style={{ marginBottom: 18 }}><TagPill bg={eyebrowBg}>{eyebrow}</TagPill></div>}
      <h2 className="h2" style={{ margin: 0, color: P.ink }}>{title}</h2>
      {lede && <p style={{ fontSize: 17, fontWeight: 500, lineHeight: 1.6, color: P.inkSoft, margin: '16px auto 0', maxWidth: 560, textWrap: 'pretty' }}>{lede}</p>}
    </div>
  );
}

function FeatCard({ icon, hue, title, body, link = 'Saber más', style }) {
  return (
    <div style={{
      background: '#fff', border: `1px solid ${P.line}`, borderRadius: 22, padding: 26,
      display: 'flex', flexDirection: 'column', gap: 12, ...style,
    }}>
      <IconBubble hue={hue} size={44}>{icon}</IconBubble>
      <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: -0.5, color: P.ink, lineHeight: 1.2 }}>{title}</div>
      <p style={{ margin: 0, fontSize: 14.5, fontWeight: 500, lineHeight: 1.55, color: P.inkSoft }}>{body}</p>
      <a href="#" style={{ marginTop: 'auto', paddingTop: 10, fontSize: 13.5, fontWeight: 800, color: P.blue, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        {link} <HI.Arrow size={15} color={P.blue}/>
      </a>
    </div>
  );
}

function Stars({ n = 5, size = 14 }) {
  return <div style={{ display: 'flex', gap: 2 }}>{Array.from({ length: n }).map((_, i) => <HI.Star key={i} size={size}/>)}</div>;
}

Object.assign(window, { P, DHMark, Lockup, StoreBtn, TagPill, Center, FeatCard, Stars });