// LinkedClean — Brand System v2
// Direção: Mobbin × EarlyBird, sem o etéreo. Off-white quente, preto sólido,
// azul LinkedIn pro ícone/acentos, Inter sans + dose mínima de serif itálica.

const LCB = {
  // ============ CORES ============
  // Bases
  ink:       '#0A0A0A',  // preto quase puro (CTAs, headlines, ícones)
  ink80:     '#262626',
  ink60:     '#525252',  // body text secundário
  ink40:     '#A3A3A3',  // micro-copy, meta
  ink20:     '#D4D4D4',  // borders
  ink10:     '#E5E5E5',  // divisórias suaves
  ink05:     '#F0EFEC',  // bg de cards levemente quente
  ink03:     '#F7F5F0',  // bg de seções alternadas
  paper:     '#FAFAF9',  // off-white quente principal (era #F5F5F5)
  white:     '#FFFFFF',  // popup, cards limpos

  // Brand
  blue:      '#0A66C2',  // LinkedIn blue — só pro ícone e estados ON
  blueDeep:  '#004182',  // gradient stop / hover
  blueSoft:  '#EFF6FF',  // bg leve
  blueBorder:'#BFDBFE',
  blueGrad:  'linear-gradient(135deg, #004182 0%, #0A66C2 100%)',

  // Sparkle (mantido — DNA do ícone)
  yellow:    '#FFD93D',

  // Semantic
  success:   '#059669',
  successBg: '#ECFDF5',
  warn:      '#D97706',
  warnBg:    '#FEF3C7',

  // ============ TIPOGRAFIA ============
  fontSans:    '"Geist", -apple-system, BlinkMacSystemFont, sans-serif',
  fontSerif:   '"Instrument Serif", "Times New Roman", Georgia, serif',  // só pro flerte editorial
  fontMono:    '"Geist Mono", ui-monospace, monospace',

  // ============ RADIUS ============
  rXs: 6,
  rSm: 8,
  rMd: 12,
  rLg: 16,
  rXl: 24,
  rPill: 999,

  // ============ SHADOWS ============
  shCard:    '0 1px 2px rgba(10,10,10,0.04), 0 4px 12px -4px rgba(10,10,10,0.06)',
  shFloat:   '0 1px 2px rgba(10,10,10,0.04), 0 8px 24px -8px rgba(10,10,10,0.10)',
  shPopup:   '0 24px 60px -20px rgba(10,10,10,0.18), 0 4px 12px -4px rgba(10,10,10,0.08), 0 0 0 1px rgba(10,10,10,0.04)',
};

window.LCB = LCB;

// =============================================================================
// SectionLabel — eyebrow style padrão (Mobbin/EarlyBird usam isso)
// "MISSION", "FAQ" — small caps, bem tracking
// =============================================================================
function LCBEyebrow({ children, color }) {
  return (
    <div style={{
      fontFamily: LCB.fontSans,
      fontSize: 11, fontWeight: 600,
      color: color || LCB.ink60,
      textTransform: 'uppercase',
      letterSpacing: '0.14em',
    }}>{children}</div>
  );
}

// =============================================================================
// Headline — sans bold + 1 palavra em serif itálico opcional
// Uso: <LCBHeadline>Limpe seu feed do <i>LinkedIn</i>.</LCBHeadline>
// "i" tag vira automaticamente serif italic
// =============================================================================
function LCBHeadline({ children, size = 76, color, align = 'left', maxWidth }) {
  return (
    <h1 style={{
      fontFamily: LCB.fontSans,
      fontSize: size,
      fontWeight: 700,
      lineHeight: 1.04,
      letterSpacing: '-0.035em',
      color: color || LCB.ink,
      margin: align === 'center' ? '0 auto' : 0,
      textAlign: align,
      maxWidth,
      // <i> children inherits these via CSS below
    }}>
      <style>{`
        .lcb-h i {
          font-family: ${LCB.fontSerif};
          font-style: italic;
          font-weight: 400;
          letter-spacing: -0.02em;
        }
      `}</style>
      <span className="lcb-h">{children}</span>
    </h1>
  );
}

// =============================================================================
// PillNav — barra de navegação flutuante padrão (Mobbin/EarlyBird/Accretion)
// =============================================================================
function LCBPillNav({ items = [], cta, brand }) {
  return (
    <nav style={{
      background: LCB.ink05,
      borderRadius: LCB.rPill,
      padding: '6px 6px 6px 18px',
      display: 'inline-flex', alignItems: 'center', gap: 4,
      fontFamily: LCB.fontSans,
      fontSize: 14, fontWeight: 500,
      border: `1px solid ${LCB.ink10}`,
    }}>
      {brand && (
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          paddingRight: 14, marginRight: 4,
          color: LCB.ink, fontWeight: 600,
          letterSpacing: '-0.01em',
          borderRight: `1px solid ${LCB.ink20}`,
        }}>
          {brand}
        </span>
      )}
      {items.map((it, i) => (
        <a key={i} style={{
          padding: '8px 14px',
          color: LCB.ink60,
          cursor: 'pointer',
          textDecoration: 'none',
          borderRadius: LCB.rPill,
          letterSpacing: '-0.005em',
        }}>{it}</a>
      ))}
      {cta && (
        <button style={{
          background: LCB.ink,
          color: '#FFFFFF',
          border: 'none',
          borderRadius: LCB.rPill,
          padding: '8px 16px',
          fontFamily: LCB.fontSans,
          fontSize: 13, fontWeight: 600,
          letterSpacing: '-0.005em',
          cursor: 'pointer',
        }}>{cta}</button>
      )}
    </nav>
  );
}

// =============================================================================
// Buttons v2 — preto pill (primary), outline pill (secondary), ghost
// =============================================================================
function LCBButton({ children, variant = 'primary', size = 'md', icon, iconRight, fullWidth }) {
  const sizes = {
    sm: { pad: '8px 16px', fs: 13 },
    md: { pad: '12px 20px', fs: 14 },
    lg: { pad: '14px 24px', fs: 15 },
  };
  const s = sizes[size];
  const variants = {
    primary: { bg: LCB.ink, fg: '#FFFFFF', border: LCB.ink },
    blue:    { bg: LCB.blue, fg: '#FFFFFF', border: LCB.blue },
    outline: { bg: '#FFFFFF', fg: LCB.ink, border: LCB.ink20 },
    ghost:   { bg: 'transparent', fg: LCB.ink60, border: 'transparent' },
  };
  const v = variants[variant] || variants.primary;
  return (
    <button style={{
      background: v.bg, color: v.fg,
      border: `1px solid ${v.border}`,
      borderRadius: LCB.rPill,
      padding: s.pad,
      fontFamily: LCB.fontSans, 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}
      {iconRight}
    </button>
  );
}

// =============================================================================
// Surface card — bg + border padrão (Mobbin/EarlyBird têm exatamente isso)
// =============================================================================
function LCBSurface({ children, padding = 24, style }) {
  return (
    <div style={{
      background: '#FFFFFF',
      border: `1px solid ${LCB.ink10}`,
      borderRadius: LCB.rLg,
      padding,
      ...style,
    }}>
      {children}
    </div>
  );
}

window.LCBEyebrow = LCBEyebrow;
window.LCBHeadline = LCBHeadline;
window.LCBPillNav = LCBPillNav;
window.LCBButton = LCBButton;
window.LCBSurface = LCBSurface;