import React from 'react';

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

export const LogoIcon: React.FC<LogoIconProps> = ({ className = 'w-10 h-10', size }) => {
  return (
    <svg
      viewBox="0 0 300 300"
      width={size}
      height={size}
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-label="Simply Sorted Tech Logo"
    >
      <defs>
        <linearGradient id="logoSky" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#d2ebef" />
          <stop offset="100%" stopColor="#f4eee1" />
        </linearGradient>
        <linearGradient id="logoSea" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#56a0ab" />
          <stop offset="100%" stopColor="#3d7d88" />
        </linearGradient>
        <linearGradient id="logoSand" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#e5d09f" />
          <stop offset="100%" stopColor="#d4b26f" />
        </linearGradient>
      </defs>

      {/* Main Base Outer Circle */}
      <circle cx="150" cy="150" r="145" fill="#f4eee1" />

      {/* Outer Teal Border Ring */}
      <circle cx="150" cy="150" r="140" fill="none" stroke="#28818c" strokeWidth="10" />
      
      {/* Inner Sand-Gold Dashed Accent Ring */}
      <circle cx="150" cy="150" r="130" fill="none" stroke="#d4b26f" strokeWidth="4" strokeDasharray="6 4" />
      
      {/* Inner Thin Teal Ring */}
      <circle cx="150" cy="150" r="122" fill="none" stroke="#28818c" strokeWidth="2.5" />

      {/* Outer Ring Gear Embellishments */}
      {/* Top Gear */}
      <g transform="translate(150, 10)">
        <circle cx="0" cy="0" r="8" fill="#28818c" />
        <circle cx="0" cy="0" r="4" fill="#ffffff" />
      </g>
      {/* Top Left Gear */}
      <g transform="translate(48, 52)">
        <circle cx="0" cy="0" r="6" fill="#d4b26f" />
        <circle cx="0" cy="0" r="3" fill="#ffffff" />
      </g>
      {/* Top Right Gear */}
      <g transform="translate(252, 52)">
        <circle cx="0" cy="0" r="6" fill="#d4b26f" />
        <circle cx="0" cy="0" r="3" fill="#ffffff" />
      </g>
      {/* Left Gear */}
      <g transform="translate(10, 150)">
        <circle cx="0" cy="0" r="7" fill="#28818c" />
        <circle cx="0" cy="0" r="3.5" fill="#ffffff" />
      </g>
      {/* Right Gear */}
      <g transform="translate(290, 150)">
        <circle cx="0" cy="0" r="7" fill="#28818c" />
        <circle cx="0" cy="0" r="3.5" fill="#ffffff" />
      </g>

      {/* Inner Graphic Clip / Area */}
      <g>
        {/* Sky Background */}
        <path d="M 30 150 A 120 120 0 0 1 270 150 Z" fill="url(#logoSky)" />

        {/* Sun in Sky */}
        <circle cx="215" cy="80" r="10" fill="#fff5d6" stroke="#d4b26f" strokeWidth="2" />

        {/* Ocean Wave on Left */}
        <path d="M 30 150 Q 80 100 105 125 T 150 150 L 30 150 Z" fill="url(#logoSea)" />
        <path d="M 40 145 Q 85 105 105 125" fill="none" stroke="#ffffff" strokeWidth="2" />

        {/* Sailboat in Distance */}
        <path d="M 135 120 L 142 105 L 146 120 Z" fill="#28818c" />

        {/* Wi-Fi Signal */}
        <path d="M 130 75 Q 150 60 170 75" fill="none" stroke="#28818c" strokeWidth="3.5" strokeLinecap="round" />
        <path d="M 138 85 Q 150 74 162 85" fill="none" stroke="#28818c" strokeWidth="3" strokeLinecap="round" />
        <circle cx="150" cy="94" r="3" fill="#28818c" />

        {/* Beach / Sand Base inside graphic */}
        <path d="M 30 150 Q 150 135 270 150 A 120 120 0 0 1 30 150 Z" fill="url(#logoSand)" />

        {/* Palm Tree on Right Beach */}
        <g transform="translate(230, 115)">
          <path d="M 0 35 Q -10 15 5 -10" fill="none" stroke="#28818c" strokeWidth="4" strokeLinecap="round" />
          <path d="M 5 -10 Q -15 -20 -30 -10 M 5 -10 Q 20 -25 35 -10 M 5 -10 Q -20 0 -25 15 M 5 -10 Q 25 0 30 15" stroke="#3d7d88" strokeWidth="3" fill="none" strokeLinecap="round" />
        </g>

        {/* Center Devices (Laptop, Tablet, Smartphone) */}
        <g transform="translate(150, 140)">
          {/* Laptop Screen */}
          <rect x="-32" y="-28" width="64" height="42" rx="4" fill="#ffffff" stroke="#28818c" strokeWidth="3" />
          {/* Laptop Base */}
          <path d="M -42 14 L 42 14 L 38 18 L -38 18 Z" fill="#56a0ab" stroke="#28818c" strokeWidth="2" />
          {/* Gear on Laptop Screen */}
          <circle cx="0" cy="-7" r="10" fill="#ffffff" stroke="#28818c" strokeWidth="3" />
          <circle cx="0" cy="-7" r="4" fill="#28818c" />
          
          {/* Tablet (Left) */}
          <rect x="-58" y="-14" width="22" height="34" rx="3" fill="#ffffff" stroke="#28818c" strokeWidth="2.5" />
          <circle cx="-47" cy="15" r="1.5" fill="#28818c" />

          {/* Smartphone (Right) */}
          <rect x="38" y="-5" width="16" height="26" rx="3" fill="#ffffff" stroke="#28818c" strokeWidth="2.5" />
          <circle cx="46" cy="17" r="1" fill="#28818c" />
        </g>
      </g>

      {/* White Banner Box across bottom for text */}
      <g transform="translate(150, 222)">
        {/* Banner White Box */}
        <rect x="-105" y="-30" width="210" height="52" rx="10" fill="#ffffff" stroke="#28818c" strokeWidth="4" />
        
        {/* SIMPLY SORTED Text */}
        <text
          x="0"
          y="-5"
          textAnchor="middle"
          fill="#28818c"
          fontFamily="Montserrat, sans-serif"
          fontWeight="900"
          fontSize="21"
          letterSpacing="0.5"
        >
          SIMPLY SORTED
        </text>

        {/* Decorative Swirls flanking TECH */}
        <path d="M -65 10 Q -50 4 -35 10 Q -25 14 -15 10" fill="none" stroke="#28818c" strokeWidth="2" strokeLinecap="round" />
        <path d="M 65 10 Q 50 4 35 10 Q 25 14 15 10" fill="none" stroke="#28818c" strokeWidth="2" strokeLinecap="round" />

        {/* TECH Text */}
        <text
          x="0"
          y="13"
          textAnchor="middle"
          fill="#d4b26f"
          fontFamily="Montserrat, sans-serif"
          fontWeight="900"
          fontSize="14"
          letterSpacing="3"
        >
          TECH
        </text>
      </g>

      {/* Bottom Sand Accent Dot */}
      <circle cx="150" cy="272" r="4" fill="#28818c" />
    </svg>
  );
};