"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Award, Shield, Smile } from "lucide-react";

export default function LandingPage() {
  const navLinks = [
    { name: "الرئيسية", id: "hero" },
    { name: "من نحن", id: "about" },
    { name: "خدماتنا", id: "features" },
    { name: "تواصل معنا", id: "contact" },
  ];

  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="mediumLargeSizeLargeTitles"
        background="aurora"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={navLinks}
            brandName="Aljoman Dental"
            button={{ text: "احجز موعداً", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroOverlayTestimonial
            title="أبتسامة ثقة تليق بك"
            description="خدمات طب أسنان تجميلية وعلاجية عالية الجودة."
            testimonials={[{ name: "أحمد", handle: "@ahmed", testimonial: "تجربة استثنائية.", rating: 5 }]}
            buttons={[{ text: "احجز الآن", href: "#contact" }]}
          />
        </div>

        <div id="about" data-section="about">
          <TestimonialAboutCard
            tag="لماذا نحن؟"
            title="التميز في طب الأسنان"
            description="عيادات الجومان تقدم تجربة رعاية متكاملة."
            subdescription="أحدث التقنيات الرقمية."
            icon={Shield}
            imageSrc="https://img.b2bpic.net/free-photo/dentist-s-office-interior-with-modern-chair-special-dentisd-equipment-interior-stomatology-clinic_482257-11998.jpg"
            useInvertedBackground={false}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardSix
            textboxLayout="split"
            features={[
              { title: "التجميل", description: "ابتسامة هوليود", imageSrc: "https://img.b2bpic.net/free-photo/vials-medicine-arrangement-top-view_23-2149341595.jpg" },
              { title: "العلاج", description: "علاج العصب", imageSrc: "https://img.b2bpic.net/free-photo/man-dentist-s-appointment_1321-4592.jpg" }
            ]}
            title="خدماتنا"
            description="نقدم حلولاً متكاملة."
            useInvertedBackground={false}
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardOne
            animationType="slide-up"
            textboxLayout="split"
            gridVariant="uniform-all-items-equal"
            products={[
              { id: "p1", name: "تبييض الأسنان", price: "٩٩٩ ر.س", imageSrc: "https://img.b2bpic.net/free-photo/equipment-dental-instruments-dentist-s-office-tools-close-up_8353-1677.jpg" },
              { id: "p2", name: "فينير", price: "١٥٠٠ ر.س", imageSrc: "https://img.b2bpic.net/free-photo/equipment-dental-instruments-dentist-s-office-toolsclose-up_8353-1677.jpg" },
              { id: "p3", name: "تقويم", price: "٥٠٠٠ ر.س", imageSrc: "https://img.b2bpic.net/free-photo/equipment-dental-instruments-dentist-s-office-toolsclose-up_8353-1677.jpg" }
            ]}
            title="عروضنا"
            description="اكتشف باقاتنا."
            useInvertedBackground={false}
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardOne
            animationType="slide-up"
            textboxLayout="split"
            gridVariant="uniform-all-items-equal"
            metrics={[
              { id: "m1", value: "١٥٠٠٠+", title: "مريض سعيد", description: "ثقتكم تهمنا", icon: Smile },
              { id: "m2", value: "٢٠+", title: "سنة خبرة", description: "خبرة طويلة", icon: Award }
            ]}
            title="أرقامنا"
            description="نحن نفخر بما قدمناه."
            useInvertedBackground={false}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplit
            tag="تواصل"
            title="ابدأ رحلتك"
            description="احجز استشارتك اليوم."
            background={{ variant: "gradient-bars" }}
            useInvertedBackground={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[{ items: [{ label: "الرئيسية", href: "#" }] }]}
            logoText="عيادات الجومان"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
