// Shared primitives

const Eyebrow = ({ number, children, style, onInk }) => (
  <div style={{
    fontFamily: 'var(--mono)',
    fontSize: 11,
    letterSpacing: '0.14em',
    textTransform: 'uppercase',
    color: onInk ? 'var(--accent-soft)' : 'var(--ink-soft)',
    fontWeight: 500,
    ...style,
  }}>
    {number && <><span>{number}</span>&nbsp;·&nbsp;</>}
    {children}
  </div>
);

const Button = ({ variant = 'primary', children, onClick, style, href }) => {
  const base = {
    fontFamily: 'var(--sans)',
    fontSize: 13,
    fontWeight: 500,
    padding: '11px 18px',
    border: '1px solid transparent',
    borderRadius: 2,
    cursor: 'pointer',
    letterSpacing: '0.01em',
    transition: 'all 140ms cubic-bezier(0.2,0.7,0.2,1)',
    display: 'inline-flex', alignItems: 'center', gap: 8,
    textDecoration: 'none',
  };
  const variants = {
    primary: { background: 'var(--ink)', color: 'var(--paper)' },
    accent:  { background: 'var(--accent)', color: 'var(--paper)' },
    ghost:   { background: 'transparent', color: 'var(--ink)', borderColor: 'var(--rule)' },
    ghostInk:{ background: 'transparent', color: 'var(--paper)', borderColor: 'var(--rule-inverse)' },
  };
  return (
    <button style={{ ...base, ...variants[variant], ...style }} onClick={onClick}>
      {children}
    </button>
  );
};

const TextLink = ({ children, onClick, style, onInk }) => (
  <button onClick={onClick} style={{
    background: 'none', border: 0, padding: 0, cursor: 'pointer',
    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em',
    textTransform: 'uppercase', color: onInk ? 'var(--paper)' : 'var(--ink)',
    borderBottom: '1px solid var(--accent)', paddingBottom: 2,
    ...style,
  }}>{children}</button>
);

const NexusMark = ({ size = 30, knockout = false }) => {
  const stroke = knockout ? '#f5f1ea' : '#12203a';
  const center = knockout ? '#e0b280' : '#b3703a';
  return (
    <svg width={size} height={size} viewBox="0 0 60 60" aria-hidden="true">
      <g fill="none" stroke={stroke} strokeWidth="1.3">
        <line x1="30" y1="8" x2="8" y2="30"/>
        <line x1="30" y1="8" x2="52" y2="30"/>
        <line x1="8" y1="30" x2="52" y2="30"/>
        <line x1="8" y1="30" x2="30" y2="52"/>
        <line x1="52" y1="30" x2="30" y2="52"/>
        <line x1="30" y1="8" x2="30" y2="52"/>
      </g>
      <g fill={stroke}>
        <circle cx="30" cy="8" r="3"/><circle cx="8" cy="30" r="3"/>
        <circle cx="52" cy="30" r="3"/><circle cx="30" cy="52" r="3"/>
      </g>
      <circle cx="30" cy="30" r="4.5" fill={center}/>
    </svg>
  );
};

// Container wrapper
const Container = ({ children, style, width = 1160 }) => (
  <div style={{ maxWidth: width, margin: '0 auto', ...style }}>{children}</div>
);

// Standard section-head with 160px sidebar eyebrow + content
const SectionHead = ({ number, eyebrow, title, lede, onInk, style }) => (
  <div style={{
    display: 'grid', gridTemplateColumns: '160px 1fr', gap: 48, marginBottom: 48, alignItems: 'baseline',
    ...style,
  }}>
    <Eyebrow number={number} onInk={onInk}>{eyebrow}</Eyebrow>
    <div>
      {title && <h2 style={{
        fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 48, lineHeight: 1.05,
        letterSpacing: '-0.015em', margin: 0, color: onInk ? 'var(--paper)' : 'var(--ink)',
      }}>{title}</h2>}
      {lede && <p style={{
        marginTop: 20, fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.4,
        color: onInk ? 'var(--paper-200)' : 'var(--ink-700)', maxWidth: 620,
      }}>{lede}</p>}
    </div>
  </div>
);

// Hairline horizontal rule used between stacked sections
const Hair = ({ onInk, style }) => (
  <div style={{ height: 1, background: onInk ? 'var(--rule-inverse)' : 'var(--rule)', ...style }}/>
);

// Small tag/pill — the rare capsule per design system
const Tag = ({ children, tone = 'ink' }) => {
  const tones = {
    ink: { bg: 'transparent', fg: 'var(--ink-soft)', border: 'var(--rule)' },
    ember: { bg: 'var(--accent)', fg: 'var(--paper)', border: 'var(--accent)' },
    sage: { bg: 'transparent', fg: 'var(--sage)', border: 'var(--sage-soft)' },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: 'inline-block', padding: '4px 10px',
      borderRadius: 2, border: `1px solid ${t.border}`,
      background: t.bg, color: t.fg,
      fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em',
      textTransform: 'uppercase', fontWeight: 500,
    }}>{children}</span>
  );
};

// Placeholder image slot
const ImgSlot = ({ label, aspect = '4/5', tone = 'warm', style }) => {
  const bg = tone === 'dark'
    ? 'repeating-linear-gradient(45deg,#1a2845 0 12px,#2a3856 12px 24px)'
    : tone === 'ember'
    ? 'repeating-linear-gradient(45deg,#c07d44 0 12px,#b3703a 12px 24px)'
    : 'repeating-linear-gradient(45deg,#ebe5d9 0 12px,#ded6c5 12px 24px)';
  return (
    <div style={{
      aspectRatio: aspect, background: bg,
      display: 'flex', alignItems: 'flex-end', padding: 18,
      color: tone === 'dark' || tone === 'ember' ? 'var(--paper-200)' : 'var(--ink-soft)',
      fontFamily: 'var(--mono)', fontSize: 10,
      letterSpacing: '0.12em', textTransform: 'uppercase',
      ...style,
    }}>
      [ {label} ]
    </div>
  );
};

Object.assign(window, { Eyebrow, Button, TextLink, NexusMark, Container, SectionHead, Hair, Tag, ImgSlot });