import Link from 'next/link';
import MainLayout from '@/components/layouts/MainLayout';

export default function Home() {
  return (
    <MainLayout>
      {/* Hero section */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-6">
            Experience the <span className="text-primary">Finest</span> Cuisine
          </h1>
          <p className="text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
            Welcome to our restaurant, where we serve delicious meals made with fresh ingredients and a passion for culinary excellence.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href="/menu"
              className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
            >
              View Menu
            </Link>
            <Link
              href="/reservations"
              className="px-6 py-3 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-md hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"
            >
              Book a Table
            </Link>
          </div>
        </div>
      </section>

      {/* Featured Menu Items */}
      <section className="py-16 bg-gray-50 dark:bg-slate-800/50">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold mb-12 text-center">Featured Menu Items</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Item 1 */}
            <div className="bg-white dark:bg-slate-800 rounded-lg overflow-hidden shadow-md">
              <div className="h-48 bg-gray-300 dark:bg-gray-700"></div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">Signature Pasta</h3>
                <p className="text-gray-600 dark:text-gray-400 mb-4">
                  Handmade pasta with our special sauce and fresh herbs.
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold">$18.99</span>
                  <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    Order Now
                  </button>
                </div>
              </div>
            </div>

            {/* Item 2 */}
            <div className="bg-white dark:bg-slate-800 rounded-lg overflow-hidden shadow-md">
              <div className="h-48 bg-gray-300 dark:bg-gray-700"></div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">Premium Steak</h3>
                <p className="text-gray-600 dark:text-gray-400 mb-4">
                  Juicy, tender steak cooked to perfection with seasonal vegetables.
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold">$29.99</span>
                  <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    Order Now
                  </button>
                </div>
              </div>
            </div>

            {/* Item 3 */}
            <div className="bg-white dark:bg-slate-800 rounded-lg overflow-hidden shadow-md">
              <div className="h-48 bg-gray-300 dark:bg-gray-700"></div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">Seafood Delight</h3>
                <p className="text-gray-600 dark:text-gray-400 mb-4">
                  Fresh seafood mix with special spices and lemon butter sauce.
                </p>
                <div className="flex justify-between items-center">
                  <span className="text-lg font-bold">$24.99</span>
                  <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    Order Now
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="text-center mt-12">
            <Link
              href="/menu"
              className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
            >
              View Full Menu
            </Link>
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-16">
        <div className="container mx-auto">
          <div className="flex flex-col md:flex-row items-center gap-12">
            <div className="md:w-1/2">
              <div className="h-80 bg-gray-300 dark:bg-gray-700 rounded-lg"></div>
            </div>
            <div className="md:w-1/2">
              <h2 className="text-3xl font-bold mb-6">Our Story</h2>
              <p className="text-gray-600 dark:text-gray-400 mb-4">
                Founded in 2010, our restaurant has been serving the community with delicious meals made from the freshest ingredients. Our chefs are passionate about creating unforgettable dining experiences.
              </p>
              <p className="text-gray-600 dark:text-gray-400 mb-6">
                We believe in sustainable practices and source our ingredients from local farmers and suppliers whenever possible.
              </p>
              <Link
                href="/about"
                className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
              >
                Learn More
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-16 bg-gray-50 dark:bg-slate-800/50">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold mb-12 text-center">What Our Customers Say</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Testimonial 1 */}
            <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-gray-300 dark:bg-gray-700 rounded-full mr-4"></div>
                <div>
                  <h3 className="font-bold">John Smith</h3>
                  <div className="flex text-yellow-400">
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                  </div>
                </div>
              </div>
              <p className="text-gray-600 dark:text-gray-400">
                "The food was amazing and the service was exceptional. I will definitely be coming back!"
              </p>
            </div>

            {/* Testimonial 2 */}
            <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-gray-300 dark:bg-gray-700 rounded-full mr-4"></div>
                <div>
                  <h3 className="font-bold">Sarah Johnson</h3>
                  <div className="flex text-yellow-400">
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                  </div>
                </div>
              </div>
              <p className="text-gray-600 dark:text-gray-400">
                "Perfect place for a special occasion. The ambiance was lovely and the food was delicious."
              </p>
            </div>

            {/* Testimonial 3 */}
            <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-gray-300 dark:bg-gray-700 rounded-full mr-4"></div>
                <div>
                  <h3 className="font-bold">Michael Brown</h3>
                  <div className="flex text-yellow-400">
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                    <span>★</span>
                  </div>
                </div>
              </div>
              <p className="text-gray-600 dark:text-gray-400">
                "I've tried many restaurants in the area, but this one stands out. The flavors are authentic and the staff is friendly."
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Call to Action */}
      <section className="py-16 bg-primary text-white">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">Ready to Experience Our Cuisine?</h2>
          <p className="text-xl mb-8 max-w-3xl mx-auto">
            Book your table now or order online for pickup or delivery.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href="/reservations"
              className="px-6 py-3 bg-white text-primary font-bold rounded-md hover:bg-gray-100 transition-colors"
            >
              Book a Table
            </Link>
            <Link
              href="/menu"
              className="px-6 py-3 bg-transparent border-2 border-white rounded-md hover:bg-white/10 transition-colors"
            >
              Order Online
            </Link>
          </div>
        </div>
      </section>
    </MainLayout>
  );
}