"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="large"
      sizing="largeSizeExtraLargeSpacing"
      background="aurora"
      cardStyle="shadow-colored"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <div className="p-8">
          <h1 className="text-2xl font-bold">Steak & Love</h1>
          <nav className="mt-4">
            <ul className="flex space-x-6">
              <li><a href="#hero" className="hover:text-gray-600">Home</a></li>
              <li><a href="#about" className="hover:text-gray-600">Our History</a></li>
              <li><a href="#menu" className="hover:text-gray-600">Menu</a></li>
              <li><a href="#testimonials" className="hover:text-gray-600">Reviews</a></li>
              <li><a href="#contact" className="hover:text-gray-600">Reserve</a></li>
            </ul>
          </nav>
        </div>
      </div>
      
      <div id="hero" data-section="hero">
        <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-amber-100 to-orange-200">
          <div className="text-center px-8">
            <h1 className="text-6xl font-bold mb-6 text-gray-800">STEAK & LOVE</h1>
            <p className="text-xl mb-8 max-w-2xl mx-auto text-gray-700">
              Premium grilled perfection in every bite. From handpicked cuts to expert preparation, we craft the finest steakhouse experience. Reserve your table for an unforgettable evening.
            </p>
            <div className="flex gap-4 justify-center">
              <a href="#contact" className="bg-red-600 text-white px-8 py-3 rounded-full hover:bg-red-700 transition-colors">Reserve Now</a>
              <a href="#menu" className="bg-white text-red-600 border-2 border-red-600 px-8 py-3 rounded-full hover:bg-red-50 transition-colors">View Menu</a>
            </div>
          </div>
        </div>
      </div>
      
      <div id="about" data-section="about">
        <div className="py-16 px-8">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-4xl font-bold mb-8 text-gray-800">Our Story</h2>
            <p className="text-lg text-gray-600 leading-relaxed">
              Crafted Excellence meets timeless tradition at Steak & Love. We believe in sourcing the finest beef, aging it to perfection, and grilling it with passion. Our heritage spans over two decades of dedicated service.
            </p>
            <div className="mt-8">
              <a href="#" className="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition-colors">Our History</a>
            </div>
          </div>
        </div>
      </div>
      
      <div id="menu" data-section="menu">
        <div className="py-16 px-8 bg-gray-50">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <span className="inline-block bg-red-100 text-red-800 px-4 py-2 rounded-full text-sm font-medium mb-4">Premium Offerings</span>
              <h2 className="text-4xl font-bold mb-6 text-gray-800">Signature Selections</h2>
              <p className="text-lg text-gray-600 max-w-3xl mx-auto">
                Discover our meticulously crafted signature selections, featuring premium cuts aged to absolute perfection. Each dish represents our culinary mastery, blending traditional steakhouse excellence with innovative preparation techniques.
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402516921-vpmy34lv.jpg" alt="Signature premium steak" className="w-full h-48 object-cover" />
                <div className="p-4">
                  <h3 className="font-semibold text-gray-800">Premium Cuts</h3>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402517785-zwa4dhhq.jpg" alt="Grilled ribs" className="w-full h-48 object-cover" />
                <div className="p-4">
                  <h3 className="font-semibold text-gray-800">Signature Ribs</h3>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402518744-cskcaoc8.jpg" alt="Gourmet side dishes" className="w-full h-48 object-cover" />
                <div className="p-4">
                  <h3 className="font-semibold text-gray-800">Gourmet Sides</h3>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766403043544-zy98pt2q.jpg" alt="Wine pairings" className="w-full h-48 object-cover" />
                <div className="p-4">
                  <h3 className="font-semibold text-gray-800">Wine Selection</h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <div className="py-16 px-8">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl font-bold mb-6 text-gray-800">What Our Guests Say</h2>
              <p className="text-lg text-gray-600">Discover why Steak & Love is the premier destination for discerning diners and special occasions.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="bg-white rounded-lg shadow-lg p-6">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg" alt="Michael Chen" className="w-12 h-12 rounded-full mr-4" />
                  <div>
                    <h4 className="font-semibold text-gray-800">Michael Chen</h4>
                    <p className="text-sm text-gray-600">Chef & Food Critic</p>
                  </div>
                </div>
                <p className="text-gray-600 mb-4">"Steak & Love delivers an exceptional dining experience. The quality of their beef is outstanding, and the grilling technique is masterful."</p>
                <span className="text-sm bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full">Five Stars</span>
              </div>
              <div className="bg-white rounded-lg shadow-lg p-6">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140151637-4n68pd8r.jpg" alt="Sarah Williams" className="w-12 h-12 rounded-full mr-4" />
                  <div>
                    <h4 className="font-semibold text-gray-800">Sarah Williams</h4>
                    <p className="text-sm text-gray-600">Restaurant Owner</p>
                  </div>
                </div>
                <p className="text-gray-600 mb-4">"I have dined at steakhouses around the world, and Steak & Love ranks among the very best. The attention to detail is remarkable."</p>
                <span className="text-sm bg-green-100 text-green-800 px-3 py-1 rounded-full">Highly Recommended</span>
              </div>
              <div className="bg-white rounded-lg shadow-lg p-6">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg" alt="David Martinez" className="w-12 h-12 rounded-full mr-4" />
                  <div>
                    <h4 className="font-semibold text-gray-800">David Martinez</h4>
                    <p className="text-sm text-gray-600">Corporate Executive</p>
                  </div>
                </div>
                <p className="text-gray-600 mb-4">"The ambiance, service, and food create an ideal setting for important business meetings. Our clients were thoroughly impressed."</p>
                <span className="text-sm bg-blue-100 text-blue-800 px-3 py-1 rounded-full">Business Dining</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div id="contact" data-section="contact">
        <div className="py-16 px-8 bg-red-50">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-4xl font-bold mb-6 text-gray-800">Ready to Reserve?</h2>
            <p className="text-xl mb-8 text-gray-700">Send message for us for hot reserve for your party</p>
            <div className="flex gap-4 justify-center">
              <a href="#" className="bg-red-600 text-white px-8 py-3 rounded-full hover:bg-red-700 transition-colors">Hot reserve</a>
              <a href="tel:+1234567890" className="bg-white text-red-600 border-2 border-red-600 px-8 py-3 rounded-full hover:bg-red-50 transition-colors">Call Us</a>
            </div>
          </div>
        </div>
      </div>
      
      <div id="footer" data-section="footer">
        <div className="bg-gray-800 text-white py-12 px-8">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <h3 className="text-2xl font-bold mb-4 text-yellow-400">Steak & Love</h3>
                <p className="text-gray-300">Premium steakhouse experience since 2005</p>
              </div>
              <div>
                <h4 className="text-lg font-semibold mb-4">Hours</h4>
                <ul className="space-y-2 text-gray-300">
                  <li>Monday - Thursday: 5PM - 11PM</li>
                  <li>Friday - Saturday: 5PM - 12AM</li>
                  <li>Sunday: 5PM - 10PM</li>
                </ul>
              </div>
              <div>
                <h4 className="text-lg font-semibold mb-4">Location</h4>
                <ul className="space-y-2 text-gray-300">
                  <li>123 Prime Street</li>
                  <li>Downtown District</li>
                  <li><a href="tel:+15551234567" className="hover:text-yellow-400">(555) 123-4567</a></li>
                </ul>
              </div>
              <div>
                <h4 className="text-lg font-semibold mb-4">Dining</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#" className="hover:text-yellow-400">Reservations</a></li>
                  <li><a href="#" className="hover:text-yellow-400">Private Events</a></li>
                  <li><a href="#" className="hover:text-yellow-400">Gift Cards</a></li>
                </ul>
              </div>
            </div>
            <div className="border-t border-gray-700 mt-8 pt-8 text-center">
              <p className="text-yellow-400">© Steak & Love Restaurant, 2025. All rights reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}