"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import SplitAbout from '@/components/sections/about/SplitAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { BedSingle, ConciergeBell, MapPin } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="medium"
      background="fluid"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <main className="bg-background">
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingOverlay
            brandName="Elysian Hotel"
            navItems={[
              { name: "Rooms", id: "rooms" },
              { name: "Amenities", id: "amenities" },
              { name: "Gallery", id: "gallery" },
              { name: "Contact", id: "contact" },
            ]}
            button={{ text: "Book Now", href: "#contact" }}
          />
        </div>
        <div id="hero" data-section="hero">
          <HeroLogo
            logoText="The Elysian"
            description="Experience unparalleled luxury and comfort at The Elysian, where every stay is a journey of exquisite refinement."
            buttons={[
              { text: "Book Your Stay", href: "#contact" },
              { text: "Explore Rooms", href: "#rooms" },
            ]}
            imageSrc="https://img.b2bpic.net/free-photo/wooden-sauna-with-mountain-view-panoramic-calm_169016-70823.jpg"
            imageAlt="Grand luxury hotel entrance at sunset"
            showDimOverlay={true}
          />
        </div>
        <div id="about" data-section="about">
          <SplitAbout
            tag="Our Story"
            title="Welcome to The Elysian Hotel"
            description="Nestled in the heart of the city, The Elysian Hotel offers a sanctuary of peace and luxury. With a rich history and a commitment to impeccable service, we ensure every guest experiences a memorable and delightful stay."
            bulletPoints={[
              {
                title: "Exquisite Comfort",                description: "Luxurious rooms designed for ultimate relaxation.",                icon: BedSingle,
              },
              {
                title: "World-Class Service",                description: "Dedicated staff catering to your every need.",                icon: ConciergeBell,
              },
              {
                title: "Prime Location",                description: "Easy access to city attractions and serene views.",                icon: MapPin,
              },
            ]}
            imageSrc="https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg"
            imageAlt="Elegant hotel lobby with modern decor"
            mediaAnimation="slide-up"
            imagePosition="right"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
        <div id="rooms" data-section="rooms">
          <ProductCardTwo
            title="Our Accommodations"
            description="Discover a range of exquisitely designed rooms and suites, each offering a unique blend of comfort and elegance. Perfect for any traveler seeking a luxurious escape."
            tag="Rooms & Suites"
            products={[
              {
                id: "1",                brand: "Elysian Hotel",                name: "Executive Suite",                price: "From $350/night",                rating: 5,
                reviewCount: "1.2k",                imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed_1203-2819.jpg?_wi=1",                imageAlt: "Luxurious Executive Suite with city view"},
              {
                id: "2",                brand: "Elysian Hotel",                name: "Deluxe Room",                price: "From $220/night",                rating: 4,
                reviewCount: "2.5k",                imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",                imageAlt: "Spacious Deluxe Room with modern amenities"},
              {
                id: "3",                brand: "Elysian Hotel",                name: "Standard King",                price: "From $180/night",                rating: 4,
                reviewCount: "3.1k",                imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed_1203-2819.jpg?_wi=2",                imageAlt: "Comfortable Standard King Room"},
            ]}
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
          />
        </div>
        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFive
            tag="Guest Reviews"
            title="What Our Guests Say"
            description="Hear from visitors who have experienced the exceptional hospitality and luxurious comfort of The Elysian Hotel."
            testimonials={[
              {
                id: "1",                name: "Sarah J., Executive Traveler",                date: "Date: 15 October 2023",                title: "An Unforgettable Stay!",                quote: "The Elysian Hotel exceeded all my expectations. The staff were incredibly attentive, the room was breathtaking, and the amenities were top-notch. I can't wait to return!",                tag: "Business Trip",                avatarSrc: "https://img.b2bpic.net/free-photo/businessman-smiling-camera_107420-95907.jpg",                avatarAlt: "Sarah J."},
              {
                id: "2",                name: "Michael L., Leisure Guest",                date: "Date: 03 November 2023",                title: "Pure Relaxation and Luxury",                quote: "From the moment I arrived, I felt completely at ease. The spa was incredible, and the dining experience was divine. A truly peaceful and luxurious getaway.",                tag: "Family Vacation",                avatarSrc: "https://img.b2bpic.net/free-photo/young-happy-adult-woman-blouse-long-skirt-sitting-staircase-inside-coworking-space-smiling-camera_197531-23006.jpg",                avatarAlt: "Michael L."},
              {
                id: "3",                name: "Emily R., Conference Attendee",                date: "Date: 20 September 2023",                title: "Perfect for Business & Pleasure",                quote: "The conference facilities were excellent, and after a long day, returning to such a comfortable and elegant room was a treat. The location is ideal for both work and exploring.",                tag: "Conference",                avatarSrc: "https://img.b2bpic.net/free-photo/smiling-business-man-texting-smartphone-cafe_1262-3308.jpg",                avatarAlt: "Emily R."},
              {
                id: "4",                name: "David K., Weekend Getaway",                date: "Date: 10 December 2023",                title: "Our Go-To for Special Occasions",                quote: "My partner and I celebrated our anniversary here, and it was perfect. The romantic ambiance, delicious food, and personalized service made it truly special. Highly recommended!",                tag: "Romantic Getaway",                avatarSrc: "https://img.b2bpic.net/free-photo/couple-traveling-taking-selfie-together-city_23-2149939713.jpg",                avatarAlt: "David K."},
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
        <div id="amenities" data-section="amenities">
          <FeatureCardTwelve
            tag="Our Services"
            title="Hotel Amenities"
            description="The Elysian Hotel offers a curated selection of amenities designed to enhance your stay, from world-class dining to rejuvenating spa treatments."
            features={[
              {
                id: "1",                label: "Spa & Wellness",                title: "Indulge in ultimate relaxation and rejuvenation at our luxurious spa",                items: [
                  "Signature massage therapies",                  "Advanced facial treatments",                  "Hydrotherapy pools",                  "Private yoga and meditation sessions"],
                buttons: [{ text: "View Spa Menu", href: "#contact" }],
              },
              {
                id: "2",                label: "Fine Dining",                title: "Savor exquisite culinary creations at our award-winning restaurant",                items: [
                  "Gourmet breakfast buffet",                  "Michelin-starred dinner experience",                  "Private dining options",                  "Extensive wine cellar selection"],
                buttons: [{ text: "Reserve a Table", href: "#contact" }],
              },
              {
                id: "3",                label: "Rooftop Pool",                title: "Enjoy breathtaking city views from our stunning rooftop infinity pool",                items: [
                  "Heated outdoor pool",                  "Luxurious private cabanas",                  "Poolside bar and lounge",                  "Panoramic city skyline views"],
                buttons: [{ text: "Explore Pool Area", href: "#contact" }],
              },
            ]}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
          />
        </div>
        <div id="faq" data-section="faq">
          <FaqSplitMedia
            tag="Questions?"
            title="Frequently Asked Questions"
            description="Find answers to common inquiries about booking, check-in, hotel services, and more."
            faqs={[
              {
                id: "1",                title: "What are your check-in and check-out times?",                content: "Check-in is at 3:00 PM, and check-out is at 12:00 PM. Early check-in or late check-out may be available upon request and subject to availability."},
              {
                id: "2",                title: "Do you offer airport transportation?",                content: "Yes, we offer complimentary airport shuttle services for our guests. Please inform us of your flight details at least 24 hours in advance to arrange your transfer."},
              {
                id: "3",                title: "Is Wi-Fi available throughout the hotel?",                content: "Absolutely. Complimentary high-speed Wi-Fi is available in all rooms and public areas of the hotel for your convenience."},
              {
                id: "4",                title: "Are pets allowed at The Elysian Hotel?",                content: "We are a pet-friendly hotel! A small fee and advance notification are required. Please contact our concierge for more details on our pet policy."},
            ]}
            imageSrc="https://img.b2bpic.net/free-photo/concierge-assists-with-checkin-hotel_482257-90464.jpg"
            imageAlt="Hotel concierge assisting a guest"
            mediaAnimation="opacity"
            mediaPosition="left"
            faqsAnimation="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
          />
        </div>
        <div id="contact" data-section="contact">
          <ContactCTA
            tag="Get in Touch"
            title="Ready for Your Elysian Escape?"
            description="Contact us today to book your dream stay or inquire about our exclusive offers. Our team is here to assist you."
            buttons={[
              { text: "Contact Us", href: "mailto:info@elysianhotel.com" },
              { text: "Call Now", href: "tel:+1234567890" },
            ]}
            background={{ variant: "radial-gradient" }}
            useInvertedBackground={false}
          />
        </div>
        <div id="footer" data-section="footer">
          <FooterBaseReveal
            columns={[
              {
                title: "Hotel",                items: [
                  { label: "About Us", href: "#about" },
                  { label: "Rooms & Suites", href: "#rooms" },
                  { label: "Amenities", href: "#amenities" },
                ],
              },
              {
                title: "Guest Services",                items: [
                  { label: "FAQs", href: "#faq" },
                  { label: "Contact", href: "#contact" },
                  { label: "Book Now", href: "#contact" },
                ],
              },
              {
                title: "Legal",                items: [
                  { label: "Privacy Policy", href: "/privacy" },
                  { label: "Terms of Service", href: "/terms" },
                ],
              },
            ]}
            copyrightText="© 2024 The Elysian Hotel. All rights reserved."
          />
        </div>
      </main>
    </ThemeProvider>
  );
}
