"use client";

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

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="aurora"
      cardStyle="spotlight"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div className="min-h-screen bg-gradient-to-br from-amber-50 via-white to-orange-50">
        <div className="text-center py-20 px-4">
          <h1 className="text-4xl font-bold mb-4 text-gray-900">My Day Coffee Shop</h1>
          <p className="text-lg text-gray-600 mb-8">Premium artisan coffee and cozy atmosphere</p>
          <div className="space-y-4">
            <button className="bg-amber-600 text-white px-6 py-3 rounded-lg hover:bg-amber-700 transition-colors">
              View Menu
            </button>
            <br />
            <button className="border border-amber-600 text-amber-600 px-6 py-3 rounded-lg hover:bg-amber-50 transition-colors">
              Book a Table
            </button>
          </div>
        </div>
        
        <div className="max-w-6xl mx-auto px-4 py-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-900">Our Story</h2>
            <p className="text-lg text-gray-600">Crafted with passion, served with love. My Day coffeeshop is where quality meets comfort.</p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-xl font-semibold mb-2">Signature Espresso</h3>
              <p className="text-gray-600 mb-2">Rich, bold, and perfectly balanced</p>
              <p className="text-lg font-bold text-amber-600">$4.50</p>
            </div>
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-xl font-semibold mb-2">Cappuccino Classico</h3>
              <p className="text-gray-600 mb-2">Creamy foam art masterpiece</p>
              <p className="text-lg font-bold text-amber-600">$5.50</p>
            </div>
            <div className="bg-white rounded-lg shadow-md p-6">
              <h3 className="text-xl font-semibold mb-2">Cold Brew Blend</h3>
              <p className="text-gray-600 mb-2">Smooth and refreshing</p>
              <p className="text-lg font-bold text-amber-600">$5.00</p>
            </div>
          </div>
          
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4 text-gray-900">What Our Customers Say</h2>
            <p className="text-lg text-gray-600">Over 5,000 happy customers enjoy our coffee and atmosphere every month</p>
          </div>
          
          <div className="bg-white rounded-lg shadow-md p-8 text-center">
            <h2 className="text-3xl font-bold mb-4 text-gray-900">Get In Touch</h2>
            <p className="text-lg text-gray-600 mb-8">Ready to join us for your perfect coffee moment? Get in touch to book a table or learn more about our offerings.</p>
            <div className="space-x-4">
              <a href="mailto:hello@myday.coffee" className="bg-amber-600 text-white px-6 py-3 rounded-lg hover:bg-amber-700 transition-colors inline-block">
                Send us a Message
              </a>
              <a href="tel:+1-555-123-4567" className="border border-amber-600 text-amber-600 px-6 py-3 rounded-lg hover:bg-amber-50 transition-colors inline-block">
                Call Us
              </a>
            </div>
          </div>
        </div>
        
        <footer className="bg-gray-900 text-white py-12">
          <div className="max-w-6xl mx-auto px-4 text-center">
            <h3 className="text-2xl font-bold mb-4">My Day</h3>
            <div className="grid md:grid-cols-3 gap-8">
              <div>
                <h4 className="font-semibold mb-2">Navigation</h4>
                <ul className="space-y-1">
                  <li><a href="#home" className="text-gray-300 hover:text-white">Home</a></li>
                  <li><a href="#about" className="text-gray-300 hover:text-white">About</a></li>
                  <li><a href="#menu" className="text-gray-300 hover:text-white">Menu</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-2">Contact</h4>
                <ul className="space-y-1">
                  <li><a href="#contact" className="text-gray-300 hover:text-white">Contact</a></li>
                  <li><a href="https://maps.google.com" className="text-gray-300 hover:text-white">Locations</a></li>
                  <li><a href="/privacy" className="text-gray-300 hover:text-white">Privacy Policy</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-2">Social</h4>
                <ul className="space-y-1">
                  <li><a href="https://instagram.com" className="text-gray-300 hover:text-white">Instagram</a></li>
                  <li><a href="https://facebook.com" className="text-gray-300 hover:text-white">Facebook</a></li>
                  <li><a href="https://twitter.com" className="text-gray-300 hover:text-white">Twitter</a></li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </ThemeProvider>
  );
}