// ds.jsx — Design system tokens & primitives rebuilt from the WCAG Figma file.
// Colors, type, buttons, cards, pill nav, headings, list-link densities.

const DS = {
  // Surface
  bg:        '#FFFFFF',
  bgMuted:   '#F5F5F5',
  bgSubtle:  '#FAFAFA',
  border:    '#D9D9D9',
  borderStrong: '#BFBFBF',

  // Text
  ink:       '#1E1E1E',
  inkSoft:   '#303030',
  muted:     '#757575',
  mutedSoft: '#9A9A9A',

  // Primary (dark)
  primaryBg:   '#2C2C2C',
  primaryInk:  '#F5F5F5',

  // Severity (muted, in the same minimal vocabulary)
  critical:  '#C73E3A',
  serious:   '#D97A2B',
  moderate:  '#C99846',
  minor:     '#5B7CBF',
  pass:      '#2E7D5B',

  // Severity tints
  criticalTint: '#FDECEB',
  seriousTint:  '#FCEFE3',
  moderateTint: '#FAF1DD',
  minorTint:    '#EAF0FB',
  passTint:     '#E5F1EB',

  // Type
  fontSans: 'Inter, ui-sans-serif, system-ui, -apple-system, sans-serif',
  fontMono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
};

// ── Heading (Align=Start) ────────────────────────────────────────────────────
function DSHeading({ children, sub, size = 'md', style }) {
  const sizes = {
    hero: { t: 72, st: 32, gap: 8 },
    lg:   { t: 40, st: 24, gap: 8 },
    md:   { t: 24, st: 20, gap: 6 },
    sm:   { t: 18, st: 14, gap: 4 },
  }[size];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: sizes.gap, ...style }}>
      <span style={{
        fontFamily: DS.fontSans, fontWeight: 700, fontSize: sizes.t,
        lineHeight: 1.2, letterSpacing: '-0.02em', color: 'var(--dp-ink, ' + DS.ink + ')',
      }}>{children}</span>
      {sub && (
        <span style={{
          fontFamily: DS.fontSans, fontWeight: 400, fontSize: sizes.st,
          lineHeight: 1.2, color: 'var(--dp-muted, ' + DS.muted + ')',
        }}>{sub}</span>
      )}
    </div>
  );
}

// ── Buttons (Primary / Neutral / Subtle, sm / md) ────────────────────────────
function DSButton({ variant = 'neutral', size = 'md', children, icon, style, onClick, id, label }) {
  const ink     = 'var(--dp-ink, ' + DS.ink + ')';
  const inkSoft = 'var(--dp-ink-soft, ' + DS.inkSoft + ')';
  const bgMuted = 'var(--dp-bg-muted, ' + DS.bgMuted + ')';
  const border  = 'var(--dp-border, ' + DS.border + ')';
  const primary = 'var(--dp-primary, ' + DS.primaryBg + ')';
  const primaryFg = 'var(--dp-primary-fg, ' + DS.primaryInk + ')';
  const v = {
    primary: { bg: primary, br: primary, fg: primaryFg },
    neutral: { bg: bgMuted, br: border,  fg: inkSoft },
    subtle:  { bg: 'transparent', br: 'transparent', fg: inkSoft },
  }[variant];
  const s = {
    sm: { h: 32, px: 8, font: 14 },
    md: { h: 40, px: 12, font: 16 },
  }[size];
  return (
    <button id={id} aria-label={label} onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      height: s.h, padding: `0 ${s.px}px`, borderRadius: 8,
      background: v.bg, border: `1px solid ${v.br}`, color: v.fg,
      fontFamily: DS.fontSans, fontWeight: 500, fontSize: s.font, lineHeight: 1,
      cursor: 'pointer', whiteSpace: 'nowrap', ...style,
    }}>
      {icon}
      {children}
    </button>
  );
}

// ── Icon button (round, Variant=Neutral icon) ────────────────────────────────
function DSIconButton({ children, size = 'md', onClick, id, label, active, style }) {
  const dim = size === 'sm' ? 32 : 40;
  const ink     = 'var(--dp-ink, ' + DS.ink + ')';
  const inkSoft = 'var(--dp-ink-soft, ' + DS.inkSoft + ')';
  const bgMuted = 'var(--dp-bg-muted, ' + DS.bgMuted + ')';
  const border  = 'var(--dp-border, ' + DS.border + ')';
  const primaryFg = 'var(--dp-primary-fg, ' + DS.primaryInk + ')';
  return (
    <button id={id} aria-label={label} onClick={onClick} style={{
      width: dim, height: dim, borderRadius: 999,
      background: active ? ink : bgMuted,
      color: active ? primaryFg : inkSoft,
      border: `1px solid ${active ? ink : border}`,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer', ...style,
    }}>{children}</button>
  );
}

// ── Pill (Navigation Pill, State=Default / State=Active) ─────────────────────
function DSPill({ children, active, onClick, style }) {
  const ink       = 'var(--dp-ink, ' + DS.ink + ')';
  const inkSoft   = 'var(--dp-ink-soft, ' + DS.inkSoft + ')';
  const border    = 'var(--dp-border, ' + DS.border + ')';
  const primaryFg = 'var(--dp-primary-fg, ' + DS.primaryInk + ')';
  return (
    <button onClick={onClick} style={{
      height: 32, padding: '0 14px', borderRadius: 999,
      background: active ? ink : 'transparent',
      color: active ? primaryFg : inkSoft,
      border: `1px solid ${active ? ink : border}`,
      fontFamily: DS.fontSans, fontSize: 14, fontWeight: 500, lineHeight: 1,
      cursor: 'pointer', display: 'inline-flex', alignItems: 'center', ...style,
    }}>{children}</button>
  );
}

// ── Card (Asset Type=Image, Variant=Stroke, Direction=Horizontal) ────────────
function DSImagePlaceholder({ w = 160, h = 160, style }) {
  return (
    <div style={{
      width: w, height: h, background: '#E3E3E3', flexShrink: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      ...style,
    }}>
      <svg width={typeof h === 'number' ? Math.max(40, h * 0.42) : 64}
           height={typeof h === 'number' ? Math.max(40, h * 0.42) : 64}
        viewBox="0 0 64 64" fill="none">
        <rect x="4" y="8" width="56" height="48" rx="2" stroke="#BDBDBD" strokeWidth="3"/>
        <circle cx="22" cy="24" r="5" fill="#BDBDBD"/>
        <path d="M8 50 L24 34 L36 44 L48 30 L56 38 V56 H8 Z" fill="#BDBDBD"/>
      </svg>
    </div>
  );
}

// Pill list (Direction=Row) ───────────────────────────────────────────────────
function DSPillList({ items, activeIndex = 0, onChange, style }) {
  return (
    <div role="tablist" style={{ display: 'flex', gap: 8, flexWrap: 'wrap', ...style }}>
      {items.map((it, i) => (
        <DSPill key={i} active={i === activeIndex} onClick={() => onChange?.(i)}>{it}</DSPill>
      ))}
    </div>
  );
}

// Text link list (Density=Default) — used in footer ──────────────────────────
function DSLinkList({ title, items, density = 'default' }) {
  const gap = density === 'tight' ? 8 : 16;
  const ink     = 'var(--dp-ink, ' + DS.ink + ')';
  const inkSoft = 'var(--dp-ink-soft, ' + DS.inkSoft + ')';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 200 }}>
      <span style={{
        fontFamily: DS.fontSans, fontWeight: 700, fontSize: 18, color: ink,
      }}>{title}</span>
      <div style={{ display: 'flex', flexDirection: 'column', gap }}>
        {items.map((it, i) => (
          <a key={i} href="#" style={{
            fontFamily: DS.fontSans, fontSize: 16, color: inkSoft, textDecoration: 'none',
          }}>{it}</a>
        ))}
      </div>
    </div>
  );
}

// Segmented control (sized like pill list, but selected has dark fill) ───────
function DSSegmented({ value, options, onChange, style }) {
  const ink       = 'var(--dp-ink, ' + DS.ink + ')';
  const inkSoft   = 'var(--dp-ink-soft, ' + DS.inkSoft + ')';
  const bgMuted   = 'var(--dp-bg-muted, ' + DS.bgMuted + ')';
  const border    = 'var(--dp-border, ' + DS.border + ')';
  const primaryFg = 'var(--dp-primary-fg, ' + DS.primaryInk + ')';
  return (
    <div style={{
      display: 'inline-flex', padding: 4, background: bgMuted,
      border: `1px solid ${border}`, borderRadius: 999, ...style,
    }}>
      {options.map(opt => (
        <button key={opt.value || opt} onClick={() => onChange?.(opt.value || opt)} style={{
          height: 28, padding: '0 14px', borderRadius: 999, border: 'none',
          background: (opt.value || opt) === value ? ink : 'transparent',
          color: (opt.value || opt) === value ? primaryFg : inkSoft,
          fontFamily: DS.fontSans, fontSize: 13, fontWeight: 500,
          cursor: 'pointer',
        }}>{opt.label || opt}</button>
      ))}
    </div>
  );
}

Object.assign(window, {
  DS, DSHeading, DSButton, DSIconButton, DSPill, DSPillList,
  DSImagePlaceholder, DSLinkList, DSSegmented,
});