"use client";

import { Calendar, Star, CreditCard } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeMediumTitles"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navigation */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Rooms", id: "/rooms" },
            { name: "Amenities", id: "/amenities" },
            { name: "About", id: "/about" },
            { name: "Book Now", id: "/contact" }
          ]}
          brandName="Luxe Haven"
          bottomLeftText="Luxury Hospitality"
          bottomRightText="reservations@luxehaven.com"
        />
      </div>

      {/* Main Contact Section */}
      <div id="main-contact" data-section="main-contact">
        <ContactCenter
          tag="Reservations"
          title="Book Your Luxury Escape Today"
          description="Experience the pinnacle of hospitality at Luxe Haven. Our reservations team is ready to help you plan the perfect stay, complete with personalized service and exclusive amenities."
          tagIcon={Calendar}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email for booking assistance"
          buttonText="Start Booking"
          termsText="By submitting your email, you'll receive personalized booking assistance and exclusive offers from Luxe Haven."
        />
      </div>

      {/* Booking Options */}
      <div id="booking-options" data-section="booking-options">
        <PricingCardThree
          title="Choose Your Perfect Stay"
          description="Select from our range of elegantly appointed accommodations. Each booking includes complimentary WiFi, access to our fitness center, and 24/7 concierge service."
          tag="Book Now"
          tagIcon={CreditCard}
          plans={[
            {
              id: "standard",
              price: "$180",
              name: "Standard Room",
              buttons: [
                { text: "Book Now", href: "#" },
                { text: "Check Availability", href: "#" }
              ],
              features: [
                "Queen or Twin Beds",
                "Marble Bathroom",
                "HD Smart TV",
                "Free WiFi",
                "Air Conditioning",
                "24/7 Room Service"
              ]
            },
            {
              id: "deluxe",
              badge: "Most Popular",
              badgeIcon: Star,
              price: "$280",
              name: "Deluxe Room",
              buttons: [
                { text: "Book Now", href: "#" },
                { text: "Check Availability", href: "#" }
              ],
              features: [
                "King Bed with Premium Linens",
                "Luxury Bathroom with Amenities",
                "City View Balcony",
                "Minibar & Coffee Maker",
                "Concierge Service",
                "Free Spa Credit",
                "Complimentary Airport Transfer"
              ]
            },
            {
              id: "suite",
              price: "$550",
              name: "Presidential Suite",
              buttons: [
                { text: "Book Now", href: "#" },
                { text: "Check Availability", href: "#" }
              ],
              features: [
                "Separate Living Area",
                "Master Bedroom Suite",
                "Panoramic City Views",
                "Premium Toiletries & Amenities",
                "24/7 Dedicated Concierge",
                "Complimentary Breakfast",
                "Spa & Restaurant Credit",
                "Private Airport Transfers"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      {/* Contact Methods */}
      <div id="contact-methods" data-section="contact-methods">
        <FeatureCardOne
          title="Multiple Ways to Connect"
          description="Our guest services team is available around the clock to assist with reservations, special requests, and travel planning. Choose your preferred method of contact."
          tag="Contact Options"
          features={[
            {
              title: "Phone Reservations",
              description: "Speak directly with our reservations specialists available 24/7. Call us for immediate booking assistance and personalized recommendations.",
              imageSrc: "https://img.b2bpic.net/free-photo/side-view-woman-looking-out-window_23-2149622868.jpg",
              imageAlt: "Hotel concierge service"
            },
            {
              title: "Email Concierge",
              description: "Send us your detailed requests and preferences via email. Our concierge team will respond within 2 hours with personalized recommendations.",
              imageSrc: "https://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg",
              imageAlt: "Luxury hotel communication"
            },
            {
              title: "In-Person Visits",
              description: "Visit our elegant lobby to meet with our guest services team. Experience our hospitality firsthand before making your reservation.",
              imageSrc: "https://img.b2bpic.net/free-photo/hotel-resort-palm-trees-summer-time_116348-4.jpg",
              imageAlt: "Hotel lobby and reception"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      {/* Footer */}
      <FooterSimple
        columns={[
          {
            title: "Hotel",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Rooms", href: "/rooms" },
              { label: "Amenities", href: "/amenities" },
              { label: "Book Now", href: "/contact" }
            ]
          },
          {
            title: "Guest Services",
            items: [
              { label: "Concierge", href: "#" },
              { label: "Room Service", href: "#" },
              { label: "Spa & Wellness", href: "#" },
              { label: "Restaurant", href: "#" }
            ]
          },
          {
            title: "Information",
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Location", href: "#" },
              { label: "Careers", href: "#" },
              { label: "Group Bookings", href: "#" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy Policy", href: "#" },
              { label: "Terms & Conditions", href: "#" },
              { label: "Cookie Policy", href: "#" },
              { label: "Sitemap", href: "#" }
            ]
          }
        ]}
        bottomLeftText="© 2025 Luxe Haven Hotel. All rights reserved."
        bottomRightText="Crafted for Luxury Hospitality"
      />
    </ThemeProvider>
  );
}