"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactForm from "@/components/form/ContactForm";
import FooterBase from '@/components/sections/footer/FooterBase';
import { CalendarCheck } from 'lucide-react';

export default function BookingPage() {
  const handleSubmit = (email: string) => {
    console.log("Booking request for:", email);
    alert("Vielen Dank für Ihre Anfrage! Wir melden uns in Kürze bei Ihnen.");
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="aurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName=""
          navItems={[
            { name: "Startseite", id: "/" },
            { name: "Leistungen", id: "services" },
            { name: "Über Uns", id: "about" },
            { name: "Kontakt", id: "contact" },
            { name: "Online Termin", id: "/booking" }
          ]}
          button={{
            text: "Termin Online Buchen",            href: "/booking"
          }}
        />
      </div>

      <div id="booking-form" data-section="booking-form" className="py-20">
        <ContactForm
          tag="Termin vereinbaren"
          tagIcon={CalendarCheck}
          title="Buchen Sie Ihren Termin online"
          description="Nutzen Sie unser praktisches Online-Formular, um Ihren Wunschtermin schnell und unkompliziert zu reservieren. Wir freuen uns auf Sie!"
          inputPlaceholder="Ihre E-Mail-Adresse"
          buttonText="Termin anfragen"
          termsText="Mit dem Absenden stimmen Sie unserer Datenschutzerklärung zu."
          onSubmit={handleSubmit}
          centered={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Zahnarzt Dr. Kurt Fleck und Dr. S.H. Höhn-Fleck"
          copyrightText="© 2024 Zahnarzt Dr. Kurt Fleck und Dr. S.H. Höhn-Fleck | Alle Rechte vorbehalten."
          columns={[
            {
              title: "Leistungen",              items: [
                { label: "Prophylaxe", href: "#services" },
                { label: "Implantologie", href: "#services" },
                { label: "Ästhetische Zahnheilkunde", href: "#services" },
                { label: "Wurzelkanalbehandlung", href: "#services" },
                { label: "Online Termin", href: "/booking" }
              ]
            },
            {
              title: "Praxis",              items: [
                { label: "Über Uns", href: "#about" },
                { label: "Unser Team", href: "#testimonials" },
                { label: "Praxisausstattung", href: "#features" },
                { label: "Kontakt", href: "#contact" }
              ]
            },
            {
              title: "Folgen Sie uns",              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "Google Reviews", href: "https://google.com" },
                { label: "Anfahrt", href: "#contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
