"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function LuxeHotelsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="floatingGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="outline"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Luxe Hotels"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",
            href: "#"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Experience Luxury Redefined"
          description="Discover world-class accommodations with exceptional service. Your perfect getaway awaits with our premium amenities and unparalleled hospitality."
          kpis={[
            { value: "500+", label: "Happy Guests Yearly" },
            { value: "98%", label: "Guest Satisfaction" },
            { value: "50+", label: "Premium Rooms" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767194221328-i15lky2e.jpg"
          imageAlt="Luxurious hotel exterior with modern architecture"
          imagePosition="right"
          buttons={[
            { text: "Book Your Stay", href: "#" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About Luxe Hotels"
          description={[
            "For over two decades, Luxe Hotels has been the destination of choice for travelers seeking refined elegance and exceptional service. Our commitment to excellence is reflected in every detail of your stay.",
            "From our beautifully appointed rooms to our world-class amenities, we create memorable experiences that exceed expectations. Our dedicated team works tirelessly to ensure your comfort and satisfaction during every moment of your visit."
          ]}
          useInvertedBackground="noInvert"
          showBorder={true}
          buttons={[
            { text: "Our Story", href: "#" }
          ]}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardOne
          title="Our Room Collection"
          description="Choose from our carefully curated selection of rooms, each designed with comfort and elegance in mind."
          products={[
            {
              id: "1",
              name: "Standard Room",
              price: "$129/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184711453-096e89ja.jpg",
              imageAlt: "Standard hotel room with modern furnishings"
            },
            {
              id: "2",
              name: "Deluxe Room",
              price: "$189/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906467892-bnvhja3w.jpg",
              imageAlt: "Spacious deluxe room with premium amenities"
            },
            {
              id: "3",
              name: "Executive Suite",
              price: "$299/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766267249367-b2xzeajg.jpg",
              imageAlt: "Luxurious executive suite with elegant decor"
            }
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardNine
          title="World-Class Amenities"
          description="Indulge in our premium facilities designed for your relaxation and wellness"
          features={[
            {
              id: 1,
              title: "Spa & Wellness",
              description: "Rejuvenate your mind and body with our full-service spa featuring massage therapy, facials, and wellness treatments.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837893952-g875lj89.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837893952-g875lj89.jpg" }
            },
            {
              id: 2,
              title: "Fine Dining",
              description: "Experience culinary excellence at our signature restaurant offering international and local cuisines.",
              phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837894902-hqj1i6g3.jpg" },
              phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837894902-hqj1i6g3.jpg" }
            }
          ]}
          showStepNumbers={false}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Guests Say"
          description="Read testimonials from satisfied travelers who have experienced our hospitality"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              handle: "@sarahtravels",
              testimonial: "An absolutely wonderful stay! The rooms are immaculate, the staff is attentive, and the amenities are top-notch. Will definitely return.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg"
            },
            {
              id: "2",
              name: "James Chen",
              handle: "@jamesadventures",
              testimonial: "Luxury at its finest. From check-in to check-out, every detail was perfectly executed. Highly recommend for business or leisure travel.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg"
            },
            {
              id: "3",
              name: "Emma Rodriguez",
              handle: "@emmawanders",
              testimonial: "The spa treatments were divine and the restaurant food was exceptional. This hotel truly understands hospitality.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg"
            },
            {
              id: "4",
              name: "Michael Thompson",
              handle: "@mikeontheroad",
              testimonial: "Outstanding value for the price. Elegant accommodations with impeccable service. A hidden gem for travelers.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with Special Offers"
          description="Subscribe to our newsletter and receive exclusive deals, travel tips, and early access to new room releases."
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          useInvertedBackground="noInvert"
          onSubmit={(email) => console.log('Email subscribed:', email)}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxe Hotels"
          columns={[
            {
              items: [
                { label: "Rooms", href: "rooms" },
                { label: "Amenities", href: "amenities" },
                { label: "About", href: "about" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms & Conditions", href: "#" },
                { label: "Accessibility", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}