// Shared design tokens + placeholder helpers
const TOKENS = {
  // Clinical blue palette — calm, trustworthy
  ink: '#0e1a2b',
  body: '#3a4a60',
  muted: '#6b7a8f',
  hairline: '#e3eaf2',
  paper: '#ffffff',
  bg: '#f3f6fb',
  bgWarm: '#f6f9fc',
  primary: '#1a5a9c',       // deep clinical blue
  primaryDeep: '#0f3f73',
  primarySoft: '#dde9f6',
  accent: '#74b3e8',         // sky
  accentSoft: '#e8f2fb',
  ok: '#2f7d6a',
  warn: '#b56a2a',
};

// SVG photo placeholder — striped, with a label, or actual image if src provided
const Placeholder = ({ label = 'photo', w = '100%', h = 240, tone = 'blue', radius = 8, src = null }) => {
  // If src is provided, show actual image
  if (src) {
    return (
      <div style={{
        width: w, height: h, borderRadius: radius, overflow: 'hidden', position: 'relative',
      }}>
        <img src={src} alt={label} style={{
          width: '100%', height: '100%', objectFit: 'cover', display: 'block',
        }} />
      </div>
    );
  }
  const palettes = {
    blue: { bg: '#dfeaf6', stripe: '#cfdcec', text: '#5a7494' },
    light: { bg: '#eef3f9', stripe: '#dbe5f0', text: '#7a8ba3' },
    warm: { bg: '#f1ece4', stripe: '#e6dccd', text: '#8c7a5e' },
  };
  const p = palettes[tone] || palettes.blue;
  return (
    <div style={{
      width: w, height: h, borderRadius: radius, position: 'relative', overflow: 'hidden',
      background: `repeating-linear-gradient(135deg, ${p.bg} 0 14px, ${p.stripe} 14px 28px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
        fontSize: 11, letterSpacing: 0.5, color: p.text,
        background: 'rgba(255,255,255,0.55)',
        margin: 16, borderRadius: radius - 2,
      }}>
        [ {label} ]
      </div>
    </div>
  );
};

// Tiny inline SVG icons — kept very simple (no AI-slop illustrations)
const Icon = {
  phone: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A15 15 0 0 1 3 6a2 2 0 0 1 2-2z"/>
    </svg>
  ),
  clock: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>
    </svg>
  ),
  pin: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/>
    </svg>
  ),
  cal: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/>
    </svg>
  ),
  arrow: (s = 14, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  plus: (s = 18, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.6" strokeLinecap="round">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  globe: (s = 16, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
    </svg>
  ),
  // Three solid bars — clinic mark (matches actual signage)
  cross: (s = 22, c = 'currentColor') => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}>
      <rect x="3" y="3.5"  width="18" height="3.5" rx="0" />
      <rect x="3" y="10"   width="18" height="3.5" rx="0" />
      <rect x="3" y="16.5" width="18" height="3.5" rx="0" />
    </svg>
  ),
};

window.TOKENS = TOKENS;
window.Placeholder = Placeholder;
window.Icon = Icon;