"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Star, Crown, CheckCircle } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="LuxeStay Hotel"
          navItems={[
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Experience Luxury, Comfort & Hospitality"
          description="Discover our award-winning hotel where sophistication meets warmth. Premium rooms, world-class amenities, and personalized service await your arrival."
          tag="Welcome to LuxeStay"
          tagIcon={Star}
          background={{ variant: "aurora" }}
          imageSrc="https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg"
          imageAlt="Luxury hotel exterior with modern architecture"
          buttons={[
            { text: "Book Your Stay", href: "#contact" },
            { text: "Explore Rooms", href: "#rooms" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Discover the perfect escape at" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/modern-styled-small-entryway_23-2150712925.jpg", alt: "Hotel lobby" },
            { type: "text", content: "our premier destination" }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardTwentyOne
          title="World-Class Amenities"
          description="Indulge in our extensive collection of facilities designed to elevate your stay and provide complete relaxation."
          tag="Amenities"
          imageSrc="https://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817020.jpg"
          imageAlt="Luxury spa and wellness center"
          mediaPosition="left"
          accordionItems={[
            {
              id: "1",              title: "Spa & Wellness Center",              content: "Experience rejuvenation with our full-service spa offering massages, facials, and holistic wellness treatments. Our expert therapists provide personalized services in our serene spa environment."
            },
            {
              id: "2",              title: "Fine Dining Restaurant",              content: "Savor culinary excellence at our Michelin-inspired restaurant. Our award-winning chefs prepare international and local cuisine using the finest ingredients and innovative techniques."
            },
            {
              id: "3",              title: "Fitness & Recreation",              content: "Stay active with our state-of-the-art fitness center, rooftop pool, yoga studio, and personalized training programs. Access to exclusive sports facilities and wellness activities."
            }
          ]}
          buttons={[
            { text: "View All Amenities", href: "#" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardOne
          title="Our Exclusive Room Collections"
          description="Choose from our carefully curated selection of elegantly designed rooms and suites, each offering unique comfort and stunning views."
          tag="Rooms"
          products={[
            {
              id: "1",              name: "Deluxe Room",              price: "$189/night",              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",              imageAlt: "Deluxe hotel room with queen bed"
            },
            {
              id: "2",              name: "Executive Suite",              price: "$349/night",              imageSrc: "https://img.b2bpic.net/free-photo/cozy-bedroom-with-pendant-lamp-orchid-home-comfort_169016-70987.jpg",              imageAlt: "Executive suite with living area"
            },
            {
              id: "3",              name: "Presidential Penthouse",              price: "$799/night",              imageSrc: "https://img.b2bpic.net/free-photo/outdoor-swimming-pool-with-stair-ladder-around-there_74190-7881.jpg",              imageAlt: "Penthouse with rooftop access"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Flexible Booking Options"
          description="Select the perfect plan that suits your travel needs and budget."
          tag="Pricing"
          plans={[
            {
              id: "weekend-escape",              tag: "Weekend Escape",              price: "$449",              period: "/night",              description: "Perfect for a short getaway with premium amenities and services.",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Deluxe room accommodation",                "Complimentary breakfast",                "Spa access",                "Airport transfer"
              ]
            },
            {
              id: "extended-stay",              tag: "Extended Stay",              price: "$329",              period: "/night",              description: "Ideal for longer stays with discounted rates and special perks.",              button: { text: "Reserve Stay", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Executive suite",                "Daily breakfast & dinner",                "Unlimited spa credit",                "Priority concierge",                "Airport transfers"
              ]
            },
            {
              id: "luxury-retreat",              tag: "Luxury Retreat",              tagIcon: Crown,
              price: "$599",              period: "/night",              description: "The ultimate experience with our most exclusive accommodations and services.",              button: { text: "Inquire VIP Package", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Presidential penthouse",                "Personal concierge 24/7",                "Private chef services",                "Unlimited amenities access",                "Limousine service"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardSix
          title="Guest Testimonials"
          description="Hear what our valued guests have to say about their unforgettable stays at LuxeStay."
          tag="Reviews"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              handle: "@sarahmitchell",              testimonial: "An absolutely incredible experience. The service was impeccable, the rooms were pristine, and the amenities exceeded all expectations. I'll definitely be coming back!",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",              name: "James Rodriguez",              handle: "@jamesrodriguez",              testimonial: "The perfect destination for a romantic getaway. Stunning views, exceptional dining, and the spa treatment was pure bliss. Highly recommended!",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",              imageAlt: "James Rodriguez"
            },
            {
              id: "3",              name: "Emily Zhang",              handle: "@emilyzhang",              testimonial: "Stayed for a week and never wanted to leave. The staff went above and beyond to make our family feel welcome. Best hotel experience ever!",              imageSrc: "https://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",              imageAlt: "Emily Zhang"
            },
            {
              id: "4",              name: "David Thompson",              handle: "@davidthompson",              testimonial: "Business travel done right. Comfortable rooms, reliable Wi-Fi, excellent restaurant, and convenient location. Will choose LuxeStay again!",              imageSrc: "https://img.b2bpic.net/free-photo/young-woman-sitting-library_273609-15845.jpg",              imageAlt: "David Thompson"
            },
            {
              id: "5",              name: "Lisa Anderson",              handle: "@lisaanderson",              testimonial: "The attention to detail is remarkable. From the elegant decor to the personalized service, every moment felt special. Worth every penny!",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12313.jpg",              imageAlt: "Lisa Anderson"
            },
            {
              id: "6",              name: "Michael Chen",              handle: "@michaelchen",              testimonial: "A luxury hotel that actually delivers on its promises. Great value, outstanding service, and unforgettable memories made with friends!",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",              imageAlt: "Michael Chen"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Ready to Visit?"
          title="Book Your Perfect Stay Today"
          description="Reserve your room now and experience luxury hospitality. Our dedicated team is ready to assist you with personalized recommendations and special offers."
          tagIcon={CheckCircle}
          inputPlaceholder="Enter your email address"
          buttonText="Get Booking Info"
          termsText="We respect your privacy. Unsubscribe anytime. By booking, you agree to our Terms & Conditions."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="LuxeStay Hotel"
        />
      </div>
    </ThemeProvider>
  );
}