"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmall"
      background="none"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Luxury Hotel"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Rooms", id: "/rooms" },
            { name: "Amenities", id: "/amenities" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Book Now", href: "/booking" }}
        />
      </div>

      <div id="main-contact" data-section="main-contact">
        <ContactSplit
          tag="Get In Touch"
          title="Experience Personalized Luxury Service"
          description="Connect with our dedicated team for reservations, special requests, or any assistance you need. We're here to ensure your stay exceeds every expectation from the moment you reach out to us."
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/hotel-lobby_23-2149397559.jpg"
          imageAlt="Luxury hotel concierge service"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Contact Us"
          termsText="Our guest services team will respond within 2 hours during business hours to assist with your inquiry."
        />
      </div>

      <div id="contact-methods" data-section="contact-methods">
        <FeatureBento
          title="Multiple Ways to Reach Us"
          description="Choose your preferred method of communication for reservations, inquiries, or special assistance from our dedicated hospitality team"
          tag="Contact Options"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="slide-up"
          features={[
            {
              title: "24/7 Concierge Service",
              description: "Our concierge team is available around the clock for immediate assistance with any request",
              bentoComponent: "chat",
              aiIcon: "Headphones",
              userIcon: "User",
              exchanges: [
                {
                  userMessage: "I need assistance with dinner reservations",
                  aiResponse: "I'd be delighted to help! What cuisine are you in the mood for and what time would you prefer?"
                },
                {
                  userMessage: "Something elegant for two people at 8 PM",
                  aiResponse: "Perfect! I have secured a table for two at our signature restaurant at 8 PM with a lovely view."
                }
              ],
              placeholder: "Chat with our concierge..."
            },
            {
              title: "Reservation Hotline",
              description: "Speak directly with our reservation specialists for bookings and special arrangements",
              bentoComponent: "phone",
              statusIcon: "Phone",
              alertIcon: "Bell",
              alertTitle: "Incoming Call",
              alertMessage: "Reservation specialist",
              apps: [
                { name: "Phone", icon: "Phone" },
                { name: "Messages", icon: "MessageSquare" },
                { name: "Contacts", icon: "Users" },
                { name: "Calendar", icon: "Calendar" },
                { name: "Notes", icon: "StickyNote" },
                { name: "Email", icon: "Mail" },
                { name: "Maps", icon: "MapPin" },
                { name: "Settings", icon: "Settings" }
              ]
            },
            {
              title: "Global Locations",
              description: "Find us at our premium locations worldwide for an exceptional hospitality experience",
              bentoComponent: "map"
            }
          ]}
        />
      </div>

      <div id="contact-testimonials" data-section="contact-testimonials">
        <TestimonialCardFive
          title="Guest Service Excellence"
          description="Discover why our guests consistently praise our responsive and personalized approach to hospitality service"
          tag="Service Reviews"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "Alexandra Bennett, Travel Executive",
              date: "Date: 10 May 2024",
              title: "Exceptional response and attention to detail",
              quote: "When I had a last-minute change to my travel plans, their team went above and beyond to accommodate every request. The level of personal attention was remarkable.",
              tag: "Concierge Service",
              avatarSrc: "https://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
              imageSrc: "https://img.b2bpic.net/free-photo/hotel-lobby_23-2149397559.jpg"
            },
            {
              id: "2",
              name: "Thomas Wright, Business Owner",
              date: "Date: 25 April 2024",
              title: "Professional service that anticipates needs",
              quote: "From booking to checkout, every interaction with the staff was seamless. They anticipated needs I didn't even know I had and delivered solutions effortlessly.",
              tag: "Guest Relations",
              avatarSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
              imageSrc: "https://img.b2bpic.net/free-photo/blue-sea-water-summer-silhouette_1203-3871.jpg"
            }
          ]}
        />
      </div>

      <FooterBaseCard
        logoText="Luxury Hotel"
        copyrightText="© 2024 Luxury Hotel Group. All rights reserved."
        columns={[
          {
            title: "Guest Services",
            items: [
              { label: "Book a Room", href: "/booking" },
              { label: "Check-in/Check-out", href: "/check-in" },
              { label: "Housekeeping", href: "/services" },
              { label: "Room Service", href: "/room-service" }
            ]
          },
          {
            title: "Facilities",
            items: [
              { label: "Spa & Wellness", href: "/spa" },
              { label: "Dining", href: "/restaurants" },
              { label: "Swimming Pool", href: "/pool" },
              { label: "Fitness Center", href: "/fitness" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Careers", href: "/careers" },
              { label: "Press", href: "/press" },
              { label: "Sustainability", href: "/sustainability" }
            ]
          },
          {
            title: "Contact",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Reservations", href: "tel:+1-800-HOTEL-01" },
              { label: "Feedback", href: "/feedback" },
              { label: "Complaints", href: "/complaints" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}