"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Mail } from 'lucide-react';

export default function ContactPage() {
  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="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          title="Plan Your Perfect Getaway"
          description="Subscribe to our newsletter for exclusive offers, special promotions, and insider travel tips to enhance your next visit."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. We'll send you exclusive hotel offers and travel inspiration."
        />
      </div>

      <div id="booking-info" data-section="booking-info">
        <MediaAbout
          title="Ready to Experience Luxury?"
          description="Our reservations team is standing by to help you plan the perfect stay. Whether you're celebrating a special occasion, planning a romantic getaway, or organizing a business retreat, we'll ensure every detail exceeds your expectations."
          tag="Reservations"
          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 with scenic view"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Call Now", href: "tel:+1-800-LUXURY" },
            { text: "Email Us", href: "mailto:reservations@luxuryhotel.com" }
          ]}
        />
      </div>

      <div id="visit-info" data-section="visit-info">
        <MediaAbout
          title="Visit Our Stunning Location"
          description="Discover our prime location offering breathtaking ocean views, pristine beaches, and easy access to local attractions. Located in the heart of paradise, our hotel serves as the perfect base for exploring the region's natural beauty and cultural treasures."
          tag="Location"
          imageSrc="https://img.b2bpic.net/free-photo/luxury-poolside-experience-where-guests-bask-opulence-cabanas_1268-31113.jpg"
          imageAlt="Luxury hotel poolside experience"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Get Directions", href: "https://maps.google.com" }
          ]}
        />
      </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>
  );
}