// Contra — LIGHT EDITORIAL system (matches Client Portal direction).
// Replaces the dark industrial version. Cream ground, serif masthead, nav links,
// dark pill buttons, outline phase pills, subtle borders.

const K = {
  // Landing-hero pastel wash: lavender → pale pink → warm cream, diagonal
  bg:     'linear-gradient(135deg, #e8e4f2 0%, #eee5ef 32%, #f4e8eb 58%, #f5eee4 82%, #efe9dc 100%)',
  bgFlat: '#efeaf0',        // solid fallback / for elements that need one color
  paper:  '#ffffff',
  ink:    '#14121a',
  ink2:   '#2e2a38',
  body:   '#4d4858',
  mute:   '#8a8496',
  mute2:  '#b8b2c2',
  line:   'rgba(20, 18, 26, 0.08)',
  line2:  'rgba(20, 18, 26, 0.05)',
  accent: '#111111',        // default dark pill
  // per-module accent (soft, used sparingly — small logo square + % numbers)
  yellow: '#B89420',
  orange: '#C04F2F',
  teal:   '#2A8172',
  purple: '#6B5BD9',
  amber:  '#A87818',
  rose:   '#B84258',
  cyan:   '#2B7A9A',
  lime:   '#4F8E4C',
  sand:   '#8E7A52',
  violet: '#8B5BD6',
  green:  '#3a7a4d',
  red:    '#a83540',
  // muted serif subhead color (like "Run schedules, budgets..." on the landing)
  subhead: '#9b96a8',
  serif:  '"Instrument Serif", "Cormorant Garamond", Georgia, serif',
  sans:   '"Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif',
  mono:   '"JetBrains Mono", ui-monospace, monospace',
};

// Page shell: no sidebar. Top masthead + nav. Generous padding.
function KShell({ client = 'Ridgeline Dev.', user = 'M. Reyes', accent = K.ink, children }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: K.bg, color: K.ink2,
      fontFamily: K.sans, overflow: 'hidden', display: 'flex', flexDirection: 'column',
      fontSize: 13,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', padding: '28px 48px 20px',
      }}>
        <div style={{ fontFamily: K.serif, fontSize: 26, letterSpacing: '-0.01em', color: K.ink, fontWeight: 400 }}>
          Contro <span style={{ fontStyle: 'italic', color: K.mute, fontSize: 20 }}>for {client}</span>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 28, fontSize: 13, color: K.body }}>
          {['Overview','Schedule','Documents','Invoices','Messages'].map(l => (
            <span key={l} style={{ cursor: 'default' }}>{l}</span>
          ))}
          <div style={{ background: K.ink, color: '#fff', padding: '8px 16px', borderRadius: 999, fontSize: 12, fontWeight: 500 }}>
            {user}
          </div>
        </div>
      </div>
      <div style={{ flex: 1, overflow: 'hidden', padding: '0 48px 36px' }}>
        {children}
      </div>
    </div>
  );
}

// Outline pill button (default) or filled dark pill (primary)
function KPill({ children, dark, active, accent = K.ink, icon }) {
  const bg = dark ? K.ink : (active ? K.ink : 'transparent');
  const fg = dark || active ? '#fff' : K.ink;
  const bd = dark || active ? 'none' : `1px solid ${K.line}`;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '8px 16px', borderRadius: 999, background: bg, color: fg, border: bd,
      fontSize: 12.5, fontWeight: 500, whiteSpace: 'nowrap', cursor: 'default',
    }}>
      {icon && <span>{icon}</span>}
      {children}
    </div>
  );
}

// Small dark AI-summary card with colored logo square
function KAICard({ accent, label = 'CONTRO SUMMARY', children, style }) {
  return (
    <div style={{
      background: K.ink, color: '#e6e1d6', borderRadius: 14, padding: 16,
      display: 'flex', gap: 14, alignItems: 'flex-start', fontSize: 12.5, lineHeight: 1.55,
      ...style,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 6, background: accent, color: '#fff',
        display: 'grid', placeItems: 'center', fontFamily: K.serif, fontSize: 15, fontWeight: 400,
        flexShrink: 0,
      }}>C</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: K.mono, fontSize: 9.5, color: '#b5ad9e', letterSpacing: '0.14em', marginBottom: 4 }}>
          {label}
        </div>
        <div style={{ color: '#e6e1d6' }}>{children}</div>
      </div>
    </div>
  );
}

// Paper card (white on cream)
function KCard({ children, style, pad = 20 }) {
  return (
    <div style={{
      background: K.paper, border: `1px solid ${K.line}`, borderRadius: 14, padding: pad,
      ...style,
    }}>{children}</div>
  );
}

// Crumb label — tiny mono uppercase w/ dot
function KCrumb({ children, accent = K.ink }) {
  return (
    <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.14em', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, textTransform: 'uppercase' }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent }} />
      {children}
    </div>
  );
}

// Serif headline with coloured percentage/number spans
function KHeadline({ children, style, sub }) {
  return (
    <div style={{
      fontFamily: K.serif, fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.015em', color: K.ink, fontWeight: 400,
      ...style,
    }}>
      <div>{children}</div>
      {sub && <div style={{ color: K.subhead, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

// Phase row (outline pills, active = filled black)
function KPhases({ items, active }) {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {items.map((p, i) => {
        const done = i < active;
        const on = i === active;
        return (
          <div key={p} style={{
            padding: '6px 14px', borderRadius: 999, fontSize: 12, fontWeight: 500,
            background: on ? K.ink : 'transparent',
            color: on ? '#fff' : (done ? K.ink2 : K.mute),
            border: on ? 'none' : `1px solid ${K.line}`,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            {done && <span style={{ color: K.mute2, fontSize: 11 }}>✓</span>}
            {p}
          </div>
        );
      })}
    </div>
  );
}

// Inject serif + sans
(function injectContraFonts(){
  if (document.getElementById('__contra_fonts')) return;
  const l = document.createElement('link');
  l.id = '__contra_fonts';
  l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap';
  document.head.appendChild(l);
})();

Object.assign(window, { K, KShell, KPill, KAICard, KCard, KCrumb, KHeadline, KPhases });