"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TextAbout from '@/components/sections/about/TextAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="neon-glow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Luxe Hotel"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Experience Luxury Hospitality"
          description="Discover our world-class accommodations and exceptional service in the heart of the city"
          tag="Welcome to Luxe"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
          imageAlt="Luxury hotel lobby"
          textPosition="bottom-left"
          showDimOverlay={true}
          showBlur={true}
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Crafted for Discerning Travelers Who Demand Excellence"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardTwo
          title="Our Room Collection"
          description="Choose from our carefully designed rooms and suites, each offering unique comfort and elegance"
          tag="Accommodations"
          products={[
            {
              id: "1",
              brand: "Luxe Hotel",
              name: "Standard Room",
              price: "$120/night",
              rating: 4,
              reviewCount: "2.1k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837634719-5otl8omu.jpg",
              imageAlt: "Standard Room"
            },
            {
              id: "2",
              brand: "Luxe Hotel",
              name: "Deluxe Suite",
              price: "$220/night",
              rating: 5,
              reviewCount: "3.8k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Deluxe Suite"
            },
            {
              id: "3",
              brand: "Luxe Hotel",
              name: "Presidential Suite",
              price: "$450/night",
              rating: 5,
              reviewCount: "1.9k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718910-pnoqmtth.jpg",
              imageAlt: "Presidential Suite"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardSix
          title="World-Class Amenities"
          description="Indulge in our premium facilities designed for your ultimate relaxation and rejuvenation"
          tag="Facilities"
          features={[
            {
              id: 1,
              title: "Luxury Spa",
              description: "Rejuvenate with our full-service spa offering massage therapy, facials, and wellness treatments",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg"
            },
            {
              id: 2,
              title: "Fine Dining Restaurant",
              description: "Experience culinary excellence in our award-winning restaurant with international cuisine",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg"
            },
            {
              id: 3,
              title: "Olympic Pool",
              description: "Swim, relax, or sunbathe in our elegant heated swimming pool with cabanas",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="stats" data-section="stats">
        <MetricCardTwo
          title="Why Choose Luxe Hotel"
          description="Industry-leading service and customer satisfaction"
          metrics={[
            {
              id: "1",
              value: "25+",
              description: "Years of Excellence"
            },
            {
              id: "2",
              value: "98%",
              description: "Guest Satisfaction"
            },
            {
              id: "3",
              value: "250+",
              description: "Rooms & Suites"
            },
            {
              id: "4",
              value: "5★",
              description: "Average Rating"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Guest Reviews"
          description="Hear what our valued guests have to say about their experiences"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell, CEO of Global Tech",
              date: "Date: 15 November 2024",
              title: "An Unforgettable Stay",
              quote: "The service at Luxe Hotel was impeccable. Every detail was perfectly executed, from the moment we arrived until our departure. The staff went above and beyond to make our stay memorable.",
              tag: "Business Travel",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767265384191-qitcfqiq.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767042152041-ve4nrkbs.jpg"
            },
            {
              id: "2",
              name: "Michael Chen, Travel Enthusiast",
              date: "Date: 10 November 2024",
              title: "Luxury Redefined",
              quote: "I have stayed at many hotels worldwide, but Luxe Hotel truly stands out. The rooms are beautifully appointed, the amenities are top-notch, and the hospitality is exceptional.",
              tag: "Leisure Travel",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766932172043-f8olo4mi.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767265382725-tihxq4v8.jpg"
            },
            {
              id: "3",
              name: "Emily Rodriguez, Wedding Planner",
              date: "Date: 5 November 2024",
              title: "Perfect for Special Events",
              quote: "We hosted our destination wedding at Luxe Hotel and it was perfect. The venue was stunning, the food was incredible, and the entire team made sure everything ran smoothly.",
              tag: "Event Hosting",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766824446101-3mycrcym.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837635686-iqflxt2s.jpg"
            },
            {
              id: "4",
              name: "David Kim, Restaurant Critic",
              date: "Date: 1 November 2024",
              title: "Culinary Excellence",
              quote: "The fine dining experience at Luxe Hotel's restaurant is outstanding. The chef's innovative dishes, paired with an extensive wine selection, made it an evening to remember.",
              tag: "Dining",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767038925985-1lyf1u1j.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766243008667-twrhhm4j.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Book Your Luxury Stay Today"
          description="Contact us to reserve your perfect room and experience world-class hospitality at Luxe Hotel"
          useInvertedBackground="noInvert"
          inputPlaceholder="Your email address"
          buttonText="Reserve Now"
          termsText="By booking with us, you agree to our Terms and Conditions. We respect your privacy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Luxe Hotel"
        />
      </div>
    </ThemeProvider>
  );
}