"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import { Facebook, Instagram, Twitter } from "lucide-react";

export default function BookingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-bordered"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={[
              {
                name: "Home",                id: "hero"},
              {
                name: "Features",                id: "features"},
              {
                name: "Gallery",                id: "gallery"},
              {
                name: "Legacy",                id: "legacy"},
              {
                name: "Team",                id: "team"},
              {
                name: "Testimonials",                id: "testimonials"},
              {
                name: "Contact",                id: "contact"},
              {
                name: "Booking",                id: "/booking"},
            ]}
            brandName="Beaston House"
          />
        </div>

        <div id="booking" data-section="booking">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Book Your Private Tour of Beaston House"
            description="Please fill out the form below to schedule a private viewing. Our team will contact you shortly to confirm your preferred date and time."
            inputs={[
              {
                name: "name",                type: "text",                placeholder: "Your Name",                required: true,
              },
              {
                name: "email",                type: "email",                placeholder: "Your Email",                required: true,
              },
              {
                name: "phone",                type: "tel",                placeholder: "Your Phone Number (Optional)",                required: false,
              },
              {
                name: "date",                type: "date",                placeholder: "Preferred Date",                required: true,
              },
              {
                name: "time",                type: "time",                placeholder: "Preferred Time (e.g., 10:00 AM)",                required: true,
              },
            ]}
            textarea={{
              name: "message",              placeholder: "Any special requests or questions?",              rows: 4,
            }}
            imageSrc="http://img.b2bpic.net/free-photo/empty-room-with-modern-luxury-interior-design-daylight-generated-by-ai_188544-23949.jpg"
            imageAlt="Luxurious interior design for booking section"
            mediaAnimation="opacity"
            mediaPosition="right"
            buttonText="Request Booking"
            ariaLabel="Booking Form Section"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterCard
            logoText="Beaston House"
            copyrightText="© 2024 Beaston House. All rights reserved."
            socialLinks={[
              {
                icon: Instagram,
                href: "#",                ariaLabel: "Instagram"},
              {
                icon: Facebook,
                href: "#",                ariaLabel: "Facebook"},
              {
                icon: Twitter,
                href: "#",                ariaLabel: "Twitter"},
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
