// Pink/black accent overlay for the HubSpot-style landing
// Layered ON TOP of brand.jsx — do NOT overwrite core tokens.
// Uses distinct names to avoid collisions with BLUE/GREEN system.

const PINK = {
  900: '#3B0A1E', 700: '#8A1E44', 600: '#D0336A', 500: '#FF4E7D',
  400: '#FF688E', 300: '#FFA0B8', 200: '#FFC4D3', 100: '#FFE2EA', 50: '#FFF5F8',
};
const NIGHT = {
  1000: '#06070B', 950: '#0A0E1A', 900: '#0F1424', 800: '#161C32', 700: '#1F2742',
};
const CYAN = { 500: '#00D9FF', 300: '#7EEBFF' };

// Signature pink→cyan gradient (HubSpot-esque warm→cool)
const PINK_GRAD = 'linear-gradient(90deg, #FF4E7D 0%, #FF688E 45%, #FFC4D3 100%)';
const PINK_CYAN_GRAD = 'linear-gradient(135deg, #FF4E7D 0%, #FF688E 40%, #00D9FF 100%)';

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

// Pink-themed primary button
const PinkBtn = ({ children, size = 'md', onClick, style }) => {
  const [hover, setHover] = React.useState(false);
  const pads = size === 'lg' ? '16px 30px' : size === 'sm' ? '9px 18px' : '13px 24px';
  const fs = size === 'lg' ? 16 : size === 'sm' ? 13 : 14.5;
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? PINK[500] : PINK[400],
        color: '#fff', border: 'none', padding: pads, borderRadius: 10,
        fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: fs, cursor: 'pointer',
        boxShadow: hover ? `0 12px 32px ${PINK[400]}60` : `0 6px 18px ${PINK[400]}40`,
        transition: 'all .18s ease', letterSpacing: '-0.01em', whiteSpace: 'nowrap', ...style,
      }}>{children}</button>
  );
};

const PinkOutlineBtn = ({ children, size = 'md', onClick, icon, style, dark = true }) => {
  const [hover, setHover] = React.useState(false);
  const pads = size === 'lg' ? '16px 30px' : '13px 24px';
  const fs = size === 'lg' ? 16 : 14.5;
  const base = dark ? 'rgba(255,255,255,0.18)' : 'rgba(12,26,52,0.14)';
  const col = dark ? '#fff' : NIGHT[950];
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? (dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.04)') : 'transparent',
        color: col, border: `1px solid ${hover ? col : base}`,
        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 PinkEyebrow = ({ children, style }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12,
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: PINK[400], ...style,
  }}>
    <span style={{ width: 16, height: 1.5, background: PINK_GRAD, display: 'inline-block' }}/>
    {children}
  </div>
);

Object.assign(window, {
  PINK, NIGHT, CYAN, PINK_GRAD, PINK_CYAN_GRAD,
  PinkGradientText, PinkBtn, PinkOutlineBtn, PinkEyebrow,
});