"use client"

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TagAbout from '@/components/sections/about/TagAbout';
import FeatureCardEighteen from '@/components/sections/feature/FeatureCardEighteen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLargeSizeMediumTitles"
      background="fluid"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Luxe Hotel"
          navItems={[
            {name: "Home", id: "hero"},
            {name: "About", id: "about"},
            {name: "Rooms", id: "rooms"},
            {name: "Reviews", id: "testimonials"},
            {name: "Contact", id: "contact"}
          ]}
          button={{text: "Book Now", href: "contact"}}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardScroll 
          title="Experience Luxury Hospitality"
          description="Discover our world-class hotel with stunning views, premium amenities, and exceptional service. Your perfect getaway awaits."
          tag="Welcome to Elegance"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184710583-yt05ru42.jpg"
          imageAlt="Luxurious hotel lobby interior"
          buttons={[
            {text: "Book Your Stay", href: "contact"},
            {text: "Explore Rooms", href: "rooms"}
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <TagAbout 
          tag="Our Mission"
          description="We are dedicated to providing an unforgettable guest experience through exceptional service, luxurious accommodations, and attention to every detail. From the moment you arrive, our team is committed to making your stay truly memorable."
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="amenities" data-section="amenities">
        <FeatureCardEighteen 
          title="What Sets Us Apart"
          description="Experience the difference between standard accommodation and true luxury hospitality"
          tag="Why Choose Us"
          negativeCard={{
            title: "Standard Hotels",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766452376695-4rxtbd0x.jpg",
            imageAlt: "Standard hotel room",
            items: [
              "Generic furnishings",
              "Limited amenities",
              "No personalized service",
              "Standard breakfast options",
              "Basic room facilities"
            ]
          }}
          positiveCard={{
            title: "Our Hotel",
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184712312-lhl1h85w.jpg",
            imageAlt: "Luxury hotel room",
            items: [
              "Premium designer furnishings",
              "World-class spa and fitness center",
              "24/7 concierge service",
              "Gourmet breakfast and dining",
              "Smart room technology"
            ]
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="rooms" data-section="rooms">
        <ProductCardTwo 
          title="Our Room Collection"
          description="Choose from our carefully curated selection of rooms, each designed for ultimate comfort and luxury"
          tag="Accommodations"
          products={[
            {
              id: "1",
              brand: "Luxe Hotel",
              name: "Standard Room",
              price: "from $150/night",
              rating: 4,
              reviewCount: "2.3k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184721770-arv4645s.jpg",
              imageAlt: "Standard hotel room with queen bed"
            },
            {
              id: "2",
              brand: "Luxe Hotel",
              name: "Deluxe Room",
              price: "from $250/night",
              rating: 5,
              reviewCount: "3.1k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766185878910-obewt98e.jpg",
              imageAlt: "Deluxe room with city view"
            },
            {
              id: "3",
              brand: "Luxe Hotel",
              name: "Executive Suite",
              price: "from $450/night",
              rating: 5,
              reviewCount: "1.8k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184722691-mip9ww4c.jpg",
              imageAlt: "Executive suite with living area"
            },
            {
              id: "4",
              brand: "Luxe Hotel",
              name: "Penthouse Suite",
              price: "from $800/night",
              rating: 5,
              reviewCount: "892",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766849142731-hp8i7zi3.jpg",
              imageAlt: "Penthouse suite with panoramic views"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo 
          title="Guest Reviews"
          description="Read what our satisfied guests have to say about their experiences at our hotel"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Anderson",
              role: "Business Traveler",
              testimonial: "The level of service and attention to detail was exceptional. Every staff member went above and beyond to make my stay comfortable and productive.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183587552-1pqoe5c0.jpg",
              imageAlt: "Sarah Anderson"
            },
            {
              id: "2",
              name: "Michael Chen",
              role: "Vacation Guest",
              testimonial: "Our family had an incredible vacation here. The kids loved the pool, the food was amazing, and the views from our room were breathtaking.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Emma Thompson",
              role: "Honeymoon Couple",
              testimonial: "Perfect place for our honeymoon. Romantic atmosphere, luxurious rooms, and the spa treatments were absolutely divine. Highly recommended!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183841431-v1xtegko.jpg",
              imageAlt: "Emma Thompson"
            },
            {
              id: "4",
              name: "David Martinez",
              role: "Corporate Guest",
              testimonial: "Hosted our team retreat here and everything was flawlessly executed. The conference facilities are top-notch and the staff was incredibly accommodating.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766182321167-i4kvpj5f.jpg",
              imageAlt: "David Martinez"
            },
            {
              id: "5",
              name: "Jennifer Lee",
              role: "Regular Guest",
              testimonial: "I stay here whenever I visit the city. The consistency in quality and service is remarkable. It feels like a home away from home.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183842429-uezzjpov.jpg",
              imageAlt: "Jennifer Lee"
            },
            {
              id: "6",
              name: "Robert Williams",
              role: "Anniversary Celebration",
              testimonial: "We celebrated our 25th anniversary here. The staff made it so special with personalized touches. We're already planning our return visit!",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Robert Williams"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplitForm 
          title="Plan Your Stay"
          description="Get in touch with our reservations team to book your perfect getaway or inquire about special packages and events."
          inputs={[
            {name: "name", type: "text", placeholder: "Full Name", required: true},
            {name: "email", type: "email", placeholder: "Email Address", required: true},
            {name: "checkIn", type: "date", placeholder: "Check-in Date", required: true},
            {name: "checkOut", type: "date", placeholder: "Check-out Date", required: true}
          ]}
          textarea={{name: "message", placeholder: "Share your preferences or special requests...", rows: 5, required: false}}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766843736372-3ltc72sy.jpg"
          imageAlt="Hotel reception and concierge desk"
          mediaPosition="right"
          buttonText="Request Reservation"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBase 
          logoText="Luxe Hotel"
          copyrightText="© 2025 Luxe Hotel. All rights reserved."
          columns={[
            {
              title: "Hotel",
              items: [
                {label: "About Us", href: "about"},
                {label: "Rooms & Suites", href: "rooms"},
                {label: "Amenities", href: "amenities"},
                {label: "Dining", href: "contact"}
              ]
            },
            {
              title: "Guest Services",
              items: [
                {label: "Book a Room", href: "contact"},
                {label: "Gift Cards", href: "contact"},
                {label: "Loyalty Program", href: "contact"},
                {label: "Contact Concierge", href: "contact"}
              ]
            },
            {
              title: "Information",
              items: [
                {label: "FAQs", href: "contact"},
                {label: "Careers", href: "contact"},
                {label: "Press", href: "contact"},
                {label: "Group Bookings", href: "contact"}
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}