import { useState } from 'react';
import { Menu, X, ArrowRight, Mail, Phone, MapPin, Facebook, Instagram, Linkedin, Youtube } from 'lucide-react';

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

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="fixed top-0 w-full bg-white/95 backdrop-blur-sm z-50 border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex-shrink-0">
              <span className="text-2xl font-bold text-[#1a237e]">Glow Pixel</span>
            </div>
            
            {/* Desktop Navigation */}
            <div className="hidden md:flex space-x-8">
              {['Home', 'About', 'Services', 'Portfolio', 'Testimonials', 'Blog', 'Contact'].map((item) => (
                <a
                  key={item}
                  href={`#${item.toLowerCase()}`}
                  className="text-gray-700 hover:text-[#ff6f00] transition-colors duration-200"
                >
                  {item}
                </a>
              ))}
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-700 hover:text-[#ff6f00]"
              >
                {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              {['Home', 'About', 'Services', 'Portfolio', 'Testimonials', 'Blog', 'Contact'].map((item) => (
                <a
                  key={item}
                  href={`#${item.toLowerCase()}`}
                  className="block px-3 py-2 text-gray-700 hover:text-[#ff6f00]"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {item}
                </a>
              ))}
            </div>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section className="pt-24 pb-16 px-4 sm:pt-32 sm:pb-24 bg-gradient-to-br from-[#1a237e]/5 to-[#ff6f00]/5">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div className="space-y-8">
              <h1 className="text-4xl sm:text-5xl font-bold text-[#1a237e] leading-tight">
                Unlock Your Digital Potential with Glow Pixel
              </h1>
              <p className="text-xl text-gray-600">
                Expert Digital Marketing, Creative Designs, and Cutting-Edge Solutions to Elevate Your Brand
              </p>
              <button className="bg-[#ff6f00] text-white px-8 py-3 rounded-lg hover:bg-[#ff6f00]/90 transition-colors duration-200 flex items-center gap-2">
                Get a Free Consultation
                <ArrowRight size={20} />
              </button>
            </div>
            <div className="relative">
              <div className="aspect-video bg-gradient-to-br from-[#1a237e] to-[#ff6f00] rounded-lg shadow-xl">
                {/* Replace with actual hero image */}
                <div className="absolute inset-0 bg-black/40 rounded-lg flex items-center justify-center text-white">
                  Place your hero image here
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Service Overview */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto text-center">
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Glow Pixel is your one-stop solution for all things digital. From eye-catching designs to impactful marketing campaigns, our services are tailored to meet the needs of businesses like yours. We specialize in SEO, Google & Facebook Ads, Web Development, Graphic Designing, Video Editing, and much more.
          </p>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-[#1a237e] mb-12">Our Services</h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[
              {
                title: "Digital Marketing",
                icon: "📈",
                description: "Boost your online presence with our comprehensive digital marketing solutions."
              },
              {
                title: "Graphic Design",
                icon: "🎨",
                description: "Create stunning visuals that capture your brand's essence and message."
              },
              {
                title: "Paid Advertising",
                icon: "🎯",
                description: "Maximize ROI with expertly managed Google and Facebook ad campaigns."
              },
              {
                title: "Video Editing",
                icon: "🎬",
                description: "Tell your story through professional and engaging video content."
              },
              {
                title: "Web Development",
                icon: "💻",
                description: "Build responsive, user-friendly websites that convert visitors into customers."
              },
              {
                title: "SEO Services",
                icon: "🔍",
                description: "Improve your search rankings and drive organic traffic to your website."
              }
            ].map((service) => (
              <div key={service.title} className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-200">
                <div className="text-4xl mb-4">{service.icon}</div>
                <h3 className="text-xl font-semibold text-[#1a237e] mb-2">{service.title}</h3>
                <p className="text-gray-600">{service.description}</p>
                <button className="mt-4 text-[#ff6f00] hover:text-[#ff6f00]/80 flex items-center gap-1">
                  Learn more <ArrowRight size={16} />
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-[#1a237e] mb-6">Get in Touch</h2>
              <p className="text-gray-600 mb-8">
                Have a project in mind or want to learn more about our services? We're here to help.
              </p>
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <Mail className="text-[#ff6f00]" />
                  <span>contact@glowpixel.com</span>
                </div>
                <div className="flex items-center gap-3">
                  <Phone className="text-[#ff6f00]" />
                  <span>+91-XXXX-XXXXXX</span>
                </div>
                <div className="flex items-center gap-3">
                  <MapPin className="text-[#ff6f00]" />
                  <span>Your Office Address</span>
                </div>
              </div>
            </div>
            <form className="space-y-4">
              <input
                type="text"
                placeholder="Your Name"
                className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-[#ff6f00]"
              />
              <input
                type="email"
                placeholder="Your Email"
                className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-[#ff6f00]"
              />
              <textarea
                placeholder="Your Message"
                rows={4}
                className="w-full px-4 py-2 rounded-lg border focus:outline-none focus:ring-2 focus:ring-[#ff6f00]"
              />
              <button className="w-full bg-[#ff6f00] text-white px-6 py-3 rounded-lg hover:bg-[#ff6f00]/90 transition-colors duration-200">
                Send Message
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-[#1a237e] text-white py-12 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-2xl font-bold mb-4">Glow Pixel</h3>
              <p className="text-gray-300">
                Your partner in digital success. Let's grow together.
              </p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Quick Links</h4>
              <div className="space-y-2">
                {['Home', 'Services', 'Portfolio', 'Blog', 'Contact'].map((item) => (
                  <a
                    key={item}
                    href={`#${item.toLowerCase()}`}
                    className="block text-gray-300 hover:text-white"
                  >
                    {item}
                  </a>
                ))}
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Services</h4>
              <div className="space-y-2">
                {['Digital Marketing', 'Graphic Design', 'Web Development', 'SEO', 'Video Editing'].map((item) => (
                  <a
                    key={item}
                    href="#"
                    className="block text-gray-300 hover:text-white"
                  >
                    {item}
                  </a>
                ))}
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Connect With Us</h4>
              <div className="flex space-x-4">
                <Facebook className="hover:text-[#ff6f00] cursor-pointer" />
                <Instagram className="hover:text-[#ff6f00] cursor-pointer" />
                <Linkedin className="hover:text-[#ff6f00] cursor-pointer" />
                <Youtube className="hover:text-[#ff6f00] cursor-pointer" />
              </div>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-300">
            <p>© 2024 Glow Pixel. All Rights Reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}