// Harmoni Spark, shared design tokens
const T = {
  green: '#2D8A4E',
  greenDark: '#1E6B3A',
  greenLight: '#E4EDE7',
  greenTint: '#F0F4F1',
  orange: '#ff5e00',
  orangeHover: '#e55400',
  dark: '#0F2B1A',
  ink: '#1A2E23',
  ink2: '#3D5A4A',
  ink3: '#5E7A6B',
  ink4: '#7A9488',
  paper: '#ffffff',
  paperOff: '#FAFBFA',
  border: '#E1E7E2',
  borderSoft: '#EEF2EE',
  amber: '#B45309',
  amberBg: '#FEF3C7',
  blue: '#1D4ED8',
  blueBg: '#DBEAFE',
};

// Stroke icon, Heroicons style
const Icon = ({ d, size = 18, sw = 1.6 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
  </svg>
);

// Section label (uppercase tracked) per Harmoni style
const SectionLabel = ({ children, color }) => (
  <div style={{
    fontSize: 12, fontWeight: 700, letterSpacing: 2,
    textTransform: 'uppercase', color: color || T.green,
    marginBottom: 16,
  }}>{children}</div>
);

// Harmoni Spark logomark: brain-tree logo image + wordmark
const SparkLogo = ({ size = 32, withWord = true, inverse = false }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <img
      src="assets/harmoni-logo.png"
      alt="Harmoni"
      style={{
        width: size * 1.15, height: size * 1.15,
        objectFit: 'contain',
        display: 'block',
      }}
    />
    {withWord && (
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span className="display" style={{
          fontWeight: 800, fontSize: 19, letterSpacing: -0.4,
          color: inverse ? 'white' : T.greenDark,
        }}>Harmoni</span>
        <span className="display" style={{
          fontWeight: 700, fontSize: 19, letterSpacing: -0.4,
          color: inverse ? 'rgba(255,255,255,0.6)' : T.ink3,
        }}>Spark</span>
      </div>
    )}
  </div>
);

window.T = T;
window.Icon = Icon;
window.SectionLabel = SectionLabel;
window.SparkLogo = SparkLogo;