"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactText from "@/components/sections/contact/ContactText";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { HelpCircle, Instagram, Facebook, MessageCircle } from "lucide-react";

export default function ReservationsPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Menu", id: "menu" },
    { name: "Reservations", id: "reservations" },
    { name: "Gallery", id: "gallery" },
    { name: "Contact", id: "contact" },
  ];

  const reservationFaqs = [
    {
      id: "res-1",
      title: "How far in advance can I make a reservation?",
      content: "You can make reservations up to 30 days in advance through our online system. For larger groups or special events, we recommend booking 2-3 weeks ahead to ensure optimal seating arrangements and service quality.",
    },
    {
      id: "res-2",
      title: "What is your cancellation policy?",
      content: "Reservations can be cancelled or modified up to 24 hours before your booking time without any charges. Cancellations within 24 hours may incur a charge equivalent to 50% of the estimated bill based on party size.",
    },
    {
      id: "res-3",
      title: "Can I request a specific table or seating area?",
      content: "Absolutely! During the reservation process, you can specify your preferred seating area - indoor, outdoor, near the window, or the private dining room. We'll do our best to accommodate your preferences based on availability.",
    },
    {
      id: "res-4",
      title: "Do you accommodate dietary restrictions and allergies?",
      content: "Yes, we take dietary requirements very seriously. Please mention any allergies, dietary restrictions, or special requirements when making your reservation, and we'll inform our kitchen team to ensure a safe and enjoyable dining experience.",
    },
    {
      id: "res-5",
      title: "Is there a dress code at The Dera?",
      content: "We maintain a smart casual dress code. We ask guests to avoid beachwear, athletic wear, and overly casual clothing. However, our relaxed atmosphere welcomes comfortable yet presentable attire for all occasions.",
    },
    {
      id: "res-6",
      title: "Can I host a private event or celebration?",
      content: "Of course! We have a beautiful private dining room perfect for celebrations, corporate events, and intimate gatherings. Our event coordinator will work with you to customize your experience. Please contact us directly at least 2 weeks in advance for private bookings.",
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="grid"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="The Dera"
          navItems={navItems}
          button={{
            text: "Order Online",
            href: "#order",
          }}
        />
      </div>

      <div id="reservations-hero" data-section="reservations-hero">
        <ContactText
          text="Reserve Your Table at The Dera Today"
          animationType="reveal-blur"
          buttons={[
            {
              text: "Book on Daraz Dining",
              href: "https://www.daraz.pk",
            },
            {
              text: "WhatsApp Us",
              href: "https://wa.me/923001234567",
            },
            {
              text: "Call Us",
              href: "tel:+923001234567",
            },
          ]}
          background={{
            variant: "radial-gradient",
          }}
          useInvertedBackground={true}
        />
      </div>

      <div id="reservations-faq" data-section="reservations-faq">
        <FaqDouble
          title="Reservation Information & Support"
          description="Everything you need to know about booking your perfect dining experience at The Dera"
          tag="Booking Guide"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={reservationFaqs}
          faqsAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          ariaLabel="Reservations FAQ section"
        />
      </div>

      <div id="reservations-contact" data-section="reservations-contact">
        <ContactText
          text="Need Help with Your Reservation?"
          animationType="entrance-slide"
          buttons={[
            {
              text: "Back to Home",
              href: "/",
            },
            {
              text: "View Menu",
              href: "/menu",
            },
            {
              text: "Contact Support",
              href: "/contact",
            },
          ]}
          background={{
            variant: "downward-rays-static",
          }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="The Dera Cafe & Restaurant"
          copyrightText="© 2025 The Dera Cafe & Restaurant. All rights reserved. | Karachi, Pakistan"
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Instagram",
            },
            {
              icon: Facebook,
              href: "https://facebook.com",
              ariaLabel: "Facebook",
            },
            {
              icon: MessageCircle,
              href: "https://wa.me/923001234567",
              ariaLabel: "WhatsApp",
            },
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}