"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Building2, Calendar, Crown, Gem, Heart, Phone, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Serene Luxury Hotel"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "amenities" },
            { name: "Reviews", id: "reviews" },
          
            { name: "Blog", id: "/blog" },
]}
          button={{
            text: "Book Now",            href: "pricing"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Experience Timeless Luxury"
          description="Discover an oasis of tranquility where world-class hospitality meets breathtaking natural beauty. Your perfect getaway awaits."
          background={{ variant: "sparkles-gradient" }}
          tag="Premium Destination"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/modern-styled-small-entryway_23-2150712935.jpg"
          imageAlt="Serene hotel entrance with lush greenery"
          buttons={[
            { text: "Book Your Stay", href: "pricing" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg", alt: "Guest avatar" },
            { src: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", alt: "Guest avatar" },
            { src: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg", alt: "Guest avatar" }
          ]}
          avatarText="Trusted by 5,000+ satisfied guests"
          marqueeItems={[
            { type: "text", text: "⭐ Award-Winning Service" },
            { type: "text", text: "🌿 Eco-Friendly" },
            { type: "text", text: "🛏️ Luxury Accommodations" },
            { type: "text", text: "🍽️ World-Class Dining" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Welcome to Serenity"
          description="Nestled in the heart of nature, our hotel has been a sanctuary of elegance and comfort for over 25 years. We combine timeless architectural beauty with modern amenities to create unforgettable experiences."
          tag="Our Story"
          imageSrc="https://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817020.jpg"
          imageAlt="Spa and wellness center"
          buttons={[
            { text: "Learn More", href: "#amenities" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardTwo
          title="Discover Our Rooms"
          description="Each room is meticulously designed to provide the perfect blend of comfort, style, and functionality."
          tag="Accommodations"
          tagIcon={Building2}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          products={[
            {
              id: "1",              brand: "Serene Luxury",              name: "Deluxe Suite",              price: "$350/night",              rating: 5,
              reviewCount: "2.1k",              imageSrc: "https://img.b2bpic.net/free-photo/business-partners_1098-18010.jpg",              imageAlt: "Deluxe Suite with king bed and ocean view"
            },
            {
              id: "2",              brand: "Serene Luxury",              name: "Premium Room",              price: "$250/night",              rating: 5,
              reviewCount: "1.8k",              imageSrc: "https://img.b2bpic.net/free-photo/modern-styled-small-entryway_23-2150712925.jpg",              imageAlt: "Premium Room with elegant furnishings"
            },
            {
              id: "3",              brand: "Serene Luxury",              name: "Standard Room",              price: "$180/night",              rating: 4,
              reviewCount: "1.2k",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-young-woman-checking-her-phone_23-2149429382.jpg",              imageAlt: "Standard Room with comfortable setup"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          buttons={[
            { text: "View All Rooms", href: "pricing" }
          ]}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardSeven
          title="World-Class Amenities"
          description="Indulge in our extensive range of facilities designed to enhance your stay and rejuvenate your spirit."
          tag="Premium Services"
          tagIcon={Gem}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="blur-reveal"
          features={[
            {
              id: 1,
              title: "Spa & Wellness",              description: "Relax and rejuvenate with our full-service spa, featuring traditional and modern treatments.",              imageSrc: "https://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817020.jpg",              imageAlt: "Luxurious spa treatment room"
            },
            {
              id: 2,
              title: "Fine Dining Restaurant",              description: "Experience exquisite cuisine from award-winning chefs in our elegant dining establishment.",              imageSrc: "https://img.b2bpic.net/free-photo/peaceful-body-lying-person-relax_1301-3277.jpg",              imageAlt: "Fine dining restaurant with elegant setup"
            },
            {
              id: 3,
              title: "Olympic-Size Pool",              description: "Swim and sunbathe in our pristine pool surrounded by lush gardens and comfortable lounges.",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-bath-salt-put-some-water-before-taking-bath_23-2149239352.jpg",              imageAlt: "Resort pool with scenic views"
            },
            {
              id: 4,
              title: "Modern Fitness Center",              description: "Stay fit with state-of-the-art equipment and personalized training sessions available.",              imageSrc: "https://img.b2bpic.net/free-photo/christmas-spa-composition-with-incense-sticks-soap-blurred-background_169016-26255.jpg",              imageAlt: "Modern fitness facility"
            }
          ]}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardThirteen
          title="What Our Guests Say"
          description="Read authentic reviews from travelers who have experienced the magic of our hotel."
          tag="Guest Reviews"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          showRating={true}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarahjohnson",              testimonial: "Absolutely stunning hotel! The spa experience was rejuvenating, and the staff went above and beyond to make our stay memorable.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-successful-businesswoman-looking-into-camera-sitting-restaurant-business-lady-with-stylish-hairstyle-wears-elegant-suit-business-meeting-attractive-appearance_8353-12611.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              handle: "@mchen_travels",              testimonial: "Perfect destination for a romantic getaway. The rooms are luxurious, and the view from our suite was breathtaking.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              handle: "@emily_rodrguez",              testimonial: "Great amenities and excellent service. The fine dining restaurant exceeded our expectations. Highly recommend!",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              handle: "@davidkim_travel",              testimonial: "Wonderful experience from check-in to check-out. The pool area is beautiful and the staff is incredibly helpful.",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Transparent Pricing"
          description="Choose the perfect package that suits your travel needs and budget."
          tag="Special Offers"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="scale-rotate"
          plans={[
            {
              id: "weekend-escape",              tag: "Weekend Escape",              tagIcon: Calendar,
              price: "$500",              period: "/night",              description: "Perfect for a quick getaway with our standard room and access to all amenities.",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Comfortable standard room",                "Daily breakfast buffet",                "Pool and fitness access",                "24-hour room service"
              ]
            },
            {
              id: "luxury-retreat",              tag: "Luxury Retreat",              tagIcon: Crown,
              price: "$800",              period: "/night",              description: "Experience ultimate luxury with our premium suite and exclusive services.",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Deluxe suite with premium amenities",                "à la carte breakfast",                "Spa and wellness credits ($200 value)",                "Priority dining reservations",                "Personal concierge service",                "Evening wine reception"
              ]
            },
            {
              id: "honeymoon-special",              tag: "Honeymoon Special",              tagIcon: Heart,
              price: "$650",              period: "/night",              description: "Create unforgettable memories with our romantic honeymoon package.",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "What's Included:",              features: [
                "Premium suite with romantic setup",                "Champagne and rose petals",                "Couples spa treatment",                "Special dinner at fine dining restaurant",                "Sunset pool access",                "Photography session"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready to Relax?"
          tagIcon={Phone}
          title="Begin Your Unforgettable Journey"
          description="Contact our reservations team today to secure your stay and experience luxury like never before. We're here to make your visit exceptional."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Call Us: +1 (555) 123-4567", href: "tel:+15551234567" },
            { text: "Email: reservations@sereneluxury.com", href: "mailto:reservations@sereneluxury.com" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#hero" },
                { label: "Rooms", href: "#rooms" },
                { label: "Amenities", href: "#amenities" },
                { label: "Book Now", href: "#pricing" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Spa & Wellness", href: "#amenities" },
                { label: "Restaurant", href: "#amenities" },
                { label: "Fitness Center", href: "#amenities" },
                { label: "Concierge", href: "#contact" }
              ]
            },
            {
              title: "About",              items: [
                { label: "Our Story", href: "#about" },
                { label: "Awards", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cancellation Policy", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Serene Luxury Hotel. All rights reserved."
          bottomRightText="Crafted with care for your comfort"
        />
      </div>
    </ThemeProvider>
  );
}