import React from 'react';

interface LogoProps {
  className?: string;
  size?: number;
}

export const Logo: React.FC<LogoProps> = ({ className = '', size = 40 }) => {
  return (
    <div className={`flex items-center gap-3 ${className}`} style={{ height: size }}>
      <svg
        width={size}
        height={size}
        viewBox="0 0 100 100"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        className="w-auto h-full"
      >
        <defs>
          <linearGradient id="logo-grad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#4d7cff" />
            <stop offset="100%" stopColor="#7c5cff" />
          </linearGradient>
          <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="3" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>

        {/* Outer Tech Circle */}
        <circle
          cx="50"
          cy="50"
          r="45"
          stroke="url(#logo-grad)"
          strokeWidth="1.5"
          strokeDasharray="6 4 2 4"
          className="animate-[spin_40s_linear_infinite]"
          style={{ transformOrigin: 'center' }}
        />
        
        {/* Inner concentric ring */}
        <circle
          cx="50"
          cy="50"
          r="38"
          stroke="rgba(255, 255, 255, 0.05)"
          strokeWidth="1"
          strokeDasharray="40 10"
          className="animate-[spin_20s_linear_infinite_reverse]"
          style={{ transformOrigin: 'center' }}
        />

        {/* Diagonal Tech lines */}
        <path
          d="M 25 35 L 75 35 M 25 65 L 75 65"
          stroke="rgba(255, 255, 255, 0.1)"
          strokeWidth="1"
        />

        {/* Stylized Monogram HSM (acheseme) */}
        {/* Letter H (Left vertical & central cross) */}
        <path
          d="M 30 25 L 30 75 M 30 50 L 50 50"
          stroke="url(#logo-grad)"
          strokeWidth="4.5"
          strokeLinecap="round"
          filter="url(#glow)"
        />
        
        {/* Letter S (Curve connecting from H crossbar to M) */}
        <path
          d="M 50 50 Q 60 50 60 62.5 Q 60 75 50 75 Q 40 75 40 62.5"
          stroke="url(#logo-grad)"
          strokeWidth="4.5"
          strokeLinecap="round"
          filter="url(#glow)"
        />
        
        {/* Letter M (Right side) */}
        <path
          d="M 70 75 L 70 25 L 50 50 L 70 25 L 70 75"
          stroke="url(#logo-grad)"
          strokeWidth="4.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          filter="url(#glow)"
        />

        {/* Connected circuit node dots */}
        <circle cx="30" cy="25" r="3.5" fill="#4d7cff" filter="url(#glow)" />
        <circle cx="70" cy="75" r="3.5" fill="#7c5cff" filter="url(#glow)" />
        <circle cx="50" cy="50" r="3" fill="#4d7cff" />
      </svg>
      <span className="font-mono text-xl font-black tracking-[0.25em] bg-gradient-to-r from-[#4d7cff] to-[#7c5cff] bg-clip-text text-transparent">
        ACHESEME
      </span>
    </div>
  );
};