import { useState } from 'react';
import { ShoppingCart, User, Search, ChevronRight, Heart, Menu } from 'lucide-react';

export default function Homepage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  
  const featuredProducts = [
    {
      id: 1,
      name: "Summer Dress",
      price: 29.99,
      image: "https://placeholder.com/400x500",
      tag: "New Arrival"
    },
    {
      id: 2,
      name: "Casual T-Shirt",
      price: 19.99,
      image: "https://placeholder.com/400x500",
      tag: "Bestseller"
    },
    {
      id: 3,
      name: "Denim Jeans",
      price: 39.99,
      image: "https://placeholder.com/400x500",
      tag: "Sale"
    },
    {
      id: 4,
      name: "Summer Hat",
      price: 14.99,
      image: "https://placeholder.com/400x500",
      tag: "Trending"
    },
  ];

  const categories = [
    "Women", "Men", "Kids", "Accessories", "Sale"
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Announcement Bar */}
      <div className="bg-gray-900 text-white text-sm py-2">
        <div className="container mx-auto px-4 text-center">
          Free shipping on orders over $50 | Shop Now
        </div>
      </div>

      {/* Header */}
      <header className="bg-white border-b border-gray-100 sticky top-0 z-50">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-20">
            <button 
              className="lg:hidden p-2 hover:bg-gray-100 rounded-full"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <Menu className="h-6 w-6" />
            </button>
            
            <h1 className="text-3xl font-bold text-red-600">STORE</h1>
            
            <nav className="hidden lg:block flex-1 ml-16">
              <ul className="flex space-x-8">
                {categories.map((category) => (
                  <li key={category}>
                    <a 
                      href="#" 
                      className="text-gray-700 hover:text-red-600 font-medium transition-colors duration-200"
                    >
                      {category}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>

            <div className="flex items-center space-x-6">
              <div className="relative hidden md:block">
                <input
                  type="text"
                  placeholder="Search products..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="py-2.5 px-5 pr-12 rounded-full text-gray-800 w-72 bg-gray-50 focus:bg-white border border-gray-200 focus:border-red-300 focus:outline-none focus:ring-2 focus:ring-red-100 transition-all duration-200"
                />
                <Search className="absolute right-4 top-3 h-5 w-5 text-gray-400" />
              </div>
              
              <div className="flex items-center space-x-4">
                <button className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200">
                  <Heart className="h-6 w-6 text-gray-700" />
                </button>
                <button className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200">
                  <ShoppingCart className="h-6 w-6 text-gray-700" />
                </button>
                <button className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200">
                  <User className="h-6 w-6 text-gray-700" />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        <div className={`lg:hidden ${isMenuOpen ? 'block' : 'hidden'} border-t border-gray-100`}>
          <div className="container mx-auto px-4 py-4">
            <ul className="space-y-4">
              {categories.map((category) => (
                <li key={category}>
                  <a 
                    href="#" 
                    className="block text-gray-700 hover:text-red-600 font-medium transition-colors duration-200"
                  >
                    {category}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative h-[600px] bg-gray-100">
        <div className="absolute inset-0 bg-gradient-to-r from-red-600/95 to-red-600/80" />
        <div className="container mx-auto px-4 h-full flex items-center relative">
          <div className="max-w-xl text-white">
            <span className="inline-block bg-white/20 text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
              New Collection
            </span>
            <h2 className="text-6xl font-bold mb-6 leading-tight">Summer Collection 2024</h2>
            <p className="text-xl mb-10 text-white/90">Discover the latest trends at unbeatable prices</p>
            <button className="bg-white text-red-600 px-10 py-4 rounded-full font-semibold hover:bg-gray-50 transition-all duration-200 transform hover:scale-105 flex items-center shadow-lg">
              Shop Now
              <ChevronRight className="ml-2 h-5 w-5" />
            </button>
          </div>
        </div>
      </section>

      {/* Featured Products */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center mb-12">
            <h2 className="text-3xl font-bold">Featured Products</h2>
            <a href="#" className="text-red-600 font-medium hover:text-red-700 transition-colors duration-200">
              View All
            </a>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {featuredProducts.map((product) => (
              <div key={product.id} className="group">
                <div className="relative overflow-hidden rounded-2xl mb-4">
                  <img
                    src={product.image}
                    alt={product.name}
                    className="w-full h-[400px] object-cover transform group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute top-4 left-4">
                    <span className="inline-block bg-white px-4 py-2 rounded-full text-sm font-medium text-red-600">
                      {product.tag}
                    </span>
                  </div>
                  <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                  <div className="absolute bottom-4 left-0 right-0 flex justify-center">
                    <button className="bg-white text-gray-900 px-8 py-3 rounded-full font-medium transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                      Quick View
                    </button>
                  </div>
                </div>
                <h3 className="font-medium text-lg mb-2">{product.name}</h3>
                <p className="text-red-600 font-semibold">${product.price}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Categories Grid */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {['Women', 'Men', 'Kids'].map((category) => (
              <div key={category} className="relative h-[400px] rounded-2xl overflow-hidden group cursor-pointer">
                <img
                  src={`https://placeholder.com/600x400`}
                  alt={category}
                  className="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-black/20" />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="text-center transform group-hover:translate-y-0 translate-y-4 transition-transform duration-300">
                    <h3 className="text-white text-3xl font-bold mb-6">{category}</h3>
                    <button className="bg-white text-gray-900 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors duration-200">
                      Shop Now
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white pt-20 pb-10">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
            <div>
              <h4 className="text-xl font-bold mb-6">About Us</h4>
              <p className="text-gray-400 leading-relaxed">
                Your one-stop destination for fashion at unbeatable prices.
              </p>
            </div>
            <div>
              <h4 className="text-xl font-bold mb-6">Customer Service</h4>
              <ul className="space-y-4 text-gray-400">
                {["Contact Us", "Shipping Info", "Returns", "FAQ"].map((item) => (
                  <li key={item}>
                    <a href="#" className="hover:text-white transition-colors duration-200">
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h4 className="text-xl font-bold mb-6">Quick Links</h4>
              <ul className="space-y-4 text-gray-400">
                {["New Arrivals", "Sale", "Gift Cards", "Store Locator"].map((item) => (
                  <li key={item}>
                    <a href="#" className="hover:text-white transition-colors duration-200">
                      {item}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h4 className="text-xl font-bold mb-6">Newsletter</h4>
              <p className="text-gray-400 mb-6">
                Subscribe to receive updates, access to exclusive deals, and more.
              </p>
              <div className="space-y-4">
                <input
                  type="email"
                  placeholder="Enter your email"
                  className="w-full px-6 py-3 rounded-full text-gray-800 bg-white/10 border border-white/20 focus:outline-none focus:border-white/40 transition-colors duration-200"
                />
                <button className="bg-red-600 text-white px-8 py-3 rounded-full w-full hover:bg-red-700 transition-colors duration-200">
                  Subscribe
                </button>
              </div>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-16 pt-8 text-center text-gray-400">
            <p>© 2024 STORE. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}