/* Surgr App UI Kit — internal helpers shared across components */

window.SurgrAppKit = window.SurgrAppKit || {};

/* Inline icon set, lifted from surgr/components/Icons.js — stroke = currentColor */
const Icon = ({ children, size = 20, strokeWidth = 1.75, ...props }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={strokeWidth}
    strokeLinecap="round"
    strokeLinejoin="round"
    {...props}
  >{children}</svg>
);

const Icons = {
  Home: (p) => <Icon {...p}><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></Icon>,
  Dumbbell: (p) => <Icon {...p}><path d="M17.6 12.8a2 2 0 1 0 2.8-2.8l-1.8-1.8a2 2 0 0 0 2.8-2.8l-2.8-2.8a2 2 0 0 0-2.8 2.8l-1.8-1.8a2 2 0 1 0-2.8 2.8z"/><path d="m2.5 21.5 1.4-1.4"/><path d="m20.1 3.9 1.4-1.4"/><path d="M5.3 21.5a2 2 0 1 0 2.8-2.8l1.8 1.8a2 2 0 1 0 2.8-2.8l-6.4-6.4a2 2 0 1 0-2.8 2.8l1.8 1.8a2 2 0 0 0-2.8 2.8z"/><path d="m9.6 14.4 4.8-4.8"/></Icon>,
  Brain: (p) => <Icon {...p}><path d="M9.9 15.5A2 2 0 0 0 8.5 14L2.4 12.5a.5.5 0 0 1 0-1L8.5 9.9A2 2 0 0 0 9.9 8.5L11.5 2.4a.5.5 0 0 1 1 0L14 8.5a2 2 0 0 0 1.4 1.4L21.6 11.5a.5.5 0 0 1 0 1L15.5 14a2 2 0 0 0-1.4 1.4l-1.6 6.1a.5.5 0 0 1-1 0z"/></Icon>,
  User: (p) => <Icon {...p}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></Icon>,
  Flame: (p) => <Icon {...p}><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></Icon>,
  Zap: (p) => <Icon {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></Icon>,
  Chart: (p) => <Icon {...p}><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></Icon>,
  Play: (p) => <Icon {...p} fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></Icon>,
  Plus: (p) => <Icon {...p} strokeWidth={2.5}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></Icon>,
  Check: (p) => <Icon {...p} strokeWidth={2.5}><polyline points="20 6 9 17 4 12"/></Icon>,
  ArrowRight: (p) => <Icon {...p}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></Icon>,
  ArrowLeft: (p) => <Icon {...p}><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></Icon>,
  Camera: (p) => <Icon {...p}><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></Icon>,
  Crown: (p) => <Icon {...p} fill="currentColor"><path d="M2 18h20l-2-12-5 4-5-7-5 7-5-4z"/></Icon>,
  Send: (p) => <Icon {...p}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></Icon>,
};
window.SurgrAppKit.Icons = Icons;

/* ---------- Visual primitives ---------- */

const SectionLabel = ({ children, accent = false, style = {} }) => (
  <p style={{
    fontFamily: 'var(--surgr-font-body)',
    fontSize: 11,
    fontWeight: 800,
    letterSpacing: 2,
    textTransform: 'uppercase',
    color: accent ? 'var(--surgr-accent)' : 'var(--surgr-text-muted)',
    margin: 0,
    ...style,
  }}>{children}</p>
);

const AppH1 = ({ children, style = {} }) => (
  <h1 style={{
    fontFamily: 'var(--surgr-font-heading)',
    fontWeight: 700,
    fontSize: 32,
    letterSpacing: 1,
    textTransform: 'uppercase',
    color: 'var(--surgr-text)',
    lineHeight: 1,
    margin: 0,
    ...style,
  }}>{children}</h1>
);

const AppH2 = ({ children, style = {} }) => (
  <h2 style={{
    fontFamily: 'var(--surgr-font-heading)',
    fontWeight: 700,
    fontSize: 14,
    letterSpacing: 2,
    textTransform: 'uppercase',
    color: 'var(--surgr-text-muted)',
    margin: 0,
    ...style,
  }}>{children}</h2>
);

const Card = ({ children, accent = false, hover = false, style = {}, ...props }) => (
  <div style={{
    background: accent ? 'rgba(200,255,0,0.05)' : 'var(--surgr-bg-card)',
    border: `1px solid ${accent ? 'rgba(200,255,0,0.15)' : 'var(--surgr-border)'}`,
    borderRadius: 16,
    padding: 16,
    transition: 'background var(--surgr-dur-base) var(--surgr-ease-out), border-color var(--surgr-dur-base) var(--surgr-ease-out)',
    cursor: hover ? 'pointer' : 'default',
    ...style,
  }} {...props}>{children}</div>
);

const PrimaryButton = ({ children, full = false, onClick, style = {} }) => (
  <button onClick={onClick} style={{
    background: 'var(--surgr-accent)',
    color: '#000',
    border: 'none',
    borderRadius: 14,
    padding: '14px 26px',
    fontFamily: 'var(--surgr-font-body)',
    fontWeight: 800,
    fontSize: 14,
    letterSpacing: 1,
    textTransform: 'uppercase',
    boxShadow: 'var(--surgr-shadow-cta)',
    cursor: 'pointer',
    width: full ? '100%' : 'auto',
    transition: 'transform var(--surgr-dur-fast) var(--surgr-ease-out), box-shadow var(--surgr-dur-fast) var(--surgr-ease-out)',
    ...style,
  }}
    onMouseDown={e => e.currentTarget.style.transform = 'scale(0.97)'}
    onMouseUp={e => e.currentTarget.style.transform = ''}
    onMouseLeave={e => e.currentTarget.style.transform = ''}
  >{children}</button>
);

const GhostButton = ({ children, onClick, style = {} }) => (
  <button onClick={onClick} style={{
    background: 'transparent',
    color: 'var(--surgr-text)',
    border: '1px solid var(--surgr-border)',
    borderRadius: 12,
    padding: '12px 22px',
    fontFamily: 'var(--surgr-font-body)',
    fontWeight: 700,
    fontSize: 14,
    cursor: 'pointer',
    transition: 'background var(--surgr-dur-fast)',
    ...style,
  }}>{children}</button>
);

const Pill = ({ children, accent = false, style = {} }) => (
  <span style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: '6px 12px',
    borderRadius: 100,
    border: `1px solid ${accent ? 'rgba(200,255,0,0.25)' : 'var(--surgr-border)'}`,
    background: accent ? 'var(--surgr-accent-bg)' : 'transparent',
    fontSize: 11,
    fontWeight: 800,
    letterSpacing: 2,
    textTransform: 'uppercase',
    color: accent ? 'var(--surgr-accent)' : 'var(--surgr-text-muted)',
    fontFamily: 'var(--surgr-font-body)',
    ...style,
  }}>{children}</span>
);

const PulseDot = ({ color = 'var(--surgr-accent)' }) => (
  <span style={{
    width: 8, height: 8, borderRadius: 4,
    background: color,
    boxShadow: `0 0 10px ${color}`,
    animation: 'surgr-pulse 2s ease-in-out infinite',
    flexShrink: 0,
  }}/>
);

Object.assign(window.SurgrAppKit, {
  SectionLabel, AppH1, AppH2, Card, PrimaryButton, GhostButton, Pill, PulseDot,
});
