import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Shield, 
  Users, 
  Camera, 
  Zap, 
  Truck, 
  Dog, 
  UserCheck, 
  MapPin, 
  Phone, 
  Mail, 
  Menu, 
  X,
  Globe,
  MessageSquare,
  Share2,
  CheckCircle,
  Award,
  MessageCircle
} from 'lucide-react';
import ChatBot from './components/ChatBot';

const fadeInUp = {
  hidden: { opacity: 0, y: 40 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
};

const staggerContainer = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.15
    }
  }
};

export default function App() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [currentSpecialImg, setCurrentSpecialImg] = useState(0);
  const specialImages = ["/special/IMG-20260510-WA0009.jpg", "/special/IMG-20260510-WA0012.jpg"];

  const [currentEmpImg, setCurrentEmpImg] = useState(0);
  const employeePics = [
    "/employee_pics/IMG-20260510-WA0001.jpg", 
    "/employee_pics/IMG-20260510-WA0003(1).jpg", 
    "/employee_pics/IMG-20260510-WA0003.jpg", 
    "/employee_pics/IMG-20260510-WA0004.jpg"
  ];

  useEffect(() => {
    const specialInterval = setInterval(() => {
      setCurrentSpecialImg((prev) => (prev === 0 ? 1 : 0));
    }, 2500);
    return () => clearInterval(specialInterval);
  }, []);

  useEffect(() => {
    const empInterval = setInterval(() => {
      setCurrentEmpImg((prev) => (prev + 1) % employeePics.length);
    }, 4000);
    return () => clearInterval(empInterval);
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: 'Who We Are', href: '#about' },
    { name: 'What We Do', href: '#services' },
    { name: 'Certifications', href: '#certifications' },
    { name: 'Contact Us', href: '#contact' },
  ];

  return (
    <div className="min-h-screen bg-gray-50 text-charcoal font-sans selection:bg-navy selection:text-white">
      {/* Navigation */}
      <nav className={`fixed w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-navy/95 backdrop-blur-md shadow-lg py-3' : 'bg-transparent py-5'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center">
            <div className="flex-shrink-0 flex items-center gap-2">
              <img src="/logo.jpg" alt="Palmer Security Service" className="h-16 md:h-24 w-auto object-contain bg-white rounded-md p-1" />
            </div>
            
            {/* Desktop Nav */}
            <div className="hidden md:flex space-x-8">
              {navLinks.map((link) => (
                <a key={link.name} href={link.href} className="text-gray-100 hover:text-gold transition-colors font-medium text-sm">
                  {link.name}
                </a>
              ))}
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden flex items-center">
              <button 
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="text-white hover:text-gold focus:outline-none"
              >
                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Nav */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-navy/95 backdrop-blur-md absolute w-full">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              {navLinks.map((link) => (
                <a 
                  key={link.name} 
                  href={link.href} 
                  onClick={() => setMobileMenuOpen(false)}
                  className="block px-3 py-2 text-base font-medium text-white hover:text-gold hover:bg-white/10 rounded-md"
                >
                  {link.name}
                </a>
              ))}
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="relative h-screen flex items-center justify-center">
        <div className="absolute inset-0">
          <img 
            src="/guard.png" 
            alt="Security Guard" 
            className="w-full h-full object-cover object-top"
          />
          <div className="absolute inset-0 bg-navy/60 mix-blend-multiply"></div>
          <div className="absolute inset-0 bg-gradient-to-t from-navy to-transparent"></div>
        </div>
        
        <div className="relative z-10 text-center px-4 max-w-5xl mx-auto mt-16">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1.2, ease: "easeOut" }}
          >
            <span className="inline-block py-1 px-3 rounded-full bg-gold/20 text-gold border border-gold/30 font-semibold text-sm mb-6 tracking-wider uppercase">
              Palmer Security Service
            </span>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
              Ghana’s Most Trusted <span className="text-gold">Shield</span> Since 2015.
            </h1>
            <p className="text-xl md:text-2xl text-gray-200 mb-10 max-w-3xl mx-auto font-light">
              Professional security solutions across all 16 regions. Protecting what matters most with over 5,000 trained professionals.
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <a href="#contact" className="px-8 py-4 rounded-md bg-gold hover:bg-yellow-500 text-navy font-bold text-lg transition-all shadow-[0_0_20px_rgba(212,175,55,0.4)] hover:shadow-[0_0_30px_rgba(212,175,55,0.6)]">
                Get a Security Audit
              </a>
              <a href="#services" className="px-8 py-4 rounded-md bg-white/10 hover:bg-white/20 text-white font-bold text-lg border border-white/30 backdrop-blur-sm transition-all">
                Explore Services
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Who We Are */}
      <section id="about" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div 
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-100px" }}
            variants={fadeInUp}
            className="text-center mb-16"
          >
            <h2 className="text-4xl font-bold text-navy mb-4">Who We Are</h2>
            <div className="w-20 h-1 bg-gold mx-auto mb-8"></div>
            <p className="text-lg text-gray-600 max-w-4xl mx-auto leading-relaxed">
              Palmer Security Service (PSS), established in 2015, is a trusted provider of professional security solutions across Ghana. With a strong presence in all sixteen regions and headquarters in Spintex, Accra, we are committed to delivering dependable and high-quality services that safeguard businesses, institutions, and individuals.
            </p>
          </motion.div>

          {/* Stats Bar */}
          <motion.div 
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true }}
            variants={staggerContainer}
            className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-20"
          >
            {[
              { label: 'Experience', value: '10+ Years' },
              { label: 'Coverage', value: '16 Regions' },
              { label: 'Professionals', value: '5,000+ Guards' },
              { label: 'Ministry Licensed', value: 'L.I. 1571' }
            ].map((stat, i) => (
              <motion.div key={i} variants={fadeInUp} className="bg-navy rounded-xl p-6 text-center shadow-xl border border-white/10 relative overflow-hidden group">
                <div className="absolute inset-0 bg-gold/5 group-hover:bg-gold/10 transition-colors"></div>
                <h4 className="text-gold font-bold text-3xl mb-2">{stat.value}</h4>
                <p className="text-gray-300 font-medium uppercase tracking-wide text-xs">{stat.label}</p>
              </motion.div>
            ))}
          </motion.div>

          {/* Mission/Vision/Values */}
          <div className="flex flex-wrap justify-center gap-8 mb-16">
            {[
              { id: 'mission', title: 'Mission', icon: <Shield className="h-8 w-8" />, content: 'To deliver reliable and professional security services that protect people, property, and businesses.' },
              { id: 'vision', title: 'Vision', icon: <CheckCircle className="h-8 w-8" />, content: 'To be Ghana’s most trusted security company, known for effectiveness, quality, and professionalism.' },
              { id: 'values', title: 'Core Values', icon: <Award className="h-8 w-8" />, content: 'Integrity, Professionalism, Compliance, Teamwork, and Innovation.' }
            ].map((item) => (
              <div key={item.id} className="relative group">
                <button className="flex items-center gap-4 px-12 py-6 rounded-full bg-gray-50 hover:bg-[#D31111] hover:text-white text-navy font-bold text-xl transition-all duration-300 border border-gray-200">
                  {item.icon}
                  {item.title}
                </button>
                {/* Popup Tooltip */}
                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-72 bg-navy text-white text-center p-6 rounded-xl shadow-2xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-20">
                  <div className="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-navy rotate-45"></div>
                  <h4 className="text-gold font-bold mb-2 text-lg">{item.title}</h4>
                  <p className="text-base font-light leading-relaxed">{item.content}</p>
                </div>
              </div>
            ))}
          </div>

          {/* Employee Pics Flipper */}
          <div className="w-full flex justify-center py-12">
            <div className="relative w-[300px] h-[350px] md:w-[400px] md:h-[450px] perspective-[1000px]">
              <AnimatePresence mode="wait">
                <motion.img
                  key={currentEmpImg}
                  src={employeePics[currentEmpImg]}
                  alt="Palmer Security Team"
                  initial={{ rotateY: 90, opacity: 0 }}
                  animate={{ rotateY: 0, opacity: 1 }}
                  exit={{ rotateY: -90, opacity: 0 }}
                  transition={{ duration: 0.6, ease: "easeInOut" }}
                  className="absolute inset-0 w-full h-full object-cover rounded-2xl shadow-2xl border-4 border-gray-100"
                />
              </AnimatePresence>
            </div>
          </div>
        </div>
      </section>

      {/* What We Do */}
      <section id="services" className="py-24 bg-gray-50 border-t border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-navy mb-4">What We Do</h2>
            <div className="w-20 h-1 bg-gold mx-auto mb-8"></div>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Comprehensive security solutions tailored to meet the unique needs of both private and public sector clients.
            </p>
          </div>

          <motion.div 
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-50px" }}
            variants={staggerContainer}
            className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {[
              {
                img: '/security11.webp',
                icon: <Users className="h-6 w-6" />,
                title: 'Man Guarding & Events',
                desc: 'Crowd/traffic control and strict access management for events, properties, and corporate environments.'
              },
              {
                img: '/security9.jpg',
                icon: <Truck className="h-6 w-6" />,
                title: 'Bullion Vans (CIT)',
                desc: 'Intelligence-led armored transport for cash and minerals, connected to our 24-hour central control room.',
                highlight: true
              },
              {
                img: '/security8.jpg',
                icon: <Camera className="h-6 w-6" />,
                title: 'CCTV Installation',
                desc: 'High-definition surveillance, remote access, and real-time monitoring tailored for your facility.'
              },
              {
                img: '/security7.jpg',
                icon: <Zap className="h-6 w-6" />,
                title: 'Electric Fencing',
                desc: 'Physical deterrents combined with integrated electronic alarm systems to secure perimeters immediately.'
              },
              {
                img: '/security4.webp',
                icon: <Dog className="h-6 w-6" />,
                title: 'Security Dogs',
                desc: 'Highly trained Dogo Argentino, Pit Bull, and Rottweiler units deployed with skilled professional handlers.'
              },
              {
                img: '/security1.jpg',
                icon: <UserCheck className="h-6 w-6" />,
                title: 'Front Office Security',
                desc: 'Merging exceptional hospitality with high-level protection to create a secure, welcoming environment.'
              }
            ].map((service, index) => (
              <motion.div 
                key={index}
                variants={fadeInUp}
                className={`rounded-2xl transition-all duration-300 hover:-translate-y-2 flex flex-col overflow-hidden ${
                  service.highlight 
                    ? 'bg-navy text-white shadow-xl shadow-navy/20 border border-navy-light relative' 
                    : 'bg-white text-charcoal shadow-lg hover:shadow-xl border border-gray-100'
                }`}
              >
                {service.highlight && <div className="absolute top-0 right-0 w-32 h-32 bg-gold/10 rounded-bl-full -mr-4 -mt-4 z-0 pointer-events-none"></div>}
                
                <div className="h-48 w-full relative shrink-0">
                  <img src={service.img} alt={service.title} className="w-full h-full object-cover" />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80 pointer-events-none"></div>
                </div>

                <div className="p-8 relative z-10 flex-grow">
                  <h3 className={`text-xl font-bold mb-3 ${service.highlight ? 'text-white' : 'text-navy'}`}>
                    {service.title}
                  </h3>
                  <p className={`${service.highlight ? 'text-gray-300' : 'text-gray-600'} leading-relaxed`}>
                    {service.desc}
                  </p>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Certifications (Trust Banner) */}
      <section id="certifications" className="py-16 bg-navy relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=2000&q=80')] opacity-5 bg-cover bg-center"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="flex flex-col md:flex-row items-center justify-between gap-8">
            <div className="md:w-1/2">
              <h2 className="text-3xl font-bold text-white mb-4">Certified & Licensed</h2>
              <p className="text-gray-300">
                We operate under the highest legal and regulatory standards in Ghana, providing our corporate partners with absolute peace of mind.
              </p>
            </div>
            <div className="md:w-1/2 flex flex-col sm:flex-row gap-6 justify-center md:justify-end">
              <div className="bg-white/10 backdrop-blur-sm border border-white/20 p-6 rounded-xl flex items-center gap-4">
                <Shield className="text-gold h-10 w-10 flex-shrink-0" />
                <div>
                  <p className="text-xs text-gray-300 uppercase tracking-wider">Ministry of Interior</p>
                  <p className="text-white font-bold text-lg">L.I. 1571 Licensed</p>
                </div>
              </div>
              <div className="bg-white/10 backdrop-blur-sm border border-white/20 p-6 rounded-xl flex items-center gap-4">
                <CheckCircle className="text-gold h-10 w-10 flex-shrink-0" />
                <div>
                  <p className="text-xs text-gray-300 uppercase tracking-wider">Public Procurement Authority</p>
                  <p className="text-white font-bold text-lg">Act 663 Certified</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Our People */}
      <section id="our-people" className="py-24 bg-[#D31111]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-bold text-white mb-4">Our People</h2>
          <div className="w-20 h-1 bg-white mx-auto mb-12"></div>
          
          <div className="relative w-full max-w-4xl mx-auto h-[400px] md:h-[600px] rounded-3xl overflow-hidden shadow-2xl border border-white/20">
            {specialImages.map((src, index) => (
              <img 
                key={index}
                src={src} 
                alt="Palmer Security Personnel" 
                className={`absolute inset-0 w-full h-full object-cover transition-all duration-[800ms] ease-in-out ${
                  index === currentSpecialImg ? 'opacity-100 scale-100' : 'opacity-0 scale-105'
                }`}
              />
            ))}
          </div>
        </div>
      </section>


      {/* Contact & Footer */}
      <section id="contact" className="bg-navy pt-24 pb-12 relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-gold to-transparent opacity-30"></div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 mb-16">
            
            {/* Contact Info */}
            <div>
              <h2 className="text-4xl font-bold text-white mb-6">Ready to secure what matters?</h2>
              <p className="text-gray-300 mb-10 text-lg">
                Contact our team of experts today for a comprehensive security audit and consultation.
              </p>
              
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0 text-gold">
                    <MapPin className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="text-white font-bold mb-1">Headquarters</h4>
                    <p className="text-gray-300">Spintex, Accra-Ghana</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0 text-gold">
                    <Phone className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="text-white font-bold mb-1">Phone</h4>
                    <p className="text-gray-300">0244012091<br/>0544770571<br/>0596311036</p>
                  </div>
                </div>
                
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center flex-shrink-0 text-gold">
                    <Mail className="h-6 w-6" />
                  </div>
                  <div>
                    <h4 className="text-white font-bold mb-1">Email</h4>
                    <p className="text-gray-300">info@palmersecuritygh.com<br/>palmer@palmersecuritygh.com</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Contact Form */}
            <div className="bg-white rounded-2xl p-8 shadow-2xl relative">
              <div className="absolute top-0 right-0 w-24 h-24 bg-safety-orange/10 rounded-bl-full -mr-4 -mt-4 z-0"></div>
              <h3 className="text-2xl font-bold text-navy mb-6 relative z-10">Request a Consultation</h3>
              <form className="space-y-4 relative z-10" onSubmit={(e) => e.preventDefault()}>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                  <input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-navy focus:border-navy outline-none transition-all" placeholder="John Doe" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                  <input type="email" className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-navy focus:border-navy outline-none transition-all" placeholder="john@company.com" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Service Interest</label>
                  <select className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-navy focus:border-navy outline-none transition-all bg-white">
                    <option>Man Guarding & Events</option>
                    <option>Bullion Vans (CIT)</option>
                    <option>CCTV & Electronic Security</option>
                    <option>Security Dogs</option>
                    <option>Other Services</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
                  <textarea rows="4" className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-navy focus:border-navy outline-none transition-all" placeholder="How can we help you?"></textarea>
                </div>
                <button type="submit" className="w-full bg-safety-orange hover:bg-red-800 text-white font-bold py-4 rounded-lg transition-colors shadow-lg shadow-safety-orange/30">
                  Send Message
                </button>
              </form>
            </div>
            
          </div>

          <div className="border-t border-white/10 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-2">
              <img src="/logo.jpg" alt="Palmer Security Service" className="h-8 w-auto object-contain bg-white rounded p-1" />
            </div>
            <p className="text-gray-400 text-sm">
              &copy; {new Date().getFullYear()} Palmer Security Service. All rights reserved.
            </p>
            <div className="flex gap-4">
              <a href="#" className="text-gray-400 hover:text-white transition-colors"><Globe className="h-5 w-5" /></a>
              <a href="#" className="text-gray-400 hover:text-white transition-colors"><MessageSquare className="h-5 w-5" /></a>
              <a href="#" className="text-gray-400 hover:text-white transition-colors"><Share2 className="h-5 w-5" /></a>
            </div>
          </div>
        </div>
      </section>

      <ChatBot />
    </div>
  );
}
