import React, { useState, useEffect } from 'react';

const App = () => {
  const [currentTestimonial, setCurrentTestimonial] = useState(0);
  const [activeFilter, setActiveFilter] = useState('all');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrollY, setScrollY] = useState(0);
  const [formStatus, setFormStatus] = useState('idle'); // 'idle', 'submitting', 'success', 'error'

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTestimonial((prev) => (prev + 1) % testimonials.length);
    }, 7000);
    return () => clearInterval(interval);
  }, []);

  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      window.scrollTo({
        top: element.offsetTop - 100,
        behavior: 'smooth'
      });
    }
    setIsMenuOpen(false);
  };

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    setFormStatus('submitting');
    
    // In a real application, you would send this data to your backend
    // which would then email it to your Gmail account.
    // Since we can't make real API calls or use backend services here,
    // we'll simulate a successful submission after a short delay.
    
    setTimeout(() => {
      setFormStatus('success');
      
      // Reset form after successful submission
      e.target.reset();
      
      // Reset status message after 5 seconds
      setTimeout(() => {
        setFormStatus('idle');
      }, 5000);
    }, 1500);
  };

  const testimonials = [
    {
      name: "Sajid FC",
      company: "Head Purchaser of FC College",
      text: "Global Network Solution transformed our security infrastructure. Their professional installation and attention to detail exceeded our expectations. The system has been flawless for over two years now.",
      rating: 5,
      avatar: "https://placehold.co/400x400/000080/FFFFFF?text=AKS"
    },
    {
      name: "Butt PFSA",
      company: "Deputy Director, Metro Retail Stores",
      text: "The solar-powered CCTV system they installed has saved us thousands in energy costs while providing 24/7 security coverage. Their team was professional, efficient, and delivered exactly what we needed.",
      rating: 5,
      avatar: "https://placehold.co/400x400/007bff/FFFFFF?text=MA"
    },
    {
      name: "Michael Chen",
      company: "CFO, Financial District Offices",
      text: "Their fingerprint access system has revolutionized our building security. We've seen a 40% reduction in unauthorized access attempts since implementation. Excellent service and support.",
      rating: 5,
      avatar: "https://placehold.co/400x400/28a745/FFFFFF?text=AA"
    }
  ];

  const services = [
    {
      icon: "📹",
      title: "Advanced Camera Installation",
      description: "Professional installation of 4K resolution security cameras with AI-powered analytics, facial recognition, and remote monitoring capabilities.",
      image: "https://placehold.co/600x400/000080/FFFFFF?text=Corporate+Security+System"
    },
    {
      icon: "🔌",
      title: "Professional CCTV Cabling",
      description: "Expert installation of shielded CAT6A and fiber optic cabling for interference-free transmission and future-proof infrastructure.",
      image: "https://placehold.co/600x400/007bff/FFFFFF?text=Data+Center+Cabling"
    },
    {
      icon: "🖐️",
      title: "Biometric Access Systems",
      description: "Cutting-edge fingerprint and facial recognition systems with multi-factor authentication for maximum security in sensitive areas.",
      image: "https://placehold.co/600x400/28a745/FFFFFF?text=Biometric+Access"
    },
    {
      icon: "☀️",
      title: "Solar-Powered Security",
      description: "Eco-friendly solar solutions with battery backup to ensure 24/7 operation of security systems, even during power outages.",
      image: "https://placehold.co/600x400/000080/FFFFFF?text=Solar+Camera+System"
    },
    {
      icon: "🌐",
      title: "Enterprise Networking",
      description: "Comprehensive network infrastructure design and implementation with enterprise-grade equipment for optimal performance and security.",
      image: "https://placehold.co/600x400/007bff/FFFFFF?text=Corporate+Network"
    },
    {
      icon: "🔋",
      title: "APC UPS Installation",
      description: "Professional installation of APC Uninterruptible Power Supply systems to protect critical equipment from power fluctuations and outages.",
      image: "https://placehold.co/600x400/28a745/FFFFFF?text=APC+Power+Protection"
    },
    {
      icon: "🛡️",
      title: "Integrated Security Solutions",
      description: "Complete security ecosystem integration including alarms, access control, video surveillance, and centralized management.",
      image: "https://placehold.co/600x400/000080/FFFFFF?text=Integrated+Security"
    },
    {
      icon: "⚙️",
      title: "Service & Maintenance",
      description: "Comprehensive service packages including preventive maintenance, system upgrades, and 24/7 emergency support for all security and networking systems.",
      image: "https://placehold.co/600x400/007bff/FFFFFF?text=Preventive+Maintenance"
    }
  ];

  const galleryItems = [
    { category: "camera", title: "Corporate Security System", description: "Complete 32-camera system with AI analytics for a downtown office building", image: "https://placehold.co/600x400/000080/FFFFFF?text=Corporate+Security+System" },
    { category: "camera", title: "Luxury Home Security", description: "16-camera 4K system with facial recognition for high-end residential property", image: "https://placehold.co/600x400/007bff/FFFFFF?text=Residential+Security" },
    { category: "camera", title: "Industrial Night Vision", description: "Thermal imaging and infrared cameras for 24/7 warehouse monitoring", image: "https://placehold.co/600x400/28a745/FFFFFF?text=Night+Vision+System" },
    { category: "cabling", title: "Data Center Cabling", description: "Structured CAT6A cabling with fiber backbone for enterprise data center", image: "https://placehold.co/600x400/000080/FFFFFF?text=Data+Center+Cabling" },
    { category: "cabling", title: "Underground Infrastructure", description: "Weatherproof conduit system with fiber optic cables for campus security", image: "https://placehold.co/600x400/007bff/FFFFFF?text=Underground+Infrastructure" },
    { category: "cabling", title: "Server Room Setup", description: "Organized cable management with patch panels for security operations center", image: "https://placehold.co/600x400/28a745/FFFFFF?text=Server+Room+Setup" },
    { category: "fingerprint", title: "Biometric Access", description: "Fingerprint and facial recognition system for restricted laboratory access", image: "https://placehold.co/600x400/000080/FFFFFF?text=Biometric+Access" },
    { category: "fingerprint", title: "Time Attendance", description: "Integrated fingerprint time clock with HR software for 500+ employees", image: "https://placehold.co/600x400/007bff/FFFFFF?text=Time+Attendance" },
    { category: "fingerprint", title: "Multi-Factor Security", description: "Combined fingerprint, card, and PIN system for data center access", image: "https://placehold.co/600x400/28a745/FFFFFF?text=Multi-Factor+Security" },
    { category: "solar", title: "Solar Camera System", description: "Off-grid solar powered camera system for remote property monitoring", image: "https://placehold.co/600x400/000080/FFFFFF?text=Solar+Camera+System" },
    { category: "solar", title: "Battery Backup", description: "48-hour battery backup system with solar charging for critical infrastructure", image: "https://placehold.co/600x400/007bff/FFFFFF?text=Battery+Backup" },
    { category: "solar", title: "Remote Location", description: "Complete off-grid security solution with satellite uplink for rural facility", image: "https://placehold.co/600x400/28a745/FFFFFF?text=Remote+Location" },
    { category: "networking", title: "Corporate Network", description: "Enterprise-grade network with redundant switches and firewall security", image: "https://placehold.co/600x400/000080/FFFFFF?text=Corporate+Network" },
    { category: "networking", title: "Wireless Coverage", description: "High-density Wi-Fi 6 deployment with seamless roaming for large campus", image: "https://placehold.co/600x400/007bff/FFFFFF?text=Wireless+Coverage" },
    { category: "networking", title: "Network Security", description: "Advanced firewall configuration with intrusion detection for financial institution", image: "https://placehold.co/600x400/28a745/FFFFFF?text=Network+Security" },
    { category: "ups", title: "APC UPS Protection", description: "Professional APC UPS installation for server room power protection", image: "https://placehold.co/600x400/000080/FFFFFF?text=APC+Power+Protection" },
    { category: "ups", title: "Data Center Power", description: "Redundant APC UPS system for mission-critical data center operations", image: "https://placehold.co/600x400/007bff/FFFFFF?text=Data+Center+Power" },
    { category: "ups", title: "Commercial Facility", description: "APC UPS system for commercial building with critical equipment", image: "https://placehold.co/600x400/28a745/FFFFFF?text=Commercial+Facility" },
    { category: "maintenance", title: "Preventive Maintenance", description: "Regular maintenance check for security and networking systems", image: "https://placehold.co/600x400/000080/FFFFFF?text=Preventive+Maintenance" },
    { category: "maintenance", title: "System Upgrades", description: "Software and hardware upgrades for existing security systems", image: "https://placehold.co/600x400/007bff/FFFFFF?text=System+Upgrades" },
    { category: "maintenance", title: "Emergency Support", description: "24/7 emergency response for security system issues", image: "https://placehold.co/600x400/28a745/FFFFFF?text=Emergency+Support" }
  ];

  const executives = [
    {
      name: "Ali Khuram Shahzad",
      title: "CEO & Founder",
      bio: "18+ years in security systems. Former security director for Fortune 500 company. Certified Security Professional (CSP).",
      image: "https://placehold.co/400x400/000080/FFFFFF?text=AKS",
      social: ["linkedin", "twitter", "envelope"]
    },
    {
      name: "Muhammad Adil",
      title: "CTO",
      bio: "PhD in Network Security. 12+ years developing cutting-edge security technologies. Published researcher in cybersecurity.",
      image: "https://placehold.co/400x400/007bff/FFFFFF?text=MA",
      social: ["linkedin", "twitter", "envelope"]
    }
  ];

  const teamMembers = [
    {
      name: "Asad Arshad",
      title: "Lead Engineer",
      bio: "Certified CCTV specialist with 10+ years experience in complex installations.",
      image: "https://placehold.co/300x300/007bff/FFFFFF?text=AA"
    },
    {
      name: "Muhammad ALi",
      title: "Project Manager",
      bio: "PMP certified with expertise in managing large-scale security projects.",
      image: "https://placehold.co/300x300/28a745/FFFFFF?text=MA"
    },
    {
      name: "Muhammad Asad",
      title: "Senior Technician",
      bio: "Specialist in biometric systems and access control with 8+ years experience.",
      image: "https://placehold.co/300x300/000080/FFFFFF?text=MA"
    },
    {
      name: "Muhammad Hamza",
      title: "Helper",
      bio: "Dedicated to ensuring client satisfaction and seamless project execution.",
      image: "https://placehold.co/300x300/007bff/FFFFFF?text=MH"
    }
  ];

  const partners = [
    "DELL", "HP", "APC", "CISCO", "HUAWEI", "Hikvision", "SONY", "HONEYWELL", "BOSCH", "AXIS"
  ];

  const stats = [
    { number: "100+", label: "Projects Completed" },
    { number: "99%", label: "Client Satisfaction" },
    { number: "18+", label: "Years Experience" },
    { number: "10+", label: "Certified Experts" }
  ];

  const filteredGallery = activeFilter === 'all' 
    ? galleryItems 
    : galleryItems.filter(item => item.category === activeFilter);

  return (
    <div className="font-sans">
      {/* Navigation */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-300 ${
        scrollY > 50 ? 'bg-white/95 backdrop-blur-md shadow-lg' : 'bg-white/90'
      }`}>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16 sm:h-20">
            <div className="flex-shrink-0">
              <h1 className="text-2xl sm:text-3xl font-bold text-blue-900 tracking-tight">
                Global Network Solution
              </h1>
            </div>
            {/* Desktop Navigation */}
            <div className="hidden md:block">
              <div className="ml-10 flex items-center space-x-1">
                {['Home', 'Services', 'Gallery', 'Team', 'Testimonials', 'Contact'].map((item) => (
                  <button
                    key={item}
                    onClick={() => scrollToSection(item.toLowerCase())}
                    className="px-3 py-2 text-gray-700 hover:text-blue-900 font-medium transition-colors duration-200 relative group"
                  >
                    {item}
                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-900 transition-all duration-200 group-hover:w-full"></span>
                  </button>
                ))}
                <button
                  onClick={() => scrollToSection('contact')}
                  className="ml-4 px-6 py-2 bg-blue-900 text-white font-semibold rounded-lg hover:bg-blue-800 transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg"
                >
                  Get Free Consultation
                </button>
              </div>
            </div>
            {/* Mobile menu button */}
            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-700 hover:text-blue-900 focus:outline-none"
              >
                <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  {isMenuOpen ? (
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  ) : (
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                  )}
                </svg>
              </button>
            </div>
          </div>
        </div>
        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t border-gray-200">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              {['Home', 'Services', 'Gallery', 'Team', 'Testimonials', 'Contact'].map((item) => (
                <button
                  key={item}
                  onClick={() => scrollToSection(item.toLowerCase())}
                  className="block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-900 hover:bg-gray-50 rounded-md w-full text-left"
                >
                  {item}
                </button>
              ))}
              <button
                onClick={() => scrollToSection('contact')}
                className="mt-2 w-full px-4 py-2 bg-blue-900 text-white font-semibold rounded-lg hover:bg-blue-800 transition-all duration-200"
              >
                Get Free Consultation
              </button>
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section id="home" className="pt-20 sm:pt-24 pb-16 sm:pb-20 bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1)_0%,transparent_50%)]"></div>
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="max-w-3xl">
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 leading-tight">
              Professional Security & Networking Solutions
            </h1>
            <p className="text-xl sm:text-2xl mb-8 text-blue-100 leading-relaxed">
              We deliver cutting-edge security systems and networking infrastructure for businesses and homes, ensuring maximum protection and seamless connectivity.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <button
                onClick={() => scrollToSection('services')}
                className="px-8 py-4 bg-white text-blue-900 font-bold rounded-xl hover:bg-blue-50 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"
              >
                Explore Our Services
              </button>
              <button
                onClick={() => scrollToSection('contact')}
                className="px-8 py-4 bg-transparent border-2 border-white text-white font-bold rounded-xl hover:bg-white hover:text-blue-900 transition-all duration-300 transform hover:scale-105"
              >
                Get Free Consultation
              </button>
            </div>
          </div>
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white/10 to-transparent"></div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 sm:py-20 bg-gray-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Our Premium Services</h2>
            <p className="text-lg text-gray-600">
              We provide comprehensive, state-of-the-art security and networking solutions tailored to meet your specific requirements and exceed industry standards.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service, index) => (
              <div
                key={index}
                className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group"
              >
                <div className="w-16 h-16 bg-blue-100 text-blue-900 rounded-xl flex items-center justify-center text-2xl font-bold mb-4 group-hover:bg-blue-900 group-hover:text-white transition-colors duration-300">
                  {service.icon}
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-3">{service.title}</h3>
                <p className="text-gray-600 mb-4">{service.description}</p>
                <img
                  src={service.image}
                  alt={service.title}
                  className="w-full h-40 object-cover rounded-xl mb-4 transition-transform duration-300 group-hover:scale-105"
                />
                <button className="w-full py-2 text-blue-900 font-semibold border-2 border-blue-900 rounded-lg hover:bg-blue-900 hover:text-white transition-all duration-300">
                  Learn More
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Gallery Section */}
      <section id="gallery" className="py-16 sm:py-20 bg-white">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Our Project Portfolio</h2>
            <p className="text-lg text-gray-600">
              Browse through our completed projects showcasing our expertise and commitment to excellence in security and networking installations.
            </p>
          </div>
          {/* Filter Buttons */}
          <div className="flex flex-wrap justify-center gap-3 mb-12">
            {['all', 'camera', 'cabling', 'fingerprint', 'solar', 'networking', 'ups', 'maintenance'].map((filter) => (
              <button
                key={filter}
                onClick={() => setActiveFilter(filter)}
                className={`px-6 py-3 rounded-full font-medium transition-all duration-300 ${
                  activeFilter === filter
                    ? 'bg-blue-900 text-white shadow-lg'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                {filter.charAt(0).toUpperCase() + filter.slice(1)}
              </button>
            ))}
          </div>
          {/* Gallery Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredGallery.map((item, index) => (
              <div
                key={index}
                className="group rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
              >
                <div className="relative overflow-hidden">
                  <img
                    src={item.image}
                    alt={item.title}
                    className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
                    <h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
                    <p className="text-blue-100">{item.description}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team Section */}
      <section id="team" className="py-16 sm:py-20 bg-gray-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Meet Our Leadership Team</h2>
            <p className="text-lg text-gray-600">
              Our team of certified professionals brings decades of combined experience to deliver exceptional security and networking solutions.
            </p>
          </div>
          {/* Executive Leadership */}
          <div className="mb-16">
            <h3 className="text-2xl font-bold text-center text-gray-900 mb-10">Executive Leadership</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {executives.map((executive, index) => (
                <div
                  key={index}
                  className="bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 relative overflow-hidden"
                >
                  <div className="absolute top-0 left-0 w-full h-1 bg-blue-900 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                  <div className="text-center">
                    <div className="w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden shadow-xl border-4 border-white">
                      <img
                        src={executive.image}
                        alt={executive.name}
                        className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                      />
                    </div>
                    <h3 className="text-2xl font-bold text-gray-900 mb-2">{executive.name}</h3>
                    <h4 className="text-blue-900 font-semibold text-lg mb-4">{executive.title}</h4>
                    <p className="text-gray-600 mb-6">{executive.bio}</p>
                    <div className="flex justify-center space-x-4">
                      {executive.social.map((social, i) => (
                        <a
                          key={i}
                          href="#"
                          className="w-12 h-12 bg-blue-900 text-white rounded-full flex items-center justify-center hover:bg-blue-800 transition-colors duration-300 transform hover:scale-110"
                        >
                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            {social === 'linkedin' && <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />}
                            {social === 'twitter' && <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />}
                            {social === 'envelope' && <path d="M.05 3.555A2 2 0 012 1.565l11.79 9.328a2 2 0 002.42 0L28 1.565a2 2 0 012 1.99v17.89a2 2 0 01-2 1.99H2a2 2 0 01-2-1.99V3.555z" />}
                          </svg>
                        </a>
                      ))}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          {/* Expert Team */}
          <div>
            <h3 className="text-2xl font-bold text-center text-gray-900 mb-10">Our Expert Team</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {teamMembers.map((member, index) => (
                <div
                  key={index}
                  className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 text-center"
                >
                  <div className="w-32 h-32 mx-auto mb-4 rounded-full overflow-hidden shadow-lg border-4 border-white">
                    <img
                      src={member.image}
                      alt={member.name}
                      className="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                    />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{member.name}</h3>
                  <h4 className="text-blue-900 font-semibold mb-3">{member.title}</h4>
                  <p className="text-gray-600 text-sm">{member.bio}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 sm:py-20 bg-white">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">About Global Network Solution</h2>
              <p className="text-xl text-gray-700 mb-6">
                Founded in 2008, Global Network Solution has established itself as a premier provider of professional security and networking solutions for businesses and homeowners.
              </p>
              <p className="text-lg text-gray-600 mb-8">
                Our team of certified technicians and engineers is dedicated to delivering high-quality, customized solutions that meet the unique needs of each client. We combine cutting-edge technology with industry best practices to ensure maximum protection and reliability.
              </p>
              {/* Stats */}
              <div className="grid grid-cols-2 gap-6">
                {stats.map((stat, index) => (
                  <div
                    key={index}
                    className="text-center p-6 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors duration-300"
                  >
                    <div className="text-3xl sm:text-4xl font-bold text-blue-900 mb-2">{stat.number}</div>
                    <div className="text-gray-700 font-medium">{stat.label}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="relative">
              <img
                src="https://placehold.co/800x600/000080/FFFFFF?text=Professional+Installation+Team"
                alt="Professional Installation Team"
                className="rounded-3xl shadow-2xl w-full transition-transform duration-500 hover:scale-105"
              />
              <div className="absolute bottom-4 right-4 bg-white text-gray-900 p-6 rounded-2xl shadow-lg">
                <div className="text-3xl font-bold">15+</div>
                <div className="text-gray-600">Years of Excellence</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-16 sm:py-20 bg-gray-50">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Client Testimonials</h2>
            <p className="text-lg text-gray-600">
              Hear from businesses and homeowners who have trusted us with their security and networking needs.
            </p>
          </div>
          <div className="max-w-4xl mx-auto">
            <div className="bg-white rounded-3xl p-8 sm:p-12 shadow-xl relative">
              <div className="absolute top-6 left-6 text-6xl text-blue-100 opacity-30">"</div>
              <div className="absolute bottom-6 right-6 text-6xl text-blue-100 opacity-30 transform rotate-180">"</div>
              <p className="text-xl text-gray-700 italic mb-8 relative z-10">
                {testimonials[currentTestimonial].text}
              </p>
              <div className="flex items-center mb-6">
                <div className="w-16 h-16 rounded-full overflow-hidden mr-4">
                  <img
                    src={testimonials[currentTestimonial].avatar}
                    alt={testimonials[currentTestimonial].name}
                    className="w-full h-full object-cover"
                  />
                </div>
                <div>
                  <div className="font-bold text-gray-900 text-lg">{testimonials[currentTestimonial].name}</div>
                  <div className="text-gray-600">{testimonials[currentTestimonial].company}</div>
                </div>
              </div>
              <div className="flex text-yellow-400 text-xl">
                {[...Array(5)].map((_, i) => (
                  <svg key={i} className="w-6 h-6 fill-current" viewBox="0 0 24 24">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                  </svg>
                ))}
              </div>
            </div>
            {/* Testimonial Indicators */}
            <div className="flex justify-center mt-8 space-x-3">
              {testimonials.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setCurrentTestimonial(index)}
                  className={`w-3 h-3 rounded-full transition-all duration-300 ${
                    index === currentTestimonial ? 'bg-blue-900 w-8' : 'bg-gray-300'
                  }`}
                />
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Partners Section */}
      <section className="py-8 bg-white border-t border-b border-gray-200 overflow-hidden">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <h3 className="text-xl font-bold text-center text-blue-900 mb-8">Trusted by Leading Brands Worldwide</h3>
          <div className="flex animate-scroll">
            {[...partners, ...partners, ...partners].map((partner, index) => (
              <div key={index} className="flex-shrink-0 mx-8">
                <div className="w-32 h-16 bg-blue-900/10 rounded-lg flex items-center justify-center">
                  <span className="font-bold text-blue-900 text-lg">{partner}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 sm:py-20 bg-white">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">Get in Touch</h2>
            <p className="text-lg text-gray-600">
              Ready to enhance your security and networking infrastructure? Contact us today for a free consultation and customized quote.
            </p>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {/* Contact Information */}
            <div>
              <h3 className="text-2xl font-bold text-gray-900 mb-8">Contact Information</h3>
              {[
                {
                  icon: "📍",
                  title: "Address",
                  content: "Office # 5, Main Chamber, Temple Road Opposite FIA Building, Lahore"
                },
                {
                  icon: "📞",
                  title: "Phone",
                  content: "+92 3228434578",
                  subtitle: "24/7 Emergency Support"
                },
                {
                  icon: "✉️",
                  title: "Email",
                  content: "info@gnspak.com",
                  subtitle: "support@gnspak.com"
                },
                {
                  icon: "🕒",
                  title: "Working Hours",
                  content: "Monday - Friday: 10:00 AM - 6:00 PM",
                  subtitle: "Saturday: 10:00 AM - 4:00 PM | Emergency services available 24/7"
                }
              ].map((item, index) => (
                <div key={index} className="flex mb-6 p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors duration-300">
                  <div className="text-3xl mr-4">{item.icon}</div>
                  <div>
                    <h4 className="font-bold text-gray-900 mb-2">{item.title}</h4>
                    <p className="text-gray-700">{item.content}</p>
                    {item.subtitle && <p className="text-sm text-gray-500 mt-1">{item.subtitle}</p>}
                  </div>
                </div>
              ))}
            </div>
            {/* Contact Form */}
            <div className="bg-gray-50 p-8 rounded-3xl">
              <h3 className="text-2xl font-bold text-blue-900 mb-6">Send us a Message</h3>
              <form onSubmit={handleFormSubmit} className="space-y-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Full Name</label>
                    <input
                      type="text"
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent transition-all duration-200"
                      placeholder="Your Name"
                      required
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
                    <input
                      type="email"
                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent transition-all duration-200"
                      placeholder="your.email@example.com"
                      required
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
                  <input
                    type="tel"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent transition-all duration-200"
                    placeholder="+92 321456789"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Service Interested In</label>
                  <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent transition-all duration-200">
                    <option value="">Select a service</option>
                    <option value="Camera Installation">Advanced Camera Installation</option>
                    <option value="CCTV Cabling">Professional CCTV Cabling</option>
                    <option value="Fingerprint Media Installation">Biometric Access Systems</option>
                    <option value="Solar Installation">Solar-Powered Security</option>
                    <option value="Networking Services">Enterprise Networking</option>
                    <option value="APC UPS Installation">APC UPS Installation</option>
                    <option value="Service & Maintenance">Service & Maintenance</option>
                    <option value="Integrated Solutions">Integrated Security Solutions</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Project Details</label>
                  <textarea
                    rows="5"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-900 focus:border-transparent transition-all duration-200"
                    placeholder="Please describe your project, property size, specific requirements, and timeline..."
                    required
                  ></textarea>
                </div>
                <button
                  type="submit"
                  disabled={formStatus === 'submitting'}
                  className={`w-full py-4 bg-blue-900 text-white font-bold rounded-xl hover:bg-blue-800 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl ${
                    formStatus === 'submitting' ? 'opacity-75 cursor-not-allowed' : ''
                  }`}
                >
                  {formStatus === 'submitting' ? 'Sending...' : 'Send Message'}
                </button>
                
                {/* Form Status Messages */}
                {formStatus === 'success' && (
                  <div className="p-4 bg-green-100 text-green-800 rounded-lg border border-green-200">
                    Thank you for your message! We'll get back to you shortly.
                  </div>
                )}
                {formStatus === 'error' && (
                  <div className="p-4 bg-red-100 text-red-800 rounded-lg border border-red-200">
                    There was an error sending your message. Please try again later.
                  </div>
                )}
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-16">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
            <div>
              <h3 className="text-2xl font-bold text-white mb-4">Global Network Solution</h3>
              <p className="text-gray-400 mb-6">
                Professional security and networking solutions for businesses and homeowners. Certified, insured, and committed to excellence.
              </p>
              <div className="flex space-x-4">
                {['facebook', 'twitter', 'linkedin', 'instagram'].map((social) => (
                  <a
                    key={social}
                    href="#"
                    className="w-10 h-10 bg-blue-900 rounded-full flex items-center justify-center hover:bg-blue-800 transition-colors duration-300"
                  >
                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                      {social === 'facebook' && <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />}
                      {social === 'twitter' && <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723 10.054 10.054 0 01-3.127 1.184 4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />}
                      {social === 'linkedin' && <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />}
                      {social === 'instagram' && <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.074-4.947c-.061-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />}
                    </svg>
                  </a>
                ))}
              </div>
            </div>
            <div>
              <h5 className="text-lg font-bold text-white mb-6">Services</h5>
              {[
                "Advanced Camera Installation",
                "Professional CCTV Cabling",
                "Biometric Access Systems",
                "Solar-Powered Security",
                "Enterprise Networking",
                "APC UPS Installation",
                "Service & Maintenance"
              ].map((service, index) => (
                <a
                  key={index}
                  href="#"
                  className="block text-gray-400 hover:text-white py-2 transition-colors duration-200"
                >
                  {service}
                </a>
              ))}
            </div>
            <div>
              <h5 className="text-lg font-bold text-white mb-6">Company</h5>
              {[
                { name: "Home", id: "home" },
                { name: "About Us", id: "about" },
                { name: "Services", id: "services" },
                { name: "Project Gallery", id: "gallery" },
                { name: "Our Team", id: "team" },
                { name: "Contact", id: "contact" }
              ].map((item, index) => (
                <button
                  key={index}
                  onClick={() => scrollToSection(item.id)}
                  className="block text-gray-400 hover:text-white py-2 transition-colors duration-200 w-full text-left"
                >
                  {item.name}
                </button>
              ))}
            </div>
            <div>
              <h5 className="text-lg font-bold text-white mb-6">Certifications</h5>
              <div className="space-y-4">
                <img
                  src="https://placehold.co/150x60/000080/FFFFFF?text=Certified"
                  alt="Certified Security Professional"
                  className="w-full"
                />
                <img
                  src="https://placehold.co/150x60/007bff/FFFFFF?text=Licensed"
                  alt="Licensed & Insured"
                  className="w-full"
                />
                <div className="text-gray-400 text-sm space-y-1">
                  <p className="flex items-center">
                    <span className="mr-2">📍</span>
                    
                  </p>
                  <p className="flex items-center">
                    <span className="mr-2">📞</span>
                    
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div className="border-t border-gray-800 pt-8 text-center text-gray-400">
            <p>
              &copy; {new Date().getFullYear()} Global Network Solution. All rights reserved. |{' '}
              <a href="#" className="hover:text-white transition-colors duration-200">Privacy Policy</a> |{' '}
              <a href="#" className="hover:text-white transition-colors duration-200">Terms of Service</a>
            </p>
          </div>
        </div>
      </footer>

      <style jsx>{`
        .animate-scroll {
          display: flex;
          animation: scroll 60s linear infinite;
        }
        @keyframes scroll {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-33.33%);
          }
        }
        .animate-scroll:hover {
          animation-play-state: paused;
        }
      `}</style>
    </div>
  );
};

export default App;