"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { CheckCircle, Gift, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="smallMedium"
        sizing="largeSizeMediumTitles"
        background="blurBottom"
        cardStyle="glass-depth"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "الرئيسية",          id: "hero"},
        {
          name: "عن المتجر",          id: "about"},
        {
          name: "الأطقم",          id: "products"},
        {
          name: "اتصل بنا",          id: "contact"},
      ]}
      brandName="متجر كاف"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated"}}
      title="فخامة لا تضاهى في متجر كاف"
      description="استكشف أحدث تشكيلاتنا من الأطقم الفاخرة التي تعكس ذوقك الرفيع وأناقتك."
      buttons={[
        {
          text: "تسوق التشكيلة الجديدة الآن",          href: "https://wa.me/your-number"},
      ]}
      carouselItems={[
        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/mannequins-with-womenswear_1203-830.jpg", imageAlt: "Black luxury outfit" },
        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-girl-posing-dark-sweater-standing-near-lamps_114579-81910.jpg", imageAlt: "Red luxury outfit" },
        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/surrealist-portrait-fashionable-woman_23-2149224624.jpg", imageAlt: "Beige luxury outfit" },
        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/top-view-monochromatic-cloths_23-2148770334.jpg", imageAlt: "Luxury detail" },
        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/empty-shopping-store-with-casual-formal-wear-design-retail-shop-with-fashionable-clothes-hangers-racks-modern-boutique-clothing-center-fashion-merchandise-sale_482257-63117.jpg", imageAlt: "Store interior" },
        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/brunette-attractive-young-woman-puts-sunglasses-outside-portrait-asian-tanned-lady-black-trench-coat-holds-silver-handbag_197531-27931.jpg", imageAlt: "Collection" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="رؤيتنا في متجر كاف"
      description="نسعى لتقديم تجربة تسوق فريدة ومميزة لكل من يبحث عن التميز والراحة في الأطقم الفاخرة."
      metrics={[
        { value: "100+", title: "قطعة فاخرة" },
        { value: "500+", title: "عميل راضٍ" }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/assortment-antiques-market-objects_23-2148950925.jpg"
      imageAlt="About Kaf Luxury"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "أقمشة فاخرة",          description: "نختار أجود أنواع الأقمشة لضمان الراحة والأناقة.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/close-up-velvet-texture_23-2149305940.jpg",            imageAlt: "premium fabric texture luxury clothing"
          },
          items: [
            { icon: CheckCircle, text: "جودة عالية" }
          ],
          reverse: false
        },
        {
          title: "تصاميم حصرية",          description: "أطقم بتصاميم عصرية تناسب جميع المناسبات.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/thread-roll-close-up_53876-88931.jpg",            imageAlt: "premium fabric texture luxury clothing"
          },
          items: [
            { icon: Star, text: "تصميم فريد" }
          ],
          reverse: true
        },
        {
          title: "تغليف مميز",          description: "يصلك طلبك بتغليف يليق بفخامة مشترياتك.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/elegant-lady-near-christmas-tree_1157-45218.jpg",            imageAlt: "premium fabric texture luxury clothing"
          },
          items: [
            { icon: Gift, text: "تغليف فاخر" }
          ],
          reverse: false
        }
      ]}
      title="لماذا تختار متجر كاف؟"
      description="نقدم لكم الجودة والراحة في كل قطعة نختارها لكم بعناية."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        { id: "1", brand: "متجر كاف", name: "طقم أسود فاخر", price: "450 ر.س", rating: 5, reviewCount: "20", imageSrc: "http://img.b2bpic.net/free-photo/glamour-female-model-with-short-brown-hair-black-dress-posing-near-light-wall_613910-7038.jpg" },
        { id: "2", brand: "متجر كاف", name: "طقم أحمر جذاب", price: "480 ر.س", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-stands-near-window_8353-7584.jpg" },
        { id: "3", brand: "متجر كاف", name: "طقم بيج كلاسيكي", price: "420 ر.س", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2628.jpg" },
        { id: "4", brand: "متجر كاف", name: "طقم أسود عصري", price: "460 ر.س", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916725.jpg" },
        { id: "5", brand: "متجر كاف", name: "طقم أحمر ملكي", price: "500 ر.س", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cupcakes-paper-roses_23-2148815921.jpg" },
        { id: "6", brand: "متجر كاف", name: "طقم بيج يومي", price: "400 ر.س", rating: 5, reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/young-man-portrait_23-2148830392.jpg" }
      ]}
      title="تشكيلة الأطقم الفاخرة"
      description="تصفح أطقمنا المتاحة بالألوان الأسود والأحمر والبيج."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="لقد كانت تجربتي مع متجر كاف ممتازة، جودة الأطقم والتعامل الراقي يجعلني أتسوق منهم دائماً."
      rating={5}
      author="سارة محمد"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/portrait-mature-man-assistant-helps-costumer-senior-visiting-fashion-boutique-male-buy-new-exclusive-costume_1157-48883.jpg", alt: "Customer 1" },
        { src: "http://img.b2bpic.net/free-photo/man-shopping-city_23-2149273759.jpg", alt: "Customer 2" },
        { src: "http://img.b2bpic.net/free-photo/woman-reading-book-cafe-outdoor-portrait-asian-girl_1296-802.jpg", alt: "Customer 3" },
        { src: "http://img.b2bpic.net/free-photo/time-make-right-decision_329181-8015.jpg", alt: "Customer 4" },
        { src: "http://img.b2bpic.net/free-photo/young-women-shopping-city_23-2149321874.jpg", alt: "Customer 5" }
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "rotated-rays-animated"}}
      tag="تواصل معنا"
      title="هل لديك استفسار؟"
      description="فريقنا جاهز لمساعدتك في اختيار الطقم المناسب وتلقي طلباتك عبر الواتساب."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "روابط سريعة",          items: [
            { label: "الرئيسية", href: "#hero" },
            { label: "اتصل بنا", href: "#contact" }
          ]
        },
        {
          title: "حساباتنا",          items: [
            { label: "واتساب", href: "https://wa.me/your-number" },
            { label: "إنستغرام", href: "#" },
            { label: "تويتر", href: "#" }
          ]
        }
      ]}
      logoText="متجر كاف"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
