/* Auto-generated from components/core/*.jsx — faithful local copy so the UI kit renders standalone.
   In production, consume window.SommitDesignSystem_62caf7 from _ds_bundle.js instead. */

// ===== Button =====
function Button({
  children,
  variant = 'primary',
  size = 'md',
  iconLeft = null,
  iconRight = null,
  disabled = false,
  fullWidth = false,
  type = 'button',
  onClick,
  style = {},
  ...rest
}) {
  const sizes = {
    sm: { padding: '0 14px', height: 34, fontSize: 'var(--text-sm)', gap: 6, icon: 16 },
    md: { padding: '0 20px', height: 42, fontSize: 'var(--text-md)', gap: 8, icon: 18 },
    lg: { padding: '0 28px', height: 52, fontSize: 'var(--text-lg)', gap: 10, icon: 20 },
  };
  const s = sizes[size] || sizes.md;

  const variants = {
    primary: {
      background: 'var(--brand)',
      color: 'var(--text-on-brand)',
      border: '1px solid var(--brand)',
      boxShadow: 'var(--shadow-brand)',
    },
    secondary: {
      background: 'var(--surface-card)',
      color: 'var(--brand-strong)',
      border: '1px solid var(--border-default)',
      boxShadow: 'var(--shadow-xs)',
    },
    ghost: {
      background: 'transparent',
      color: 'var(--brand-strong)',
      border: '1px solid transparent',
      boxShadow: 'none',
    },
    inverse: {
      background: 'var(--surface-card)',
      color: 'var(--brand-strong)',
      border: '1px solid var(--surface-card)',
      boxShadow: 'var(--shadow-md)',
    },
    danger: {
      background: 'var(--danger)',
      color: '#fff',
      border: '1px solid var(--danger)',
      boxShadow: 'none',
    },
  };
  const v = variants[variant] || variants.primary;

  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);

  const hoverBg = {
    primary: 'var(--brand-strong)',
    secondary: 'var(--brand-tint)',
    ghost: 'var(--brand-tint)',
    inverse: 'var(--neutral-50)',
    danger: 'var(--red-600)',
  }[variant];

  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: s.gap,
        width: fullWidth ? '100%' : 'auto',
        height: s.height,
        padding: s.padding,
        fontFamily: 'var(--font-body)',
        fontSize: s.fontSize,
        fontWeight: 'var(--weight-semibold)',
        letterSpacing: 'var(--tracking-tight)',
        lineHeight: 1,
        borderRadius: 'var(--radius-md)',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.5 : 1,
        transition: 'background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard)',
        transform: press && !disabled ? 'scale(0.98)' : 'scale(1)',
        ...v,
        ...(hover && !disabled ? { background: hoverBg } : {}),
        ...style,
      }}
      {...rest}
    >
      {iconLeft && <i data-lucide={iconLeft} style={{ width: s.icon, height: s.icon }} />}
      {children}
      {iconRight && <i data-lucide={iconRight} style={{ width: s.icon, height: s.icon }} />}
    </button>
  );
}

// ===== IconButton =====
function IconButton({
  icon,
  variant = 'secondary',
  size = 'md',
  disabled = false,
  ariaLabel,
  onClick,
  style = {},
  ...rest
}) {
  const sizes = { sm: 32, md: 40, lg: 48 };
  const iconSizes = { sm: 16, md: 18, lg: 22 };
  const dim = sizes[size] || sizes.md;

  const variants = {
    primary: { background: 'var(--brand)', color: '#fff', border: '1px solid var(--brand)' },
    secondary: { background: 'var(--surface-card)', color: 'var(--text-body)', border: '1px solid var(--border-default)' },
    ghost: { background: 'transparent', color: 'var(--text-muted)', border: '1px solid transparent' },
  };
  const v = variants[variant] || variants.secondary;
  const hoverBg = { primary: 'var(--brand-strong)', secondary: 'var(--brand-tint)', ghost: 'var(--surface-sunken)' }[variant];
  const [hover, setHover] = React.useState(false);

  return (
    <button
      type="button"
      aria-label={ariaLabel}
      onClick={onClick}
      disabled={disabled}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: dim,
        height: dim,
        borderRadius: 'var(--radius-md)',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.5 : 1,
        transition: 'background var(--duration-fast) var(--ease-standard)',
        ...v,
        ...(hover && !disabled ? { background: hoverBg, color: variant === 'ghost' ? 'var(--brand-strong)' : v.color } : {}),
        ...style,
      }}
      {...rest}
    >
      <i data-lucide={icon} style={{ width: iconSizes[size], height: iconSizes[size] }} />
    </button>
  );
}

// ===== Badge =====
function Badge({ children, tone = 'brand', subtle = true, style = {} }) {
  const tones = {
    brand:   { solid: 'var(--brand)',   tint: 'var(--brand-tint)',     ink: 'var(--brand-strong)' },
    neutral: { solid: 'var(--neutral-600)', tint: 'var(--surface-sunken)', ink: 'var(--neutral-700)' },
    success: { solid: 'var(--success)', tint: 'var(--success-surface)', ink: 'var(--green-600)' },
    warning: { solid: 'var(--warning)', tint: 'var(--warning-surface)', ink: 'var(--amber-600)' },
    danger:  { solid: 'var(--danger)',  tint: 'var(--danger-surface)',  ink: 'var(--red-600)' },
  };
  const t = tones[tone] || tones.brand;
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 5,
        padding: '3px 10px',
        fontFamily: 'var(--font-body)',
        fontSize: 'var(--text-xs)',
        fontWeight: 'var(--weight-bold)',
        lineHeight: 1.4,
        letterSpacing: 'var(--tracking-tight)',
        borderRadius: 'var(--radius-pill)',
        background: subtle ? t.tint : t.solid,
        color: subtle ? t.ink : '#fff',
        ...style,
      }}
    >
      {children}
    </span>
  );
}

// ===== Tag =====
function Tag({ children, icon = null, removable = false, onRemove, style = {} }) {
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 6,
        padding: '5px 12px',
        fontFamily: 'var(--font-body)',
        fontSize: 'var(--text-sm)',
        fontWeight: 'var(--weight-medium)',
        lineHeight: 1.3,
        color: 'var(--text-body)',
        background: 'var(--surface-card)',
        border: '1px solid var(--border-subtle)',
        borderRadius: 'var(--radius-sm)',
        ...style,
      }}
    >
      {icon && <i data-lucide={icon} style={{ width: 14, height: 14, color: 'var(--brand)' }} />}
      {children}
      {removable && (
        <button
          type="button"
          onClick={onRemove}
          aria-label="Verwijder"
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 16, height: 16, marginRight: -2, padding: 0,
            border: 'none', background: 'transparent', cursor: 'pointer',
            color: 'var(--text-subtle)', borderRadius: 'var(--radius-pill)',
          }}
        >
          <i data-lucide="x" style={{ width: 13, height: 13 }} />
        </button>
      )}
    </span>
  );
}

// ===== Avatar =====
function Avatar({ src = null, name = '', size = 'md', style = {} }) {
  const sizes = { sm: 32, md: 44, lg: 64, xl: 88 };
  const dim = sizes[size] || sizes.md;
  const initials = name
    .split(' ')
    .filter(Boolean)
    .slice(0, 2)
    .map((w) => w[0])
    .join('')
    .toUpperCase();
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: dim,
        height: dim,
        flex: 'none',
        borderRadius: 'var(--radius-pill)',
        overflow: 'hidden',
        background: 'var(--brand-tint)',
        color: 'var(--brand-strong)',
        fontFamily: 'var(--font-display)',
        fontWeight: 'var(--weight-bold)',
        fontSize: dim * 0.38,
        letterSpacing: 'var(--tracking-tight)',
        border: '1px solid var(--border-subtle)',
        ...style,
      }}
    >
      {src ? (
        <img src={src} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      ) : (
        initials || '·'
      )}
    </span>
  );
}

// ===== Input =====
function Input({
  label = null,
  type = 'text',
  placeholder = '',
  value,
  defaultValue,
  onChange,
  iconLeft = null,
  hint = null,
  error = null,
  disabled = false,
  required = false,
  multiline = false,
  rows = 4,
  id,
  style = {},
  ...rest
}) {
  const [focus, setFocus] = React.useState(false);
  const inputId = id || React.useId();
  const borderColor = error
    ? 'var(--danger)'
    : focus
    ? 'var(--brand)'
    : 'var(--border-default)';

  const fieldStyle = {
    width: '100%',
    boxSizing: 'border-box',
    height: multiline ? 'auto' : 42,
    padding: multiline ? '11px 14px' : iconLeft ? '0 14px 0 40px' : '0 14px',
    fontFamily: 'var(--font-body)',
    fontSize: 'var(--text-md)',
    color: 'var(--text-strong)',
    background: disabled ? 'var(--surface-sunken)' : 'var(--surface-card)',
    border: `1px solid ${borderColor}`,
    borderRadius: 'var(--radius-md)',
    outline: 'none',
    boxShadow: focus && !error ? '0 0 0 3px var(--focus-ring)' : 'none',
    transition: 'border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard)',
    resize: multiline ? 'vertical' : undefined,
    lineHeight: multiline ? 1.5 : undefined,
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, ...style }}>
      {label && (
        <label
          htmlFor={inputId}
          style={{
            fontFamily: 'var(--font-body)',
            fontSize: 'var(--text-sm)',
            fontWeight: 'var(--weight-semibold)',
            color: 'var(--text-strong)',
          }}
        >
          {label}
          {required && <span style={{ color: 'var(--danger)', marginLeft: 3 }}>*</span>}
        </label>
      )}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
        {iconLeft && !multiline && (
          <i
            data-lucide={iconLeft}
            style={{ position: 'absolute', left: 13, width: 18, height: 18, color: 'var(--text-subtle)', pointerEvents: 'none' }}
          />
        )}
        {multiline ? (
          <textarea
            id={inputId}
            rows={rows}
            placeholder={placeholder}
            value={value}
            defaultValue={defaultValue}
            onChange={onChange}
            disabled={disabled}
            required={required}
            onFocus={() => setFocus(true)}
            onBlur={() => setFocus(false)}
            style={fieldStyle}
            {...rest}
          />
        ) : (
          <input
            id={inputId}
            type={type}
            placeholder={placeholder}
            value={value}
            defaultValue={defaultValue}
            onChange={onChange}
            disabled={disabled}
            required={required}
            onFocus={() => setFocus(true)}
            onBlur={() => setFocus(false)}
            style={fieldStyle}
            {...rest}
          />
        )}
      </div>
      {(hint || error) && (
        <span
          style={{
            fontFamily: 'var(--font-body)',
            fontSize: 'var(--text-xs)',
            color: error ? 'var(--danger)' : 'var(--text-muted)',
          }}
        >
          {error || hint}
        </span>
      )}
    </div>
  );
}

// ===== Card =====
function Card({
  children,
  interactive = false,
  padding = 'var(--space-6)',
  as = 'div',
  style = {},
  ...rest
}) {
  const [hover, setHover] = React.useState(false);
  const Tag = as;
  return (
    <Tag
      onMouseEnter={() => interactive && setHover(true)}
      onMouseLeave={() => interactive && setHover(false)}
      style={{
        display: 'block',
        background: 'var(--surface-card)',
        border: '1px solid var(--border-subtle)',
        borderRadius: 'var(--radius-card)',
        padding,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        transition: 'box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard)',
        cursor: interactive ? 'pointer' : 'default',
        ...style,
      }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

// ===== ServiceCard =====
function ServiceCard({
  icon = 'settings',
  emoji = null,
  title,
  children,
  linkLabel = 'Meer weten',
  href = '#',
  style = {},
}) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex',
        flexDirection: 'column',
        background: 'var(--surface-card)',
        border: '1px solid var(--border-subtle)',
        borderRadius: 'var(--radius-card)',
        padding: 'var(--space-6)',
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-2px)' : 'translateY(0)',
        transition: 'box-shadow var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard)',
        ...style,
      }}
    >
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          width: 52,
          height: 52,
          borderRadius: 'var(--radius-md)',
          background: 'var(--brand-tint)',
          color: 'var(--brand)',
          fontSize: emoji ? 26 : undefined,
          marginBottom: 'var(--space-4)',
        }}
      >
        {emoji ? emoji : <i data-lucide={icon} style={{ width: 26, height: 26 }} />}
      </span>
      <h3
        style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'var(--text-xl)',
          fontWeight: 'var(--weight-bold)',
          color: 'var(--text-strong)',
          letterSpacing: 'var(--tracking-tight)',
          margin: '0 0 var(--space-2)',
        }}
      >
        {title}
      </h3>
      <p
        style={{
          fontFamily: 'var(--font-body)',
          fontSize: 'var(--text-md)',
          lineHeight: 'var(--leading-relaxed)',
          color: 'var(--text-body)',
          margin: '0 0 var(--space-5)',
          flex: 1,
        }}
      >
        {children}
      </p>
      <a
        href={href}
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          fontFamily: 'var(--font-body)',
          fontSize: 'var(--text-md)',
          fontWeight: 'var(--weight-semibold)',
          color: 'var(--brand-strong)',
          textDecoration: 'none',
        }}
      >
        {linkLabel}
        <span style={{ transform: hover ? 'translateX(3px)' : 'translateX(0)', transition: 'transform var(--duration-normal) var(--ease-out)' }}>→</span>
      </a>
    </div>
  );
}

// ===== Alert =====
function Alert({ tone = 'info', title = null, children, icon = null, onClose = null, style = {} }) {
  const tones = {
    info:    { surface: 'var(--info-surface)',    accent: 'var(--info)',    ink: 'var(--blue-700)',  icon: 'info' },
    success: { surface: 'var(--success-surface)', accent: 'var(--success)', ink: 'var(--green-600)', icon: 'check-circle' },
    warning: { surface: 'var(--warning-surface)', accent: 'var(--warning)', ink: 'var(--amber-600)', icon: 'alert-triangle' },
    danger:  { surface: 'var(--danger-surface)',  accent: 'var(--danger)',  ink: 'var(--red-600)',   icon: 'alert-circle' },
  };
  const t = tones[tone] || tones.info;
  return (
    <div
      role="alert"
      style={{
        display: 'flex',
        gap: 'var(--space-3)',
        padding: 'var(--space-4) var(--space-5)',
        background: t.surface,
        border: `1px solid ${t.accent}`,
        borderRadius: 'var(--radius-md)',
        ...style,
      }}
    >
      <i data-lucide={icon || t.icon} style={{ width: 20, height: 20, color: t.accent, flex: 'none', marginTop: 1 }} />
      <div style={{ flex: 1 }}>
        {title && (
          <div
            style={{
              fontFamily: 'var(--font-body)',
              fontSize: 'var(--text-md)',
              fontWeight: 'var(--weight-bold)',
              color: t.ink,
              marginBottom: children ? 3 : 0,
            }}
          >
            {title}
          </div>
        )}
        {children && (
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', lineHeight: 1.55, color: 'var(--text-body)' }}>
            {children}
          </div>
        )}
      </div>
      {onClose && (
        <button
          type="button"
          onClick={onClose}
          aria-label="Sluiten"
          style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: t.ink, padding: 2, height: 'fit-content' }}
        >
          <i data-lucide="x" style={{ width: 16, height: 16 }} />
        </button>
      )}
    </div>
  );
}

Object.assign(window, { Button, IconButton, Badge, Tag, Avatar, Input, Card, ServiceCard, Alert });