"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";

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

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      {/* Navigation */}
      <nav className="fixed top-0 left-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-200">
        <div className="max-w-6xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold text-gray-900">Viva</h1>
            <div className="hidden md:flex items-center space-x-8">
              <a href="#hero" className="text-gray-700 hover:text-gray-900 transition-colors">Home</a>
              <a href="#about" className="text-gray-700 hover:text-gray-900 transition-colors">About</a>
              <a href="#menu" className="text-gray-700 hover:text-gray-900 transition-colors">Menu</a>
              <a href="#testimonials" className="text-gray-700 hover:text-gray-900 transition-colors">Reviews</a>
              <a href="#contact" className="text-gray-700 hover:text-gray-900 transition-colors">Contact</a>
              <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                Reserve Now
              </button>
            </div>
            <button 
              className="md:hidden"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <div className="w-6 h-6 flex flex-col justify-center space-y-1">
                <div className="w-full h-0.5 bg-gray-700"></div>
                <div className="w-full h-0.5 bg-gray-700"></div>
                <div className="w-full h-0.5 bg-gray-700"></div>
              </div>
            </button>
          </div>
          {isMenuOpen && (
            <div className="md:hidden mt-4 pb-4 border-t border-gray-200 pt-4">
              <div className="flex flex-col space-y-2">
                <a href="#hero" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Home</a>
                <a href="#about" className="text-gray-700 hover:text-gray-900 transition-colors py-2">About</a>
                <a href="#menu" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Menu</a>
                <a href="#testimonials" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Reviews</a>
                <a href="#contact" className="text-gray-700 hover:text-gray-900 transition-colors py-2">Contact</a>
                <button className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors mt-2 w-full">
                  Reserve Now
                </button>
              </div>
            </div>
          )}
        </div>
      </nav>

      {/* Hero Section */}
      <section id="hero" className="pt-20 min-h-screen flex items-center bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">VIVA</h1>
            <p className="text-xl text-gray-600 mb-8 leading-relaxed">
              Experience culinary excellence in an elegant atmosphere. Discover authentic flavors and impeccable service.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                Reserve Table
              </button>
              <button className="border border-gray-300 text-gray-700 px-8 py-3 rounded-lg hover:border-gray-400 transition-colors">
                Explore Menu
              </button>
            </div>
          </div>
          <div className="relative">
            <img 
              src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416778445-zl3jwowr.jpg" 
              alt="Restaurant Interior" 
              className="w-full h-96 object-cover rounded-2xl shadow-2xl"
            />
          </div>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
          <div className="relative">
            <img 
              src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766764501852-mmy7v2k1.jpg" 
              alt="Restaurant ambiance" 
              className="w-full h-96 object-cover rounded-2xl shadow-xl"
            />
          </div>
          <div>
            <div className="flex items-center gap-2 mb-4">
              <span className="text-red-500">❤️</span>
              <span className="text-sm font-medium text-gray-500 uppercase tracking-wide">About Us</span>
            </div>
            <h2 className="text-4xl font-bold text-gray-900 mb-6">Our Story</h2>
            <p className="text-lg text-gray-600 mb-8 leading-relaxed">
              Founded with a passion for culinary innovation, Viva brings together world-class cuisine, impeccable service, and an unforgettable dining experience. Every dish is crafted with precision and love.
            </p>
            <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
              Join us
            </button>
          </div>
        </div>
      </section>

      {/* Menu Section */}
      <section id="menu" className="py-20 bg-gray-50">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-16">
            <span className="text-sm font-medium text-gray-500 uppercase tracking-wide">Menu</span>
            <h2 className="text-4xl font-bold text-gray-900 mt-2 mb-4">Signature Specialties</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Indulge in our carefully curated selection of dishes that define Viva's culinary identity
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760339172-wtq2r8qq.jpg" 
                alt="Signature Pasta Dish" 
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Handmade Pasta</h3>
                <p className="text-gray-600">Traditional Italian pasta prepared fresh daily with premium ingredients. 5 stars</p>
              </div>
            </div>
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760341776-od1mgbjg.jpg" 
                alt="Seafood Specialty" 
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Fresh Seafood</h3>
                <p className="text-gray-600">Ocean-to-table selections featuring the finest catch of the day. 5 stars</p>
              </div>
            </div>
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766760342753-3muw0pvy.jpg" 
                alt="Premium Dessert" 
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Decadent Desserts</h3>
                <p className="text-gray-600">Artisanal sweet creations that end your meal on a perfect note. 5 stars</p>
              </div>
            </div>
            <div className="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
              <img 
                src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766416782593-h8zdw91t.jpg" 
                alt="Prime Steak Selection" 
                className="w-full h-48 object-cover"
              />
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">Premium Steaks</h3>
                <p className="text-gray-600">Expertly aged cuts grilled to perfection with signature preparations. 5 stars</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-20 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">What Our Guests Say</h2>
            <p className="text-xl text-gray-600 max-w-2xl mx-auto">
              Hear from those who have experienced Viva's culinary excellence
            </p>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div className="bg-gray-50 rounded-2xl p-6">
              <div className="flex items-center gap-3 mb-4">
                <img 
                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg" 
                  alt="Margaret Chen" 
                  className="w-12 h-12 rounded-full object-cover"
                />
                <div>
                  <h4 className="font-semibold text-gray-900">Margaret Chen</h4>
                  <p className="text-sm text-gray-500">@margaretchen</p>
                </div>
              </div>
              <div className="flex mb-3">
                <span className="text-yellow-400">⭐⭐⭐⭐⭐</span>
              </div>
              <p className="text-gray-600">
                Viva has become our favorite restaurant. The food is exceptional, the service is impeccable, and the atmosphere is simply perfect. We celebrate every special occasion here.
              </p>
            </div>
            <div className="bg-gray-50 rounded-2xl p-6">
              <div className="flex items-center gap-3 mb-4">
                <img 
                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766492697041-9adqfrju.jpg" 
                  alt="James Wilson" 
                  className="w-12 h-12 rounded-full object-cover"
                />
                <div>
                  <h4 className="font-semibold text-gray-900">James Wilson</h4>
                  <p className="text-sm text-gray-500">@jameswilson</p>
                </div>
              </div>
              <div className="flex mb-3">
                <span className="text-yellow-400">⭐⭐⭐⭐⭐</span>
              </div>
              <p className="text-gray-600">
                Outstanding culinary experience. The chef's attention to detail is remarkable, and every course was a masterpiece.
              </p>
            </div>
            <div className="bg-gray-50 rounded-2xl p-6">
              <div className="flex items-center gap-3 mb-4">
                <img 
                  src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766502911819-f5rnce5q.jpg" 
                  alt="Sofia Rodriguez" 
                  className="w-12 h-12 rounded-full object-cover"
                />
                <div>
                  <h4 className="font-semibold text-gray-900">Sofia Rodriguez</h4>
                  <p className="text-sm text-gray-500">@sofiar</p>
                </div>
              </div>
              <div className="flex mb-3">
                <span className="text-yellow-400">⭐⭐⭐⭐⭐</span>
              </div>
              <p className="text-gray-600">
                The finest dining experience in the city. Worth every penny for the quality and sophistication.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-gray-50">
        <div className="max-w-6xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16">
            <div>
              <h2 className="text-4xl font-bold text-gray-900 mb-8">Frequently Asked Questions</h2>
              <div className="space-y-6">
                <div className="bg-white rounded-xl p-6 shadow-sm">
                  <h3 className="font-semibold text-gray-900 mb-2">How far in advance should I make a reservation?</h3>
                  <p className="text-gray-600">We recommend reservations at least 2-3 weeks in advance for optimal table selection. However, we do accommodate walk-ins based on availability.</p>
                </div>
                <div className="bg-white rounded-xl p-6 shadow-sm">
                  <h3 className="font-semibold text-gray-900 mb-2">Do you offer private dining options?</h3>
                  <p className="text-gray-600">Yes, we offer exclusive private dining experiences for special occasions. Please contact us directly to discuss your event requirements.</p>
                </div>
                <div className="bg-white rounded-xl p-6 shadow-sm">
                  <h3 className="font-semibold text-gray-900 mb-2">What is your dress code?</h3>
                  <p className="text-gray-600">Smart casual is recommended. Jackets are appreciated but not required. We want our guests to feel comfortable while maintaining our refined atmosphere.</p>
                </div>
              </div>
            </div>
            <div className="bg-white rounded-2xl p-8 shadow-lg">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-blue-600">📅</span>
                <h3 className="text-2xl font-bold text-gray-900">Reserve Your Table</h3>
              </div>
              <p className="text-gray-600 mb-6">
                Book your next culinary experience at Viva. Experience excellence with every bite.
              </p>
              <button className="w-full bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
                Book Now
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer id="footer" className="py-16 bg-gray-900 text-white">
        <div className="max-w-6xl mx-auto px-6">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-2xl font-bold mb-4">Viva</h3>
              <p className="text-gray-400">© 2025 Viva Restaurant. All rights reserved.</p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Restaurant</h4>
              <div className="space-y-2">
                <a href="#about" className="block text-gray-400 hover:text-white transition-colors">About Us</a>
                <a href="#menu" className="block text-gray-400 hover:text-white transition-colors">Menu</a>
                <a href="#contact" className="block text-gray-400 hover:text-white transition-colors">Reservations</a>
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Visit</h4>
              <div className="space-y-2">
                <a href="#" className="block text-gray-400 hover:text-white transition-colors">Hours</a>
                <a href="#" className="block text-gray-400 hover:text-white transition-colors">Location</a>
                <a href="#" className="block text-gray-400 hover:text-white transition-colors">Private Dining</a>
              </div>
            </div>
            <div>
              <h4 className="font-semibold mb-4">Connect</h4>
              <div className="flex space-x-4">
                <a href="https://instagram.com" className="text-gray-400 hover:text-white transition-colors" aria-label="Instagram">
                  📷
                </a>
                <a href="https://facebook.com" className="text-gray-400 hover:text-white transition-colors" aria-label="Facebook">
                  📘
                </a>
                <a href="https://linkedin.com" className="text-gray-400 hover:text-white transition-colors" aria-label="LinkedIn">
                  💼
                </a>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </ThemeProvider>
  );
}