"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from "next/link";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Luxe Haven"
          button={{
            text: "Book Now",            href: "/contact"
          }}
        />
        <div style={{ position: 'absolute', top: 0, left: 0, padding: '10px', display: 'flex', gap: '15px', zIndex: 1000 }}>
          <Link href="/">Home</Link>
          <Link href="/about">About</Link>
          <Link href="/rooms">Rooms</Link>
          <Link href="/amenities">Amenities</Link>
          <Link href="/contact">Contact</Link>
        </div>
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Ready to Book Your Stay?"
          description="Reserve your perfect room today and experience luxury hospitality at Luxe Haven. Our reservation team is ready to assist you with planning your ideal getaway."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Reserve Now"
          termsText="By booking with us, you agree to our cancellation policy and terms of service."
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Contact Information"
          title="We're Here to Help"
          description="Our dedicated concierge team is available 24/7 to assist with reservations, special requests, and travel arrangements. Whether you're planning a romantic getaway, business trip, or family vacation, we're committed to making your stay exceptional."
          metrics={[
            {
              value: "24/7",              title: "Concierge Service"
            },
            {
              value: "2hrs",              title: "Response Time"
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg"
          imageAlt="Luxurious hotel lobby with welcoming atmosphere"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Booking & Reservations"
          sideDescription="Everything you need to know about staying with us"
          faqs={[
            {
              id: "1",              title: "What are your check-in and check-out times?",              content: "Standard check-in is at 3:00 PM and check-out is at 11:00 AM. Early check-in and late check-out may be available upon request, subject to room availability."
            },
            {
              id: "2",              title: "Do you offer airport shuttle service?",              content: "Yes, we provide complimentary airport shuttle service for all guests. Please arrange this at least 24 hours in advance by contacting our concierge team."
            },
            {
              id: "3",              title: "What is your cancellation policy?",              content: "Cancellations made 48 hours prior to arrival receive a full refund. Cancellations within 48 hours are subject to a one-night charge. Special rates may have different policies."
            },
            {
              id: "4",              title: "How can I make special arrangements?",              content: "Contact our concierge team at reservations@luxehaven.com or call us directly. We're happy to arrange special celebrations, dietary accommodations, or accessibility needs."
            }
          ]}
          textPosition="left"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterLogoEmphasis
        logoText="Luxe Haven"
        columns={[
          {
            items: [
              { label: "About", href: "/about" },
              { label: "Rooms", href: "/rooms" },
              { label: "Amenities", href: "/amenities" }
            ]
          },
          {
            items: [
              { label: "Team", href: "/team" },
              { label: "Guest Reviews", href: "/testimonials" },
              { label: "FAQ", href: "/faq" }
            ]
          },
          {
            items: [
              { label: "Contact Us", href: "/contact" },
              { label: "Privacy Policy", href: "#" },
              { label: "Terms & Conditions", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}