"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactForm from "@/components/form/ContactForm";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";

export default function ContactPage() {
    return (
        <ThemeProvider
            defaultButtonVariant="icon-arrow"
            defaultTextAnimation="background-highlight"
            borderRadius="soft"
            contentWidth="medium"
            sizing="mediumLarge"
            background="floatingGradient"
            cardStyle="glass-elevated"
            primaryButtonStyle="shadow"
            secondaryButtonStyle="layered"
            headingFontWeight="semibold"
        >
            <ReactLenis root>
                <div id="nav" data-section="nav">
                    <NavbarLayoutFloatingInline
                        brandName="Bella Italia"
                        navItems={[
                            { name: "Menu", id: "/#menu" },
                            { name: "About", id: "/#about" },
                            { name: "Contact", id: "/contact" },
                            { name: "Reviews", id: "/#testimonials" }
                        ]}
                        button={{
                            text: "Book a Table",                            href: "#contact-form-section"
                        }}
                    />
                </div>

                <div id="contact-form-section" data-section="contact-form-section">
                    <ContactForm
                        title="Get in Touch"
                        description="Have a question or need to make a reservation? Fill out the form below and we'll get back to you shortly."
                        tag="Contact Us"
                        inputPlaceholder="Your email"
                        buttonText="Send Message"
                        useInvertedBackground={true}
                    />
                </div>

                <div id="location-details-section" data-section="location-details-section">
                    <ContactText
                        text={`Our Location:\n123 Italia Street\nRome, IT 00100\n\nPhone: +39 06 1234 5678\nEmail: info@bellaitalia.com\n\nHours:\nMon-Sat: 5:00 PM - 10:00 PM\nSunday: Closed`}
                        background={{ variant: "plain" }}
                        buttons={[
                            { text: "Get Directions", href: "https://www.google.com/maps/search/123+Italia+Street,+Rome" },
                            { text: "Call Us", href: "tel:+390612345678" }
                        ]}
                        useInvertedBackground={true}
                    />
                </div>

                <div id="footer" data-section="footer">
                    <FooterLogoReveal
                        logoText="Bella Italia"
                        leftLink={{ text: "Privacy Policy", href: "/#privacy" }}
                        rightLink={{ text: "Contact Us", href: "/contact" }}
                    />
                </div>
            </ReactLenis>
        </ThemeProvider>
    );
}