"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlayBottomSplit from '@/components/sections/hero/HeroOverlayBottomSplit';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ChefHat, Sparkles, Instagram, Facebook, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="large"
      sizing="mediumSizeExtraLargeSpacing"
      background="animatedAurora"
      cardStyle="spotlight"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="minimal"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "About", id: "about" },
            { name: "Menu", id: "menu" },
            { name: "Reservations", id: "contact" },
            { name: "Contact", id: "footer" }
          ]}
          brandName="Élegance"
          bottomLeftText="Fine Dining Excellence"
          bottomRightText="reservations@elegance.dining"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlayBottomSplit
          title="Experience Culinary Excellence"
          description="Discover an exquisite dining experience where culinary artistry meets refined elegance. Every dish crafted with passion and the finest ingredients."
          buttons={[
            { text: "Make a Reservation", href: "contact" },
            { text: "View Our Menu", href: "menu" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183829154-9c5vkkws.jpg"
          imageAlt="Elegant fine dining restaurant"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="Our Story"
          tagIcon={ChefHat}
          title="Crafted with passion, served with grace. A culinary journey that honors tradition while embracing innovation."
          description="Executive Chef Pierre Laurent"
          subdescription="15 years of Michelin-star excellence"
          icon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183872185-r63000od.jpg"
          imageAlt="Executive Chef"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="menu" data-section="menu">
        <ProductCardSix
          title="Signature Menu"
          description="Explore our carefully curated selection of culinary masterpieces"
          products={[
            {
              id: "1",
              name: "Pan-Seared Scallops",
              price: "$48",
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Pan-seared scallops with seasonal vegetables"
            },
            {
              id: "2",
              name: "Wagyu Beef Symphony",
              price: "$68",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183834735-9ooktc3n.jpg",
              imageAlt: "Prime wagyu beef with truffle sauce"
            },
            {
              id: "3",
              name: "Chocolate Decadence",
              price: "$16",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183836608-3tf0vxxx.jpg",
              imageAlt: "Artisanal chocolate dessert with gold leaf"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          containerStyle="default"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="An absolutely unforgettable evening. Every course was a masterpiece, the service impeccable, and the ambiance perfectly refined. We'll be returning every month."
          rating={5}
          author="Victoria & James Mitchell, Collectors"
          avatars={[
            { src: "/placeholders/placeholder1.webp", alt: "Victoria Mitchell" },
            { src: "/placeholders/placeholder1.webp", alt: "James Mitchell" },
            { src: "/placeholders/placeholder1.webp", alt: "Guest testimonial" },
            { src: "/placeholders/placeholder1.webp", alt: "Guest testimonial" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Achievements"
          description="Recognized excellence in fine dining and hospitality"
          metrics={[
            {
              id: "1",
              value: "2",
              title: "Michelin Stars",
              description: "Consecutive years of distinguished recognition",
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Fine dining achievement"
            },
            {
              id: "2",
              value: "15K+",
              title: "Satisfied Guests",
              description: "Memorable dining experiences created",
              imageSrc: "/placeholders/placeholder1.webp",
              imageAlt: "Guest satisfaction"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Reserve Your Table"
          description="Experience an evening of culinary artistry. Book your reservation today."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "date", type: "date", placeholder: "Preferred Date", required: true },
            { name: "guests", type: "number", placeholder: "Number of Guests", required: true }
          ]}
          textarea={{
            name: "specialRequests",
            placeholder: "Any dietary preferences or special occasions?",
            rows: 4,
            required: false
          }}
          useInvertedBackground="noInvert"
          buttonText="Reserve Now"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Élegance"
          copyrightText="© 2025 Élegance Fine Dining. All rights reserved."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}