"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="noiseGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="outline"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Rooms", id: "rooms" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="Luxe Hotel"
          bottomLeftText="Luxury Hospitality"
          bottomRightText="info@luxehotel.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="Luxe Hotel"
          description="Experience world-class hospitality in the heart of elegance"
          buttons={[
            { text: "Book Now", href: "contact" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg"
          imageAlt="Luxe Hotel entrance"
          showDimOverlay={true}
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardSeven
          title="Our Room Collection"
          description="Choose from our selection of beautifully designed rooms and suites"
          products={[
            {
              id: "1",
              name: "Deluxe Suite",
              price: "$299/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766243010494-5vlonhlx.jpg",
              imageAlt: "Deluxe Suite"
            },
            {
              id: "2",
              name: "Ocean View Room",
              price: "$249/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766243011595-xn46fxaw.jpg",
              imageAlt: "Ocean View Room"
            },
            {
              id: "3",
              name: "Standard Room",
              price: "$179/night",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766837633637-2td49lx5.jpg",
              imageAlt: "Standard Room"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="A sanctuary of comfort and sophistication where every guest becomes family. We blend luxury with warmth to create unforgettable memories"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "contact" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          title="World-Class Amenities"
          description="Everything you need for a perfect stay"
          features={[
            {
              id: "1",
              label: "Dining",
              title: "Exceptional Culinary Experience",
              items: [
                "Fine dining restaurant",
                "24-hour room service",
                "Premium wine selection",
                "Chef-curated menus"
              ]
            },
            {
              id: "2",
              label: "Wellness",
              title: "Spa & Fitness Center",
              items: [
                "Full-service spa",
                "Fitness center",
                "Yoga classes",
                "Swimming pool"
              ]
            }
          ]}
          animationType="opacity"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",
              name: "Michael Chen",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140061652-x0v8jc88.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Emma Williams",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
              imageAlt: "Emma Williams"
            },
            {
              id: "4",
              name: "James Rodriguez",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906600169-weh4ibgu.jpg",
              imageAlt: "James Rodriguez"
            }
          ]}
          cardTitle="Over 5,000 guests have experienced exceptional hospitality at Luxe Hotel"
          cardTag="Guest Reviews"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Connected"
          description="Subscribe to our newsletter for exclusive offers, travel tips, and special events happening at Luxe Hotel"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Hotel lobby"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxe Hotel"
          columns={[
            {
              title: "About",
              items: [
                { label: "Our Story", href: "about" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Services",
              items: [
                { label: "Room Booking", href: "rooms" },
                { label: "Reservations", href: "contact" },
                { label: "Events", href: "#" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Phone: +1 234 567 8900", href: "tel:+12345678900" },
                { label: "Email: info@luxehotel.com", href: "mailto:info@luxehotel.com" },
                { label: "Address: Downtown", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxe Hotel. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}