// Collector Archives — design system tokens
// Three distinct directions explored side-by-side.

const DIRECTIONS = {
  concours: {
    id: 'concours',
    name: 'Concours',
    tagline: 'Editorial cinema — the magazine in your pocket',
    palette: {
      ink:      '#0A0A0B', // near-black, slightly warm
      graphite: '#1F1E1B',
      slate:    '#3A3833',
      mute:     '#8A8378',
      paper:    '#F4EFE6', // warm cream
      bone:     '#E6DFD0',
      line:     '#D8D0BE',
      gold:     '#B89055', // muted brass
      goldHi:   '#D6AC6A',
      signal:   '#7A2418', // deep oxblood for state
    },
    type: {
      display: "'Oswald', 'Arial Narrow', sans-serif",
      body:    "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
      mono:    "'IBM Plex Mono', ui-monospace, monospace",
      displayWeight: 700,
      displayTracking: '0',
      displayTrackingTight: '-0.025em', // For very large display numbers (>=48px)
      bodyTracking: '0',
    },
    radius: 2,
    note: 'Bold condensed display, grotesk body, deep ink + paper + brass.',
  },
  concoursPlatinum: {
    id: 'concoursPlatinum',
    name: 'Concours / Platinum',
    tagline: 'Concours type & ink on Reserve\'s cooler paper',
    palette: {
      ink:      '#0A0A0B',
      graphite: '#1F1E1B',
      slate:    '#3A3833',
      mute:     '#8A8378',
      paper:    '#E8E5DE', // ← Reserve platinum
      bone:     '#D5D1C7', // ← Reserve bone
      line:     '#BFBAAE', // ← Reserve line
      gold:     '#B89055',
      goldHi:   '#D6AC6A',
      signal:   '#7A2418',
    },
    type: {
      display: "'Oswald', 'Arial Narrow', sans-serif",
      body:    "'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
      mono:    "'IBM Plex Mono', ui-monospace, monospace",
      displayWeight: 700,
      displayTracking: '0',
      displayTrackingTight: '-0.025em',
      bodyTracking: '0',
    },
    radius: 2,
    note: 'Concours palette on Reserve\'s cooler platinum paper. Cooler, more modern.',
  },
  heritage: {
    id: 'heritage',
    name: 'Heritage',
    tagline: 'Vintage catalog — leather-bound provenance',
    palette: {
      ink:      '#1A1410',
      graphite: '#2A201A',
      slate:    '#4A3D32',
      mute:     '#857668',
      paper:    '#ECE3D1', // bone
      bone:     '#DDD1B8',
      line:     '#C9B998',
      gold:     '#A88846',
      goldHi:   '#C2A35E',
      signal:   '#6B2825', // oxblood
    },
    type: {
      display: "'Archivo Narrow', 'Arial Narrow', sans-serif",
      body:    "'Source Serif 4', Georgia, serif",
      mono:    "'IBM Plex Mono', ui-monospace, monospace",
      displayWeight: 700,
      displayTracking: '0.04em',
      bodyTracking: '0',
    },
    radius: 1,
    note: 'Narrow sans display, serif body. Warm dark + oxblood + brass.',
  },
  reserve: {
    id: 'reserve',
    name: 'Reserve',
    tagline: 'Auction-house formal — quiet capital',
    palette: {
      ink:      '#0C0D0F',
      graphite: '#161A20',
      slate:    '#2F353F',
      mute:     '#92928E',
      paper:    '#E8E5DE', // platinum
      bone:     '#D5D1C7',
      line:     '#BFBAAE',
      gold:     '#B59550', // champagne
      goldHi:   '#D4B673',
      signal:   '#3A4A6A', // deep sapphire
    },
    type: {
      display: "'Bodoni Moda', 'Didot', Georgia, serif",
      body:    "'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
      mono:    "'JetBrains Mono', ui-monospace, monospace",
      displayWeight: 700,
      displayTracking: '0',
      bodyTracking: '0',
    },
    radius: 4,
    note: 'High-contrast Bodoni display, modern grotesk body. Noir + platinum + champagne.',
  },
};

// Spacing scale — multiples of 4
const SPACING = [
  { tok: 'xs',  n: 4 },
  { tok: 's',   n: 8 },
  { tok: 'm',   n: 12 },
  { tok: 'l',   n: 16 },
  { tok: 'xl',  n: 24 },
  { tok: '2xl', n: 32 },
  { tok: '3xl', n: 48 },
  { tok: '4xl', n: 64 },
  { tok: '5xl', n: 96 },
];

// Type scale (in the Concours direction; same ratios reused for the others)
const TYPE_SCALE = [
  { tok: 'display/xxl', size: 96, lh: 0.95, weight: 700, role: 'Cover headlines, marque numbers' },
  { tok: 'display/xl',  size: 64, lh: 1.0,  weight: 700, role: 'Feature title' },
  { tok: 'display/l',   size: 44, lh: 1.05, weight: 700, role: 'Section opener' },
  { tok: 'display/m',   size: 28, lh: 1.1,  weight: 600, role: 'Card title' },
  { tok: 'body/xl',     size: 20, lh: 1.5,  weight: 400, role: 'Lead paragraph' },
  { tok: 'body/l',      size: 16, lh: 1.55, weight: 400, role: 'Default body' },
  { tok: 'body/m',      size: 14, lh: 1.5,  weight: 400, role: 'Secondary' },
  { tok: 'caption',     size: 12, lh: 1.4,  weight: 500, role: 'Captions, labels' },
  { tok: 'eyebrow',     size: 11, lh: 1.3,  weight: 600, role: 'Tracked all-caps eyebrow' },
];

// Token helper for inline-styling
const tok = (dirId, key) => DIRECTIONS[dirId].palette[key];

// Striped photo placeholder — never invent imagery, just hold the space.
// Drawn as a tiny SVG with diagonal stripes + a monospace label below.
function PhotoSlot({ width = '100%', height = 200, tone = 'dark', label, dirId = 'concours', sub, src, style = {}, children }) {
  const p = DIRECTIONS[dirId].palette;
  const isDark = tone === 'dark';
  const bg = isDark ? p.graphite : p.bone;
  const stripe = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.05)';
  const fg = isDark ? p.mute : p.slate;
  const monoFont = DIRECTIONS[dirId].type.mono;
  return (
    <div style={{
      width, height, position: 'relative', overflow: 'hidden',
      background: src ? p.ink : `repeating-linear-gradient(135deg, ${bg} 0 14px, ${stripe} 14px 15px)`,
      ...style,
    }}>
      {src && (
        <img src={src} alt={label || ''}
          style={{
            position: 'absolute',
            left: '50%', bottom: 0,
            width: 'auto', height: '135%',
            minWidth: '100%',
            transform: 'translateX(-50%)',
            display: 'block',
          }} />
      )}
      {label && !src && (
        <div style={{
          position: 'absolute', left: 12, bottom: 10, right: 12,
          fontFamily: monoFont, fontSize: 9, letterSpacing: '0.08em',
          color: fg, textTransform: 'uppercase', display: 'flex',
          justifyContent: 'space-between', gap: 8, alignItems: 'flex-end',
        }}>
          <span>▣ {label}</span>
          {sub && <span style={{ opacity: 0.7 }}>{sub}</span>}
        </div>
      )}
      {children}
    </div>
  );
}

// Tiny monogram "CA" mark — sits inside an inscribed diamond/lozenge.
function CAMonogram({ size = 24, color = '#0A0A0B', stroke = 1.4 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M16 2 L30 16 L16 30 L2 16 Z" stroke={color} strokeWidth={stroke} fill="none" />
      <path d="M16 10 L22 22 M16 10 L10 22 M12.5 17.5 L19.5 17.5" stroke={color} strokeWidth={stroke} strokeLinecap="square" fill="none" />
    </svg>
  );
}

Object.assign(window, { DIRECTIONS, SPACING, TYPE_SCALE, tok, PhotoSlot, CAMonogram });