"use client";

import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { CalendarCheck, Clock, ArrowRight, CircleDollarSign, CheckCircle, MessageSquare, Hourglass, BellRing } from "lucide-react";

export default function BookingPage() {
    const navItemsBooking = [
        { name: "Booking Process", id: "booking-process" },
        { name: "FAQs", id: "booking-faqs" }
    ];

    const bookingFeatures = [
        {
            title: "Real-time Availability",            description: "View and select slots that are instantly updated across our schedule, ensuring you always see what's truly open.",            icon: Clock,
            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp?_wi=1" }]
        },
        {
            title: "Interactive Calendar",            description: "Easily navigate through dates and times with a user-friendly calendar interface. Select your preferred slot with a tap.",            icon: CalendarCheck,
            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif?_wi=1" }]
        },
        {
            title: "Multi-step Reservation",            description: "Our guided booking flow makes reservations simple, breaking it down into clear, easy-to-follow steps.",            icon: ArrowRight,
            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp?_wi=1" }]
        },
        {
            title: "Instant Confirmation",            description: "Receive immediate confirmation of your booking, along with all the details you need, sent directly to your email.",            icon: CheckCircle,
            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif?_wi=1" }]
        },
        {
            title: "Appointment Reminders",            description: "Never miss an appointment with automated reminders sent to your preferred communication channel.",            icon: BellRing,
            mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif?_wi=1" }]
        }
    ];

    const bookingFaqs = [
        {
            id: "1",            title: "How do I view available booking slots?",            content: "Simply select your desired service, and our interactive calendar will display all real-time available slots. Click on a date to see times."
        },
        {
            id: "2",            title: "Can I reschedule or cancel my appointment?",            content: "Yes, you can easily reschedule or cancel your appointment through your booking confirmation email or by logging into your account. Please refer to our cancellation policy for details."
        },
        {
            id: "3",            title: "What happens after I complete my reservation?",            content: "Upon successful reservation, you'll receive an instant confirmation email with all appointment details. We'll also send reminders closer to your booking time."
        },
        {
            id: "4",            title: "Do you support group bookings?",            content: "Currently, our system supports individual bookings. For group reservations, please contact our support team directly."
        },
        {
            id: "5",            title: "Is there a waiting list for fully booked slots?",            content: "We do not currently offer an automated waiting list. We recommend checking back regularly as availability can change."
        }
    ];

    const footerColumns = [
        {
            title: "Services",            items: [
                { label: "Book Now", href: "/booking#booking-form" },
                { label: "Pricing", href: "/#pricing" },
                { label: "Features", href: "/#features" }
            ]
        },
        {
            title: "Company",            items: [
                { label: "About Us", href: "/#about" },                { label: "Contact", href: "/#contact" },
                { label: "Careers", href: "#" }
            ]
        }
    ];

    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="background-highlight"
            borderRadius="rounded"
            contentWidth="medium"
            sizing="medium"
            background="none"
            cardStyle="gradient-bordered"
            primaryButtonStyle="gradient"
            secondaryButtonStyle="layered"
            headingFontWeight="semibold"
        >
            <NavbarStyleFullscreen
                navItems={navItemsBooking}
                brandName="AgentFlow"
                bottomLeftText="Book Your Slot"
                bottomRightText="hello@agentflow.ai"
            />
            <HeroBillboard
                tag="Live Booking"
                tagIcon={CalendarCheck}
                title="Experience Seamless Online Reservations"
                description="Book your preferred services with real-time availability, instant confirmation, and an intuitive, animated flow designed for your convenience."
                buttons={[
                    { text: "Book Now", href: "#booking-form" },
                    { text: "Back to Home", href: "/" }
                ]}
                background={{ variant: "radial-gradient" }}
                imageSrc="https://images.unsplash.com/photo-1556742526-70e28151522f?w=1200&h=800&fit=crop&q=80"
                imageAlt="Booking calendar interface"
            />
            <div id="booking-process">
                <FeatureCardTwentyFive
                    features={bookingFeatures}
                    animationType="slide-up"
                    tag="How It Works"
                    tagIcon={Hourglass}
                    title="Your Multi-Step Reservation System"
                    description="From selecting your slot to receiving reminders, our booking process is designed for clarity and ease."
                    textboxLayout="default"
                    useInvertedBackground={false}
                />
            </div>
            <div id="booking-form">
                <ContactSplit
                    tag="Confirm Your Booking"
                    tagIcon={CircleDollarSign}
                    title="Secure Your Spot Instantly"
                    description="Fill in your details below to finalize your reservation. You'll receive an instant confirmation email with all the specifics."
                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/e-commerce/contact.webp?_wi=1"
                    imageAlt="Confirmation screen"
                    mediaAnimation="slide-up"
                    mediaPosition="right"
                    inputPlaceholder="Enter your email for confirmation"
                    buttonText="Confirm Booking"
                    termsText="By clicking Confirm Booking, you agree to our terms and conditions for services."
                    background={{ variant: "sparkles-gradient" }}
                    useInvertedBackground={false}
                    onSubmit={(email) => console.log("Booking confirmed for:", email)}
                />
            </div>
            <div id="booking-faqs">
                <FaqSplitMedia
                    faqs={bookingFaqs}
                    tag="Booking Help"
                    tagIcon={MessageSquare}
                    title="Frequently Asked Questions About Booking"
                    description="Find answers to common questions regarding our reservation process, cancellations, and more."
                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/ai-agents/image1.webp?_wi=1"
                    imageAlt="Customer support"
                    mediaAnimation="slide-up"
                    mediaPosition="left"
                    faqsAnimation="slide-up"
                    useInvertedBackground={false}
                />
            </div>
            <FooterBaseCard
                logoText="AgentFlow"
                columns={footerColumns}
                copyrightText="© 2025 AgentFlow. All rights reserved."
            />
        </ThemeProvider>
    );
}