"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TextAbout from '@/components/sections/about/TextAbout';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { CheckCircle, Star, Calendar } from "lucide-react";
import Link from "next/link";

export default function ImplantsPage() {

  const navItems = [
    { name: "Home", id: "/" },
    { name: "General Dentistry", id: "/general-dentistry" },
    { name: "Implants", id: "/implants" },
    { name: "Root Canals", id: "/root-canals" },
    { name: "Cosmetic", id: "/cosmetic-treatments" },
    { name: "Family Care", id: "/family-care" }
  ];

  const footerNavItemsColumn1 = [
    { label: "General Dentistry", href: "/general-dentistry" },
    { label: "Dental Implants", href: "/implants" },
    { label: "Root Canals", href: "/root-canals" }
  ];

  const footerNavItemsColumn2 = [
    { label: "Cosmetic Treatments", href: "/cosmetic-treatments" },
    { label: "Family Care", href: "/family-care" },
    { label: "About Us", href: "/#about" }
  ];

  const footerNavItemsColumn3 = [
    { label: "Contact Us", href: "/contact" },
    { label: "Book Appointment", href: "/contact" },
    { label: "Privacy Policy", href: "#" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant={"shift-hover"}
      defaultTextAnimation={"reveal-blur"}
      borderRadius={"pill"}
      contentWidth={"smallMedium"}
      sizing={"largeSmallSizeLargeTitles"}
      background={"fluid"}
      cardStyle={"layered-gradient"}
      primaryButtonStyle={"diagonal-gradient"}
      secondaryButtonStyle={"layered"}
      headingFontWeight={"medium"}
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Family Dental Center" navItems={navItems.map(item => ({...item, href: item.id}))} />
      </div>

      <div id="about-implants" data-section="about-implants">
        <TextAbout
          title="Restore Your Smile with Dental Implants"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics-implants" data-section="metrics-implants">
        <MetricCardThree
          title="Implant Success at a Glance"
          description="Our high success rates and patient satisfaction speak volumes about the quality and care you'll receive for your dental implant procedure."
          metrics={[
            { id: "im1", icon: CheckCircle, title: "Success Rate", value: "99%" },
            { id: "im2", icon: Star, title: "Patient Satisfaction", value: "5/5" },
            { id: "im3", icon: Calendar, title: "Lasting Results", value: "Decades" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="features-implants" data-section="features-implants">
        <FeatureCardThree
          title="Why Choose Dental Implants?"
          description="Discover the long-term benefits of dental implants, including durability, comfort, and improved oral health."
          features={[
            { title: "Natural Look & Feel", description: "Implants are designed to blend seamlessly with your natural teeth.", imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-dental-implant-inside-jawbone_183364-123704.jpg", imageAlt: "Natural-looking dental implant" },
            { title: "Durability & Longevity", description: "With proper care, dental implants can last a lifetime.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-using-ultrasonic-scaler-treating-boy-s-teeth-clinic_23-2147905966.jpg", imageAlt: "Durable dental implant" },
            { title: "Preserves Bone Health", description: "Implants stimulate the jawbone, preventing bone loss that occurs with missing teeth.", imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-charming-little-girl-brushing-teeth-bathroom-while-standing-front-mirror-squeezing-toothpaste-out-tube-smiling-happily_176532-15698.jpg", imageAlt: "Bone health preservation" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Family Dental Center"
          columns={[
            { items: footerNavItemsColumn1.map(item => ({...item, Component: Link})) },
            { items: footerNavItemsColumn2.map(item => ({...item, Component: Link})) },
            { items: footerNavItemsColumn3.map(item => ({...item, Component: Link})) }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}