/* Button.jsx — HDS marketing button (sharp 4px) — DS rule §non-negotiables #5
   Identical to design system reference; only re-declared here so the homepage
   is self-contained when copied. */

const Button = ({ variant = 'primary', size = 'md', children, icon, onClick, type, ...rest }) => {
  /* Mobile detection — bump sm/md to 44px touch-target floor per WCAG 2.5.5.
     Desktop sizes preserved exactly; only ≤767px gets larger padding/minHeight. */
  const [isMobile, setIsMobile] = React.useState(() =>
    typeof window !== 'undefined' && window.matchMedia
      ? window.matchMedia('(max-width: 767px)').matches
      : false
  );
  React.useEffect(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return;
    const mq = window.matchMedia('(max-width: 767px)');
    const h = e => setIsMobile(e.matches);
    setIsMobile(mq.matches);
    mq.addEventListener('change', h);
    return () => mq.removeEventListener('change', h);
  }, []);

  const base = {
    fontFamily: 'var(--font-sans)',
    fontFeatureSettings: '"ss01"',
    fontWeight: 600,
    lineHeight: 1,
    borderRadius: 8,
    cursor: 'pointer',
    transition: 'all 160ms cubic-bezier(0.25,0.1,0.25,1)',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    whiteSpace: 'nowrap',
    letterSpacing: '-0.01em',
  };
  const sizes = {
    sm: { padding: '8px 14px',  fontSize: 13 },
    md: { padding: '10px 18px', fontSize: 15 },
    lg: { padding: '14px 26px', fontSize: 16 },
  };
  const mobileSizes = {
    sm: { padding: '11px 16px', fontSize: 14, minHeight: 44 },
    md: { padding: '13px 20px', fontSize: 15, minHeight: 44 },
    lg: { padding: '15px 26px', fontSize: 16, minHeight: 48 },
  };
  const variants = {
    primary:   {
      background: '#6D28D9', color: '#fff',
      border: '1px solid #6D28D9',
      boxShadow: '0 1px 2px rgba(15,23,42,0.06), 0 8px 20px -8px rgba(109,40,217,0.55)',
    },
    secondary: {
      background: '#fff', color: '#0B1727',
      border: '1px solid #E2E8F0',
      boxShadow: '0 1px 2px rgba(15,23,42,0.04)',
    },
    ghost:     {
      background: 'transparent', color: '#6D28D9',
      border: '1px solid transparent',
    },
    onDark:    {
      background: '#fff', color: '#0B1727',
      border: '1px solid #fff',
      boxShadow: '0 1px 2px rgba(0,0,0,0.10)',
    },
    kakao:     {
      background: '#FEE500', color: '#191600',
      border: '1px solid #FEE500',
      boxShadow: '0 1px 2px rgba(15,23,42,0.04), 0 8px 18px -8px rgba(254,229,0,0.6)',
    },
    google:    {
      background: '#FFFFFF', color: '#1F2937',
      border: '1px solid #D1D5DB',
      boxShadow: '0 1px 2px rgba(15,23,42,0.04), 0 6px 16px -10px rgba(15,23,42,0.12)',
    },
  };
  const [hover, setHover] = React.useState(false);
  const hoverStyles = {
    primary:   {
      background: '#5B21B6', borderColor: '#5B21B6',
      boxShadow: '0 2px 4px rgba(15,23,42,0.08), 0 14px 28px -10px rgba(109,40,217,0.65)',
      transform: 'translateY(-1px)',
    },
    secondary: {
      borderColor: '#C4B5FD',
      boxShadow: '0 4px 12px rgba(109,40,217,0.10)',
      transform: 'translateY(-1px)',
    },
    ghost:     { background: 'rgba(109,40,217,0.06)' },
    onDark:    { background: 'rgba(255,255,255,0.92)' },
    kakao:     {
      background: '#FADA0A', borderColor: '#FADA0A',
      boxShadow: '0 2px 4px rgba(15,23,42,0.08), 0 14px 28px -10px rgba(254,229,0,0.7)',
      transform: 'translateY(-1px)',
    },
    google:    {
      background: '#F9FAFB', borderColor: '#9CA3AF',
      boxShadow: '0 2px 4px rgba(15,23,42,0.06), 0 10px 24px -10px rgba(15,23,42,0.18)',
      transform: 'translateY(-1px)',
    },
  };
  return (
    <button
      type={type || 'button'}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ ...base, ...sizes[size], ...(isMobile ? mobileSizes[size] : null), ...variants[variant], ...(hover ? hoverStyles[variant] : {}) }}
      {...rest}
    >
      {children}
      {icon}
    </button>
  );
};

window.Button = Button;