"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardCarouselSplit from '@/components/sections/hero/HeroBillboardCarouselSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmall"
      background="plain"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="LuxeStay"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" }
          ]}
          button={{
            text: "Book Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarouselSplit
          title="Experience Luxury Hospitality"
          buttons={[
            {
              text: "Book Your Stay",
              href: "contact"
            },
            {
              text: "Explore Rooms",
              href: "rooms"
            }
          ]}
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Luxury hotel suite with king bed and city view"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Premium deluxe bedroom with modern amenities"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718060-6nx8o2ui.jpg",
              imageAlt: "Resort-style bedroom with elegant interior design"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849442209-g2s3b84q.jpg",
              imageAlt: "Contemporary hotel room with luxurious furnishings"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766243008667-twrhhm4j.jpg",
              imageAlt: "Upscale accommodation with premium decor"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          tag="About LuxeStay"
          title="Your Gateway to Unforgettable Experiences"
          description="Located in the heart of the city, LuxeStay offers world-class hospitality combined with personalized service. Our dedicated team ensures every guest enjoys a memorable stay filled with comfort, elegance, and exceptional attention to detail."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767195026929-zu71bw7f.jpg"
          imageAlt="LuxeStay hotel exterior and architecture"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Learn More",
              href: "amenities"
            }
          ]}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardEighteen
          title="World-Class Amenities"
          description="Discover our comprehensive range of facilities designed for your comfort and relaxation"
          tag="Services"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          negativeCard={{
            title: "Standard Hotels",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767042228850-p1iskhy4.jpg",
            imageAlt: "Basic hotel facilities",
            items: [
              "Limited dining options",
              "Basic room amenities",
              "No wellness programs"
            ]
          }}
          positiveCard={{
            title: "LuxeStay Experience",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184717131-qr8fo1hm.jpg",
            imageAlt: "Premium hotel amenities",
            items: [
              "Michelin-inspired dining",
              "Premium spa and wellness",
              "State-of-the-art fitness center",
              "24/7 concierge service",
              "Multiple dining venues"
            ]
          }}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFive
          title="Room Categories"
          description="Choose from our selection of thoughtfully designed rooms and suites"
          tag="Rooms"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "standard",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg",
              imageAlt: "Standard room",
              button: {
                text: "View Details",
                href: "contact"
              }
            },
            {
              id: "deluxe",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
              imageAlt: "Deluxe suite",
              button: {
                text: "View Details",
                href: "contact"
              }
            },
            {
              id: "suite",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184718060-6nx8o2ui.jpg",
              imageAlt: "Premium suite",
              button: {
                text: "View Details",
                href: "contact"
              }
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardEight
          title="Guest Testimonials"
          description="Hear what our valued guests have to say about their LuxeStay experience"
          tag="Reviews"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              role: "Travel Enthusiast",
              company: "New York",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "James Richardson",
              role: "Business Executive",
              company: "Boston",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184724760-wxlm9bjg.jpg",
              imageAlt: "James Richardson"
            },
            {
              id: "3",
              name: "Emma Watson",
              role: "Luxury Traveler",
              company: "London",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185880597-ieb2jad3.jpg",
              imageAlt: "Emma Watson"
            },
            {
              id: "4",
              name: "Michael Chang",
              role: "Frequent Guest",
              company: "Los Angeles",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185881440-0jwi2e86.jpg",
              imageAlt: "Michael Chang"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Reserve Your Room Today"
          description="Subscribe to our newsletter for exclusive offers, special promotions, and updates on new amenities and experiences."
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767212085116-hhid2m5e.jpg"
          imageAlt="Hotel lobby and reception area"
          mediaPosition="right"
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. You can unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767195026929-zu71bw7f.jpg"
          imageAlt="LuxeStay hotel footer background"
          logoText="LuxeStay"
          copyrightText="© 2025 LuxeStay Hotels. All rights reserved."
          columns={[
            {
              title: "Explore",
              items: [
                {
                  label: "Rooms",
                  href: "rooms"
                },
                {
                  label: "Amenities",
                  href: "amenities"
                },
                {
                  label: "About",
                  href: "about"
                }
              ]
            },
            {
              title: "Guest Services",
              items: [
                {
                  label: "Bookings",
                  href: "contact"
                },
                {
                  label: "Contact Us",
                  href: "contact"
                },
                {
                  label: "FAQ",
                  href: "#"
                }
              ]
            },
            {
              title: "Legal",
              items: [
                {
                  label: "Privacy Policy",
                  href: "#"
                },
                {
                  label: "Terms & Conditions",
                  href: "#"
                }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}