import { cn } from '@/lib/utils';

type MarkProps = {
  size?: number;
  className?: string;
  title?: string;
  /** Show subtle eight-point Hospitaller-inspired grid */
  showGrid?: boolean;
};

/**
 * Master Sankofa mark — geometric bird (backward glance, forward motion)
 * inside a sovereign protection ring. Tail resolves to network path streams.
 */
export function SankofaMark({
  size = 48,
  className,
  title = 'Sankofa',
  showGrid = true,
}: MarkProps) {
  return (
    <svg
      viewBox="0 0 64 64"
      width={size}
      height={size}
      className={cn('shrink-0 text-sovereign-gold', className)}
      role="img"
      aria-label={title}
    >
      {showGrid && (
        <g opacity={0.12} stroke="currentColor" strokeWidth={0.5} fill="none">
          {[0, 45, 90, 135].map((deg) => (
            <line
              key={deg}
              x1={32}
              y1={32}
              x2={32 + 28 * Math.cos((deg * Math.PI) / 180)}
              y2={32 + 28 * Math.sin((deg * Math.PI) / 180)}
            />
          ))}
          <polygon
            points="32,6 38,26 58,32 38,38 32,58 26,38 6,32 26,26"
            strokeWidth={0.4}
          />
        </g>
      )}

      {/* Sovereign protection ring */}
      <circle
        cx={32}
        cy={32}
        r={29}
        fill="none"
        stroke="currentColor"
        strokeWidth={1.25}
        opacity={0.85}
      />
      <circle cx={32} cy={32} r={26.5} fill="none" stroke="currentColor" strokeWidth={0.5} opacity={0.35} />

      {/* Forward body — angular chevron advancing right */}
      <path
        d="M18 34 L32 28 L46 34 L32 40 Z"
        fill="currentColor"
        opacity={0.95}
      />

      {/* Neck + head looking backward (left) */}
      <path
        d="M20 32 C16 28 14 22 18 18 C22 16 24 20 22 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle cx={17.5} cy={19} r={1.75} fill="currentColor" />

      {/* Leading wing — forward motion */}
      <path
        d="M32 28 L38 22 L42 28 L32 32 Z"
        fill="currentColor"
        opacity={0.7}
      />

      {/* Tail / data streams — network paths trailing backward */}
      <g stroke="currentColor" strokeWidth={1} fill="none" opacity={0.75} strokeLinecap="round">
        <path d="M18 34 C12 36 8 40 6 46" />
        <path d="M18 36 C10 38 6 44 4 52" />
        <path d="M20 38 C14 42 10 48 8 56" />
      </g>
    </svg>
  );
}
