"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Heart, Award, Facebook, Instagram, Twitter, Linkedin } from 'lucide-react';

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Serenity Hotel"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "About", id: "about" },
            { name: "Rooms", id: "rooms" },
            { name: "Amenities", id: "features" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "pricing" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          background={{ variant: "glowing-orb" }}
          title="Experience Luxury Hospitality"
          description="Immerse yourself in our world-class accommodations, exceptional service, and breathtaking destinations. Your perfect getaway awaits."
          kpis={[
            { value: "500+", label: "Satisfied Guests" },
            { value: "4.9★", label: "Guest Rating" },
            { value: "25+", label: "Years of Excellence" }
          ]}
          enableKpiAnimation={true}
          tag="Welcome to Serenity Hotel"
          tagIcon={Sparkles}
          imageSrc="https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
          imageAlt="Luxury hotel bedroom with ocean view"
          imagePosition="right"
          buttons={[
            { text: "Book Your Stay", href: "pricing" },
            { text: "Explore Rooms", href: "rooms" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="About Serenity Hotel"
          description="Discover what makes us the preferred choice for discerning travelers worldwide."
          tabs={[
            {
              id: "heritage",
              label: "Our Heritage",
              description: "With 25 years of hospitality excellence, Serenity Hotel has consistently delivered unforgettable experiences. Founded with a vision to create sanctuaries of comfort, we've grown to become a trusted name in luxury travel."
            },
            {
              id: "mission",
              label: "Our Mission",
              description: "We are committed to providing world-class hospitality that exceeds expectations. Every guest receives personalized service, premium accommodations, and access to exceptional amenities designed for ultimate relaxation."
            },
            {
              id: "commitment",
              label: "Our Commitment",
              description: "Sustainability and community responsibility are core to our values. We implement eco-friendly practices while supporting local communities and ensuring our guests enjoy their stay with peace of mind."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/room-house-decorated-with-brazilian-folklore-design_23-2150794111.jpg"
          imageAlt="Serenity Hotel Team members"
          imagePosition="right"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="rooms" data-section="rooms">
        <ProductCardThree
          title="Featured Room Types"
          description="Choose from our carefully curated selection of elegantly appointed rooms and suites."
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "standard",
              name: "Standard Room",
              price: "$149/night",
              imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed_1203-9643.jpg",
              imageAlt: "Standard Room with queen bed"
            },
            {
              id: "deluxe",
              name: "Deluxe Suite",
              price: "$249/night",
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111480.jpg",
              imageAlt: "Deluxe Suite with panoramic views"
            },
            {
              id: "penthouse",
              name: "Penthouse Suite",
              price: "$599/night",
              imageSrc: "https://img.b2bpic.net/free-photo/room-interior-hotel-bedroom_23-2150683421.jpg",
              imageAlt: "Penthouse Suite with private terrace"
            }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          title="Premium Amenities"
          description="Discover the world-class facilities and services available exclusively for our guests."
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "01",
              title: "Luxury Spa",
              description: "Rejuvenate with our full-service spa offering holistic treatments and wellness programs.",
              imageSrc: "https://img.b2bpic.net/free-photo/indoor-design-luxury-resort_23-2150497252.jpg",
              imageAlt: "Serene spa treatment room"
            },
            {
              id: "02",
              title: "Fine Dining",
              description: "Indulge in culinary excellence at our award-winning restaurants and bars.",
              imageSrc: "https://img.b2bpic.net/free-photo/breakfast-tray-put-single-bed-with-white-bedding_141793-117.jpg",
              imageAlt: "Upscale restaurant dining"
            },
            {
              id: "03",
              title: "Olympic Pool",
              description: "Relax by our stunning infinity pool overlooking the city skyline.",
              imageSrc: "https://img.b2bpic.net/free-photo/modern-luxurious-bedroom-elegant-comfortable-design-generated-by-ai_188544-29281.jpg",
              imageAlt: "Luxury swimming pool resort"
            },
            {
              id: "04",
              title: "Fitness Center",
              description: "State-of-the-art equipment and personal training services for active guests.",
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-hotel_1150-10836.jpg",
              imageAlt: "Modern fitness gym facility"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Flexible Booking Plans"
          description="Select the perfect package tailored to your needs and budget."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "weekday",
              badge: "Popular",
              badgeIcon: Sparkles,
              price: "$149 - $249",
              subtitle: "Monday to Thursday",
              buttons: [{ text: "Book Weekday", href: "https://booking.example.com" }],
              features: [
                "Standard or Deluxe Room",
                "Full breakfast included",
                "Spa discount (20%)",
                "Complimentary parking",
                "WiFi access"
              ]
            },
            {
              id: "weekend",
              badge: "Value for Couples",
              badgeIcon: Heart,
              price: "$299 - $399",
              subtitle: "Friday to Sunday",
              buttons: [{ text: "Book Weekend", href: "https://booking.example.com" }],
              features: [
                "Deluxe Suite",
                "Breakfast and dinner",
                "Spa package (2 treatments)",
                "Welcome champagne",
                "Room upgrade (based on availability)"
              ]
            },
            {
              id: "extended",
              badge: "Best Value",
              badgeIcon: Award,
              price: "$1,299/week",
              subtitle: "7 nights or more",
              buttons: [{ text: "Book Extended Stay", href: "https://booking.example.com" }],
              features: [
                "Any room type",
                "All meals included",
                "Daily spa service",
                "Complimentary activities",
                "Private concierge service",
                "Free airport transfer"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Guests Say"
          description="Read authentic reviews from travelers who have experienced Serenity Hotel."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          showRating={true}
          carouselMode="buttons"
          testimonials={[
            {
              id: "1",
              name: "Margaret Johnson",
              handle: "@margaret_travel",
              testimonial: "An absolutely wonderful stay! The staff went above and beyond to make our honeymoon unforgettable. Every detail was perfectly executed.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
              imageAlt: "Margaret Johnson"
            },
            {
              id: "2",
              name: "David Chen",
              handle: "@david_explores",
              testimonial: "Best hotel experience I've had in years. The spa was divine, the food exceptional, and the views breathtaking. Highly recommended!",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg",
              imageAlt: "David Chen"
            },
            {
              id: "3",
              name: "Sophie Laurent",
              handle: "@sophielaurent",
              testimonial: "The penthouse suite is pure luxury. Woke up to stunning city views, enjoyed world-class service, and felt completely pampered throughout.",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
              imageAlt: "Sophie Laurent"
            },
            {
              id: "4",
              name: "James Mitchell",
              handle: "@james_business",
              testimonial: "Perfect for business travel. Excellent WiFi, great work spaces, and the restaurant staff remembers your preferences. Outstanding hospitality!",
              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
              imageAlt: "James Mitchell"
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Serenity Hotel"
          copyrightText="© 2025 Serenity Hotel. All rights reserved."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/serenityhotel", ariaLabel: "Facebook" },
            { icon: Instagram, href: "https://instagram.com/serenityhotel", ariaLabel: "Instagram" },
            { icon: Twitter, href: "https://twitter.com/serenityhotel", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/serenityhotel", ariaLabel: "LinkedIn" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}