// kit-ui.jsx — shared layout primitives for the brand kit
const INK = '#0C3F3A', INK2 = '#11302c', MUTE = '#3a5a54', FAINT = '#7f8b83', GOLD = '#a08f72';
const PAPER = '#EFE9DC', PAPER2 = '#F6F1E5';

function Eyebrow({ children, color }) {
  return <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 12.5, fontWeight: 600,
    letterSpacing: '0.22em', textTransform: 'uppercase', color: color || GOLD }}>{children}</div>;
}

function Section({ k, title, kicker, children, bg, id }) {
  return (
    <section id={id} style={{ padding: '78px clamp(24px,6vw,88px)', background: bg || 'transparent',
      borderTop: '1px solid rgba(12,63,58,0.10)', scrollMarginTop: 12 }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: kicker ? 12 : 36 }}>
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 15, fontWeight: 600,
            color: 'var(--ct-accent)', fontVariantNumeric: 'tabular-nums' }}>{k}</span>
          <h2 style={{ margin: 0, fontFamily: "'Space Grotesk', sans-serif", fontSize: 30, fontWeight: 600,
            letterSpacing: '-0.01em', color: INK2 }}>{title}</h2>
        </div>
        {kicker && <p style={{ margin: '0 0 38px', fontFamily: "'Outfit', sans-serif", fontSize: 16,
          lineHeight: 1.6, color: MUTE, maxWidth: 620 }}>{kicker}</p>}
        {children}
      </div>
    </section>
  );
}

function Cell({ children, caption, sub, bg = '#fff', pad = 40, minH = 240, accentEdge = false }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ background: bg, borderRadius: 18, padding: pad, minHeight: minH,
        display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
        border: '1px solid rgba(12,63,58,0.09)',
        boxShadow: accentEdge ? '0 1px 0 rgba(12,63,58,0.04)' : 'none' }}>{children}</div>
      {caption && (
        <div>
          <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 14, fontWeight: 600, color: '#1a3b36' }}>{caption}</div>
          {sub && <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13, color: FAINT, marginTop: 2 }}>{sub}</div>}
        </div>
      )}
    </div>
  );
}

function Grid({ min = 240, gap = 28, children }) {
  return <div style={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit,minmax(${min}px,1fr))`, gap }}>{children}</div>;
}

Object.assign(window, { Eyebrow, Section, Cell, Grid, KIT: { INK, INK2, MUTE, FAINT, GOLD, PAPER, PAPER2 } });