import React, { useState, useEffect } from 'react';
import { 
  Menu, 
  ChefHat, 
  MapPin, 
  Phone, 
  Mail, 
  Clock, 
  Utensils, 
  Coffee, 
  Wine, 
  Hotel, 
  Star,
  CalendarCheck,
  Facebook,
  Instagram,
  Twitter,
  ChevronRight,
  X,
  AlignRight
} from 'lucide-react';

// --- Assets & Data ---

const MENU_DATA = {
  breakfast: [
    { name: "Royal Eggs Benedict", price: "$24", desc: "Poached farm eggs, truffle hollandaise, smoked salmon, English muffin" },
    { name: "Avocado Sourdough", price: "$18", desc: "Smashed avocado, heirloom tomatoes, feta, dukkah spice, lemon zest" },
    { name: "Belgian Waffles", price: "$20", desc: "Fresh berries, vanilla bean whipped cream, maple syrup" },
    { name: "Continental Platter", price: "$22", desc: "Selection of artisanal pastries, cured meats, cheeses, and seasonal fruit" }
  ],
  lunch: [
    { name: "Grilled Sea Bass", price: "$34", desc: "Lemon butter sauce, asparagus, herb roasted potatoes" },
    { name: "Wagyu Beef Burger", price: "$28", desc: "Brioche bun, gruyère cheese, caramelized onions, truffle fries" },
    { name: "Lobster Bisque", price: "$26", desc: "Creamy crustacean broth, cognac, chives, sourdough croutons" },
    { name: "Caesar Salad", price: "$18", desc: "Romaine hearts, parmesan crisp, anchovy dressing, grilled chicken breast" }
  ],
  dinner: [
    { name: "Filet Mignon", price: "$55", desc: "8oz prime beef, red wine reduction, potato gratin, wild mushrooms" },
    { name: "Saffron Risotto", price: "$38", desc: "Arborio rice, saffron threads, scallops, parmesan reggiano" },
    { name: "Duck Confit", price: "$42", desc: "Crispy duck leg, braised red cabbage, orange glaze" },
    { name: "Herb-Crusted Lamb", price: "$48", desc: "Rack of lamb, mint pesto, roasted root vegetables" }
  ]
};

const CHEF_DATA = {
  name: "Chef Alexander Rossi",
  role: "Executive Head Chef",
  bio: "With over 20 years of culinary excellence in Michelin-starred kitchens across Europe, Chef Rossi brings a philosophy of 'honest luxury' to Lumina. His passion lies in transforming locally sourced, seasonal ingredients into unforgettable gastronomic experiences.",
  signature: "Signature Dish: Truffle Infused Scallops"
};

const HOTEL_FACILITIES = [
  { icon: <Hotel className="w-8 h-8" />, title: "Luxury Suites", desc: "Stay in comfort after your meal." },
  { icon: <Wine className="w-8 h-8" />, title: "Rooftop Bar", desc: "Panoramic city views with cocktails." },
  { icon: <Star className="w-8 h-8" />, title: "Spa & Wellness", desc: "Rejuvenate your senses." }
];

// --- Components ---

const Navigation = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: 'Overview', href: '#overview' },
    { name: 'Menu', href: '#menu' },
    { name: 'Chef', href: '#chef' },
    { name: 'Facilities', href: '#facilities' },
    { name: 'Reservations', href: '#reservations' },
    { name: 'Contact', href: '#contact' },
  ];

  return (
    <nav className={`fixed w-full z-50 transition-all duration-300 ${isScrolled ? 'bg-white text-slate-900 shadow-md py-3' : 'bg-transparent text-white py-6'}`}>
      <div className="container mx-auto px-6 flex justify-between items-center">
        <a href="#" className="text-2xl font-serif font-bold tracking-widest uppercase">
          Lumina<span className="text-amber-500">.</span>
        </a>

        {/* Desktop Menu */}
        <div className="hidden md:flex space-x-8">
          {navLinks.map((link) => (
            <a 
              key={link.name} 
              href={link.href} 
              className={`text-sm font-medium uppercase tracking-wider hover:text-amber-500 transition-colors ${isScrolled ? 'text-slate-800' : 'text-white'}`}
            >
              {link.name}
            </a>
          ))}
        </div>

        {/* Mobile Menu Button */}
        <button className="md:hidden focus:outline-none" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
          {isMobileMenuOpen ? <X /> : <AlignRight />}
        </button>
      </div>

      {/* Mobile Menu Overlay */}
      {isMobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 w-full bg-white shadow-lg py-4 px-6 flex flex-col space-y-4 text-slate-900">
          {navLinks.map((link) => (
            <a 
              key={link.name} 
              href={link.href} 
              onClick={() => setIsMobileMenuOpen(false)}
              className="text-base font-medium border-b border-gray-100 pb-2"
            >
              {link.name}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
};

const Hero = () => {
  return (
    <div className="relative h-screen w-full overflow-hidden flex items-center justify-center">
      {/* Background Image with Overlay */}
      <div className="absolute inset-0">
        <img 
          src="https://images.unsplash.com/photo-1514362545857-3bc16549766b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" 
          alt="Elegant Restaurant Interior" 
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-slate-900/50"></div>
      </div>

      <div className="relative z-10 text-center text-white px-4 max-w-4xl mx-auto">
        <p className="text-amber-400 font-medium tracking-[0.2em] mb-4 uppercase text-sm md:text-base animate-fade-in-up">
          Welcome to The Grand Hotel
        </p>
        <h1 className="text-5xl md:text-7xl font-serif font-bold mb-6 leading-tight animate-fade-in-up delay-100">
          Taste the <span className="italic text-amber-500">Extraordinary</span>
        </h1>
        <p className="text-lg md:text-xl text-gray-200 mb-10 font-light max-w-2xl mx-auto animate-fade-in-up delay-200">
          An exquisite dining experience blending local heritage with modern culinary artistry.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up delay-300">
          <a href="#reservations" className="bg-amber-500 hover:bg-amber-600 text-white px-8 py-3 rounded-sm uppercase tracking-wider text-sm font-semibold transition-all duration-300">
            Book a Table
          </a>
          <a href="#menu" className="border border-white hover:bg-white hover:text-slate-900 text-white px-8 py-3 rounded-sm uppercase tracking-wider text-sm font-semibold transition-all duration-300">
            View Menu
          </a>
        </div>
      </div>
    </div>
  );
};

const Overview = () => {
  return (
    <section id="overview" className="py-20 bg-stone-50">
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row items-center gap-16">
          <div className="md:w-1/2">
            <div className="relative">
              <img 
                src="https://images.unsplash.com/photo-1559339352-11d035aa65de?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
                alt="Plated Dish" 
                className="w-full rounded-sm shadow-xl z-10 relative"
              />
              <div className="absolute -bottom-6 -right-6 w-2/3 h-2/3 border-4 border-amber-500/30 z-0 hidden md:block"></div>
            </div>
          </div>
          <div className="md:w-1/2 text-slate-800">
            <h2 className="text-3xl md:text-4xl font-serif font-bold mb-6">A Symphony of Flavors</h2>
            <div className="w-20 h-1 bg-amber-500 mb-8"></div>
            <p className="text-lg text-slate-600 mb-6 leading-relaxed">
              Nestled within the prestigious Grand Hotel, Lumina offers a sanctuary for food lovers. We believe that dining is not just about eating; it's an emotional experience.
            </p>
            <p className="text-lg text-slate-600 mb-8 leading-relaxed">
              From our sun-drenched breakfast conservatory to our intimate, candlelit dinner service, every moment is curated to perfection. Our ingredients are sourced from local organic farms and sustainable fisheries.
            </p>
            <div className="grid grid-cols-2 gap-6">
              <div className="flex items-center gap-3">
                <Utensils className="text-amber-500" />
                <span className="font-medium">Fine Dining</span>
              </div>
              <div className="flex items-center gap-3">
                <Coffee className="text-amber-500" />
                <span className="font-medium">Artisan Coffee</span>
              </div>
              <div className="flex items-center gap-3">
                <Wine className="text-amber-500" />
                <span className="font-medium">Curated Wine List</span>
              </div>
              <div className="flex items-center gap-3">
                <ChefHat className="text-amber-500" />
                <span className="font-medium">Master Chefs</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const MenuSection = () => {
  const [activeTab, setActiveTab] = useState('dinner');

  return (
    <section id="menu" className="py-20 bg-white">
      <div className="container mx-auto px-6 text-center">
        <span className="text-amber-500 font-bold tracking-widest uppercase text-sm">Culinary Delights</span>
        <h2 className="text-4xl font-serif font-bold mt-2 mb-12 text-slate-900">Our Menu</h2>

        <div className="flex justify-center mb-12 gap-4">
          {['breakfast', 'lunch', 'dinner'].map((meal) => (
            <button
              key={meal}
              onClick={() => setActiveTab(meal)}
              className={`px-6 py-2 rounded-full text-sm font-semibold uppercase tracking-wider transition-all duration-300 ${
                activeTab === meal 
                ? 'bg-slate-900 text-white shadow-lg' 
                : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
              }`}
            >
              {meal}
            </button>
          ))}
        </div>

        <div className="grid md:grid-cols-2 gap-x-12 gap-y-10 max-w-5xl mx-auto text-left">
          {MENU_DATA[activeTab].map((item, index) => (
            <div key={index} className="group border-b border-gray-100 pb-6 hover:border-amber-200 transition-colors">
              <div className="flex justify-between items-baseline mb-2">
                <h3 className="text-xl font-serif font-medium text-slate-900 group-hover:text-amber-600 transition-colors">{item.name}</h3>
                <span className="text-lg font-bold text-amber-500">{item.price}</span>
              </div>
              <p className="text-gray-500 italic text-sm">{item.desc}</p>
            </div>
          ))}
        </div>
        
        <div className="mt-12">
          <a href="#" className="inline-flex items-center text-slate-900 font-semibold hover:text-amber-600 transition-colors">
            View Full Menu PDF <ChevronRight size={16} className="ml-1" />
          </a>
        </div>
      </div>
    </section>
  );
};

const ChefSection = () => {
  return (
    <section id="chef" className="py-20 bg-slate-900 text-white relative overflow-hidden">
      <div className="absolute top-0 right-0 w-1/3 h-full bg-slate-800 hidden md:block skew-x-12 transform translate-x-20"></div>
      
      <div className="container mx-auto px-6 relative z-10">
        <div className="flex flex-col md:flex-row items-center gap-12">
          <div className="md:w-1/2 order-2 md:order-1">
             <span className="text-amber-500 font-bold tracking-widest uppercase text-sm">The Mastermind</span>
             <h2 className="text-4xl font-serif font-bold mt-2 mb-6">{CHEF_DATA.name}</h2>
             <h3 className="text-xl text-gray-400 mb-6 italic">{CHEF_DATA.role}</h3>
             <p className="text-gray-300 leading-relaxed mb-8 text-lg">
               {CHEF_DATA.bio}
             </p>
             <div className="p-6 border border-amber-500/30 bg-slate-800/50 rounded-sm inline-block">
               <p className="text-amber-400 font-serif text-lg italic">"{CHEF_DATA.signature}"</p>
             </div>
          </div>
          <div className="md:w-1/2 order-1 md:order-2 flex justify-center">
            <div className="relative">
              <div className="w-72 h-72 md:w-96 md:h-96 rounded-full overflow-hidden border-4 border-amber-500 shadow-2xl">
                <img 
                  src="https://images.unsplash.com/photo-1577219491135-ce391730fb2c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
                  alt="Chef Portrait" 
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="absolute bottom-4 right-4 bg-white text-slate-900 p-3 rounded-full shadow-lg">
                <Star className="w-6 h-6 fill-amber-400 text-amber-400" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Facilities = () => {
  return (
    <section id="facilities" className="py-20 bg-stone-50">
       <div className="container mx-auto px-6">
         <div className="text-center mb-16">
           <h2 className="text-3xl font-serif font-bold text-slate-900">Experience The Grand Hotel</h2>
           <p className="text-slate-600 mt-4 max-w-2xl mx-auto">Extend your visit beyond dining. Guests of Lumina enjoy privileged access to select hotel amenities.</p>
         </div>

         <div className="grid md:grid-cols-3 gap-8">
           {HOTEL_FACILITIES.map((facility, idx) => (
             <div key={idx} className="bg-white p-8 rounded-sm shadow-sm hover:shadow-xl transition-shadow duration-300 text-center group">
               <div className="inline-block p-4 bg-stone-100 rounded-full text-slate-700 mb-6 group-hover:bg-amber-500 group-hover:text-white transition-colors">
                 {facility.icon}
               </div>
               <h3 className="text-xl font-bold mb-3 text-slate-900">{facility.title}</h3>
               <p className="text-slate-500">{facility.desc}</p>
             </div>
           ))}
         </div>
       </div>
    </section>
  );
};

const ReservationForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    date: '',
    time: '',
    guests: '2',
    notes: ''
  });
  const [status, setStatus] = useState('idle'); // idle, submitting, success

  const handleSubmit = (e) => {
    e.preventDefault();
    setStatus('submitting');
    // Simulate API call
    setTimeout(() => {
      setStatus('success');
      setFormData({ name: '', email: '', date: '', time: '', guests: '2', notes: '' });
      setTimeout(() => setStatus('idle'), 5000);
    }, 1500);
  };

  return (
    <section id="reservations" className="py-20 bg-white">
      <div className="container mx-auto px-6">
        <div className="bg-slate-900 rounded-2xl overflow-hidden shadow-2xl flex flex-col md:flex-row">
          <div className="md:w-1/2 relative min-h-[400px]">
            <img 
              src="https://images.unsplash.com/photo-1550966871-3ed3c47e2ce2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" 
              alt="Dining Table" 
              className="absolute inset-0 w-full h-full object-cover opacity-80"
            />
            <div className="absolute inset-0 bg-gradient-to-r from-slate-900 to-transparent flex items-center p-12">
              <div className="text-white">
                <h3 className="text-3xl font-serif font-bold mb-4">Reserve Your Table</h3>
                <p className="mb-6 opacity-90">Book online or call us for special arrangements.</p>
                <div className="flex items-center gap-3 mb-2">
                  <Phone className="w-5 h-5 text-amber-400" />
                  <span className="font-semibold">+1 (555) 123-4567</span>
                </div>
                <div className="flex items-center gap-3">
                  <Mail className="w-5 h-5 text-amber-400" />
                  <span>reservations@luminagrand.com</span>
                </div>
              </div>
            </div>
          </div>

          <div className="md:w-1/2 p-8 md:p-12 bg-white">
            {status === 'success' ? (
              <div className="h-full flex flex-col items-center justify-center text-center p-8">
                <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mb-4">
                  <CalendarCheck size={32} />
                </div>
                <h3 className="text-2xl font-bold text-slate-800 mb-2">Reservation Confirmed!</h3>
                <p className="text-slate-600">We look forward to welcoming you to Lumina.</p>
                <button onClick={() => setStatus('idle')} className="mt-6 text-amber-600 hover:text-amber-700 font-medium">Book another table</button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Full Name</label>
                    <input 
                      required 
                      type="text" 
                      className="w-full px-4 py-2 border border-gray-300 rounded-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all"
                      value={formData.name}
                      onChange={e => setFormData({...formData, name: e.target.value})}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
                    <input 
                      required 
                      type="email" 
                      className="w-full px-4 py-2 border border-gray-300 rounded-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all"
                      value={formData.email}
                      onChange={e => setFormData({...formData, email: e.target.value})}
                    />
                  </div>
                </div>

                <div className="grid md:grid-cols-3 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Date</label>
                    <input 
                      required 
                      type="date" 
                      className="w-full px-4 py-2 border border-gray-300 rounded-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all"
                      value={formData.date}
                      onChange={e => setFormData({...formData, date: e.target.value})}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Time</label>
                    <select 
                      className="w-full px-4 py-2 border border-gray-300 rounded-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all"
                      value={formData.time}
                      onChange={e => setFormData({...formData, time: e.target.value})}
                    >
                      <option value="">Select Time</option>
                      <option value="18:00">6:00 PM</option>
                      <option value="19:00">7:00 PM</option>
                      <option value="20:00">8:00 PM</option>
                      <option value="21:00">9:00 PM</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Guests</label>
                    <select 
                      className="w-full px-4 py-2 border border-gray-300 rounded-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all"
                      value={formData.guests}
                      onChange={e => setFormData({...formData, guests: e.target.value})}
                    >
                      {[1,2,3,4,5,6,7,8].map(num => (
                        <option key={num} value={num}>{num} {num === 1 ? 'Guest' : 'Guests'}</option>
                      ))}
                    </select>
                  </div>
                </div>

                <div>
                   <label className="block text-sm font-medium text-slate-700 mb-1">Special Requests</label>
                   <textarea 
                     rows="3"
                     className="w-full px-4 py-2 border border-gray-300 rounded-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none transition-all"
                     value={formData.notes}
                     onChange={e => setFormData({...formData, notes: e.target.value})}
                     placeholder="Allergies, anniversaries, etc."
                   ></textarea>
                </div>

                <button 
                  type="submit" 
                  disabled={status === 'submitting'}
                  className="w-full bg-slate-900 text-white font-bold py-3 rounded-sm hover:bg-slate-800 transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
                >
                  {status === 'submitting' ? 'Confirming...' : 'Confirm Reservation'}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const ContactAndMap = () => {
  return (
    <section id="contact" className="py-0 relative">
      <div className="h-96 w-full bg-slate-200 relative">
         {/* Embedded Google Maps Iframe */}
        <iframe 
          title="Hotel Location"
          width="100%" 
          height="100%" 
          frameBorder="0" 
          scrolling="no" 
          marginHeight="0" 
          marginWidth="0" 
          src="https://maps.google.com/maps?q=Grand+Hotel+Central&t=&z=13&ie=UTF8&iwloc=&output=embed"
          className="grayscale opacity-80 hover:opacity-100 transition-opacity duration-500"
        ></iframe>
      </div>
      
      <div className="container mx-auto px-6 relative -mt-20 z-10 pointer-events-none">
        <div className="grid md:grid-cols-3 gap-6 pointer-events-auto">
          <div className="bg-white p-8 shadow-xl text-center">
             <div className="w-12 h-12 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-4 text-amber-500">
               <MapPin />
             </div>
             <h4 className="font-bold text-slate-900 mb-2">Location</h4>
             <p className="text-slate-600">123 Grand Boulevard,<br/>Metropolis, NY 10012</p>
          </div>
          <div className="bg-white p-8 shadow-xl text-center">
             <div className="w-12 h-12 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-4 text-amber-500">
               <Clock />
             </div>
             <h4 className="font-bold text-slate-900 mb-2">Hours</h4>
             <p className="text-slate-600 text-sm">
               <span className="block font-medium">Mon-Fri:</span> 7am - 10pm
               <span className="block font-medium mt-1">Sat-Sun:</span> 8am - 11pm
             </p>
          </div>
          <div className="bg-white p-8 shadow-xl text-center">
             <div className="w-12 h-12 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-4 text-amber-500">
               <Phone />
             </div>
             <h4 className="font-bold text-slate-900 mb-2">Contact</h4>
             <p className="text-slate-600">
               +1 (555) 123-4567<br/>
               hello@luminagrand.com
             </p>
          </div>
        </div>
      </div>
      <div className="h-20 bg-stone-50"></div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="bg-slate-900 text-white py-12 border-t border-slate-800">
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row justify-between items-center">
          <div className="mb-6 md:mb-0">
            <h2 className="text-2xl font-serif font-bold tracking-widest uppercase">
              Lumina<span className="text-amber-500">.</span>
            </h2>
            <p className="text-slate-400 text-sm mt-2">Elevated dining at The Grand Hotel.</p>
          </div>
          
          <div className="flex space-x-6 mb-6 md:mb-0">
            <a href="#" className="text-slate-400 hover:text-white transition-colors"><Facebook size={20} /></a>
            <a href="#" className="text-slate-400 hover:text-white transition-colors"><Instagram size={20} /></a>
            <a href="#" className="text-slate-400 hover:text-white transition-colors"><Twitter size={20} /></a>
          </div>
        </div>
        
        <div className="border-t border-slate-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-slate-500">
          <p>&copy; 2024 Lumina Restaurant. All Rights Reserved.</p>
          <div className="flex space-x-4 mt-4 md:mt-0">
            <a href="#" className="hover:text-slate-300">Privacy Policy</a>
            <a href="#" className="hover:text-slate-300">Terms of Service</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

// --- Main App Component ---

const App = () => {
  return (
    <div className="font-sans text-slate-900 bg-white">
      <Navigation />
      <Hero />
      <Overview />
      <MenuSection />
      <ChefSection />
      <Facilities />
      <ReservationForm />
      <ContactAndMap />
      <Footer />
    </div>
  );
};

export default App;