// ui.jsx — Shared UI primitives (Button, Input, Textarea, Select, Chip, Card) // All consume the theme via CSS variables defined at level in index.html. function Button({ children, variant = 'primary', size = 'md', fullWidth, disabled, onClick, type = 'button', icon, iconAfter, ...rest }) { const sizes = { sm: { h: 36, px: 14, fs: 13 }, md: { h: 44, px: 18, fs: 14 }, lg: { h: 52, px: 22, fs: 15 } }; const s = sizes[size]; const variants = { primary: { background: 'var(--accent)', color: 'var(--accent-fg)', border: '1px solid var(--accent)' }, secondary: { background: 'var(--surface)', color: 'var(--ink)', border: '1px solid var(--border)' }, ghost: { background: 'transparent', color: 'var(--ink)', border: '1px solid transparent' }, outline: { background: 'transparent', color: 'var(--ink)', border: '1.5px solid var(--ink)' } }; const v = variants[variant]; return ( ); } function Field({ label, hint, error, required, children, ...rest }) { return (

{label && {label} {required && *} } {children} {hint && !error &&

{hint}

} {error &&

{error}

}

); } function Input({ icon, suffix, ...props }) { return (

{ e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.boxShadow = '0 0 0 3px var(--accent-soft)'; }} onBlur={(e) => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = 'none'; }}> {icon &&

{icon}

} {suffix &&

{suffix}

}

); } function Textarea(props) { return (

{
        e.currentTarget.style.borderColor = 'var(--accent)';
        e.currentTarget.style.boxShadow = '0 0 0 3px var(--accent-soft)';
        props.onFocus && props.onFocus(e);
      }}
      onBlur={(e) => {
        e.currentTarget.style.borderColor = 'var(--border)';
        e.currentTarget.style.boxShadow = 'none';
        props.onBlur && props.onBlur(e);
      }} />);

}

})}
    </div>);

}

}

}

// Tennis ball logo mark
function VoleeMark({ size = 28, color }) {
  const c = color || 'var(--accent)';
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="14" fill={c} />
      <path d="M3 13c5 0 9 1 13 3 4 2 8 3 13 3"
      stroke="var(--accent-fg)" strokeWidth="1.5" strokeLinecap="round" fill="none" opacity="0.7" />
      <path d="M3 19c5 0 9-1 13-3 4-2 8-3 13-3"
      stroke="var(--accent-fg)" strokeWidth="1.5" strokeLinecap="round" fill="none" opacity="0.7" />
    </svg>);

}

function Logo({ size = 22 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <VoleeMark size={size} />
      <span style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontSize: size + 4,
        letterSpacing: '-0.01em',
        color: 'var(--ink)',
        fontStyle: 'italic',
        fontWeight: 400,
        lineHeight: 1
      }}>Trygo</span>
    </div>);

}

// Generic image placeholder used for coach avatars, racket images, etc.
function ImagePlaceholder({ width = '100%', height = 80, label, rounded = 12 }) {
  return (
    <div style={{
      width, height,
      borderRadius: rounded,
      background: 'repeating-linear-gradient(45deg, #ece9e0, #ece9e0 6px, #f3f1ea 6px, #f3f1ea 12px)',
      border: '1px solid var(--border)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: '#9b988f',
      fontSize: 11,
      fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
      textAlign: 'center',
      padding: 8,
      flexShrink: 0
    }}>{label}</div>);

}

// Letter avatar (used for coach cards as a stable visual without real photos)
function LetterAvatar({ name, size = 56, hue = 80, photoUrl }) {
  if (photoUrl) {
    return (
      <div style={{
        width: size, height: size,
        borderRadius: '50%',
        overflow: 'hidden',
        flexShrink: 0,
        border: '2px solid var(--border)',
      }}>
        <img
          src={photoUrl}
          alt={name}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      </div>
    );
  }

const initials = name.split(' ').map((n) => n[0]).slice(0, 2).join('');
  return (
    <div style={{
      width: size, height: size,
      borderRadius: '50%',
      background: `oklch(0.78 0.08 ${hue})`,
      color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: '"Instrument Serif", Georgia, serif',
      fontStyle: 'italic',
      fontSize: size * 0.42,
      fontWeight: 400,
      flexShrink: 0,
    }}>{initials}</div>
  );
}

Object.assign(window, {
  Button, Field, Input, Textarea, Segmented, Chip, Card,
  VoleeMark, Logo, ImagePlaceholder, LetterAvatar
});