import { motion } from "motion/react";

export default function AnimatedLogo({ className = "w-8 h-8" }: { className?: string }) {
  return (
    <motion.svg
      className={className}
      viewBox="0 0 100 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
    >
      <defs>
        <linearGradient id="crypto-grad-1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#4f46e5" /> {/* Indigo 600 */}
          <stop offset="100%" stopColor="#0ea5e9" /> {/* Sky 500 */}
        </linearGradient>
        <linearGradient id="crypto-grad-2" x1="100%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stopColor="#2dd4bf" /> {/* Teal 400 */}
          <stop offset="100%" stopColor="#3b82f6" /> {/* Blue 500 */}
        </linearGradient>
        <filter id="neon-glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="4" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
      </defs>

      {/* Background glowing element */}
      <motion.polygon
        points="50,5 90,27.5 90,72.5 50,95 10,72.5 10,27.5"
        fill="url(#crypto-grad-1)"
        fillOpacity="0.1"
        stroke="url(#crypto-grad-2)"
        strokeWidth="2"
        filter="url(#neon-glow)"
        initial={{ scale: 0.8, opacity: 0, rotate: -30 }}
        animate={{ scale: 1, opacity: 1, rotate: 0 }}
        transition={{ duration: 1.2, ease: "easeOut" }}
      />

      {/* Abstract Sharp 'S' inside */}
      <motion.path
        d="M 65 35 L 35 35 L 35 50 L 65 50 L 65 65 L 35 65"
        stroke="url(#crypto-grad-2)"
        strokeWidth="10"
        strokeLinecap="square"
        strokeLinejoin="miter"
        initial={{ pathLength: 0 }}
        animate={{ pathLength: 1 }}
        transition={{ duration: 1.5, ease: "easeInOut", delay: 0.4 }}
      />

      {/* Accent bridging line */}
      <motion.line
        x1="20"
        y1="50"
        x2="80"
        y2="50"
        stroke="url(#crypto-grad-1)"
        strokeWidth="4"
        filter="url(#neon-glow)"
        initial={{ scaleX: 0, opacity: 0 }}
        animate={{ scaleX: 1, opacity: 1 }}
        transition={{ duration: 1, ease: "easeOut", delay: 1 }}
      />
    </motion.svg>
  );
}