// Shared primitives — placeholder portrait, badges, buttons, etc.

// Curated Unsplash photo IDs for member portraits, by seed.
// Selected for editorial tone, neutral palette, and natural light.
const PORTRAIT_PHOTOS = {
  1: "photo-1488426862026-3ee34a7d66df", // young woman, soft light
  2: "photo-1507003211169-0a1dd7228f2d", // young man, neutral
  3: "photo-1531123897727-8f129e1688ce", // woman, warm light
  4: "photo-1500648767791-00dcc994a43e", // man, contemplative
  5: "photo-1494790108377-be9c29b29330", // woman, soft palette
  6: "photo-1463453091185-61582044d556", // man, outdoor
};

const Portrait = ({ seed = 1, size = 200, name = "" }) => {
  const photoId = PORTRAIT_PHOTOS[((seed - 1) % 6) + 1];
  // Use seed offset to vary crop subtly across thumbnail tiles
  const offset = seed > 6 ? `&fit=crop&crop=faces&h=${size * 2}` : `&fit=crop&crop=faces`;
  const url = `https://images.unsplash.com/${photoId}?w=${Math.max(size * 2, 600)}${offset}&auto=format&q=80`;
  return (
    <div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden', background: 'var(--bg-2)' }}>
      <img src={url} alt={name} style={{
        width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top',
        display: 'block', filter: 'saturate(0.9)'
      }} loading="lazy" />
    </div>
  );
};

const Wordmark = ({ variant = "monogram", color = "currentColor" }) => {
  if (variant === "wordmark") {
    return (
      <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500, letterSpacing: '0.01em', color }}>
        Help Meet <span style={{ fontStyle: 'italic', color: 'var(--taupe)' }}>Network</span>
      </span>
    );
  }
  if (variant === "stamp") {
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color }}>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
          border: '1px solid currentColor', padding: '3px 7px', textTransform: 'uppercase'
        }}>est. 2026</span>
        <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500 }}>Help Meet Network</span>
      </span>
    );
  }
  // monogram default
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color }}>
      <span style={{
        width: 32, height: 32, border: '1.5px solid currentColor', borderRadius: '50%',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic', fontWeight: 500
      }}>H<span style={{ fontSize: 10, margin: '0 1px' }}>·</span>m</span>
      <span style={{ fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 500, letterSpacing: '0.01em' }}>
        Help Meet Network
      </span>
    </span>
  );
};

const Btn = ({ children, kind = "primary", size = "md", onClick, type = "button", style = {}, ...rest }) => {
  const base = {
    fontFamily: 'var(--sans)', fontWeight: 500, fontSize: size === 'sm' ? 13 : 14,
    padding: size === 'sm' ? '7px 14px' : '11px 22px',
    border: '1px solid', borderRadius: 2, transition: 'all 0.15s',
    letterSpacing: '0.01em', whiteSpace: 'nowrap',
  };
  const kinds = {
    primary: { background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' },
    secondary: { background: 'transparent', color: 'var(--ink)', borderColor: 'var(--ink)' },
    ghost: { background: 'transparent', color: 'var(--ink)', borderColor: 'transparent' },
    accent: { background: 'var(--accent)', color: 'var(--paper)', borderColor: 'var(--accent)' },
  };
  return (
    <button type={type} onClick={onClick} style={{ ...base, ...kinds[kind], ...style }} {...rest}>
      {children}
    </button>
  );
};

const SectionLabel = ({ num, children }) => (
  <div style={{
    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.22em',
    textTransform: 'uppercase', color: 'var(--ink-3)',
    display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28
  }}>
    {num && false && <span>{num}</span>}
    <span>{children}</span>
  </div>
);

const Badge = ({ children, tone = "default" }) => {
  const tones = {
    default: { bg: 'rgba(0,0,0,0.04)', fg: 'var(--ink-2)', border: 'var(--line-2)' },
    vouched: { bg: 'transparent', fg: 'var(--navy)', border: 'var(--navy)' },
    reference: { bg: 'transparent', fg: 'var(--taupe)', border: 'var(--taupe)' },
    new: { bg: 'transparent', fg: 'var(--taupe)', border: 'var(--taupe)' },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em',
      textTransform: 'uppercase', padding: '4px 9px',
      background: t.bg, color: t.fg, border: `1px solid ${t.border}`,
      borderRadius: 2, whiteSpace: 'nowrap',
    }}>{children}</span>
  );
};

const Field = ({ label, children, hint, required }) => (
  <label style={{ display: 'block', marginBottom: 22 }}>
    <div style={{
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em',
      textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8
    }}>
      {label} {required && <span style={{ color: 'var(--taupe)' }}>*</span>}
    </div>
    {children}
    {hint && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6, fontStyle: 'italic' }}>{hint}</div>}
  </label>
);

const inputStyle = {
  width: '100%', padding: '11px 14px',
  background: 'var(--paper)', border: '1px solid var(--line-2)',
  fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink)',
  borderRadius: 2, outline: 'none',
};

Object.assign(window, { Portrait, Wordmark, Btn, SectionLabel, Badge, Field, inputStyle });