import { useState } from 'react';
import { Search, ShoppingBag, Mail, Phone, MapPin, Instagram, Facebook, Twitter } from 'lucide-react';

export default function PerfumeStore() {
  const [searchQuery, setSearchQuery] = useState('');
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const perfumes = [
    {
      id: 1,
      name: "Royal Oud",
      category: "Oil Perfumes",
      price: "$180",
      image: "https://placeholder.com/400x400",
      description: "A rich oriental fragrance with woody notes"
    },
    {
      id: 2,
      name: "Desert Rose",
      category: "Arab Perfumes",
      price: "$250",
      image: "https://placeholder.com/400x400",
      description: "Traditional Arabian rose with amber undertones"
    },
    {
      id: 3,
      name: "Chanel N°5",
      category: "Designer Perfumes",
      price: "$320",
      image: "https://placeholder.com/400x400",
      description: "Iconic floral aldehyde fragrance"
    },
    {
      id: 4,
      name: "Midnight Musk",
      category: "Oil Perfumes",
      price: "$150",
      image: "https://placeholder.com/400x400",
      description: "Deep, sensual musk with vanilla notes"
    },
    {
      id: 5,
      name: "Arabian Nights",
      category: "Arab Perfumes",
      price: "$280",
      image: "https://placeholder.com/400x400",
      description: "Exotic blend of oud and spices"
    },
    {
      id: 6,
      name: "Dior Sauvage",
      category: "Designer Perfumes",
      price: "$295",
      image: "https://placeholder.com/400x400",
      description: "Fresh and bold masculine fragrance"
    }
  ];

  const filteredPerfumes = perfumes.filter(perfume =>
    perfume.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    perfume.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
    perfume.description.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission here
    console.log('Form submitted:', formData);
    setFormData({ name: '', email: '', message: '' });
    alert('Thank you for your message! We will get back to you soon.');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-3xl font-semibold text-gray-900">Luxury Perfumes</h1>
            <div className="relative">
              <input
                type="text"
                placeholder="Search perfumes..."
                className="w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <Search className="absolute left-3 top-2.5 text-gray-400 h-5 w-5" />
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Categories */}
        <div className="mb-12">
          <h2 className="text-2xl font-semibold mb-6">Our Collections</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {['Oil Perfumes', 'Arab Perfumes', 'Designer Perfumes'].map((category) => (
              <div key={category} className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                <h3 className="text-xl font-medium mb-2">{category}</h3>
                <p className="text-gray-600">Discover our exclusive {category.toLowerCase()}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Perfume Grid */}
        <div className="mb-16">
          <h2 className="text-2xl font-semibold mb-6">Featured Perfumes</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {filteredPerfumes.map((perfume) => (
              <div key={perfume.id} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <img src={perfume.image} alt={perfume.name} className="w-full h-64 object-cover" />
                <div className="p-6">
                  <h3 className="text-xl font-medium mb-2">{perfume.name}</h3>
                  <p className="text-gray-600 mb-2">{perfume.description}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-purple-600 font-semibold">{perfume.price}</span>
                    <button className="flex items-center gap-2 bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">
                      <ShoppingBag className="h-5 w-5" />
                      Add to Cart
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Contact Form */}
        <div className="bg-white rounded-lg shadow-md p-8 mb-16">
          <h2 className="text-2xl font-semibold mb-6">Contact Us</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <form onSubmit={handleSubmit} className="space-y-6">
              <div>
                <label className="block text-gray-700 mb-2">Name</label>
                <input
                  type="text"
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
                  value={formData.name}
                  onChange={(e) => setFormData({...formData, name: e.target.value})}
                />
              </div>
              <div>
                <label className="block text-gray-700 mb-2">Email</label>
                <input
                  type="email"
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
                  value={formData.email}
                  onChange={(e) => setFormData({...formData, email: e.target.value})}
                />
              </div>
              <div>
                <label className="block text-gray-700 mb-2">Message</label>
                <textarea
                  required
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 h-32"
                  value={formData.message}
                  onChange={(e) => setFormData({...formData, message: e.target.value})}
                ></textarea>
              </div>
              <button
                type="submit"
                className="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors"
              >
                Send Message
              </button>
            </form>
            <div className="space-y-6">
              <div className="flex items-center gap-4">
                <Mail className="h-6 w-6 text-purple-600" />
                <span>contact@luxuryperfumes.com</span>
              </div>
              <div className="flex items-center gap-4">
                <Phone className="h-6 w-6 text-purple-600" />
                <span>+1 (555) 123-4567</span>
              </div>
              <div className="flex items-center gap-4">
                <MapPin className="h-6 w-6 text-purple-600" />
                <span>123 Luxury Avenue, New York, NY 10001</span>
              </div>
              <div className="flex gap-4 pt-4">
                <a href="#" className="text-gray-600 hover:text-purple-600">
                  <Instagram className="h-6 w-6" />
                </a>
                <a href="#" className="text-gray-600 hover:text-purple-600">
                  <Facebook className="h-6 w-6" />
                </a>
                <a href="#" className="text-gray-600 hover:text-purple-600">
                  <Twitter className="h-6 w-6" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <h3 className="text-xl font-semibold mb-4">Luxury Perfumes</h3>
              <p className="text-gray-400">Discover the finest collection of exclusive perfumes from around the world.</p>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4">Quick Links</h3>
              <ul className="space-y-2">
                <li><a href="#" className="text-gray-400 hover:text-white">About Us</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white">Contact</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white">Shipping Policy</a></li>
                <li><a href="#" className="text-gray-400 hover:text-white">Returns</a></li>
              </ul>
            </div>
            <div>
              <h3 className="text-xl font-semibold mb-4">Newsletter</h3>
              <p className="text-gray-400 mb-4">Subscribe to receive updates about new products and special offers.</p>
              <input
                type="email"
                placeholder="Enter your email"
                className="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
              />
            </div>
          </div>
          <div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
            <p>&copy; 2024 Luxury Perfumes. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  );
}