"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLarge"
        background="blurBottom"
        cardStyle="outline"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Collection",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Lexury Sable"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardTestimonial
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      title="Timeless Elegance in Sable"
      description="Discover the finest collection of luxury sable fur garments, ethically sourced and crafted in Morocco with unmatched artistry."
      testimonials={[
        {
          name: "Layla F.",
          handle: "@laylaf",
          testimonial: "The quality of the sable is breathtaking. Truly a masterpiece.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-fur-coat-posed-against-old-orange-wall_627829-10467.jpg",
          imageAlt: "luxury sable fur coat model",
        },
        {
          name: "Omar B.",
          handle: "@omarb",
          testimonial: "Exceptional service and the fur is incredibly soft. Highly recommend.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/knitting-with-help-sewing-machine_114579-12155.jpg",
          imageAlt: "luxury sable fur coat model",
        },
        {
          name: "Sofia R.",
          handle: "@sofiar",
          testimonial: "A touch of true luxury in Morocco. Absolutely beautiful craftsmanship.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-sensual-blonde-girl-winter-jacket-fur-hood-standing-studio-isolated-dark-background_613910-19411.jpg",
          imageAlt: "luxury sable fur coat model",
        },
        {
          name: "Karim M.",
          handle: "@karimm",
          testimonial: "The perfect gift, exceeded all my expectations for luxury.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-child-with-white-hooded-jacket_181624-30121.jpg",
          imageAlt: "luxury sable fur coat model",
        },
        {
          name: "Nadia A.",
          handle: "@nadiaa",
          testimonial: "Elegant design and superb material quality. Simply stunning.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/view-women-bag-stuff_93675-131548.jpg",
          imageAlt: "luxury sable fur coat model",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/blonde-girl-fur-coat-posed-against-old-orange-wall_627829-10467.jpg"
      imageAlt="luxury sable fur coat model"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/fashion-outdoor-photo-gorgeous-sensual-woman-with-dark-hair-elegant-clothes-luxurious-fur-coat-old-street-with-grunge-walls_627829-9687.jpg",
          alt: "Fashion outdoor photo of gorgeous sensual woman with dark hair in elegant clothes and luxurious fur coat at old street with grunge walls",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-into-fur_633478-354.jpg",
          alt: "Woman into the fur",
        },
        {
          src: "http://img.b2bpic.net/free-photo/eskimo-people-living-extreme-weather-condition_23-2151036519.jpg",
          alt: "Eskimo people living in extreme weather condition",
        },
        {
          src: "http://img.b2bpic.net/free-photo/woman-unpacking-presents-christmas_1303-12483.jpg",
          alt: "Woman unpacking presents on Christmas",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-sensual-blonde-girl-winter-jacket-fur-hood-standing-studio-isolated-dark-background_613910-6372.jpg",
          alt: "Portrait of a sensual blonde girl in a winter jacket and fur hood, standing in a studio. Isolated on a dark background.",
        },
      ]}
      avatarText="Join 5,000+ satisfied luxury connoisseurs"
      marqueeItems={[
        {
          type: "text",
          text: "Artisanal Craft",
        },
        {
          type: "text",
          text: "Ethical Sourcing",
        },
        {
          type: "text",
          text: "Premium Quality",
        },
        {
          type: "text",
          text: "Moroccan Heritage",
        },
        {
          type: "text",
          text: "Timeless Design",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Artistry Born in Morocco"
      tag="Our Story"
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Classic Sable Coat",
          price: "POA",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-sensual-blonde-girl-winter-jacket-fur-hood-standing-studio-isolated-dark-background_613910-19411.jpg",
        },
        {
          id: "p2",
          name: "Signature Sable Scarf",
          price: "POA",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-child-with-white-hooded-jacket_181624-30121.jpg",
        },
        {
          id: "p3",
          name: "Elegant Sable Stola",
          price: "POA",
          imageSrc: "http://img.b2bpic.net/free-photo/view-women-bag-stuff_93675-131548.jpg",
        },
        {
          id: "p4",
          name: "Lux Bolero",
          price: "POA",
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-demonstrating-upper-cloths_1303-24445.jpg",
        },
        {
          id: "p5",
          name: "Midnight Sable Wrap",
          price: "POA",
          imageSrc: "http://img.b2bpic.net/free-photo/joyful-beautiful-woman-posing-winter-morning-outdoor-shot-lovely-female-model-walking-street_197531-26369.jpg",
        },
        {
          id: "p6",
          name: "Premium Sable Cape",
          price: "POA",
          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-portrait-stylish-woman-black-blazer-suit-white-classic-hat_343596-2042.jpg",
        },
      ]}
      title="Our Collection"
      description="Browse our curated selection of premium sable pieces."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "30+",
          title: "Years of Excellence",
          description: "Defining luxury for generations.",
          imageSrc: "http://img.b2bpic.net/free-photo/cropped-photo-mature-craftsman-s-hands-working-his-workspace-man-drawing-sketch-grounge-dark-stone-texture-background_1157-51564.jpg",
        },
        {
          id: "m2",
          value: "100%",
          title: "Ethical Sourcing",
          description: "Committed to highest standards.",
          imageSrc: "http://img.b2bpic.net/free-photo/shopping-center-showroom-with-clothes-from-trendy-collections-retail-market-boutique-with-modern-fashionable-wear-empty-clothing-store-filled-with-new-trends-fashion-brands_482257-61769.jpg",
        },
        {
          id: "m3",
          value: "5k+",
          title: "Happy Clients",
          description: "Global satisfaction delivered.",
          imageSrc: "http://img.b2bpic.net/free-photo/ceramic-tiles-wooden-desk_23-2148155190.jpg",
        },
      ]}
      title="Our Legacy"
      description="Decades of expertise in luxury fashion."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Sarah J.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-looking-camera-sitting-grey-surface_176420-16956.jpg",
        },
        {
          id: "t2",
          name: "Marc L.",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-talking-phone_23-2148352552.jpg",
        },
        {
          id: "t3",
          name: "Elena V.",
          imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",
        },
        {
          id: "t4",
          name: "John D.",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-women-shopping_23-2149241334.jpg",
        },
        {
          id: "t5",
          name: "Amina S.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-woman-bwhite-shirt_1303-23907.jpg",
        },
      ]}
      cardTitle="Client Voices"
      cardTag="Luxury Reviews"
      cardAnimation="blur-reveal"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "How to care for sable?",
          content: "Professional cleaning is recommended annually.",
        },
        {
          id: "q2",
          title: "Can I visit your showroom?",
          content: "Yes, we welcome private appointments in Casablanca.",
        },
        {
          id: "q3",
          title: "Do you ship internationally?",
          content: "Yes, we offer secure worldwide shipping.",
        },
      ]}
      sideTitle="Questions Answered"
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Vogue Morocco",
        "L'Officiel",
        "Fashion Week",
        "Lux Mag",
        "Global Style",
        "Elite Wear",
        "Heritage Fur",
      ]}
      title="Trusted Globally"
      description="Featured in leading fashion publications."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient",
      }}
      tag="Inquire"
      title="Begin Your Luxury Experience"
      description="Get in touch for appointments or product inquiries."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Lexury Sable"
      columns={[
        {
          title: "Lexury",
          items: [
            {
              label: "About Us",
              href: "#about",
            },
            {
              label: "Showroom",
              href: "#",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "Contact",
              href: "#contact",
            },
            {
              label: "Privacy Policy",
              href: "#",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
