'use client';

/**
 * GFS Ghost Brand Icon - The signature brand mark.
 * Like Ralph Lauren's polo player, this ghost icon goes on everything.
 * Small, elegant, recognizable.
 */
export function GhostBrandIcon({ 
  size = 24, 
  className = '',
  variant = 'default'
}: { 
  size?: number; 
  className?: string;
  variant?: 'default' | 'light' | 'dark' | 'glow';
}) {
  const colors = {
    default: { body: '#c084fc', eyes: '#38BDF8', outline: '#a855f7' },
    light: { body: 'rgba(255,255,255,0.9)', eyes: '#38BDF8', outline: 'rgba(255,255,255,0.7)' },
    dark: { body: '#1a0a2e', eyes: '#38BDF8', outline: '#FB923C' },
    glow: { body: '#c084fc', eyes: '#38BDF8', outline: '#e879f9' },
  };

  const c = colors[variant];

  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      aria-hidden="true"
    >
      {variant === 'glow' && (
        <defs>
          <filter id="ghostGlow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="1.5" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>
      )}
      <g filter={variant === 'glow' ? 'url(#ghostGlow)' : undefined}>
        {/* Ghost body - rounded top, wavy bottom */}
        <path
          d="M16 3C10.477 3 6 7.477 6 13v11c0 0.5 0.4 1 0.9 0.7l2.1-1.5 2.5 2c0.3 0.25 0.7 0.25 1 0l2.5-2 2.5 2c0.3 0.25 0.7 0.25 1 0l2.5-2 2.5 2c0.3 0.25 0.7 0.25 1 0l2.1-1.5c0.5 0.3 0.9-0.2 0.9-0.7V13c0-5.523-4.477-10-10-10z"
          fill={c.body}
          opacity="0.9"
          stroke={c.outline}
          strokeWidth="0.75"
        />
        {/* Left eye */}
        <ellipse cx="12" cy="14.5" rx="2" ry="2.2" fill={c.eyes} />
        <ellipse cx="12" cy="14" rx="0.7" ry="0.8" fill="white" opacity="0.7" />
        {/* Right eye */}
        <ellipse cx="20" cy="14.5" rx="2" ry="2.2" fill={c.eyes} />
        <ellipse cx="20" cy="14" rx="0.7" ry="0.8" fill="white" opacity="0.7" />
        {/* Subtle smirk */}
        <path
          d="M13 19.5c1.5 1.2 3.5 1.2 5 0"
          stroke={c.eyes}
          strokeWidth="0.8"
          strokeLinecap="round"
          fill="none"
          opacity="0.6"
        />
      </g>
    </svg>
  );
}
