"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import ContactText from '@/components/sections/contact/ContactText';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Savour"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Menu", id: "menu" },
            { name: "Gallery", id: "gallery" },
            { name: "Reservations", id: "reservation" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Fine Dining Experience"
          bottomRightText="hello@savourrestaurant.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Welcome to Savour"
          description="Experience culinary excellence in an atmosphere of refined elegance. Discover exceptional dishes crafted with the finest ingredients and creative passion."
          background={{ variant: "downward-rays-static" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/grey-painted-fancy-restaurant-with-empty-dinner-table_140725-8730.jpg", alt: "Fine dining restaurant interior" }
          ]}
          avatarText="Award-winning cuisine since 2010"
          buttons={[
            { text: "Reserve Now", href: "reservation" },
            { text: "View Menu", href: "menu" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Our Story"
          description="Savour represents more than a decade of culinary passion and dedication to exceptional dining."
          tabs={[
            {
              id: "philosophy",              label: "Our Philosophy",              description: "We believe in sourcing the finest ingredients from local and international suppliers, honoring traditional cooking techniques while embracing modern innovation. Every dish is crafted with intention and served with impeccable presentation."
            },
            {
              id: "experience",              label: "Chef's Vision",              description: "Our head chef brings decades of experience from Michelin-starred restaurants across Europe. Their vision guides every menu creation, ensuring each course tells a story of flavor, technique, and artistry."
            },
            {
              id: "commitment",              label: "Our Commitment",              description: "We are committed to sustainability, supporting local farmers, and reducing our environmental footprint. Excellence extends beyond the plate to encompass our entire operation and community relationships."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/grey-painted-fancy-restaurant-with-empty-dinner-table_140725-8729.jpg"
          imageAlt="Our talented culinary team"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="menu" data-section="menu">
        <FeatureCardSeven
          title="Our Menu"
          description="Explore our curated selection of dishes, each masterfully prepared to showcase seasonal ingredients and innovative flavor combinations."
          tag="Culinary Excellence"
          features={[
            {
              id: 1,
              title: "Appetizers",              description: "Elegant starters that awaken the palate. From delicate seafood preparations to rich terrines, each appetizer sets the stage for an unforgettable meal.",              imageSrc: "https://img.b2bpic.net/free-photo/small-party-sandwiches-white-square-plate_114579-2171.jpg",              imageAlt: "Gourmet appetizers presentation"
            },
            {
              id: 2,
              title: "Main Courses",              description: "Our signature entrees feature premium proteins and vegetables prepared with precision. Each plate is a masterpiece of flavor, technique, and presentation.",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-cooked-squashes-designed-meal-inside-plate-dark-grey-space_140725-83767.jpg",              imageAlt: "Premium main course dishes"
            },
            {
              id: 3,
              title: "Desserts",              description: "End your meal on a sweet note with our artisanal desserts. Crafted by our pastry chef, each creation combines classic elegance with contemporary flair.",              imageSrc: "https://img.b2bpic.net/free-photo/grilled-tuna-with-avocado-tomatoes-greens-sesame-sauce-bread-glass-tarhun-lemonade-table_140725-10940.jpg",              imageAlt: "Elegant plated desserts"
            }
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Download Full Menu", href: "#" }
          ]}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardThree
          title="Photo Gallery"
          description="Immerse yourself in the ambiance and artistry of Savour through our curated collection of restaurant moments and culinary creations."
          tag="Visual Journey"
          products={[
            {
              id: "1",              name: "Dining Ambiance",              price: "$∞",              imageSrc: "https://img.b2bpic.net/free-photo/wonderful-wedding-table-amazing-restaurant_8353-9875.jpg",              imageAlt: "Elegant restaurant dining room"
            },
            {
              id: "2",              name: "Artisan Plating",              price: "$∞",              imageSrc: "https://img.b2bpic.net/free-photo/small-slice-pizza-with-shrimp_140725-896.jpg",              imageAlt: "Gourmet plated creation"
            },
            {
              id: "3",              name: "Wine Selection",              price: "$∞",              imageSrc: "https://img.b2bpic.net/free-photo/bottles-tasty-wine-posh-reastoraunt-are-stored-shelf_613910-17445.jpg",              imageAlt: "Fine wine collection"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="reservation" data-section="reservation">
        <ContactText
          text="Reserve your table and experience an evening of culinary excellence. Book your seat at Savour today."
          animationType="background-highlight"
          buttons={[
            { text: "Reserve Your Table", href: "#" },
            { text: "Contact Us", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Guest Reviews"
          description="Hear from our satisfied diners who have experienced the magic of Savour."
          tag="Testimonials"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Food Critic",              company: "Gourmet Magazine",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Chen",              role: "Executive",              company: "Corporate Events",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",              imageAlt: "James Chen"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Wine Connoisseur",              company: "Sommelier Society",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "Elena Rodriguez"
            }
          ]}
          kpiItems={[
            { value: "500+", label: "Happy guests annually" },
            { value: "15+", label: "Years of excellence" },
            { value: "100%", label: "Satisfaction guaranteed" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Get in touch with us. Visit Savour for an unforgettable dining experience or contact us with any questions."
          animationType="entrance-slide"
          buttons={[
            { text: "Email Us", href: "#" },
            { text: "Call Now", href: "#" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Savour"
          columns={[
            {
              items: [
                { label: "Home", href: "hero" },
                { label: "Menu", href: "menu" },
                { label: "Gallery", href: "gallery" }
              ]
            },
            {
              items: [
                { label: "Reservations", href: "reservation" },
                { label: "Contact", href: "contact" },
                { label: "About", href: "about" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Reviews", href: "https://google.com/maps" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}