"use client"

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="animatedGrid"
      cardStyle="elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Stay"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Welcome to Luxury Comfort"
          description="Experience world-class hospitality in our beautifully designed rooms and suites. Your perfect getaway awaits."
          tag="Premium Accommodations"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxury hotel room with elegant furnishings"
          buttons={[
            { text: "Book Your Stay", href: "contact" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Our Story"
          description={[
            "For over a decade, Luxe Stay has been the preferred destination for travelers seeking authentic comfort and world-class service. Our commitment to excellence is reflected in every detail of your stay.",
            "We believe that a great hotel experience goes beyond just a room. It's about creating memories, providing exceptional service, and ensuring every guest leaves feeling truly cared for."
          ]}
          useInvertedBackground="noInvert"
          showBorder={false}
          buttons={[
            { text: "Learn More About Us", href: "#" }
          ]}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardTwenty
          title="World-Class Amenities"
          description="From our sparkling pool to our full-service spa, every facility is designed to ensure your comfort and relaxation."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          images={[
            {
              id: 1,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766267249367-b2xzeajg.jpg",
              imageAlt: "Olympic-sized swimming pool"
            },
            {
              id: 2,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767211009135-qblk6kbu.jpg",
              imageAlt: "Luxury spa and wellness center"
            },
            {
              id: 3,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766267247059-zrs932fz.jpg",
              imageAlt: "Fine dining restaurant"
            }
          ]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardTwo
          title="Our Room Selection"
          description="Choose from our carefully curated selection of rooms designed for every type of traveler."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",
              brand: "Luxe Stay",
              name: "Standard Room",
              price: "$129/night",
              rating: 4,
              reviewCount: "892",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Standard hotel room"
            },
            {
              id: "2",
              brand: "Luxe Stay",
              name: "Deluxe Suite",
              price: "$199/night",
              rating: 5,
              reviewCount: "1.2k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Deluxe suite with ocean view"
            },
            {
              id: "3",
              brand: "Luxe Stay",
              name: "Presidential Suite",
              price: "$349/night",
              rating: 5,
              reviewCount: "456",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Presidential suite luxury"
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardEleven
          title="What Our Guests Say"
          description="Thousands of travelers have made memories at Luxe Stay. Here are their stories."
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              nameTitle: "Sarah Mitchell, Travel Blogger",
              quote: "The attention to detail at Luxe Stay is exceptional. Every room, every service, every interaction felt thoughtfully designed. I'll definitely be back.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Sarah Mitchell portrait"
            },
            {
              id: "2",
              nameTitle: "James Rodriguez, Business Executive",
              quote: "Perfect for business trips and family vacations alike. The staff is incredibly professional and the facilities are top-notch. Highly recommended.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "James Rodriguez portrait"
            },
            {
              id: "3",
              nameTitle: "Emily Chen, Honeymoon Couple",
              quote: "Our honeymoon was unforgettable thanks to Luxe Stay. The romantic ambiance and impeccable service made it truly special.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Emily Chen portrait"
            },
            {
              id: "4",
              nameTitle: "Michael & Lisa Thompson, Vacation",
              quote: "The best hotel experience we've ever had. Beautiful rooms, amazing food, and staff that genuinely cared about our comfort. Worth every penny.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              imageAlt: "Michael and Lisa Thompson"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to book your perfect stay?"
          inputPlaceholder="Enter your email"
          buttonText="Get Offers"
          useInvertedBackground="noInvert"
        />
      </div>

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