"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, MapPin, Users, Zap, Utensils, Waves } from 'lucide-react';

export default function AmenitiesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Luxury Hotel"
          navItems={[
            { name: "Rooms", id: "/rooms" },
            { name: "Amenities", id: "/amenities" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="amenities-hero" data-section="amenities-hero">
        <MediaAbout
          title="World-Class Amenities"
          description="Immerse yourself in a world of luxury with our exceptional facilities and services. From rejuvenating spa treatments to world-class dining, every detail has been crafted to exceed your expectations."
          tag="Premium Services"
          imageSrc="https://img.b2bpic.net/free-photo/woman-relaxing-bath-with-bubbles_1303-24667.jpg"
          imageAlt="Luxury spa wellness experience"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Book Experience", href: "/contact" }
          ]}
        />
      </div>

      <div id="amenities-features" data-section="amenities-features">
        <FeatureBento
          title="Exceptional Facilities"
          description="Discover the full range of premium amenities and services designed to enhance every moment of your stay."
          tag="Luxury Services"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          features={[
            {
              title: "Award-Winning Spa",
              description: "Rejuvenate your body and mind with our comprehensive spa services, therapeutic treatments, and wellness programs.",
              bentoComponent: "globe"
            },
            {
              title: "Fine Dining Restaurant",
              description: "Experience culinary excellence with our internationally acclaimed restaurant featuring seasonal menus and premium ingredients.",
              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Infinity Pool & Fitness Center",
              description: "Stay active with our Olympic-sized infinity pool, state-of-the-art fitness center, and personal training services.",
              bentoComponent: "line-chart"
            },
            {
              title: "24/7 Concierge Services",
              description: "Our dedicated concierge team provides personalized assistance for reservations, tours, and bespoke experiences.",
              bentoComponent: "orbiting-icons",
              centerIcon: Sparkles,
              items: [
                { icon: MapPin, ring: 1 },
                { icon: Users, ring: 2 },
                { icon: Zap, ring: 3 }
              ]
            },
            {
              title: "Private Beach Access",
              description: "Enjoy exclusive access to our pristine private beach with complimentary water sports and beachside service.",
              bentoComponent: "map"
            },
            {
              title: "Business Center",
              description: "Fully equipped business facilities with meeting rooms, conference spaces, and high-speed internet connectivity.",
              bentoComponent: "3d-stack-cards",
              items: [
                { icon: Utensils, title: "Meeting Rooms", subtitle: "Private spaces", detail: "Equipped with latest tech" },
                { icon: Waves, title: "Conference Center", subtitle: "Large events", detail: "Up to 200 guests" },
                { icon: Sparkles, title: "Business Lounge", subtitle: "Work in comfort", detail: "Premium amenities" }
              ]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Luxury Hotel"
          columns={[
            {
              items: [
                { label: "Rooms", href: "/rooms" },
                { label: "Amenities", href: "/amenities" },
                { label: "About", href: "/about" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "/contact" },
                { label: "Careers", href: "https://example.com/careers" },
                { label: "Press", href: "https://example.com/press" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "https://example.com/privacy" },
                { label: "Terms of Service", href: "https://example.com/terms" },
                { label: "Cookie Settings", href: "https://example.com/cookies" }
              ]
            },
            {
              items: [
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}