kit-ui/components/Logo.tsx

'use client';

import { motion } from 'framer-motion';

export default function Logo({ className = '', size = 120 }: { className?: string; size?: number }) {
  return (
    <motion.svg
      width={size}
      height={size}
      viewBox="0 0 200 200"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      initial={{ opacity: 0, rotate: -45 }}
      animate={{ opacity: 1, rotate: 0 }}
      transition={{ duration: 0.8, ease: 'easeOut' }}
    >
      {/* Wrench (bottom-left to top-right) */}
      <motion.g
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{ duration: 1.2, ease: 'easeInOut' }}
      >
        {/* Wrench handle */}
        <motion.line
          x1="60"
          y1="140"
          x2="115"
          y2="85"
          stroke="url(#wrenchGradient)"
          strokeWidth="8"
          strokeLinecap="round"
        />
        {/* Wrench head (open end) */}
        <motion.path
          d="M 115 85 L 125 75 M 115 85 L 125 95"
          stroke="url(#wrenchGradient)"
          strokeWidth="8"
          strokeLinecap="round"
        />
      </motion.g>

      {/* Brush (top-left to bottom-right) */}
      <motion.g
        initial={{ pathLength: 0, opacity: 0 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{ duration: 1.2, delay: 0.3, ease: 'easeInOut' }}
      >
        {/* Brush handle */}
        <motion.line
          x1="75"
          y1="60"
          x2="115"
          y2="100"
          stroke="url(#brushHandleGradient)"
          strokeWidth="6"
          strokeLinecap="round"
        />
        {/* Brush ferrule (metal part) */}
        <motion.ellipse
          cx="120"
          cy="105"
          rx="6"
          ry="10"
          fill="url(#ferruleGradient)"
          transform="rotate(45 120 105)"
        />
        {/* Brush bristles */}
        <motion.g
          initial={{ scaleY: 0.5, opacity: 0 }}
          animate={{ scaleY: 1, opacity: 1 }}
          transition={{ duration: 0.6, delay: 0.8, ease: 'easeOut' }}
        >
          <motion.line x1="123" y1="108" x2="135" y2="120" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
          <motion.line x1="126" y1="111" x2="140" y2="125" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
          <motion.line x1="129" y1="114" x2="143" y2="128" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
          <motion.line x1="120" y1="111" x2="130" y2="121" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
          <motion.line x1="117" y1="114" x2="125" y2="122" stroke="url(#bristlesGradient)" strokeWidth="2.5" strokeLinecap="round" />
        </motion.g>
      </motion.g>

      {/* Center circle (intersection) */}
      <motion.circle
        cx="100"
        cy="100"
        r="12"
        fill="url(#centerGradient)"
        initial={{ scale: 0 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.5, delay: 1, type: 'spring', stiffness: 200 }}
      />

      {/* Gradient definitions */}
      <defs>
        <linearGradient id="wrenchGradient" x1="60" y1="140" x2="125" y2="75">
          <stop offset="0%" stopColor="#667eea" />
          <stop offset="100%" stopColor="#a855f7" />
        </linearGradient>
        <linearGradient id="brushHandleGradient" x1="75" y1="60" x2="115" y2="100">
          <stop offset="0%" stopColor="#f59e0b" />
          <stop offset="100%" stopColor="#ef4444" />
        </linearGradient>
        <linearGradient id="ferruleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#94a3b8" />
          <stop offset="100%" stopColor="#64748b" />
        </linearGradient>
        <linearGradient id="bristlesGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#10b981" />
          <stop offset="100%" stopColor="#06b6d4" />
        </linearGradient>
        <linearGradient id="centerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#a855f7" />
          <stop offset="100%" stopColor="#06b6d4" />
        </linearGradient>
      </defs>
    </motion.svg>
  );
}