import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ChevronDown, MessageCircle, Github, Linkedin, Mail } from 'lucide-react';

const MobileMenu = ({ isOpen, onClose }) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-50 lg:hidden"
        >
          <div className="fixed inset-0 bg-black/20" onClick={onClose} />
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: 'tween', duration: 0.3 }}
            className="fixed right-0 top-0 h-full w-80 mobile-menu shadow-xl"
          >
            <div className="flex items-center justify-between p-6 border-b border-gray-200">
              <span className="text-xl font-bold text-gray-900">Menu</span>
              <button onClick={onClose} className="p-2">
                <X className="w-6 h-6" />
              </button>
            </div>

            <div className="p-6">
              <div className="grid grid-cols-2 gap-8">
                {/* Menu */}
                <div>
                  <h3 className="font-semibold text-gray-900 mb-4">Menu</h3>
                  <ul className="space-y-3 text-gray-600">
                    <li><a href="#" className="hover:text-gray-900 transition-colors">Case Studies</a></li>
                    <li><a href="#" className="hover:text-gray-900 transition-colors">Blog</a></li>
                    <li><a href="#" className="hover:text-gray-900 transition-colors">Contacts</a></li>
                    <li><a href="#" className="hover:text-gray-900 transition-colors">About Us</a></li>
                    <li><a href="#" className="hover:text-gray-900 transition-colors">FAQ</a></li>
                  </ul>
                </div>

                {/* Services */}
                <div>
                  <h3 className="font-semibold text-gray-900 mb-4">Services</h3>
                  <ul className="space-y-3 text-gray-600">
                    <li><a href="#" className="hover:text-gray-900 transition-colors">Web Development</a></li>
                    <li><a href="#" className="hover:text-gray-900 transition-colors">Mobile Development</a></li>
                    <li><a href="#" className="hover:text-gray-900 transition-colors">Support and Maintenance</a></li>
                  </ul>
                </div>
              </div>

              {/* Contact Info */}
              <div className="mt-8 pt-8 border-t border-gray-200">
                <div className="flex items-center space-x-2 text-sm text-gray-600 mb-4">
                  <MessageCircle className="w-4 h-4" />
                  <span>Feel free to drop us a note:</span>
                </div>
                <a href="mailto:contact@sargas.io" className="text-gray-900 font-medium">
                  contact@sargas.io
                </a>
              </div>

              {/* Social Links */}
              <div className="flex items-center space-x-4 mt-6">
                <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
                  <Github className="w-5 h-5" />
                </a>
                <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
                  <Linkedin className="w-5 h-5" />
                </a>
                <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
                  <MessageCircle className="w-5 h-5" />
                </a>
                <a href="#" className="text-gray-400 hover:text-gray-600 transition-colors">
                  <Mail className="w-5 h-5" />
                </a>
              </div>
            </div>

            {/* Footer */}
            <div className="absolute bottom-0 left-0 right-0 p-6 border-t border-gray-200">
              <div className="flex items-center justify-between text-sm text-gray-500">
                <a href="#" className="hover:text-gray-700 transition-colors">Privacy Policy</a>
                <a href="#" className="hover:text-gray-700 transition-colors">Terms of Use</a>
              </div>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default MobileMenu;