// Shared primitives for section headers, buttons, containers, eyebrow chips.

const Container = ({ children, style, wide, className, ...rest }) => (
  <div
    {...rest}
    className={`container-wide ${className || ''}`}
    style={{
      width: '100%',
      maxWidth: wide ? 1280 : 1160,
      margin: '0 auto',
      padding: '0 28px',
      ...style,
    }}
  >
    {children}
  </div>
);

const Eyebrow = ({ children, style, accent, mono = true }) => (
  <div style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: '5px 11px 5px 10px',
    borderRadius: 999,
    background: accent ? 'var(--accent-soft)' : 'var(--bg-2)',
    border: `1px solid ${accent ? 'var(--line-3)' : 'var(--line-2)'}`,
    fontSize: 11,
    color: accent ? 'var(--accent-2)' : 'var(--fg-2)',
    fontFamily: mono ? 'var(--font-mono)' : 'inherit',
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    ...style,
  }}>
    {children}
  </div>
);

const SectionLabel = ({ index, label, style }) => (
  <div style={{
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.2em',
    color: 'var(--fg-3)',
    textTransform: 'uppercase',
    marginBottom: 18,
    ...style,
  }}>
    {index != null && (
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 22, height: 22, borderRadius: 5,
        background: 'var(--bg-2)', border: '1px solid var(--line-2)',
        color: 'var(--accent-2)', fontWeight: 600,
      }}>
        {String(index).padStart(2, '0')}
      </span>
    )}
    <span style={{ height: 1, background: 'var(--line-2)', flex: '0 1 80px' }} />
    <span>{label}</span>
  </div>
);

/** Display serif title with inline italic swap option. Use {italic:'…'} parts. */
const DisplayTitle = ({ children, size = 60, style, align = 'left', className = '' }) => (
  <h2 className={`display-title ${className}`} style={{
    margin: 0,
    fontFamily: 'var(--font-sans)',
    fontSize: size,
    fontWeight: 600,
    lineHeight: 1.02,
    letterSpacing: '-0.035em',
    color: 'var(--fg-1)',
    textAlign: align,
    textWrap: 'balance',
    ...style,
  }}>
    {children}
  </h2>
);

const Italic = ({ children, style }) => (
  <span style={{
    fontFamily: 'var(--font-serif)',
    fontStyle: 'italic',
    fontWeight: 400,
    letterSpacing: '-0.015em',
    ...style,
  }}>{children}</span>
);

const PrimaryBtn = ({ children, icon, trailing, style, href, onClick, size = 'md' }) => {
  const [h, setH] = React.useState(false);
  const sizes = {
    sm: { px: 12, py: 7, fs: 13, ix: 14 },
    md: { px: 18, py: 11, fs: 14, ix: 16 },
    lg: { px: 22, py: 14, fs: 15, ix: 17 },
  };
  const s = sizes[size];
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href}
      onClick={onClick}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 8,
        padding: `${s.py}px ${s.px}px`,
        fontSize: s.fs,
        fontWeight: 600,
        letterSpacing: '-0.01em',
        color: 'var(--primary-ink, #0a0b0d)',
        background: 'var(--accent)',
        borderRadius: 10,
        boxShadow: h
          ? '0 0 0 1px var(--accent-2), 0 10px 30px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25)'
          : '0 0 0 1px var(--accent-2), 0 6px 20px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25)',
        transform: h ? 'translateY(-1px)' : 'none',
        transition: 'transform 140ms, box-shadow 180ms',
        cursor: 'pointer',
        ...style,
      }}
    >
      {icon}
      {children}
      {trailing !== undefined ? trailing : <I.arrow size={s.ix} stroke={2.2} />}
    </Tag>
  );
};

const GhostBtn = ({ children, icon, trailing, style, href, onClick, size = 'md' }) => {
  const [h, setH] = React.useState(false);
  const sizes = {
    sm: { px: 12, py: 7, fs: 13, ix: 14 },
    md: { px: 16, py: 10, fs: 14, ix: 16 },
    lg: { px: 20, py: 13, fs: 15, ix: 17 },
  };
  const s = sizes[size];
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href}
      onClick={onClick}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 8,
        padding: `${s.py}px ${s.px}px`,
        fontSize: s.fs,
        fontWeight: 500,
        color: h ? 'var(--fg-1)' : 'var(--fg-2)',
        background: h ? 'var(--bg-3)' : 'var(--bg-2)',
        border: `1px solid ${h ? 'var(--line-3)' : 'var(--line-2)'}`,
        borderRadius: 10,
        transition: 'border-color 160ms, transform 160ms',
        cursor: 'pointer',
        ...style,
      }}
    >
      {icon}
      {children}
      {trailing}
    </Tag>
  );
};

/* Small fixed stat block, e.g. "25 AGENTS / 8.4s" */
const StatTile = ({ value, label, suffix, big, color }) => (
  <div style={{
    display: 'flex', flexDirection: 'column', gap: 4,
    padding: '12px 16px',
    background: 'var(--bg-1)',
    border: '1px solid var(--line-1)',
    borderRadius: 10,
    minWidth: 120,
  }}>
    <div style={{
      fontFamily: 'var(--font-mono)',
      fontSize: big ? 28 : 22,
      fontWeight: 600,
      color: color || 'var(--fg-1)',
      letterSpacing: '-0.02em',
      lineHeight: 1,
    }}>
      {value}<span style={{ color: 'var(--fg-3)', fontSize: '0.55em', marginLeft: 2 }}>{suffix}</span>
    </div>
    <div style={{
      fontFamily: 'var(--font-mono)',
      fontSize: 10.5,
      color: 'var(--fg-3)',
      textTransform: 'uppercase',
      letterSpacing: '0.14em',
    }}>{label}</div>
  </div>
);

/* Corner ticks — blueprint motif */
const CornerFrame = ({ children, style, pad = 24 }) => (
  <div style={{ position: 'relative', padding: pad, ...style }}>
    {[['tl',0,0],['tr','auto',0],['bl',0,'auto'],['br','auto','auto']].map(([k,l,t]) => (
      <span key={k} aria-hidden style={{
        position: 'absolute',
        left: l === 'auto' ? 'auto' : 0,
        right: l === 'auto' ? 0 : 'auto',
        top: t === 'auto' ? 'auto' : 0,
        bottom: t === 'auto' ? 0 : 'auto',
        width: 12, height: 12,
        borderColor: 'var(--line-3)',
        borderStyle: 'solid',
        borderWidth: 0,
        ...(k === 'tl' && { borderTopWidth: 1, borderLeftWidth: 1 }),
        ...(k === 'tr' && { borderTopWidth: 1, borderRightWidth: 1 }),
        ...(k === 'bl' && { borderBottomWidth: 1, borderLeftWidth: 1 }),
        ...(k === 'br' && { borderBottomWidth: 1, borderRightWidth: 1 }),
      }} />
    ))}
    {children}
  </div>
);

Object.assign(window, {
  Container, Eyebrow, SectionLabel, DisplayTitle, Italic,
  PrimaryBtn, GhostBtn, StatTile, CornerFrame,
});