// Brand primitives for CNV Work — Blue primary, Green accent, Inter type
// Replaces the older pink/cyan CNV Work palette.

// ── PALETTE ──
// Primary blue scale
const BLUE = {
  950: '#061226', 900: '#0A1A36', 800: '#112A56', 700: '#163C7A',
  600: '#1F57B2', 500: '#2E6BDB', 400: '#4A87F5', 300: '#85AEFA', 200: '#CFDEFB', 50: '#F2F6FF',
};
// Growth green accent
const GREEN = {
  700: '#0F7C4A', 600: '#12A067', 500: '#1EC281', 400: '#47D89F', 300: '#8DE9BE', 50: '#ECFBF3',
};
const INK = '#0C1A34';      // near-black navy
const INK_SOFT = 'rgba(12,26,52,0.65)';
const INK_FAINT = 'rgba(12,26,52,0.45)';
const PAPER = '#F6F8FB';    // light section bg (not pure white)
const PAPER_SOFT = '#FFFFFF';
const LINE = '#E5E9F2';

// The signature gradient combines blue→green for "trust meets growth"
const GRADIENT = 'linear-gradient(90deg, #1F57B2 0%, #2E6BDB 45%, #12A067 100%)';
const GRADIENT_SOFT = 'linear-gradient(135deg, rgba(46,107,219,0.12) 0%, rgba(18,160,103,0.12) 100%)';

// ── LOGO ──
// Heart-shaped pink CNV CDP symbol (/img/cnv-logo.png) + wordmark "CNV Work".
const CNVLogo = ({ size = 28, tagline = true, dark = true }) => {
  const textColor = dark ? '#FFFFFF' : INK;
  const tagColor = dark ? 'rgba(255,255,255,0.6)' : INK_SOFT;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img
        src="/img/cnv-logo.png"
        alt="CNV Work logo"
        width={size}
        height={size}
        style={{ display: 'block', objectFit: 'contain', flexShrink: 0 }}
      />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <div style={{
          fontFamily: 'Inter, -apple-system, sans-serif',
          fontWeight: 700, fontSize: size * 0.7, letterSpacing: '-0.025em', color: textColor,
        }}>
          CNV <span style={{ fontWeight: 400 }}>Work</span>
        </div>
        {tagline && (
          <div style={{
            fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 9,
            letterSpacing: '0.06em', textTransform: 'uppercase',
            color: tagColor, marginTop: 4,
          }}>
            CRM · Operations · AI Agent
          </div>
        )}
      </div>
    </div>
  );
};

const GradientText = ({ children, style }) => (
  <span style={{
    background: GRADIENT, WebkitBackgroundClip: 'text', backgroundClip: 'text',
    WebkitTextFillColor: 'transparent', color: 'transparent', ...style,
  }}>{children}</span>
);

const PrimaryBtn = ({ children, size = 'md', onClick, style }) => {
  const [hover, setHover] = React.useState(false);
  const pads = size === 'lg' ? '16px 32px' : size === 'sm' ? '9px 18px' : '12px 24px';
  const fs = size === 'lg' ? 16 : size === 'sm' ? 13 : 14.5;
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? `linear-gradient(90deg, ${BLUE[700]} 0%, ${BLUE[600]} 45%, ${GREEN[600]} 100%)` : GRADIENT,
        color: '#fff', border: 'none', padding: pads, borderRadius: 10,
        fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: fs, cursor: 'pointer',
        boxShadow: hover ? `0 10px 28px ${BLUE[600]}40, 0 0 0 1px rgba(255,255,255,0.1) inset` : `0 4px 14px ${BLUE[600]}30`,
        transition: 'all .18s ease', letterSpacing: '-0.005em', whiteSpace: 'nowrap',
        ...style,
      }}>{children}</button>
  );
};

const OutlineBtn = ({ children, dark = true, size = 'md', onClick, icon, style }) => {
  const [hover, setHover] = React.useState(false);
  const pads = size === 'lg' ? '16px 32px' : size === 'sm' ? '9px 18px' : '12px 24px';
  const fs = size === 'lg' ? 16 : size === 'sm' ? 13 : 14.5;
  const borderBase = dark ? 'rgba(255,255,255,0.2)' : 'rgba(12,26,52,0.14)';
  const borderHover = dark ? '#fff' : INK;
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: 'transparent', color: dark ? '#fff' : INK,
        border: `1px solid ${hover ? borderHover : borderBase}`,
        padding: pads, borderRadius: 10,
        fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: fs, cursor: 'pointer',
        transition: 'all .18s ease', letterSpacing: '-0.005em',
        display: 'inline-flex', alignItems: 'center', gap: 8,
        ...style,
      }}>{icon}{children}</button>
  );
};

const GhostBtn = ({ children, dark = true, onClick }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? (dark ? 'rgba(255,255,255,0.08)' : BLUE[50]) : 'transparent',
        color: dark ? '#fff' : INK, border: 'none',
        padding: '9px 14px', borderRadius: 8,
        fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 14, cursor: 'pointer',
        transition: 'all .15s ease',
      }}>{children}</button>
  );
};

const Eyebrow = ({ children, style, dark = false }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: BLUE[500], ...style,
  }}>
    <span style={{ width: 16, height: 1.5, background: GRADIENT, display: 'inline-block' }}/>
    {children}
  </div>
);

const Divider = () => (
  <div style={{ width: 80, height: 2, margin: '0 auto', background: GRADIENT, borderRadius: 2 }}/>
);

// Subtle dotted grid — replaces the aurora blobs. Used on blue backgrounds.
const DotGrid = ({ opacity = 0.3 }) => (
  <div style={{
    position: 'absolute', inset: 0, pointerEvents: 'none',
    backgroundImage: `radial-gradient(rgba(255,255,255,${opacity * 0.25}) 1px, transparent 1px)`,
    backgroundSize: '32px 32px',
    maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
    WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
  }}/>
);

// Soft glow (blue + green) — replaces pink/cyan aurora on dark sections
const SoftGlow = ({ intensity = 1 }) => (
  <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
    <div style={{
      position: 'absolute', top: '15%', left: '-8%',
      width: 520, height: 520, borderRadius: '50%',
      background: `radial-gradient(circle, ${BLUE[500]}55 0%, ${BLUE[500]}00 65%)`,
      filter: `blur(${70 * intensity}px)`, opacity: 0.9 * intensity,
    }}/>
    <div style={{
      position: 'absolute', bottom: '5%', right: '-5%',
      width: 560, height: 560, borderRadius: '50%',
      background: `radial-gradient(circle, ${GREEN[500]}40 0%, ${GREEN[500]}00 65%)`,
      filter: `blur(${80 * intensity}px)`, opacity: 0.85 * intensity,
    }}/>
  </div>
);

// Simple stroke icon primitive
const SIcon = ({ children, size = 22, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">{children}</svg>
);

Object.assign(window, {
  BLUE, GREEN, INK, INK_SOFT, INK_FAINT, PAPER, PAPER_SOFT, LINE,
  GRADIENT, GRADIENT_SOFT,
  CNVLogo, GradientText, PrimaryBtn, OutlineBtn, GhostBtn, Eyebrow, Divider,
  DotGrid, SoftGlow, SIcon,
  // Back-compat aliases so older sections don't crash while we migrate
  Aurora: SoftGlow,
});