Home page

interface LogoProps {
  size?: "sm" | "md" | "lg" | "xl"
  variant?: "primary" | "white" | "footer"
  showText?: boolean
  className?: string
}

const sizeMap = {
  sm: 24,
  md: 32,
  lg: 40,
  xl: 64,
}

const gradientMap = {
  primary: {
    id: "primaryGradient",
    stops: [
      { offset: "0%", color: "#3B82F6" },
      { offset: "100%", color: "#1E40AF" },
    ],
  },
  white: {
    id: "whiteGradient",
    stops: [
      { offset: "0%", color: "#FFFFFF" },
      { offset: "100%", color: "#F3F4F6" },
    ],
  },
  footer: {
    id: "footerGradient",
    stops: [
      { offset: "0%", color: "#60A5FA" },
      { offset: "100%", color: "#3B82F6" },
    ],
  },
}

export function Logo({ size = "md", variant = "primary", showText = true, className = "" }: LogoProps) {
  const logoSize = sizeMap[size]
  const gradient = gradientMap[variant]
  const textColor = variant === "white" ? "text-gray-800" : variant === "footer" ? "text-white" : "text-gray-900"
  const subtextColor = variant === "white" ? "text-gray-600" : variant === "footer" ? "text-gray-300" : "text-gray-500"

  return (
    <div className={`flex items-center ${className}`}>
      <div className="relative">
        <svg
          width={logoSize}
          height={logoSize}
          viewBox="0 0 40 40"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className={showText ? "mr-3" : ""}
        >
          <defs>
            <linearGradient id={gradient.id} x1="0%" y1="0%" x2="100%" y2="100%">
              {gradient.stops.map((stop, index) => (
                <stop key={index} offset={stop.offset} stopColor={stop.color} />
              ))}
            </linearGradient>
          </defs>
          <circle cx="20" cy="20" r="20" fill={`url(#${gradient.id})`} />

          {/* Scale/Balance icon */}
          <g transform="translate(8, 8)">
            {/* Base */}
            <rect x="11" y="20" width="2" height="4" fill="white" />
            <rect x="8" y="23" width="8" height="1" fill="white" />

            {/* Vertical pole */}
            <rect x="11.5" y="6" width="1" height="14" fill="white" />

            {/* Balance beam */}
            <rect x="4" y="8" width="16" height="1" fill="white" />

            {/* Left scale */}
            <path d="M4 9 L2 12 L6 12 Z" fill="white" />
            <rect x="1" y="12" width="6" height="0.5" fill="white" />

            {/* Right scale */}
            <path d="M20 9 L18 12 L22 12 Z" fill="white" />
            <rect x="17" y="12" width="6" height="0.5" fill="white" />

            {/* Center pivot */}
            <circle cx="12" cy="8.5" r="1" fill="white" />
          </g>
        </svg>

        {/* Status indicator */}
        <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
      </div>

      {showText && (
        <div>
          <span className={`text-xl font-medium ${textColor}`}>Recht en Mediation</span>
          <div className={`text-xs font-light ${subtextColor}`}>Juridisch advies & mediation</div>
        </div>
      )}
    </div>
  )
}

export default Logo