import React from 'react';
import { motion } from 'framer-motion';

const Footer: React.FC = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="border-t border-green-500/20 bg-black/40 backdrop-blur-md">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          {/* Brand */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <h3 className="text-2xl font-bold text-green-500 mb-2">&lt;/&gt; Robert Bretz</h3>
            <p className="text-gray-400 text-sm">
              Building clean architecture, fast systems and modern web products.
            </p>
          </motion.div>

          {/* Quick Links */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
          >
            <h4 className="text-white font-semibold mb-4">Schnellzugriff</h4>
            <ul className="space-y-2">
              {[
                { label: 'Über mich', href: '#home' },
                { label: 'Fähigkeiten', href: '#skills' },
                { label: 'Projekte', href: '#projects' },
                { label: 'Kontakt', href: '#contact' },
              ].map((link) => (
                <li key={link.label}>
                  <motion.a
                    href={link.href}
                    whileHover={{ color: '#22c55e' }}
                    className="text-gray-400"
                  >
                    {link.label}
                  </motion.a>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* Services */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
          >
            <h4 className="text-white font-semibold mb-4">Leistungen</h4>
            <ul className="space-y-2">
              {['Frontend-Entwicklung', 'UI/UX-Design', 'Fullstack-Entwicklung'].map((service) => (
                <li key={service}>
                  <span className="text-gray-400">{service}</span>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* Tech Stack */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.3 }}
          >
            <h4 className="text-white font-semibold mb-4">Tech Stack</h4>
            <ul className="space-y-2">
              {['React & Next.js', 'TypeScript', 'Tailwind CSS'].map((tech) => (
                <li key={tech}>
                  <span className="text-gray-400 text-sm">{tech}</span>
                </li>
              ))}
            </ul>
          </motion.div>
        </div>

        {/* Divider */}
        <div className="border-t border-green-500/10 my-8"></div>

        {/* Copyright */}
        <div className="flex flex-col md:flex-row justify-between items-center">
          <p className="text-gray-500 text-sm">
            © {currentYear} Robert Bretz. All rights reserved.
          </p>
          <p className="text-gray-500 text-sm mt-4 md:mt-0">
            Erstellt mit 💚 in React & Tailwind CSS
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
