import { useState } from 'react';
import { ChevronRight, GameController, Windows, Mail, Phone, MapPin, ArrowRight } from 'lucide-react';

export default function Website() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <nav className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex-shrink-0 flex items-center">
              <h1 className="text-2xl font-bold text-blue-600">TechGame Solutions</h1>
            </div>
            
            <div className="hidden md:flex space-x-8">
              <a href="#services" className="text-gray-700 hover:text-blue-600 px-3 py-2">Services</a>
              <a href="#about" className="text-gray-700 hover:text-blue-600 px-3 py-2">About</a>
              <a href="#contact" className="text-gray-700 hover:text-blue-600 px-3 py-2">Contact</a>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
          <div className="text-center">
            <h2 className="text-4xl md:text-5xl font-bold mb-6">Professional Gaming & Microsoft Services</h2>
            <p className="text-xl mb-8">Your one-stop solution for Fortnite coaching and Microsoft enterprise solutions</p>
            <a href="#contact" className="inline-flex items-center bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
              Get Started
              <ChevronRight className="ml-2 h-5 w-5" />
            </a>
          </div>
        </div>
      </div>

      {/* Services Section */}
      <div id="services" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-16">Our Services</h2>
          
          <div className="grid md:grid-cols-2 gap-12">
            {/* Fortnite Services */}
            <div className="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition-shadow">
              <GameController className="h-12 w-12 text-blue-600 mb-6" />
              <h3 className="text-2xl font-semibold mb-4">Fortnite Services</h3>
              <ul className="space-y-4">
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Professional Coaching
                </li>
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Tournament Preparation
                </li>
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Strategy Development
                </li>
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Custom Training Programs
                </li>
              </ul>
            </div>

            {/* Microsoft Services */}
            <div className="bg-gray-50 rounded-xl p-8 hover:shadow-lg transition-shadow">
              <Windows className="h-12 w-12 text-blue-600 mb-6" />
              <h3 className="text-2xl font-semibold mb-4">Microsoft Services</h3>
              <ul className="space-y-4">
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Office 365 Implementation
                </li>
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Azure Cloud Solutions
                </li>
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Microsoft Teams Setup
                </li>
                <li className="flex items-center">
                  <ArrowRight className="h-5 w-5 text-blue-600 mr-2" />
                  Windows Enterprise Support
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* About Section */}
      <div id="about" className="py-24 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto">
            <h2 className="text-3xl font-bold mb-8">About Us</h2>
            <p className="text-lg text-gray-600 mb-6">
              We are a unique IT company that combines professional gaming expertise with enterprise-level Microsoft solutions. Our team consists of professional Fortnite players and certified Microsoft specialists.
            </p>
            <p className="text-lg text-gray-600">
              With years of experience in both gaming and corporate IT services, we deliver exceptional results for both individual gamers and businesses alike.
            </p>
          </div>
        </div>
      </div>

      {/* Contact Section */}
      <div id="contact" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-center mb-16">Contact Us</h2>
          
          <div className="grid md:grid-cols-2 gap-12">
            <div className="space-y-6">
              <h3 className="text-xl font-semibold mb-4">Get in Touch</h3>
              <div className="flex items-center">
                <Mail className="h-6 w-6 text-blue-600 mr-3" />
                <span>contact@techgamesolutions.com</span>
              </div>
              <div className="flex items-center">
                <Phone className="h-6 w-6 text-blue-600 mr-3" />
                <span>+1 (555) 123-4567</span>
              </div>
              <div className="flex items-center">
                <MapPin className="h-6 w-6 text-blue-600 mr-3" />
                <span>123 Gaming Street, Tech City, TC 12345</span>
              </div>
            </div>

            <form className="space-y-6">
              <div>
                <input
                  type="text"
                  placeholder="Your Name"
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                />
              </div>
              <div>
                <input
                  type="email"
                  placeholder="Your Email"
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                />
              </div>
              <div>
                <textarea
                  placeholder="Your Message"
                  rows={4}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent"
                />
              </div>
              <button
                type="submit"
                className="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
              >
                Send Message
              </button>
            </form>
          </div>
        </div>
      </div>

      {/* 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="text-center">
            <h2 className="text-2xl font-bold mb-4">TechGame Solutions</h2>
            <p className="text-gray-400">Combining gaming excellence with enterprise IT solutions</p>
            <div className="mt-8">
              <p className="text-sm text-gray-400">© 2024 TechGame Solutions. All rights reserved.</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}