"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Camera, TrendingUp, Star, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";

export default function GalleryPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Serenity Suites"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Rooms", id: "/rooms" },
            { name: "Amenities", id: "/amenities" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Book Now",
            href: "#booking"
          }}
        />
      </div>

      <div id="gallery-hero" data-section="gallery-hero">
        <MediaAbout
          title="Visual Journey Through Luxury"
          description="Explore the breathtaking beauty of Serenity Suites through our curated collection of images showcasing elegant accommodations, world-class amenities, and the serene ambiance that defines our exceptional hospitality experience."
          tag="Photo Gallery"
          tagIcon={Camera}
          imageSrc="https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
          imageAlt="Stunning luxury hotel suite with panoramic views"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View Full Gallery", href: "#gallery-collection" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Capturing Memorable Moments"
          description="Every image tells a story of luxury, comfort, and exceptional experiences that our guests treasure long after their stay."
          tag="Gallery Highlights"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",
              value: "1,000+",
              title: "Professional Photos",
              description: "Stunning images showcasing every corner of luxury",
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",
              imageAlt: "Professional photography of luxury hotel interiors"
            },
            {
              id: "2",
              value: "50+",
              title: "Featured Locations",
              description: "From suites to amenities, every space documented",
              imageSrc: "https://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817020.jpg",
              imageAlt: "Various hotel locations and amenities featured"
            },
            {
              id: "3",
              value: "12 Months",
              title: "Seasonal Collection",
              description: "Year-round beauty captured in every season",
              imageSrc: "https://img.b2bpic.net/free-photo/woman-relaxing-spa_329181-13186.jpg",
              imageAlt: "Seasonal photography collection of hotel experiences"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Visual Experiences"
          description="Guests share how the beauty and elegance captured in our galleries reflect the exceptional reality of their Serenity Suites experience."
          tag="Photo Testimonials"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",
              name: "Emma Richardson",
              role: "Photography Enthusiast",
              testimonial: "The hotel is even more stunning in person than in the photos! Every angle reveals new beauty, and the attention to visual detail throughout the property is remarkable.",
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",
              imageAlt: "Guest Emma Richardson"
            },
            {
              id: "2",
              name: "James Wilson",
              role: "Travel Blogger",
              testimonial: "As someone who captures travel experiences professionally, I was impressed by how the hotel's actual beauty exceeded even their gorgeous gallery photos. Truly photogenic luxury.",
              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: "Guest James Wilson"
            },
            {
              id: "3",
              name: "Sophia Chen",
              role: "Interior Design Lover",
              testimonial: "The visual harmony throughout Serenity Suites is breathtaking. From the lobby to our suite, every space is perfectly composed and Instagram-worthy. A designer's dream!",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",
              imageAlt: "Guest Sophia Chen"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

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