import React, { useState } from 'react'
import './App.css'
import { 
  Shield, 
  Smartphone, 
  Building2, 
  Tv, 
  GraduationCap,
  Menu, 
  X, 
  ChevronDown,
  Star,
  Users,
  Clock,
  CheckCircle,
  ArrowRight,
  Wallet,
  CreditCard,
  Phone,
  Mail,
  MapPin
} from 'lucide-react'
import logo from './assets/mb_global_mobile_logo.png'

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [activeService, setActiveService] = useState(null)

  const services = [
    {
      id: 'identity',
      title: 'Identity Verification',
      icon: Shield,
      color: 'bg-blue-500',
      description: 'Verify NIN, BVN, and other Nigerian identity documents instantly',
      subServices: [
        'NIN Verification & Slip',
        'BVN Verification & Slip', 
        'Driver\'s License Verification',
        'Voter\'s Card (PVC) Verification',
        'International Passport Verification'
      ]
    },
    {
      id: 'mobile',
      title: 'Mobile Services',
      icon: Smartphone,
      color: 'bg-green-500',
      description: 'Data bundles and airtime for all Nigerian networks',
      subServices: [
        'MTN Data & Airtime',
        'GLO Data & Airtime',
        'Airtel Data & Airtime',
        '9Mobile Data & Airtime',
        'Bulk SMS Services'
      ]
    },
    {
      id: 'business',
      title: 'Business Services',
      icon: Building2,
      color: 'bg-purple-500',
      description: 'CAC registration and business compliance services',
      subServices: [
        'Company Registration (CAC)',
        'Business Name Registration',
        'Tax Services & TIN',
        'Business Compliance',
        'Corporate Documentation'
      ]
    },
    {
      id: 'entertainment',
      title: 'Entertainment & Utilities',
      icon: Tv,
      color: 'bg-orange-500',
      description: 'Cable TV subscriptions and utility bill payments',
      subServices: [
        'DSTV Subscription',
        'GOtv Subscription',
        'Startimes Subscription',
        'Electricity Bill Payment',
        'Internet Bill Payment'
      ]
    },
    {
      id: 'education',
      title: 'Educational Services',
      icon: GraduationCap,
      color: 'bg-indigo-500',
      description: 'JAMB, WAEC and other educational services',
      subServices: [
        'JAMB Profile Code',
        'JAMB Result Printing',
        'WAEC Result Verification',
        'School Portal Services',
        'Educational Consultancy'
      ]
    }
  ]

  const stats = [
    { number: '50,000+', label: 'Happy Customers' },
    { number: '99.9%', label: 'Uptime' },
    { number: '24/7', label: 'Support' },
    { number: '5 Sec', label: 'Average Response' }
  ]

  const features = [
    {
      icon: CheckCircle,
      title: 'Instant Processing',
      description: 'Get results in seconds with our optimized API integrations'
    },
    {
      icon: Shield,
      title: 'Bank-Grade Security',
      description: 'Your data is protected with end-to-end encryption'
    },
    {
      icon: Users,
      title: '24/7 Customer Support',
      description: 'Round-the-clock assistance from our expert team'
    },
    {
      icon: Wallet,
      title: 'Flexible Payment',
      description: 'Multiple payment options with secure wallet system'
    }
  ]

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo */}
            <div className="flex items-center">
              <img src={logo} alt="MB Global Mobile" className="h-10 w-auto" />
            </div>

            {/* Desktop Navigation */}
            <nav className="hidden md:flex space-x-8">
              <a href="#home" className="text-gray-700 hover:text-blue-600 font-medium">Home</a>
              <a href="#services" className="text-gray-700 hover:text-blue-600 font-medium">Services</a>
              <a href="#about" className="text-gray-700 hover:text-blue-600 font-medium">About</a>
              <a href="#pricing" className="text-gray-700 hover:text-blue-600 font-medium">Pricing</a>
              <a href="#contact" className="text-gray-700 hover:text-blue-600 font-medium">Contact</a>
            </nav>

            {/* Auth Buttons */}
            <div className="hidden md:flex items-center space-x-4">
              <button className="text-gray-700 hover:text-blue-600 font-medium">Login</button>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                Register
              </button>
            </div>

            {/* Mobile menu button */}
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="md:hidden p-2 rounded-md text-gray-700 hover:text-blue-600"
            >
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden bg-white border-t">
            <div className="px-2 pt-2 pb-3 space-y-1">
              <a href="#home" className="block px-3 py-2 text-gray-700 hover:text-blue-600">Home</a>
              <a href="#services" className="block px-3 py-2 text-gray-700 hover:text-blue-600">Services</a>
              <a href="#about" className="block px-3 py-2 text-gray-700 hover:text-blue-600">About</a>
              <a href="#pricing" className="block px-3 py-2 text-gray-700 hover:text-blue-600">Pricing</a>
              <a href="#contact" className="block px-3 py-2 text-gray-700 hover:text-blue-600">Contact</a>
              <div className="border-t pt-2 mt-2">
                <button className="block w-full text-left px-3 py-2 text-gray-700 hover:text-blue-600">Login</button>
                <button className="block w-full text-left px-3 py-2 bg-blue-600 text-white rounded-lg mx-3 mt-2 hover:bg-blue-700">
                  Register
                </button>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Hero Section */}
      <section id="home" className="bg-gradient-to-br from-blue-600 via-blue-700 to-teal-600 text-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl md:text-6xl font-bold mb-6">
              Nigeria's Leading
              <span className="block text-teal-300">Digital Services Platform</span>
            </h1>
            <p className="text-xl md:text-2xl mb-8 text-blue-100 max-w-3xl mx-auto">
              Access ID verification, mobile services, business registration, and more - all in one secure platform
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="bg-teal-500 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-teal-600 transition-colors flex items-center justify-center">
                Get Started <ArrowRight className="ml-2" size={20} />
              </button>
              <button className="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors">
                View Services
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="bg-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-3xl md:text-4xl font-bold text-blue-600 mb-2">{stat.number}</div>
                <div className="text-gray-600">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Our Digital Services
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Comprehensive solutions for all your digital needs - from identity verification to business services
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service) => {
              const IconComponent = service.icon
              return (
                <div
                  key={service.id}
                  className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow p-6 cursor-pointer"
                  onClick={() => setActiveService(activeService === service.id ? null : service.id)}
                >
                  <div className={`${service.color} w-12 h-12 rounded-lg flex items-center justify-center mb-4`}>
                    <IconComponent className="text-white" size={24} />
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">{service.title}</h3>
                  <p className="text-gray-600 mb-4">{service.description}</p>
                  
                  {activeService === service.id && (
                    <div className="border-t pt-4 mt-4">
                      <ul className="space-y-2">
                        {service.subServices.map((subService, index) => (
                          <li key={index} className="flex items-center text-sm text-gray-700">
                            <CheckCircle className="text-green-500 mr-2" size={16} />
                            {subService}
                          </li>
                        ))}
                      </ul>
                      <button className="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors w-full">
                        Get Started
                      </button>
                    </div>
                  )}
                  
                  <div className="flex items-center text-blue-600 font-medium">
                    <span>Learn More</span>
                    <ChevronDown 
                      className={`ml-1 transition-transform ${activeService === service.id ? 'rotate-180' : ''}`} 
                      size={16} 
                    />
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Why Choose MB Global Mobile?
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Built for Nigerian businesses and individuals with the speed, security, and reliability you need
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => {
              const IconComponent = feature.icon
              return (
                <div key={index} className="text-center">
                  <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <IconComponent className="text-blue-600" size={32} />
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">{feature.title}</h3>
                  <p className="text-gray-600">{feature.description}</p>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-gradient-to-r from-blue-600 to-teal-600 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Ready to Get Started?
          </h2>
          <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
            Join thousands of satisfied customers using MB Global Mobile for their digital service needs
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-white text-blue-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-gray-100 transition-colors">
              Create Account
            </button>
            <button className="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors">
              Contact Sales
            </button>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Get in Touch
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Have questions? We're here to help you get started with our digital services
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-12">
            {/* Contact Info */}
            <div>
              <h3 className="text-2xl font-semibold text-gray-900 mb-6">Contact Information</h3>
              <div className="space-y-4">
                <div className="flex items-center">
                  <Phone className="text-blue-600 mr-4" size={20} />
                  <span className="text-gray-700">+234 (0) 800 123 4567</span>
                </div>
                <div className="flex items-center">
                  <Mail className="text-blue-600 mr-4" size={20} />
                  <span className="text-gray-700">support@mbglobalmobile.com</span>
                </div>
                <div className="flex items-center">
                  <MapPin className="text-blue-600 mr-4" size={20} />
                  <span className="text-gray-700">Lagos, Nigeria</span>
                </div>
              </div>

              <div className="mt-8">
                <h4 className="text-lg font-semibold text-gray-900 mb-4">Business Hours</h4>
                <div className="space-y-2 text-gray-700">
                  <div className="flex justify-between">
                    <span>Monday - Friday</span>
                    <span>9:00 AM - 6:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Saturday</span>
                    <span>10:00 AM - 4:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Sunday</span>
                    <span>Closed</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Contact Form */}
            <div className="bg-white rounded-xl shadow-lg p-8">
              <h3 className="text-2xl font-semibold text-gray-900 mb-6">Send us a Message</h3>
              <form className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Your Name</label>
                  <input
                    type="text"
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Enter your full name"
                  />
                </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-500 focus:border-blue-500"
                    placeholder="Enter your email"
                  />
                </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-500 focus:border-blue-500"
                    placeholder="Enter your phone number"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Message</label>
                  <textarea
                    rows={4}
                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Tell us how we can help you"
                  ></textarea>
                </div>
                <button
                  type="submit"
                  className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
                >
                  Send Message
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-4 gap-8">
            {/* Company Info */}
            <div className="md:col-span-2">
              <img src={logo} alt="MB Global Mobile" className="h-10 w-auto mb-4 brightness-0 invert" />
              <p className="text-gray-300 mb-4 max-w-md">
                Nigeria's leading digital services platform, providing fast, secure, and reliable solutions for identity verification, mobile services, and business needs.
              </p>
              <div className="flex space-x-4">
                <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
                  <span className="text-sm font-bold">f</span>
                </div>
                <div className="w-8 h-8 bg-blue-400 rounded-full flex items-center justify-center">
                  <span className="text-sm font-bold">t</span>
                </div>
                <div className="w-8 h-8 bg-blue-700 rounded-full flex items-center justify-center">
                  <span className="text-sm font-bold">in</span>
                </div>
              </div>
            </div>

            {/* Services */}
            <div>
              <h3 className="text-lg font-semibold mb-4">Services</h3>
              <ul className="space-y-2 text-gray-300">
                <li><a href="#" className="hover:text-white">NIN Verification</a></li>
                <li><a href="#" className="hover:text-white">BVN Verification</a></li>
                <li><a href="#" className="hover:text-white">Data & Airtime</a></li>
                <li><a href="#" className="hover:text-white">CAC Registration</a></li>
                <li><a href="#" className="hover:text-white">Cable TV</a></li>
              </ul>
            </div>

            {/* Support */}
            <div>
              <h3 className="text-lg font-semibold mb-4">Support</h3>
              <ul className="space-y-2 text-gray-300">
                <li><a href="#" className="hover:text-white">Help Center</a></li>
                <li><a href="#" className="hover:text-white">API Documentation</a></li>
                <li><a href="#" className="hover:text-white">Contact Support</a></li>
                <li><a href="#" className="hover:text-white">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-white">Terms of Service</a></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; 2024 MB Global Mobile. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default App

