kit-ui/components/Footer.tsx

'use client';

import { motion } from 'framer-motion';

export default function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="relative py-12 px-4">
      <div className="max-w-6xl mx-auto border-t border-gray-600 pt-12">
        <motion.div
          className="flex flex-col md:flex-row items-center justify-between gap-6"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          {/* Brand Section */}
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-purple-400">
            <span className="text-base font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-cyan-400">Kit</span>
            <span className="text-base text-gray-600">•</span>
            <span className="text-base text-purple-400">Open Source</span>
          </div>

          {/* Copyright - centered */}
          <div className="text-center">
            <p className="text-base text-gray-500">
              © {currentYear} Kit. Built with Next.js 16 & Tailwind CSS 4.
            </p>
          </div>

          {/* Dev Link */}
          <a
            href="https://dev.pivoine.art/valknar/kit-ui"
            target="_blank"
            rel="noopener noreferrer"
            className="group flex items-center gap-3 px-4 py-2 rounded-full border border-gray-700 hover:border-purple-400 transition-all duration-300"
          >
            <svg className="w-5 h-5 text-gray-400 group-hover:text-purple-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
              <line x1="6" y1="3" x2="6" y2="15" strokeLinecap="round" />
              <circle cx="18" cy="6" r="3" />
              <circle cx="6" cy="18" r="3" />
              <path d="M18 9a9 9 0 01-9 9" strokeLinecap="round" />
            </svg>
            <span className="text-base text-gray-300 group-hover:text-purple-400 transition-colors font-medium">
              View on Dev
            </span>
          </a>
        </motion.div>
      </div>
    </footer>
  );
}