// LinkedClean — Sistema compartilhado
// Tokens, IconA1, BrandLockup, ToggleSwitch, Checkbox, RadioCard, primitives

const LC = {
  // Brand
  blue: '#0A66C2',
  blueDeep: '#004182',
  blueGrad: 'linear-gradient(135deg, #004182 0%, #0A66C2 100%)',
  yellow: '#FFD93D',

  // Neutrals
  ink: '#0A0A0A',
  ink70: '#404040',
  ink50: '#737373',
  ink30: '#A3A3A3',
  ink15: '#D4D4D4',
  ink08: '#E5E5E5',
  ink04: '#F5F5F5',
  ink02: '#FAFAFA',
  white: '#FFFFFF',

  // Semantic
  blueBg: '#EFF6FF',     // bg leve para containers de info azul
  blueBorder: '#BFDBFE',
};

window.LC = LC;

// =============================================================================
// IconA1 — LinkedIn Blue version of the chosen icon (3 bars + sparkle)
// =============================================================================
function LCIcon({ size = 96, radius }) {
  const r = radius ?? Math.round(size * 0.23);
  return (
    <div style={{
      width: size, height: size, borderRadius: r,
      background: LC.ink,
      position: 'relative', overflow: 'hidden',
      boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 24px -8px rgba(0,0,0,0.18)',
      flexShrink: 0,
    }}>
      <svg width={size} height={size} viewBox="0 0 96 96" style={{ position: 'absolute', inset: 0 }}>
        <rect x="20" y="22" width="38" height="10" rx="5" fill="rgba(255,255,255,0.32)" />
        <rect x="20" y="43" width="56" height="10" rx="5" fill="#FFFFFF" />
        <rect x="20" y="64" width="46" height="10" rx="5" fill="#FFFFFF" />
        <circle cx="74" cy="22" r="4.5" fill={LC.blue} />
      </svg>
    </div>
  );
}

// =============================================================================
// Wordmark — "LinkedClean" with subtle weight contrast
// =============================================================================
function LCWordmark({ size = 22, color }) {
  return (
    <span style={{
      fontFamily: '"Geist", sans-serif',
      fontSize: size, fontWeight: 600,
      letterSpacing: '-0.02em',
      color: color || LC.ink,
      whiteSpace: 'nowrap',
    }}>
      Linked<span style={{ fontWeight: 700, color: LC.blue }}>Clean</span>
    </span>
  );
}

// =============================================================================
// Lockup — Icon + Wordmark horizontal
// =============================================================================
function LCLockup({ iconSize = 32, textSize = 18, gap = 10 }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap }}>
      <LCIcon size={iconSize} />
      <LCWordmark size={textSize} />
    </div>
  );
}

// =============================================================================
// ToggleSwitch — iOS-style, blue when on
// =============================================================================
function LCToggle({ on = true, size = 'md' }) {
  const dims = size === 'sm'
    ? { w: 36, h: 22, knob: 16, pad: 3 }
    : { w: 48, h: 28, knob: 22, pad: 3 };
  return (
    <div style={{
      width: dims.w, height: dims.h, borderRadius: dims.h / 2,
      background: on ? LC.blue : LC.ink15,
      position: 'relative',
      transition: 'background 0.2s',
      flexShrink: 0,
    }}>
      <div style={{
        position: 'absolute',
        top: dims.pad,
        left: on ? dims.w - dims.knob - dims.pad : dims.pad,
        width: dims.knob, height: dims.knob,
        borderRadius: '50%',
        background: '#FFFFFF',
        boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
        transition: 'left 0.2s',
      }} />
    </div>
  );
}

// =============================================================================
// Checkbox — square, blue when checked, with white check
// =============================================================================
function LCCheckbox({ checked = true, size = 22 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 6,
      background: checked ? LC.blue : 'transparent',
      border: checked ? `1.5px solid ${LC.blue}` : `1.5px solid ${LC.ink15}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      {checked && (
        <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 12 12" fill="none">
          <path d="M2.5 6.5L4.5 8.5L9.5 3.5" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      )}
    </div>
  );
}

// =============================================================================
// Radio (round) — for "Modo de varredura"
// =============================================================================
function LCRadio({ checked = false, size = 20 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: '50%',
      border: checked ? `5px solid ${LC.blue}` : `1.5px solid ${LC.ink15}`,
      background: '#FFFFFF',
      flexShrink: 0,
      transition: 'all 0.15s',
    }} />
  );
}

// =============================================================================
// Pill / Badge
// =============================================================================
function LCBadge({ children, variant = 'default' }) {
  const styles = {
    default:  { bg: LC.ink04,  fg: LC.ink70, border: 'transparent' },
    blue:     { bg: LC.blueBg, fg: LC.blue,  border: 'transparent' },
    blueOutline: { bg: '#FFFFFF', fg: LC.blue, border: LC.blueBorder },
    success:  { bg: '#ECFDF5', fg: '#059669', border: 'transparent' },
  };
  const s = styles[variant] || styles.default;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      background: s.bg, color: s.fg,
      border: `1px solid ${s.border}`,
      padding: '3px 8px', borderRadius: 999,
      fontSize: 11, fontWeight: 600, letterSpacing: '-0.01em',
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// =============================================================================
// Button — primary (blue), secondary (outline), ghost
// =============================================================================
function LCButton({ children, variant = 'primary', size = 'md', icon, fullWidth }) {
  const sizes = {
    sm: { pad: '8px 14px', fs: 13 },
    md: { pad: '12px 20px', fs: 14 },
    lg: { pad: '14px 24px', fs: 15 },
  };
  const s = sizes[size];
  const variants = {
    primary: { bg: LC.blue, fg: '#FFFFFF', border: LC.blue },
    dark:    { bg: LC.ink, fg: '#FFFFFF', border: LC.ink },
    outline: { bg: '#FFFFFF', fg: LC.ink, border: LC.ink15 },
    ghost:   { bg: 'transparent', fg: LC.ink70, border: 'transparent' },
  };
  const v = variants[variant];
  return (
    <button style={{
      background: v.bg, color: v.fg,
      border: `1px solid ${v.border}`,
      borderRadius: 999,
      padding: s.pad,
      fontFamily: 'inherit', fontSize: s.fs, fontWeight: 600,
      letterSpacing: '-0.005em',
      cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      width: fullWidth ? '100%' : undefined,
    }}>
      {icon}
      {children}
    </button>
  );
}

// =============================================================================
// Section header — "CATEGORIAS" / "MODO DE VARREDURA"
// =============================================================================
function LCSectionLabel({ children }) {
  return (
    <div style={{
      fontSize: 11, fontWeight: 600,
      color: LC.ink50,
      textTransform: 'uppercase',
      letterSpacing: '0.12em',
      marginBottom: 12,
    }}>{children}</div>
  );
}

window.LCIcon = LCIcon;
window.LCWordmark = LCWordmark;
window.LCLockup = LCLockup;
window.LCToggle = LCToggle;
window.LCCheckbox = LCCheckbox;
window.LCRadio = LCRadio;
window.LCBadge = LCBadge;
window.LCButton = LCButton;
window.LCSectionLabel = LCSectionLabel;