"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="medium"
        background="noise"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        { name: "الرئيسية", id: "hero" },
        { name: "خدماتنا", id: "services" },
        { name: "معرض الأعمال", id: "gallery" },
        { name: "تواصل معنا", id: "contact" },
      ]}
      brandName="ورشة الألمنيوم"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{ variant: "gradient-bars" }}
      title="حلول الألمنيوم العصرية لمنزلك"
      description="نقدم خدمات تصنيع وتركيب النوافذ والأبواب والمطابخ والواجهات بأعلى معايير الجودة والاحترافية لتضفي على منشأتك لمسة من الفخامة."
      buttons={[{ text: "اطلب استشارة مجانية", href: "#contact" }]}
      imageSrc="http://img.b2bpic.net/free-photo/experienced-worker-is-repairing-metal-parts-machine-tool-busy-factory_613910-5507.jpg?_wi=1"
      imageAlt="ورشة تصنيع ألمنيوم"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="جودة لا تضاهى في صناعة الألمنيوم"
      description="تأسست ورشتنا لتلبية احتياجات السوق من الأبواب والنوافذ والواجهات المعدنية. نحن نلتزم بأعلى معايير الحرفية ونقدم 'ضمان رضا العملاء' على كافة مشاريعنا لضمان راحة بالك في كل خطوة من عملية البناء."
      metrics={[
        { value: "15+", title: "سنوات خبرة" },
        { value: "500+", title: "مشروع مكتمل" },
        { value: "100%", title: "رضا العملاء" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/workman-wearing-har-hat-with-measuring-ruler-factory_1303-26637.jpg?_wi=1"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwelve
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { id: "1", label: "نوافذ", title: "نوافذ ألمنيوم عازلة", items: ["تصاميم عصرية", "عزل حراري وصوتي", "إطار قوي ومتين"] },
        { id: "2", label: "أبواب", title: "أبواب مداخل فاخرة", items: ["أقفال أمان عالية", "ألوان متعددة", "تصاميم مخصصة"] },
        { id: "3", label: "مطابخ", title: "مطابخ ألمنيوم", items: ["مقاوم للصدأ", "سهل التنظيف", "مساحات تنظيم ذكية"] },
      ]}
      title="خدماتنا المتخصصة"
      description="نقدم حلولاً متكاملة لكافة أعمال الألمنيوم والزجاج لتناسب ذوقك واحتياجاتك الخاصة."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        { id: "1", name: "واجهات زجاجية", price: "طلبات مخصصة", variant: "مشروع فيلا", imageSrc: "http://img.b2bpic.net/free-photo/metallic-background-old-stainless-wall_23-2148744338.jpg" },
        { id: "2", name: "قسم داخلي", price: "طلبات مخصصة", variant: "مكتب أعمال", imageSrc: "http://img.b2bpic.net/free-photo/people-relaxing-their-wooden-home_23-2151335790.jpg" },
        { id: "3", name: "درابزين ألمنيوم", price: "طلبات مخصصة", variant: "عمارة سكنية", imageSrc: "http://img.b2bpic.net/free-photo/side-view-fashionable-woman-moving-down-staircase_23-2147925324.jpg" },
      ]}
      title="معرض أعمالنا"
      description="شاهد نماذج من أعمالنا المنجزة التي تعكس دقة التنفيذ والتصميم."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{ variant: "gradient-bars" }}
      tag="تواصل معنا"
      title="جاهز للبدء في مشروعك القادم؟"
      description="احصل على استشارة فنية مجانية خلال 24 ساعة - يسعدنا الاستماع لمتطلباتك وتصميم الحل الأمثل لمنشأتك."
      inputPlaceholder="أدخل رقم هاتفك أو واتساب"
      buttonText="تواصل عبر واتساب"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        { title: "الشركة", items: [{ label: "من نحن", href: "#about" }, { label: "خدماتنا", href: "#services" }] },
        { title: "تواصل", items: [{ label: "واتساب", href: "#contact" }, { label: "موقعنا", href: "#" }] },
        { title: "قانوني", items: [{ label: "سياسة الخصوصية", href: "#" }] },
      ]}
      bottomLeftText="© 2024 ورشة الألمنيوم"
      bottomRightText="جميع الحقوق محفوظة"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}