"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import { Mail } from 'lucide-react';

export default function OnlineBookingPage() {
  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="Zahnarzt Dr. Kurt Fleck und Dr. S.H. Höhn-Fleck"
          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">
        <ContactSplit
          tag="Terminbuchung"
          tagIcon={Mail}
          title="Buchen Sie jetzt Ihren Zahnarzttermin online!"
          description="Wählen Sie Ihren Wunschtermin bequem von zu Hause aus. Wir freuen uns darauf, Sie in unserer Praxis begrüßen zu dürfen."
          background={{ variant: "plain" }}
          useInvertedBackground={true}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/online-booking-system.jpg"
          imageAlt="Online-Terminbuchungssystem auf einem Tablet"
          mediaPosition="left"
          mediaAnimation="slide-up"
          inputPlaceholder="Ihre E-Mail-Adresse"
          buttonText="Terminanfrage senden"
          termsText="Mit dem Absenden Ihrer Terminanfrage stimmen Sie unserer Datenschutzerklärung zu. Wir werden uns in Kürze mit Ihnen in Verbindung setzen, um Ihren Termin zu bestätigen."
        />
      </div>
    </ThemeProvider>
  );
}