// SATMELI — primitivos de UI. Usan las CSS vars definidas en el HTML.

// ── Botón ────────────────────────────────────────────────────────────────
function Btn({ children, variant = 'primary', size = 'md', icon, iconRight, onClick, style, full, type = 'button', title }) {
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13, gap: 6, h: 34 },
    md: { padding: '11px 18px', fontSize: 14.5, gap: 8, h: 42 },
    lg: { padding: '14px 22px', fontSize: 16, gap: 9, h: 50 },
  };
  const s = sizes[size];
  const variants = {
    primary: { background: 'var(--signal)', color: 'var(--signal-ink)', boxShadow: 'var(--btn-pop)', fontWeight: 600 },
    dark:    { background: 'var(--ink)', color: 'var(--bg)', fontWeight: 600 },
    outline: { background: 'transparent', color: 'var(--ink)', border: '1.5px solid var(--line-strong)', fontWeight: 600 },
    ghost:   { background: 'transparent', color: 'var(--muted)', fontWeight: 600 },
    soft:    { background: 'var(--surface-2)', color: 'var(--ink)', fontWeight: 600 },
    alert:   { background: 'var(--alert)', color: '#fff', fontWeight: 600 },
    danger:  { background: 'transparent', color: 'var(--alert)', border: '1.5px solid color-mix(in srgb, var(--alert) 35%, transparent)', fontWeight: 600 },
  };
  return (
    <button type={type} title={title} onClick={onClick} className="sat-btn"
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        gap: s.gap, padding: s.padding, minHeight: s.h, fontSize: s.fontSize,
        fontFamily: 'var(--font)', borderRadius: 'var(--r-pill)', border: 'none',
        cursor: 'pointer', whiteSpace: 'nowrap', width: full ? '100%' : undefined,
        lineHeight: 1, letterSpacing: '-0.01em', ...variants[variant], ...style,
      }}>
      {icon && <Icon name={icon} size={s.fontSize + 3} />}
      {children}
      {iconRight && <Icon name={iconRight} size={s.fontSize + 2} />}
    </button>
  );
}

// ── Toggle switch ─────────────────────────────────────────────────────────
function Toggle({ on, onChange, size = 'md' }) {
  const w = size === 'sm' ? 38 : 46, h = size === 'sm' ? 22 : 26, k = h - 6;
  return (
    <button type="button" onClick={() => onChange(!on)} aria-pressed={on}
      style={{
        width: w, height: h, borderRadius: 999, border: 'none', cursor: 'pointer', padding: 0,
        background: on ? 'var(--signal)' : 'var(--switch-off)', position: 'relative',
        transition: 'background 220ms var(--ease)', flexShrink: 0,
      }}>
      <span style={{
        position: 'absolute', top: 3, left: on ? w - k - 3 : 3, width: k, height: k, borderRadius: 999,
        background: on ? 'var(--signal-ink)' : '#fff', transition: 'left 240ms var(--ease-bounce)',
        boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
      }} />
    </button>
  );
}

// ── Segmented control ──────────────────────────────────────────────────────
function Segmented({ options, value, onChange, full, size = 'md' }) {
  const pad = size === 'sm' ? '7px 10px' : '9px 14px';
  const fs = size === 'sm' ? 12.5 : 13.5;
  return (
    <div style={{
      display: 'inline-flex', background: 'var(--surface-2)', borderRadius: 'var(--r-md)',
      padding: 3, gap: 3, width: full ? '100%' : undefined, border: '1px solid var(--line)',
    }}>
      {options.map((o) => {
        const v = typeof o === 'string' ? o : o.value;
        const lab = typeof o === 'string' ? o : o.label;
        const active = v === value;
        return (
          <button key={v} type="button" onClick={() => onChange(v)}
            style={{
              flex: full ? 1 : undefined, padding: pad, fontSize: fs, fontFamily: 'var(--font)',
              fontWeight: 600, letterSpacing: '-0.01em', borderRadius: 'calc(var(--r-md) - 3px)',
              border: 'none', cursor: 'pointer', whiteSpace: 'nowrap',
              background: active ? 'var(--surface)' : 'transparent',
              color: active ? 'var(--ink)' : 'var(--muted)',
              boxShadow: active ? 'var(--shadow-sm)' : 'none',
              transition: 'all 160ms var(--ease)',
            }}>{lab}</button>
        );
      })}
    </div>
  );
}

// ── Chip de metadata (mono) ────────────────────────────────────────────────
function Chip({ icon, children, tone = 'neutral', style }) {
  const tones = {
    neutral: { background: 'var(--surface-2)', color: 'var(--muted-2)', border: '1px solid var(--line)' },
    line:    { background: 'transparent', color: 'var(--muted-2)', border: '1px solid var(--line-strong)' },
    signal:  { background: 'var(--signal-soft)', color: 'var(--signal-ink-2)', border: '1px solid var(--signal-line)' },
    alert:   { background: 'var(--alert-soft)', color: 'var(--alert-ink)', border: '1px solid var(--alert-line)' },
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5, padding: icon ? '4px 9px 4px 7px' : '4px 9px',
      borderRadius: 'var(--r-sm)', fontFamily: 'var(--mono)', fontSize: 11.5, letterSpacing: '-0.02em',
      lineHeight: 1.2, whiteSpace: 'nowrap', ...tones[tone], ...style,
    }}>
      {icon && <Icon name={icon} size={12.5} stroke={2} />}
      {children}
    </span>
  );
}

// ── Punto de estado con pulso ──────────────────────────────────────────────
function StatusDot({ active, size = 8 }) {
  return (
    <span style={{ position: 'relative', width: size, height: size, display: 'inline-block', flexShrink: 0 }}>
      {active && <span className="sat-pulse" style={{
        position: 'absolute', inset: 0, borderRadius: 999, background: 'var(--signal)',
      }} />}
      <span style={{
        position: 'absolute', inset: 0, borderRadius: 999,
        background: active ? 'var(--signal)' : 'var(--muted-3)',
        boxShadow: active ? '0 0 0 3px var(--signal-glow)' : 'none',
      }} />
    </span>
  );
}

// ── Sparkline ──────────────────────────────────────────────────────────────
function Sparkline({ data, w = 96, h = 30, color = 'var(--signal-ink-2)', fill = true, strokeW = 1.75 }) {
  const max = Math.max(1, ...data);
  const n = data.length;
  const stepX = w / (n - 1);
  const pts = data.map((v, i) => [i * stepX, h - 3 - (v / max) * (h - 6)]);
  const line = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = `${line} L${w},${h} L0,${h} Z`;
  const gid = 'sg' + Math.round(w + h + n + data[0]);
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block', overflow: 'visible' }}>
      {fill && (
        <>
          <defs>
            <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={color} stopOpacity="0.22" />
              <stop offset="100%" stopColor={color} stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d={area} fill={`url(#${gid})`} />
        </>
      )}
      <path d={line} fill="none" stroke={color} strokeWidth={strokeW} strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={pts[n - 1][0]} cy={pts[n - 1][1]} r={2.4} fill={color} />
    </svg>
  );
}

// ── Placeholder de foto de producto ────────────────────────────────────────
function ProductThumb({ cat, size = 64, radius = 'var(--r-md)', tag = true }) {
  const c = SAT_CATS[cat] || SAT_CATS.tech;
  return (
    <div style={{
      width: size, height: size, borderRadius: radius, position: 'relative', overflow: 'hidden',
      background: `color-mix(in srgb, ${c.tint} 14%, var(--surface))`,
      border: '1px solid var(--line)', flexShrink: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {/* watermark grande */}
      <div style={{ position: 'absolute', right: -size * 0.18, bottom: -size * 0.18, opacity: 0.16, color: c.tint }}>
        <Icon name={c.icon} size={size * 0.85} stroke={1.5} />
      </div>
      <div style={{ color: c.tint, opacity: 0.92 }}>
        <Icon name={c.icon} size={size * 0.4} stroke={1.6} />
      </div>
      {tag && (
        <span style={{
          position: 'absolute', left: 5, bottom: 5, fontFamily: 'var(--mono)', fontSize: 8.5,
          letterSpacing: '0.02em', color: c.tint, background: 'color-mix(in srgb, var(--surface) 78%, transparent)',
          padding: '1px 5px', borderRadius: 5, backdropFilter: 'blur(2px)',
        }}>FOTO</span>
      )}
    </div>
  );
}

// ── Eyebrow mono ───────────────────────────────────────────────────────────
function Eyebrow({ children, color = 'var(--muted-2)', style }) {
  return <div style={{
    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
    color, fontWeight: 400, ...style,
  }}>{children}</div>;
}

Object.assign(window, { Btn, Toggle, Segmented, Chip, StatusDot, Sparkline, ProductThumb, Eyebrow });