"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Calendar, HelpCircle } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeMediumTitles"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="City Hospital"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Services", id: "/services" },
            { name: "Doctors", id: "/doctors" },
            { name: "Contact", id: "/contact" },
          ]}
          button={{ text: "Book Appointment", href: "/contact" }}
        />
      </div>

      <div id="contact-main" data-section="contact-main">
        <ContactCenter
          tag="Book Your Appointment"
          title="Connect With City Hospital Maternity Home"
          description="Ready to begin your journey with us? Enter your email below and our experienced appointment team will contact you within 24 hours to schedule your consultation with one of our gynecologists and discuss your maternity care options."
          tagIcon={Calendar}
          tagAnimation="entrance-slide"
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email address"
          buttonText="Request Appointment"
          termsText="We respect your privacy. Your information will be used solely to contact you regarding your appointment and provide you with personalized maternity care options."
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqSplitMedia
          faqs={[
            {
              id: "1",
              title: "How do I book an appointment?",
              content: "You can book an appointment by filling out the contact form above, calling us directly at +92 333 456 7890, or visiting our facility in person. Our reception team will help you schedule a time that works best for you.",
            },
            {
              id: "2",
              title: "What should I bring to my first visit?",
              content: "Please bring your CNIC, health insurance card (if available), any previous medical records, and a list of medications you're taking. For first prenatal visit, bring your menstrual history information.",
            },
            {
              id: "3",
              title: "What are your operating hours?",
              content: "City Hospital Maternity Home operates 24/7 for emergency services. Regular consultations are available from 9 AM to 6 PM, Monday through Friday, and 10 AM to 2 PM on Saturdays. Emergency services are available round-the-clock.",
            },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/childcare-healthcare-facility-staff-high-fiving-ill-kid-medical-treatment-nurse-doing-high-five-gesture-with-sick-girl-resting-hospital-pediatric-ward-patient-bed_482257-49741.jpg"
          imageAlt="Contact and Appointment Information"
          title="Frequently Asked Questions"
          description="Find answers to common questions about scheduling appointments and what to expect during your visit to City Hospital."
          tag="Help & Information"
          tagIcon={HelpCircle}
          tagAnimation="entrance-slide"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="entrance-slide"
          faqsAnimation="entrance-slide"
          mediaPosition="left"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="City Hospital"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}