"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, DollarSign, Star, Crown } from "lucide-react";

export default function AmenitiesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="none"
      cardStyle="gradient-radial"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Luxe 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: "booking"
          }}
        />
      </div>

      <div id="amenities" data-section="amenities">
        <FeatureCardTwelve
          title="World-Class Amenities"
          description="Indulge in our premium facilities designed for your comfort and relaxation."
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "spa",
              label: "Spa & Wellness",
              title: "Rejuvenate Your Body and Mind",
              items: [
                "Full-service spa with expert therapists",
                "Steam room and sauna",
                "Wellness consultations"
              ],
              buttons: [
                { text: "Book Spa", href: "spa" }
              ]
            },
            {
              id: "dining",
              label: "Fine Dining",
              title: "Culinary Excellence",
              items: [
                "Award-winning restaurant",
                "International cuisine",
                "Private dining options"
              ],
              buttons: [
                { text: "Make Reservation", href: "dining" }
              ]
            },
            {
              id: "pool",
              label: "Recreation",
              title: "Outdoor Activities & Relaxation",
              items: [
                "Olympic-size swimming pool",
                "Fitness center",
                "Tennis courts"
              ],
              buttons: [
                { text: "Explore More", href: "recreation" }
              ]
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Flexible Room Rates"
          description="Choose the perfect plan for your stay with our transparent pricing."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          plans={[
            {
              id: "1",
              badge: "Budget Friendly",
              badgeIcon: DollarSign,
              price: "$129",
              subtitle: "Per night • Classic Room",
              buttons: [
                { text: "Book Now", href: "booking" },
                { text: "Details" }
              ],
              features: [
                "Queen bed with premium linens",
                "City view",
                "Free Wi-Fi and parking",
                "Complimentary breakfast"
              ]
            },
            {
              id: "2",
              badge: "Most Popular",
              badgeIcon: Star,
              price: "$249",
              subtitle: "Per night • Deluxe Suite",
              buttons: [
                { text: "Book Now", href: "booking" },
                { text: "Details" }
              ],
              features: [
                "King bed with mountain view",
                "Private balcony",
                "Marble bathroom",
                "Room service 24/7"
              ]
            },
            {
              id: "3",
              badge: "Luxury",
              badgeIcon: Crown,
              price: "$499",
              subtitle: "Per night • Presidential Suite",
              buttons: [
                { text: "Book Now", href: "booking" },
                { text: "Details" }
              ],
              features: [
                "Multiple rooms with ocean view",
                "Private spa and hot tub",
                "Personal concierge service",
                "Exclusive dining access"
              ]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxe Hotel"
          columns={[
            {
              items: [
                { label: "Rooms", href: "rooms" },
                { label: "Amenities", href: "amenities" },
                { label: "Spa & Wellness", href: "spa" }
              ]
            },
            {
              items: [
                { label: "Dining", href: "dining" },
                { label: "Events", href: "events" },
                { label: "Special Offers", href: "offers" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "about" },
                { label: "Reviews", href: "reviews" },
                { label: "Careers", href: "careers" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "contact" },
                { label: "Privacy Policy", href: "privacy" },
                { label: "Terms & Conditions", href: "terms" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}