import { Menu, X, ChevronDown, Star, MapPin, Clock, Phone } from 'lucide-react'
import { useState } from 'react'

function App() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header 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 items-center py-4">
            <div className="flex items-center">
              <img src="/images/placeholder.webp" alt="Logo" className="h-8 w-8 mr-3" />
              <span className="text-xl font-bold text-gray-900">Restaurant</span>
            </div>
            
            <nav className="hidden md:flex space-x-8">
              <a href="#" className="text-gray-700 hover:text-gray-900">Home</a>
              <a href="#" className="text-gray-700 hover:text-gray-900">Menu</a>
              <a href="#" className="text-gray-700 hover:text-gray-900">About</a>
              <a href="#" className="text-gray-700 hover:text-gray-900">Contact</a>
            </nav>
            
            <div className="md:hidden">
              <button
                onClick={() => setIsMenuOpen(!isMenuOpen)}
                className="text-gray-700"
              >
                {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile menu */}
        {isMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-gray-50">
              <a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">Home</a>
              <a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">Menu</a>
              <a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">About</a>
              <a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">Contact</a>
            </div>
          </div>
        )}
      </header>

      {/* Hero Section */}
      <section className="relative bg-gray-900 text-white">
        <div className="absolute inset-0">
          <img
            src="/images/placeholder.webp"
            alt="Restaurant Interior"
            className="w-full h-full object-cover opacity-70"
          />
        </div>
        <div className="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
          <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
            Welcome to Our Restaurant
          </h1>
          <p className="mt-6 max-w-3xl text-xl">
            Experience the finest dining with our carefully crafted dishes made from the freshest ingredients.
          </p>
          <div className="mt-10">
            <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
              View Menu
            </button>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
              Why Choose Us
            </h2>
          </div>
          
          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="flex justify-center">
                <Star className="h-12 w-12 text-red-600" />
              </div>
              <h3 className="mt-4 text-xl font-semibold text-gray-900">Quality Food</h3>
              <p className="mt-2 text-gray-600">Fresh ingredients and expert preparation ensure every dish is perfect.</p>
            </div>
            
            <div className="text-center">
              <div className="flex justify-center">
                <Clock className="h-12 w-12 text-red-600" />
              </div>
              <h3 className="mt-4 text-xl font-semibold text-gray-900">Fast Service</h3>
              <p className="mt-2 text-gray-600">Quick and efficient service without compromising on quality.</p>
            </div>
            
            <div className="text-center">
              <div className="flex justify-center">
                <MapPin className="h-12 w-12 text-red-600" />
              </div>
              <h3 className="mt-4 text-xl font-semibold text-gray-900">Great Location</h3>
              <p className="mt-2 text-gray-600">Conveniently located in the heart of the city with easy access.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Menu Preview */}
      <section className="py-16 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
              Featured Dishes
            </h2>
            <p className="mt-4 text-lg text-gray-600">
              Try our most popular dishes
            </p>
          </div>
          
          <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {[1, 2, 3].map((item) => (
              <div key={item} className="bg-white rounded-lg shadow-md overflow-hidden">
                <img
                  src="/images/placeholder.webp"
                  alt={`Dish ${item}`}
                  className="w-full h-48 object-cover"
                />
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-gray-900">Special Dish {item}</h3>
                  <p className="mt-2 text-gray-600">A delicious combination of fresh ingredients prepared with care.</p>
                  <div className="mt-4 flex justify-between items-center">
                    <span className="text-2xl font-bold text-red-600">$24.99</span>
                    <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300">
                      Order Now
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="py-16 bg-gray-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl font-extrabold sm:text-4xl">
              Visit Us Today
            </h2>
            <p className="mt-4 text-lg text-gray-300">
              We're open and ready to serve you
            </p>
          </div>
          
          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
            <div>
              <MapPin className="h-8 w-8 mx-auto text-red-600" />
              <h3 className="mt-4 text-xl font-semibold">Location</h3>
              <p className="mt-2 text-gray-300">123 Main Street<br />City, State 12345</p>
            </div>
            
            <div>
              <Clock className="h-8 w-8 mx-auto text-red-600" />
              <h3 className="mt-4 text-xl font-semibold">Hours</h3>
              <p className="mt-2 text-gray-300">Mon-Fri: 11am-10pm<br />Sat-Sun: 10am-11pm</p>
            </div>
            
            <div>
              <Phone className="h-8 w-8 mx-auto text-red-600" />
              <h3 className="mt-4 text-xl font-semibold">Phone</h3>
              <p className="mt-2 text-gray-300">(555) 123-4567</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-800 text-white py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <p>&copy; 2024 Restaurant. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

export default App