import { useState } from 'react';
import { Phone, Mail, MapPin, ShoppingBag, Search, Menu, X } from 'lucide-react';

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

  const products = [
    {
      id: 1,
      name: "Classic Leather Boots",
      category: "shoes",
      price: "$129.99",
      image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?auto=format&fit=crop&q=80&w=400"
    },
    {
      id: 2,
      name: "Denim Jacket",
      category: "clothes",
      price: "$89.99",
      image: "https://images.unsplash.com/photo-1576995853123-5a10305d93c0?auto=format&fit=crop&q=80&w=400"
    },
    {
      id: 3,
      name: "Evening Essence",
      category: "perfumes",
      price: "$79.99",
      image: "https://images.unsplash.com/photo-1594035910387-fea47794261f?auto=format&fit=crop&q=80&w=400"
    },
    {
      id: 4,
      name: "Casual Sneakers",
      category: "shoes",
      price: "$99.99",
      image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=400"
    },
    {
      id: 5,
      name: "Cotton T-Shirt",
      category: "clothes",
      price: "$29.99",
      image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&q=80&w=400"
    },
    {
      id: 6,
      name: "Morning Fresh",
      category: "perfumes",
      price: "$69.99",
      image: "https://images.unsplash.com/photo-1541643600914-78b084683601?auto=format&fit=crop&q=80&w=400"
    }
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="bg-gray-900 text-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center">
              <h1 className="text-2xl font-bold">MULE BRAND</h1>
            </div>
            
            {/* Desktop Navigation */}
            <div className="hidden md:flex items-center space-x-8">
              <a href="#products" className="hover:text-gray-300">Products</a>
              <a href="#contact" className="hover:text-gray-300">Contact</a>
              <button className="p-2 hover:bg-gray-800 rounded-full">
                <Search size={20} />
              </button>
              <button className="p-2 hover:bg-gray-800 rounded-full">
                <ShoppingBag size={20} />
              </button>
            </div>

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

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden px-2 pt-2 pb-3 space-y-1">
            <a href="#products" className="block px-3 py-2 hover:bg-gray-800 rounded-md">Products</a>
            <a href="#contact" className="block px-3 py-2 hover:bg-gray-800 rounded-md">Contact</a>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <div className="relative bg-gray-900 h-[60vh]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?auto=format&fit=crop&q=80')] bg-cover bg-center opacity-50"></div>
        <div className="relative max-w-7xl mx-auto px-4 py-24 flex items-center justify-center h-full">
          <div className="text-center text-white">
            <h2 className="text-4xl md:text-6xl font-bold mb-4">Welcome to Mule Brand</h2>
            <p className="text-xl md:text-2xl">Discover our collection of shoes, clothes, and perfumes</p>
          </div>
        </div>
      </div>

      {/* Products Section */}
      <section id="products" className="py-16 max-w-7xl mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-12">Our Products</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {products.map((product) => (
            <div key={product.id} className="bg-white rounded-lg shadow-lg overflow-hidden">
              <div className="h-64 overflow-hidden">
                <img 
                  src={product.image} 
                  alt={product.name}
                  className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-300"
                />
              </div>
              <div className="p-6">
                <h3 className="text-xl font-semibold mb-2">{product.name}</h3>
                <p className="text-gray-600 mb-4">Category: {product.category}</p>
                <div className="flex justify-between items-center">
                  <span className="text-xl font-bold">{product.price}</span>
                  <button className="bg-gray-900 text-white px-4 py-2 rounded-md hover:bg-gray-800 transition-colors">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="bg-gray-100 py-16">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Contact Us</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-6">
              <div className="flex items-center space-x-4">
                <Phone className="text-gray-600" />
                <p>0910748474</p>
              </div>
              <div className="flex items-center space-x-4">
                <Mail className="text-gray-600" />
                <p>contact@mulebrand.com</p>
              </div>
              <div className="flex items-center space-x-4">
                <MapPin className="text-gray-600" />
                <p>123 Fashion Street, Style City</p>
              </div>
            </div>
            <form className="space-y-4">
              <input
                type="text"
                placeholder="Your Name"
                className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-900"
              />
              <input
                type="email"
                placeholder="Your Email"
                className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-900"
              />
              <textarea
                placeholder="Your Message"
                rows="4"
                className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-900"
              ></textarea>
              <button className="w-full bg-gray-900 text-white px-6 py-3 rounded-md hover:bg-gray-800 transition-colors">
                Send Message
              </button>
            </form>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <p>© 2024 Mule Brand. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}