"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Tooth, Smile, Award } from "lucide-react";
import Link from "next/link";

export default function HomePage() {

  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="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="Family Dental Center"
          description="Expert Dental Care for Your Whole Family. Trusted specialists delivering advanced, pain-free treatments with personalized care."
          buttons={[
            { text: "Book Appointment", href: "#contact" },
            { text: "Learn More", href: "#about" }
          ]}
          slides={[
            { imageSrc: "http://img.b2bpic.net/free-photo/team-happy-doctors-standing-with-arms-crossed-mri-scanner-hospital-looking-camera_637285-389.jpg", imageAlt: "Dentist examining a patient in a modern dental clinic" },
            { imageSrc: "http://img.b2bpic.net/free-photo/little-baby-girl-dentist-chair-children-dental_627829-9367.jpg", imageAlt: "Happy family interacting at a dental clinic" },
            { imageSrc: "http://img.b2bpic.net/free-photo/abstract-blur-hospital_1339-6845.jpg", imageAlt: "Clean and modern interior of a dental clinic" },
            { imageSrc: "http://img.b2bpic.net/free-photo/close-up-dental-tools-tray_23-2147906066.jpg", imageAlt: "Close-up of modern dental equipment" },
            { imageSrc: "http://img.b2bpic.net/free-photo/pediatric-dentist-little-girl-reception-dentist_1321-1719.jpg", imageAlt: "Friendly dentist examining a child's teeth" },
            { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-clinic_23-2149103560.jpg", imageAlt: "Close-up of a patient with a bright, confident smile" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          title="Welcome to Family Dental Center Sharjah"
          useInvertedBackground={false}
        />
      </div>

      <div id="features-home" data-section="features-home">
        <FeatureCardThree
          title="Our Comprehensive Dental Services"
          description="From routine check-ups to advanced cosmetic procedures, we offer a full spectrum of dental care designed to meet every need."
          features={[
            { title: "General Dentistry", description: "Preventative care, fillings, root canals, and regular check-ups to maintain optimal oral health.", 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: "Dental check-up illustration" },
            { title: "Dental Implants", description: "Permanent and natural-looking solutions for missing teeth, restoring function and aesthetics.", imageSrc: "http://img.b2bpic.net/free-photo/conceptual-3d-illustration-dental-implant-inside-jawbone_183364-123704.jpg", imageAlt: "Dental implant illustration" },
            { title: "Cosmetic Treatments", description: "Transform your smile with professional whitening, veneers, and complete smile makeovers.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-taking-female-patients-tooth-x-ray_107420-73923.jpg", imageAlt: "Cosmetic teeth whitening illustration" },
            { title: "Family-Friendly Care", description: "Gentle and specialized dental care for patients of all ages, ensuring a positive experience for children and adults.", imageSrc: "http://img.b2bpic.net/free-photo/dentist-using-ultrasonic-scaler-treating-boy-s-teeth-clinic_23-2147905966.jpg", imageAlt: "Family dental care illustration" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="metrics-home" data-section="metrics-home">
        <MetricCardThree
          title="Committed to Excellence"
          description="Our dedication to patient satisfaction and clinical excellence is reflected in our outstanding results and community trust."
          metrics={[
            { id: "m1", icon: Tooth, title: "Years of Experience", value: "20+" },
            { id: "m2", icon: Smile, title: "Satisfied Patients", value: "5000+" },
            { id: "m3", icon: Award, title: "Successful Treatments", value: "98%" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials-home" data-section="testimonials-home">
        <TestimonialCardFive
          title="What Our Patients Say"
          description="Hear from families and individuals who have experienced the difference at Family Dental Center."
          testimonials={[
            { id: "t1", name: "Sarah J.", date: "Jan 2023", title: "Exceptional Family Care", quote: "Family Dental Center provides such a warm and friendly environment. My kids actually look forward to their dental visits now!", tag: "Family Care", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg", avatarAlt: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/doctor-doing-their-work-pediatrics-office_23-2149224131.jpg", imageAlt: "Family at dental clinic reception" },
            { id: "t2", name: "Ahmed K.", date: "Mar 2023", title: "Professional and Pain-Free", quote: "I recently had a root canal, and Dr. Ali made the whole experience surprisingly comfortable. Highly recommend their specialist team.", tag: "Root Canal", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-confident-man-home-office_329181-20664.jpg", avatarAlt: "Ahmed K.", imageSrc: "http://img.b2bpic.net/free-photo/dentistry-team-explaining-radiography-sick-patient-doing-oral-care-examination-cure-toothache-stomatologist-assistant-consulting-x-ray-results-dental-drill-procedure_482257-32294.jpg", imageAlt: "Dentist explaining x-ray to patient" },
            { id: "t3", name: "Fatima M.", date: "Feb 2023", title: "My Smile Transformation", quote: "The cosmetic treatments here are amazing! I got veneers, and my smile has never looked better. Truly life-changing.", tag: "Cosmetic", avatarSrc: "http://img.b2bpic.net/free-photo/emotional-female-portrait-closeup-outdoors_1321-4437.jpg", avatarAlt: "Fatima M.", imageSrc: "http://img.b2bpic.net/free-photo/female-patient-having-procedure-done-dentist_23-2148985819.jpg", imageAlt: "Cosmetic dental procedure" },
            { id: "t4", name: "Omar A.", date: "Apr 2023", title: "Excellent Implant Results", quote: "After losing a tooth, I was hesitant about implants. But the procedure was flawless, and my new tooth feels completely natural.", tag: "Implants", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg", avatarAlt: "Omar A.", imageSrc: "http://img.b2bpic.net/free-photo/dental-tools-equipment-white-background_1232-4425.jpg", imageAlt: "Dental implant surgery tools" },
            { id: "t5", name: "Lina S.", date: "May 2023", title: "Trustworthy General Dentistry", quote: "For years, I've relied on Family Dental Center for my regular check-ups. They're thorough, professional, and genuinely care about my health.", tag: "General Dentistry", avatarSrc: "http://img.b2bpic.net/free-photo/elegant-mother-with-daughter-summer-park_1157-21446.jpg", avatarAlt: "Lina S.", imageSrc: "http://img.b2bpic.net/free-photo/cute-little-girl-sitting-dentist-s-office_1157-19465.jpg", imageAlt: "Pediatric dentist examining child" }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Ready for a Brighter Smile?"
          title="Book Your Appointment Today!"
          description="Our friendly team is here to help you schedule a visit that fits your family's busy schedule. Contact us now to begin your journey to optimal oral health."
          buttons={[
            { text: "Book Online", href: "/contact" },
            { text: "Call Us", href: "tel:+971501234567" }
          ]}
          background={{ variant: "radial-gradient" }}
          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>
  );
}