/* global React */
// Shared brand primitives for both recruit variations.

const BC = {
  navy: '#0F2341',
  deepNavy: '#071326',
  teal: '#1495B9',
  lime: '#BADA55',
  paper: '#F5EFDC',
  paperDeep: '#E8DCBC',
  ink: '#3D2A15',
  fg1: '#0F2341',
  fg2: '#495057',
  fg3: '#6C757D',
  surface: '#F5F6F8',
  line: '#E9ECEF',
};

// Primary pill button. variant: 'lime' | 'teal' | 'outline-dark' | 'outline-light' | 'wax'
function RecruitButton({ variant = 'teal', children, onClick, href, target, rel, block = false, size = 'md' }) {
  const [hover, setHover] = React.useState(false);
  const sizeStyle = {
    sm: { padding: '10px 20px', fontSize: 12 },
    md: { padding: '16px 32px', fontSize: 14 },
    lg: { padding: '20px 40px', fontSize: 16 },
  }[size];
  const variants = {
    teal:  { bg: '#1495B9', fg: '#fff',    hover: '#0F7A99', glow: '0 0 12px rgba(20,149,185,0.6)' },
    lime:  { bg: '#BADA55', fg: '#0F2341', hover: '#A7C64A', glow: '0 10px 24px rgba(186,218,85,0.35)' },
    navy:  { bg: '#0F2341', fg: '#fff',    hover: '#071326', glow: 'none' },
    'outline-dark':  { bg: 'transparent', fg: '#0F2341', border: '2px solid #0F2341', hover: '#0F2341', hoverFg: '#fff' },
    'outline-light': { bg: 'transparent', fg: '#fff',    border: '2px solid rgba(255,255,255,0.5)', hover: 'rgba(255,255,255,0.1)' },
    wax:   { bg: '#0F2341', fg: '#F5EFDC', hover: '#071326', glow: '0 10px 24px rgba(15,35,65,0.4)' },
  };
  const v = variants[variant];
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} target={href ? target : undefined} rel={href ? rel : undefined} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: block ? 'flex' : 'inline-flex', width: block ? '100%' : 'auto',
        alignItems: 'center', justifyContent: 'center', gap: 10,
        fontFamily: '"Lato", Arial, sans-serif', fontWeight: 700, letterSpacing: '0.04em',
        textTransform: 'uppercase', textDecoration: 'none', cursor: 'pointer',
        borderRadius: 9999, border: v.border || 'none',
        ...sizeStyle,
        background: hover ? (variants[variant].hover) : v.bg,
        color: hover && v.hoverFg ? v.hoverFg : v.fg,
        boxShadow: v.glow && !hover ? v.glow : (hover && v.glow ? '0 0 18px rgba(20,149,185,0.8)' : 'none'),
        transform: hover ? 'translateY(-1px)' : 'none',
        transition: 'all 220ms cubic-bezier(0.2,0.8,0.2,1)',
      }}>
      {children}
    </Tag>
  );
}

// Lime-dot + navy checkmark — V2 signature checklist item.
function LimeCheck({ children, onDark = false, size = 22 }) {
  const dotTop = size === 22 ? 3 : 6;
  const tickTop = size === 22 ? 7 : 10;
  return (
    <li style={{ position: 'relative', paddingLeft: size + 14, marginBottom: 14, fontSize: size === 22 ? 16 : 17, color: onDark ? 'rgba(255,255,255,0.9)' : '#212529', lineHeight: 1.55 }}>
      <span style={{ position: 'absolute', left: 0, top: dotTop, width: size, height: size, borderRadius: '50%', background: '#BADA55' }}/>
      <span style={{ position: 'absolute', left: 4, top: tickTop, width: 13, height: 7, borderLeft: '2.5px solid #0F2341', borderBottom: '2.5px solid #0F2341', transform: 'rotate(-45deg)' }}/>
      {children}
    </li>
  );
}

// Topographic line texture (used as section bg or decorative overlay).
function TopoLines({ opacity = 0.08, color = '#0F2341' }) {
  const id = 'topo-' + Math.random().toString(36).slice(2, 7);
  return (
    <svg aria-hidden width="100%" height="100%" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity }}>
      <defs>
        <pattern id={id} x="0" y="0" width="320" height="180" patternUnits="userSpaceOnUse">
          <path d="M0 140 Q 80 100, 160 120 T 320 100" fill="none" stroke={color} strokeWidth="1"/>
          <path d="M0 110 Q 80 70,  160 90  T 320 70" fill="none" stroke={color} strokeWidth="1"/>
          <path d="M0 80  Q 80 40,  160 60  T 320 40" fill="none" stroke={color} strokeWidth="1"/>
          <path d="M0 50  Q 80 10,  160 30  T 320 10" fill="none" stroke={color} strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${id})`}/>
    </svg>
  );
}

// Eyebrow kicker — caps, tracked, teal or lime.
function Kicker({ color = '#1495B9', children, style = {} }) {
  return (
    <div style={{
      fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
      color, marginBottom: 16, ...style,
    }}>{children}</div>
  );
}

// Breakpoint hook — returns 'mobile' (<600), 'tablet' (600–1179), or 'desktop' (≥1180).
function useBreakpoint() {
  const resolve = (w) => (w < 600 ? 'mobile' : w < 1180 ? 'tablet' : 'desktop');
  const [bp, setBp] = React.useState(() => typeof window === 'undefined' ? 'desktop' : resolve(window.innerWidth));
  React.useEffect(() => {
    const onResize = () => setBp(resolve(window.innerWidth));
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return bp;
}

// Austin James — real discovery-call booking (Calendly). Opened in a new tab from every
// "Talk To Your Guide" CTA. No ?month param, so it always opens on the current month.
window.BC_BOOKING_URL = 'https://calendly.com/ajames-2020/explore-agent-onboarding-call';

window.BC_TOK = BC;
window.RecruitButton = RecruitButton;
window.LimeCheck = LimeCheck;
window.TopoLines = TopoLines;
window.Kicker = Kicker;
window.useBreakpoint = useBreakpoint;