"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function RoomsPage() {
  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="rooms" data-section="rooms">
        <ProductCardFour
          title="Our Room Collection"
          description="Discover elegantly appointed accommodations designed for maximum comfort and style."
          tag="Luxury Accommodations"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          products={[
            {
              id: "standard-room",
              name: "Standard Room",
              price: "$150/night",
              variant: "Queen Bed • City View",
              imageSrc: "https://img.b2bpic.net/free-photo/cozy-lively-home-interior-design_23-2151118953.jpg",
              imageAlt: "Standard hotel room"
            },
            {
              id: "deluxe-room", 
              name: "Deluxe Room",
              price: "$250/night",
              variant: "King Bed • Ocean View",
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111480.jpg",
              imageAlt: "Deluxe hotel room"
            },
            {
              id: "premium-suite",
              name: "Premium Suite",
              price: "$400/night",
              variant: "King Bed • Panoramic View",
              imageSrc: "https://img.b2bpic.net/free-photo/pillow-bed_1203-3064.jpg",
              imageAlt: "Premium hotel suite"
            }
          ]}
        />
      </div>

      <div id="room-details" data-section="room-details">
        <MediaAbout
          title="Unmatched Comfort & Elegance"
          description="Every room at our luxury hotel is meticulously designed to provide an exceptional guest experience. From premium linens and marble bathrooms to stunning views and cutting-edge amenities, we've crafted spaces that define modern luxury hospitality."
          tag="Room Features"
          imageSrc="https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
          imageAlt="Luxury hotel suite interior"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Book Now", href: "/contact" }
          ]}
        />
      </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>
  );
}