"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import TeamCardTen from "@/components/sections/team/TeamCardTen";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import Link from "next/link";
import { Award, CheckCircle, Star, ThumbsUp } from "lucide-react";

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

  const aboutNavItems = navItems.map((item) => ({
    name: item.name,
    id: item.id,
  }));

  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={aboutNavItems} />
      </div>

      <div id="doctor" data-section="doctor">
        <TeamCardTen
          title="Meet Our Expert"
          tag="Led by Excellence"
          tagAnimation="slide-up"
          membersAnimation="slide-up"
          members={[
            {
              id: "dr-anmol",
              name: "Dr. Anmol Billore",
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-proud-dentist-clinic_23-2148396169.jpg?_wi=2",
              imageAlt: "professional dentist doctor portrait clinic",
            },
          ]}
          memberVariant="card"
          useInvertedBackground={false}
          ariaLabel="Doctor introduction section"
        />
      </div>

      <div id="trust-metrics" data-section="trust-metrics">
        <MetricCardThree
          title="Trusted by Thousands of Satisfied Patients"
          description="Our commitment to excellence and patient care is reflected in these impressive numbers and patient testimonials."
          tag="Why Choose Us"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "rating",
              icon: Star,
              title: "Patient Rating",
              value: "4.9★",
            },
            {
              id: "reviews",
              icon: ThumbsUp,
              title: "Patient Reviews",
              value: "461+",
            },
            {
              id: "experience",
              icon: Award,
              title: "Years Experience",
              value: "15+",
            },
            {
              id: "treatments",
              icon: CheckCircle,
              title: "Treatments",
              value: "8000+",
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Trust metrics section"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our dental treatments and clinic."
          tag="Common Questions"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",
              title: "Are dental implants painful?",
              content:
                "No, implant procedures are performed under anesthesia. You won't feel pain during the procedure. Some mild discomfort may be experienced during healing, which is normal and manageable with prescribed pain relievers.",
            },
            {
              id: "2",
              title: "How long does root canal treatment take?",
              content:
                "Most RCT procedures can be completed in 1-2 sessions, each lasting 45-90 minutes. Our advanced equipment helps us complete treatment efficiently while ensuring complete infection removal.",
            },
            {
              id: "3",
              title: "Are clear aligners effective?",
              content:
                "Yes, clear aligners are very effective for straightening teeth. They work by gradually shifting teeth into proper alignment. Treatment typically takes 6-18 months depending on the complexity of misalignment.",
            },
            {
              id: "4",
              title: "How often should I visit the dentist?",
              content:
                "We recommend visiting your dentist every 6 months for regular checkups and cleaning. However, some patients may need more frequent visits depending on their oral health status.",
            },
            {
              id: "5",
              title: "What is your cancellation policy?",
              content:
                "We request at least 24 hours notice for appointment cancellations. Emergency appointments can be accommodated on short notice. Please call us directly to reschedule.",
            },
            {
              id: "6",
              title: "Do you treat emergency cases?",
              content:
                "Yes, we prioritize emergency dental cases. Please call us immediately if you have severe tooth pain or dental emergencies. We maintain flexible scheduling for urgent situations.",
            },
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          animationType="smooth"
          useInvertedBackground={false}
          ariaLabel="FAQ section"
        />
      </div>

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

export default AboutPage;