"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import PricingCardSix from '@/components/sections/pricing/PricingCardSix';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="animatedAurora"
      cardStyle="elevated-accent-light"
      primaryButtonStyle="outline"
      secondaryButtonStyle="minimal"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Elegance Hotel"
          navItems={[
            { name: "Home", id: "home" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Experience Timeless Elegance"
          description="Discover the ultimate luxury hotel experience with world-class amenities, exquisite dining, and impeccable service"
          tag="Premium 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-1767387351047-q7hz2tgo.jpg",
              imageAlt: "hotel lobby luxury interior elegant"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387354574-gduhaet5.jpg",
              imageAlt: "luxury bedroom hotel room suite elegant interior"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387351917-6zezqeh2.jpg",
              imageAlt: "spa wellness massage relaxation luxury"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387352627-4hqsvy97.jpg",
              imageAlt: "restaurant fine dining luxury food elegance"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387353508-r40qfhxx.jpg",
              imageAlt: "swimming pool resort luxury vacation hotel"
            }
          ]
          ariaLabel="Hotel hero carousel showcasing luxury amenities"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAboutMetric
          title="A Legacy of Refined Hospitality"
          description={[
            "Established in 1995, Elegance Hotel has been the premier destination for discerning travelers seeking uncompromising luxury and personalized service. Our commitment to excellence is reflected in every detail, from our meticulously appointed suites to our award-winning culinary offerings. With a dedicated team of hospitality professionals, we create unforgettable experiences that exceed expectations."
          ]}
          metrics={[
            { label: "Years of Excellence", value: "28+" },
            { label: "Luxurious Suites", value: "250" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardThirteen
          title="World-Class Amenities"
          description="Indulge in our comprehensive selection of five-star facilities designed for your comfort and relaxation"
          tag="Premium Facilities"
          features={[
            {
              id: "01",
              title: "Spa & Wellness",
              description: "Rejuvenate your mind and body at our full-service spa featuring signature treatments, sauna, and therapy rooms"
            },
            {
              id: "02",
              title: "Fine Dining",
              description: "Enjoy exquisite cuisine prepared by our Michelin-trained chefs in our elegant restaurant and lounge"
            },
            {
              id: "03",
              title: "Olympic Pool",
              description: "Relax by our heated Olympic-sized swimming pool with cabanas, bar service, and scenic views"
            },
            {
              id: "04",
              title: "Fitness Center",
              description: "Stay active with state-of-the-art equipment, yoga studio, personal trainers, and wellness programs"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardFive
          title="Exquisite Room Types"
          description="Choose from our curated selection of luxuriously appointed suites, each designed with meticulous attention to comfort and elegance"
          tag="Room Selections"
          products={[
            {
              id: "deluxe",
              button: { text: "View Details" },
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387354574-gduhaet5.jpg",
              imageAlt: "luxury bedroom hotel room suite elegant interior"
            },
            {
              id: "suite",
              button: { text: "View Details" },
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387354574-gduhaet5.jpg",
              imageAlt: "luxury bedroom hotel room suite elegant interior"
            },
            {
              id: "penthouse",
              button: { text: "View Details" },
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387354574-gduhaet5.jpg",
              imageAlt: "luxury bedroom hotel room suite elegant interior"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardSix
          title="Transparent Room Rates"
          description="Flexible pricing options designed to suit every traveler's needs and preferences"
          tag="Room Pricing"
          plans={[
            {
              id: "deluxe-room",
              price: "$299",
              subtitle: "Per night - Perfect for solo travelers and couples",
              features: [
                "King or queen bed",
                "City view balcony",
                "Premium toiletries",
                "24-hour room service",
                "High-speed WiFi",
                "Fitness center access"
              ],
              buttons: [{ text: "Book Now", href: "contact" }]
            },
            {
              id: "executive-suite",
              price: "$499",
              subtitle: "Per night - Ideal for business travelers and small groups",
              features: [
                "Separate living and bedroom",
                "Executive lounge access",
                "Complimentary breakfast",
                "Premium toiletries",
                "Work desk and WiFi",
                "Evening turndown service"
              ],
              buttons: [{ text: "Book Now", href: "contact" }]
            },
            {
              id: "penthouse-suite",
              price: "$899",
              subtitle: "Per night - Our most luxurious offering",
              features: [
                "Multi-room penthouse layout",
                "Panoramic city views",
                "Private spa bathroom",
                "Personal concierge service",
                "Gourmet minibar",
                "Helicopter landing available"
              ],
              buttons: [{ text: "Book Now", href: "contact" }]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="Guest Testimonials"
          description="Hear from our valued guests about their unforgettable experiences at Elegance Hotel"
          tag="Guest Reviews"
          testimonials={[
            {
              id: "1",
              name: "Margaret Sterling",
              role: "Travel Enthusiast",
              company: "Global Explorer Magazine",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387355177-nx9mprtv.jpg",
              imageAlt: "woman portrait professional headshot luxury"
            },
            {
              id: "2",
              name: "James Richardson",
              role: "Business Executive",
              company: "Fortune 500 Company",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387355491-oaqhmk1o.jpg",
              imageAlt: "man portrait professional headshot elegant"
            },
            {
              id: "3",
              name: "Sophie Laurent",
              role: "Wedding Planner",
              company: "Luxury Events Co",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387355784-wp7a3bzx.jpg",
              imageAlt: "woman portrait smile professional hotel"
            },
            {
              id: "4",
              name: "David Chen",
              role: "CEO",
              company: "International Hotels",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767387356195-5bzvao2a.jpg",
              imageAlt: "man portrait happy professional luxury"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Plan Your Perfect Getaway"
          description="Contact our reservations team to book your stay or inquire about our suites and amenities. We're available 24/7 to assist you."
          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: "Special requests or inquiries...",
            rows: 5,
            required: false
          }}
          buttonText="Submit Reservation"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Elegance Hotel"
          copyrightText="© 2024 Elegance Hotel. All rights reserved."
          columns={[
            {
              title: "Quick Links",
              items: [
                { label: "Home", href: "home" },
                { label: "Rooms", href: "rooms" },
                { label: "Amenities", href: "amenities" },
                { label: "About", href: "about" }
              ]
            },
            {
              title: "Contact",
              items: [
                { label: "Reservations", href: "contact" },
                { label: "Phone: +1 (555) 123-4567", href: "" },
                { label: "Email: hello@elegancehotel.com", href: "" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "" },
                { label: "Terms of Service", href: "" },
                { label: "Cookie Policy", href: "" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}