a4d3af2f-77b2-41cf-bd2f-0cf6e84c3595/src/app/booking/page.tsx

"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { CheckCircle, HelpCircle } from "lucide-react";

export default function BookingPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Rooms", id: "rooms" },
    { name: "Dining", id: "dining" },
    { name: "Facilities", id: "facilities" },
    { name: "Location", id: "location" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Mövenpick Karachi"
          navItems={navItems}
          button={{
            text: "Book Now",
            href: "/booking",
          }}
          animateOnLoad={true}
        />
      </div>

      <div id="booking-hero" data-section="booking-hero">
        <HeroBillboard
          title="Book Your Stay"
          description="Reserve your luxury experience at Mövenpick Karachi with our secure online booking system."
          background={{ variant: "radial-gradient" }}
          tag="Instant Confirmation"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
        />
      </div>

      <div id="booking-form" data-section="booking-form">
        <ContactSplitForm
          title="Booking Form"
          description="Provide your details below to check availability and complete your reservation."
          useInvertedBackground={false}
          inputs={[
            {
              name: "checkin",
              type: "date",
              placeholder: "Check-in Date",
              required: true,
            },
            {
              name: "checkout",
              type: "date",
              placeholder: "Check-out Date",
              required: true,
            },
            {
              name: "guests",
              type: "number",
              placeholder: "Number of Guests",
              required: true,
            },
            {
              name: "roomtype",
              type: "text",
              placeholder: "Room Type",
              required: true,
            },
            {
              name: "name",
              type: "text",
              placeholder: "Your Full Name",
              required: true,
            },
            {
              name: "email",
              type: "email",
              placeholder: "Your Email",
              required: true,
            },
          ]}
          textarea={{
            name: "requests",
            placeholder: "Special Requests (Optional)",
            rows: 3,
            required: false,
          }}
          buttonText="Check Availability"
        />
      </div>

      <div id="booking-faq" data-section="booking-faq">
        <FaqSplitMedia
          title="Booking FAQs"
          description="Find answers to common questions about our booking process."
          textboxLayout="default"
          useInvertedBackground={true}
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0edtq3&_wi=2"
          imageAlt="Hotel booking process"
          faqsAnimation="blur-reveal"
          animationType="smooth"
          faqs={[
            {
              id: "cancellation",
              title: "What is the cancellation policy?",
              content: "Most reservations can be cancelled up to 48 hours before arrival for a full refund. Non-refundable rates have different terms. Check your booking confirmation for specific details.",
            },
            {
              id: "modification",
              title: "Can I modify my booking?",
              content: "Yes, modifications can be made online or by contacting our reservations team at least 24 hours before check-in, subject to availability.",
            },
            {
              id: "payment",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, debit cards, bank transfers, and digital payment methods. Payment security is guaranteed with encrypted transactions.",
            },
            {
              id: "bestrate",
              title: "Do you offer a Best Rate Guarantee?",
              content: "Yes, we guarantee the lowest rates when you book directly through our website. If you find a lower rate elsewhere, we'll match it and offer an additional discount.",
            },
            {
              id: "loyalty",
              title: "Are there loyalty or membership benefits?",
              content: "Frequent guests enjoy exclusive rates, room upgrades, and special privileges through our loyalty program. Ask our reservations team for details.",
            },
          ]}
        />
      </div>

      <div id="booking-footer" data-section="booking-footer">
        <FooterLogoReveal
          logoText="Mövenpick Karachi"
          leftLink={{
            text: "Need Help? Contact Reservations",
            href: "/contact",
          }}
          rightLink={{
            text: "Return to Home",
            href: "/",
          }}
        />
      </div>
    </ThemeProvider>
  );
}