"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Sparkles } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Reviews", id: "reviews" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Infinity Dental"
          navItems={navItems.map((item) => ({
            name: item.name,
            id: item.id,
          }))}
        />
      </div>

      <div id="contact-hero" data-section="contact-hero">
        <HeroBillboardScroll
          title="Get In Touch With Infinity Dental"
          description="Have questions about our dental services? Schedule an appointment or reach out to us directly. We're here to help you achieve your best smile."
          tag="Contact Us"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Call Now",
              href: "tel:+919876543210",
            },
            {
              text: "Book Appointment",
              href: "#appointment",
            },
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/dentist-inviting-senior-man-consultation-dental-room-while-nurse-giving-patient-form-fill-indicating-sit-chair-waiting-area-slow-motion-shot-crowded-professional-orthodontist-office_482257-3575.jpg?_wi=2"
          imageAlt="Contact Infinity Dental Clinic"
          background={{
            variant: "radial-gradient",
          }}
          ariaLabel="Contact page hero section"
        />
      </div>

      <div id="appointment-cta" data-section="appointment-cta">
        <ContactText
          text="Ready to transform your smile? Limited appointment slots available this week. Contact us now for a complimentary smile consultation and treatment plan!"
          animationType="entrance-slide"
          buttons={[
            {
              text: "Call Now: +91-9876543210",
              href: "tel:+919876543210",
            },
            {
              text: "WhatsApp Us",
              href: "https://wa.me/919876543210",
            },
            {
              text: "Book Online",
              href: "#appointment",
            },
          ]}
          background={{
            variant: "gradient-bars",
          }}
          useInvertedBackground={false}
          ariaLabel="Call to action for appointment booking"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Infinity Dental"
          leftLink={{
            text: "Privacy Policy",
            href: "#",
          }}
          rightLink={{
            text: "Home",
            href: "/",
          }}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}