"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import TeamCardSix from "@/components/sections/team/TeamCardSix";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { CheckCircle, Heart, HelpCircle, Phone, Sparkles, Star, Users, Shield } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Belmed Medical Centre"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Team", id: "team" },
            { name: "Testimonials", id: "testimonials" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Book Appointment", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Belmed Medical Centre"
          description="Professional Dental Care in Kimberley. Modern, compassionate dental treatment for individuals and families."
          buttons={[
            { text: "Book Appointment", href: "#contact" },
            { text: "Call (053) 871 2912", href: "tel:+27538712912" }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "plain" }}
          imageSrc="http://img.b2bpic.net/free-photo/portrait-young-modern-woman-years-old-standing-kitchen-with-notebook-reading-notes-student_1258-201582.jpg"
          imageAlt="Smiling patient at Belmed Medical Centre"
          mediaAnimation="slide-up"
          frameStyle="card"
          ariaLabel="Belmed Medical Centre hero section"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Our Practice"
          tagIcon={Heart}
          tagAnimation="slide-up"
          title="Welcome to Belmed Medical Centre"
          description="Belmed Medical Centre is a trusted dental practice in Kimberley providing comprehensive dental care for patients of all ages. Our experienced dental surgeons combine modern technology with a patient-focused approach to ensure comfortable and effective treatments."
          subdescription="Whether you need routine dental care, cosmetic dentistry, or specialised procedures, our team is committed to helping you achieve and maintain a healthy smile."
          icon={Shield}
          imageSrc="http://img.b2bpic.net/free-photo/child-mom-sitting-hospital-lobby-with-flowers-bouquet_482257-131609.jpg"
          imageAlt="Belmed Medical Centre clinic interior"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="About Belmed Medical Centre"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSix
          title="Meet the Dentists"
          description="Our experienced dental surgeons are committed to providing exceptional care with a patient-focused approach."
          tag="Our Team"
          tagIcon={Users}
          tagAnimation="slide-up"
          textboxLayout="default"
          members={[
            {
              id: "dr-fatima",              name: "Dr Fatima Belim",              role: "Dental Surgeon – BCHD UWC",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-doctor_23-2149103575.jpg",              imageAlt: "professional female dentist portrait confident"
            },
            {
              id: "dr-altaf",              name: "Dr Altaf Belim",              role: "Dental Surgeon – BCHD UWC",              imageSrc: "http://img.b2bpic.net/free-photo/baker-holding-big-flour-bag-kitchen-bakery-house_1303-32319.jpg",              imageAlt: "professional male dentist portrait confident"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          useInvertedBackground={false}
          ariaLabel="Belmed Medical Centre dental team"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardThree
          title="Comprehensive Dental Treatments"
          description="We offer a full range of dental services using modern techniques and technology for safe, effective treatment."
          tag="Our Services"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          textboxLayout="default"
          products={[
            {
              id: "extractions",              name: "Tooth Extractions",              price: "Safe removal of damaged or problematic teeth.",              imageSrc: "http://img.b2bpic.net/free-vector/dental-service-landing-page-template_335657-987.jpg",              imageAlt: "dental tooth extraction procedure professional"
            },
            {
              id: "root-canal",              name: "Root Canal Treatment",              price: "Treatment to save infected teeth and relieve pain.",              imageSrc: "http://img.b2bpic.net/free-photo/female-orthodontist-using-dental-mirror-checkup_329181-17708.jpg",              imageAlt: "root canal treatment procedure modern dental"
            },
            {
              id: "dentures",              name: "Dentures & Restorative Dentistry",              price: "Replace missing teeth and restore function.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-male-dentist-holding-dental-tools_23-2147862089.jpg",              imageAlt: "dental dentures prosthetics professional restoration"
            },
            {
              id: "crowns",              name: "Crowns, Bridges & Veneers",              price: "Long-lasting solutions to strengthen and enhance your smile.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-dentist-using-instruments_23-2151053284.jpg",              imageAlt: "dental crown bridge restoration professional"
            },
            {
              id: "whitening",              name: "Teeth Bleaching & Laser Whitening",              price: "Professional whitening treatments for brighter smiles.",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-shirtless-man-pointing-his-beautiful-smile_23-2148692206.jpg",              imageAlt: "professional teeth whitening treatment laser"
            },
            {
              id: "oral-surgery",              name: "Minor Oral Surgery",              price: "Including biopsies and wisdom teeth procedures.",              imageSrc: "http://img.b2bpic.net/free-photo/dental-procedure-installing-braces-close-up-dentistry-braces-teeth_169016-67470.jpg",              imageAlt: "oral surgery procedure professional dental care"
            },
            {
              id: "periodontal",              name: "Periodontal Care",              price: "Scaling, polishing and gum disease treatment.",              imageSrc: "http://img.b2bpic.net/free-photo/two-dentists-doing-their-work-dentist-s-clinic_329181-20747.jpg",              imageAlt: "periodontal gum disease treatment professional"
            },
            {
              id: "implants",              name: "Dental Implants",              price: "Implant supported prosthesis including crowns and hybrid dentures.",              imageSrc: "http://img.b2bpic.net/free-photo/young-female-dentist-showing-patient-dental-xray-dentistry-concept_169016-67181.jpg",              imageAlt: "dental implant prosthesis modern restoration"
            },
            {
              id: "pediatric",              name: "Pediatric Dentistry",              price: "Specialised dental care for children.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-patient-having-checkup_23-2151196690.jpg",              imageAlt: "pediatric dentistry children dental care friendly"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground={false}
          ariaLabel="Belmed Medical Centre dental services"
        />
      </div>

      <div id="why-choose" data-section="why-choose">
        <FeatureCardNine
          title="Why Choose Belmed Medical Centre"
          description="We combine professional expertise with patient-centered care to deliver exceptional dental experiences."
          tag="Reasons to Choose Us"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          features={[
            {
              id: 1,
              title: "Experienced Dental Surgeons",              description: "Years of professional dental experience and advanced training.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-doctor_23-2149103575.jpg", imageAlt: "experienced dentist" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-doctor_23-2149103575.jpg", imageAlt: "experienced dentist" }
            },
            {
              id: 2,
              title: "Modern Dental Procedures",              description: "Advanced techniques and technology for safe and effective treatment.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/female-orthodontist-using-dental-mirror-checkup_329181-17708.jpg", imageAlt: "modern procedures" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/female-orthodontist-using-dental-mirror-checkup_329181-17708.jpg", imageAlt: "modern procedures" }
            },
            {
              id: 3,
              title: "Family Friendly Care",              description: "Patients of all ages welcome in a comfortable, welcoming environment.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-patient-having-checkup_23-2151196690.jpg", imageAlt: "family care" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/portrait-patient-having-checkup_23-2151196690.jpg", imageAlt: "family care" }
            },
            {
              id: 4,
              title: "Trusted Local Clinic",              description: "Serving the Kimberley community with dedication and excellence.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/child-mom-sitting-hospital-lobby-with-flowers-bouquet_482257-131609.jpg", imageAlt: "clinic interior" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/child-mom-sitting-hospital-lobby-with-flowers-bouquet_482257-131609.jpg", imageAlt: "clinic interior" }
            },
            {
              id: 5,
              title: "Medical Aid Accepted",              description: "We accept all medical aid funds for your convenience.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-male-dentist-holding-dental-tools_23-2147862089.jpg", imageAlt: "professional service" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-male-dentist-holding-dental-tools_23-2147862089.jpg", imageAlt: "professional service" }
            },
            {
              id: 6,
              title: "Flexible Payments",              description: "Credit and debit cards accepted for flexible payment options.",              phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-dentist-using-instruments_23-2151053284.jpg", imageAlt: "payment options" },
              phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-dentist-using-instruments_23-2151053284.jpg", imageAlt: "payment options" }
            }
          ]}
          showStepNumbers={false}
          animationType="slide-up"
          useInvertedBackground={true}
          ariaLabel="Why choose Belmed Medical Centre"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Patient Reviews"
          description="Hear from our satisfied patients about their experiences at Belmed Medical Centre."
          tag="4.3★ Google Rating"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          testimonials={[
            {
              id: "testimonial-1",              name: "Sheryl",              date: "Recent",              title: "Exceptional Care",              quote: "Dr F Belim is the best dentist I've ever been to. Helpful, friendly, caring and efficient.",              tag: "Verified Patient",              avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133185.jpg",              avatarAlt: "happy patient smile satisfied dental care"
            },
            {
              id: "testimonial-2",              name: "Patient",              date: "Recent",              title: "Highly Trusted",              quote: "Great dentist. Very busy which shows how trusted they are.",              tag: "Verified Patient",              avatarSrc: "http://img.b2bpic.net/free-photo/family-doctor-doctor-s-office_23-2148168431.jpg",              avatarAlt: "professional patient testimonial portrait satisfied"
            },
            {
              id: "testimonial-3",              name: "Patient",              date: "Recent",              title: "Professional Service",              quote: "The team at Belmed provides professional and compassionate dental care every visit.",              tag: "Verified Patient",              avatarSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-checking-man_23-2149103570.jpg",              avatarAlt: "patient happy with dental treatment portrait"
            },
            {
              id: "testimonial-4",              name: "Patient",              date: "Recent",              title: "Family Friendly",              quote: "Belmed is perfect for family dentistry. The staff makes everyone feel comfortable.",              tag: "Verified Patient",              avatarSrc: "http://img.b2bpic.net/free-photo/portrait-woman-lying-bed_1150-8825.jpg",              avatarAlt: "family dental care patient happy testimonial"
            },
            {
              id: "testimonial-5",              name: "Patient",              date: "Recent",              title: "Modern Facilities",              quote: "Impressed with the modern equipment and professional approach to dental care.",              tag: "Verified Patient",              avatarSrc: "http://img.b2bpic.net/free-photo/dentist-doing-check-up-patient_23-2149206210.jpg",              avatarAlt: "modern dental facility patient happy portrait"
            },
            {
              id: "testimonial-6",              name: "Patient",              date: "Recent",              title: "Reliable & Trustworthy",              quote: "Years of reliable service from a clinic that truly cares about their patients.",              tag: "Verified Patient",              avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12674.jpg",              avatarAlt: "reliable trusted dental care patient portrait"
            }
          ]}
          useInvertedBackground={false}
          ariaLabel="Belmed Medical Centre patient testimonials"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about our dental services and practice."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "faq-1",              title: "Do you accept medical aid?",              content: "Yes. We accept all medical aid funds. Please bring your medical aid card to your appointment, and we'll assist with claims and processing."
            },
            {
              id: "faq-2",              title: "Do I need an appointment?",              content: "Appointments are recommended to reduce waiting time. However, we do accommodate emergencies. Call us at (053) 871 2912 for urgent matters."
            },
            {
              id: "faq-3",              title: "Do you treat children?",              content: "Yes. We provide specialized pediatric dentistry for children of all ages in a comfortable, friendly environment."
            },
            {
              id: "faq-4",              title: "What should I do in a dental emergency?",              content: "Contact our clinic immediately at (053) 871 2912 for urgent assistance. We prioritize emergency cases and will help relieve your pain quickly."
            },
            {
              id: "faq-5",              title: "What are your operating hours?",              content: "We're open Monday to Friday from 08:00 to 17:00, and Saturday from 08:00 to 12:00. Closed on Sundays and public holidays."
            },
            {
              id: "faq-6",              title: "Do you offer payment plans?",              content: "Yes. We accept credit cards, debit cards, and medical aid. We're happy to discuss payment options that work for you."
            }
          ]}
          useInvertedBackground={true}
          ariaLabel="Belmed Medical Centre FAQ"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          title="Book Your Appointment"
          description="Contact us today to schedule your dental consultation. We're here to help you achieve and maintain a healthy smile."
          tagIcon={Phone}
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email or phone number"
          buttonText="Request Appointment"
          termsText="By booking an appointment, you agree to our Terms and Conditions. We respect your privacy."
          ariaLabel="Belmed Medical Centre contact form"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "About",              items: [
                { label: "About Belmed", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Services", href: "#services" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "General Dentistry", href: "#services" },
                { label: "Cosmetic Dentistry", href: "#services" },
                { label: "Pediatric Care", href: "#services" },
                { label: "Dental Implants", href: "#services" }
              ]
            },
            {
              title: "Contact Info",              items: [
                { label: "📍 Barkley Road, Shoprite Centre, Shop 11, Kimberley", href: "#" },
                { label: "📞 (053) 871 2912", href: "tel:+27538712912" },
                { label: "🕒 Mon–Fri 08:00–17:00", href: "#" },
                { label: "🕒 Sat 08:00–12:00", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2024 Belmed Medical Centre. All rights reserved."
          ariaLabel="Belmed Medical Centre footer"
        />
      </div>
    </ThemeProvider>
  );
}
