"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="fluid"
        cardStyle="glass-elevated"
        primaryButtonStyle="flat"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        { name: "Home", id: "hero" },
        { name: "About", id: "about" },
        { name: "Services", id: "services" },
        { name: "Gallery", id: "gallery" },
        { name: "Booking", id: "booking" },
        { name: "Contact", id: "contact" },
        { name: "About Us", id: "/about" }
      ]}
      brandName="Salon Karim"
      button={{ text: "Book Now", href: "#booking" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{ variant: "rotated-rays-static" }}
      title="Redefining Grooming Excellence in Marrakech"
      description="Experience the pinnacle of hospitality and professional grooming, designed for those who appreciate the finer things in life."
      buttons={[{ text: "Secure Your Grooming Session", href: "#booking" }]}
      carouselItems={[
        { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOVzIrpPx7v2i5Pig8KhKyiIcU/uploaded-1778154257143-sto3dpjz.jpg", imageAlt: "Luxury barber shop interior marrakech" },
        { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOVzIrpPx7v2i5Pig8KhKyiIcU/uploaded-1778154411985-ou37or6s.jpg", imageAlt: "Salon interior elegant design" },
        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg", imageAlt: "Luxury barber shop interior marrakech" },
        { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOVzIrpPx7v2i5Pig8KhKyiIcU/uploaded-1778154022962-wj5ujb20.jpg", imageAlt: "Salon interior elegant design" },
        { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOVzIrpPx7v2i5Pig8KhKyiIcU/uploaded-1778154068883-e33gb96f.jpg", imageAlt: "Luxury barber shop interior marrakech" },
        { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOVzIrpPx7v2i5Pig8KhKyiIcU/uploaded-1778154373597-3teixcxg.webp", imageAlt: "Salon interior elegant design" }
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="A World-Class Barber Experience"
      description="Karim has cultivated a reputation as the best barber in the world through his unwavering commitment to hospitality and precision. Every visit is a masterclass in professional grooming."
      metrics={[
        { value: "15+", title: "Years of Excellence" },
        { value: "10k+", title: "Happy Clients" },
        { value: "5*", title: "Avg. Satisfaction" }
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOVzIrpPx7v2i5Pig8KhKyiIcU/uploaded-1778154085483-wr0avkip.png"
      imageAlt="Professional master barber portraits"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { id: "s1", title: "Classic Haircut", description: "Precision haircut tailored to your face shape and style.", tag: "Expert", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-dressed-warm-jacket-scarf-isolated-grey-background_613910-15962.jpg" },
        { id: "s2", title: "Beard Styling", description: "Expert trimming and shaping for a sharp look.", tag: "Essential", imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-with-shave-brush-old-male-client_23-2148181929.jpg" },
        { id: "s3", title: "Hot Towel Shave", description: "A relaxing and rejuvenating traditional shaving experience.", tag: "Relax", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-european-man-applies-shaving-foam-face-with-brush-prepares-shave-wears-showercap-has-soft-towel-around-neck-stands-topless-indoor-masculine-skin-care-concept_273609-30583.jpg" }
      ]}
      title="Our Premium Services"
      description="Curated grooming packages for the modern gentleman."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        { id: "p1", brand: "Studio", name: "Interior View", price: "Space", rating: 5, reviewCount: "500", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-pillow-sofa_74190-2057.jpg" },
        { id: "p2", brand: "Result", name: "Transformation", price: "Look", rating: 5, reviewCount: "1200", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-getting-haircut_23-2150665407.jpg" },
        { id: "p3", brand: "Studio", name: "Atmosphere", price: "Vibe", rating: 5, reviewCount: "300", imageSrc: "http://img.b2bpic.net/free-photo/combs-scissors-skull_23-2147736976.jpg" },
        { id: "p4", brand: "Result", name: "Styling", price: "Detail", rating: 5, reviewCount: "800", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205920.jpg" },
        { id: "p5", brand: "Studio", name: "Comfort", price: "Luxury", rating: 5, reviewCount: "400", imageSrc: "http://img.b2bpic.net/free-photo/winter-sports-equipment-complex_482257-76748.jpg" },
        { id: "p6", brand: "Result", name: "Finish", price: "Sharp", rating: 5, reviewCount: "950", imageSrc: "http://img.b2bpic.net/free-photo/professional-stylist-working-with-client_23-2147769765.jpg" }
      ]}
      title="Our Work & Space"
      description="See the precision behind every transformation and the ambiance of our luxury salon."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Ahmed", handle: "Local Expert", testimonial: "أفضل حلاق في العالم ❤️❤️", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-young-man-model-wearing-casual-summer-pink-clothes-fashion-stylish-man-posing-round-sunglasses_158538-5339.jpg" },
        { id: "t2", name: "Mehdi", handle: "Regular", testimonial: "خدمة ممتازة، استقبال حار، وعمل احترافي.", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-male-azure-jacket-sunglasses-posing-studio_613910-11843.jpg" },
        { id: "t3", name: "John D.", handle: "Tourist", testimonial: "The best experience I have ever had in Marrakech. Truly luxury.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-bride-young-woman-with-wedding-hairstyle-silk-robe-drinking-looking-bridesmaids-gray-style-robes-standing-spacious-room-near-window_8353-12010.jpg" },
        { id: "t4", name: "Sofia", handle: "Client", testimonial: "Fantastic transformation. Very attentive to every detail.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg" },
        { id: "t5", name: "Omar", handle: "Regular", testimonial: "Professionalism at its best. A must visit for everyone.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-blonde-business-woman-formal-suit-holds-cute-dog_613910-99.jpg" }
      ]}
      title="Client Stories"
      description="Experience excellence through the voices of our clients."
    />
  </div>

  <div id="booking" data-section="booking">
      <ContactSplit
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      tag="الحجز"
      title="احجز موعدك"
      description="أمن موعدك واستمتع بأفضل خدمة في مراكش."
      imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg"
      mediaPosition="right"
      buttonText="تأكيد الموعد"
    />
  </div>

  <div id="contact" data-section="contact">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "أين موقعكم؟", content: "نحن متواجدون في قلب مدينة مراكش. الخريطة معروضة في الأسفل." },
        { id: "f2", title: "كيف يمكنني التواصل معكم؟", content: "يمكنكم الاتصال بنا على +212 6 00 00 00 00 أو عبر واتساب." },
        { id: "f3", title: "هل أحتاج إلى حجز موعد؟", content: "ننصح بشدة بحجز موعد مسبق للحصول على أفضل تجربة." }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/location-symbol-with-landscape-background_23-2149906268.jpg"
      title="تواصل معنا مباشرة"
      description="هل لديك استفسارات؟ نحن هنا لمساعدتك في أي وقت."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/hairdressers-instruments-desk_23-2148181925.jpg?_wi=2"
      logoText="صالون كريم"
      columns={[
        { title: "القائمة", items: [{ label: "نبذة عنا", href: "#about" }, { label: "خدماتنا", href: "#services" }, { label: "الحجز", href: "#booking" }] },
        { title: "تواصل معنا", items: [{ label: "+212 6 00 00 00 00", href: "tel:+212600000000" }, { label: "واتساب", href: "#" }, { label: "الموقع", href: "#contact" }] }
      ]}
      copyrightText="© 2025 صالون كريم | مراكش"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
