"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="blurBottom"
        cardStyle="subtle-shadow"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Collections",
          id: "products",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="LuxeOr"
      button={{
        text: "Shop Now",
        href: "#products",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "gradient-bars",
      }}
      title="Timeless Elegance, Redefined."
      description="Discover curated collections of fine jewelry and contemporary fashion pieces crafted for the modern visionary."
      buttons={[
        {
          text: "Explore Collections",
          href: "#products",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/woman-choosing-ring-jewelry-shop_1303-30664.jpg"
      imageAlt="Luxury Jewelry Collection"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/stylish-young-woman-enjoying-coffee_23-2148756287.jpg",
          alt: "Stylish young woman enjoying coffee",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-couple-buying-jewelry_7502-7606.jpg",
          alt: "Young couple buying jewelry",
        },
        {
          src: "http://img.b2bpic.net/free-photo/luxury-shine-diamonds-digital-art_23-2151695014.jpg",
          alt: "Luxury shine diamonds digital art",
        },
        {
          src: "http://img.b2bpic.net/free-photo/bored-sleepy-party-girl-blond-hairstyle-silver-evening-dress-tired-nightclub-lean-head-palm-sleep_1258-139688.jpg",
          alt: "Bored sleepy party girl",
        },
        {
          src: "http://img.b2bpic.net/free-photo/clothes-store-with-mannequin_23-2148929527.jpg",
          alt: "Clothes store with mannequin",
        },
      ]}
      avatarText="Trusted by 10,000+ luxury connoisseurs worldwide"
      marqueeItems={[
        {
          type: "text",
          text: "24K Gold",
        },
        {
          type: "text",
          text: "Ethically Sourced",
        },
        {
          type: "text",
          text: "Handcrafted",
        },
        {
          type: "text",
          text: "Bespoke Design",
        },
        {
          type: "text",
          text: "Timeless Quality",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Craftsmanship Beyond Tradition"
      description="Our heritage is built on decades of artisan precision, blending timeless techniques with bold, modern aesthetics to create pieces that speak for themselves."
      metrics={[
        {
          value: "100+",
          title: "Artisanal Pieces",
        },
        {
          value: "15",
          title: "Years of Excellence",
        },
        {
          value: "10k+",
          title: "Happy Clients",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-black-dress-sits-before-wall-books-christmas-decor_8353-8829.jpg"
      mediaAnimation="slide-up"
      metricsAnimation="opacity"
      imageAlt="Luxury jewelry craftsmanship close up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Ethical Sourcing",
          descriptions: [
            "Materials mined responsibly.",
            "Conflict-free diamonds.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-jewelry-tools_23-2148643288.jpg",
        },
        {
          id: "f2",
          title: "Artisan Craft",
          descriptions: [
            "Hand-finished in our studio.",
            "Timeless techniques.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/i-need-write-it-down-until-it-slipped-my-mind-focused-creative-clothes-designer-sitting-workshop-drawing-new-project-garment-she-will-sew-sewing-machine-first-is-plan-action_176420-14584.jpg",
        },
        {
          id: "f3",
          title: "Bespoke Design",
          descriptions: [
            "Tailored to your unique style.",
            "Collaborative process.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-essentials-bead-working_23-2148815796.jpg",
        },
      ]}
      title="Uncompromised Quality"
      description="We believe luxury is in the details, from ethical sourcing to the final polished finish."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          brand: "LuxeOr",
          name: "Gilded Solstice Chain",
          price: "$1,200",
          rating: 5,
          reviewCount: "24",
          imageSrc: "http://img.b2bpic.net/free-photo/jewelry-lifestyle-flat-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12601.jpg",
        },
        {
          id: "p2",
          brand: "LuxeOr",
          name: "Eternal Halo Ring",
          price: "$2,500",
          rating: 5,
          reviewCount: "18",
          imageSrc: "http://img.b2bpic.net/free-photo/vertical-closeup-female-with-nice-nails-wearing-beautiful-silver-ring_181624-23637.jpg",
        },
        {
          id: "p3",
          brand: "LuxeOr",
          name: "Golden Dawn Hoops",
          price: "$850",
          rating: 4,
          reviewCount: "42",
          imageSrc: "http://img.b2bpic.net/free-photo/bridal-earrings-lie-wooden-surface_8353-9650.jpg",
        },
        {
          id: "p4",
          brand: "LuxeOr",
          name: "Ornate Cuff",
          price: "$1,800",
          rating: 5,
          reviewCount: "12",
          imageSrc: "http://img.b2bpic.net/free-photo/shallow-focus-shot-attractive-blonde-hair-caucasian-female-posing-camera_181624-55009.jpg",
        },
        {
          id: "p5",
          brand: "LuxeOr",
          name: "Midnight Timepiece",
          price: "$3,200",
          rating: 5,
          reviewCount: "35",
          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-his-watch_53876-13503.jpg",
        },
        {
          id: "p6",
          brand: "LuxeOr",
          name: "Signature Brooch",
          price: "$950",
          rating: 4,
          reviewCount: "15",
          imageSrc: "http://img.b2bpic.net/free-photo/blue-anchor-shape-pin-jewelry_114579-12105.jpg",
        },
      ]}
      title="The Collection"
      description="Discover your next signature piece from our latest handcrafted designs."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "20",
          description: "Global Boutiques",
        },
        {
          id: "m2",
          value: "50+",
          description: "Design Awards",
        },
        {
          id: "m3",
          value: "100%",
          description: "Ethical Sourced",
        },
      ]}
      title="Global Presence"
      description="Excellence recognized worldwide by fashion connoisseurs."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Elena V.",
          role: "Architect",
          testimonial: "The exquisite craftsmanship is evident in every detail. Simply timeless.",
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-blonde-caucasian-stylish-woman-french-cap-white-blazer_343596-2259.jpg",
        },
        {
          id: "t2",
          name: "Marcus R.",
          role: "Collector",
          testimonial: "LuxeOr pieces have become the centerpieces of my private collection.",
          imageSrc: "http://img.b2bpic.net/free-photo/internationals-people-standing-cafe_1157-32343.jpg",
        },
        {
          id: "t3",
          name: "Sophie M.",
          role: "Fashion Editor",
          testimonial: "Their designs blend modern boldness with heritage quality effortlessly.",
          imageSrc: "http://img.b2bpic.net/free-photo/fashion-blonde-woman-trendy-clothes-glasses-posing-studio-isolated-gray-background_613910-18503.jpg",
        },
        {
          id: "t4",
          name: "Julian K.",
          role: "Stylist",
          testimonial: "A must-have for anyone who values high-end, artistic jewelry.",
          imageSrc: "http://img.b2bpic.net/free-photo/red-haired-lady-grey-jacket-takes-selfie-street-cafe_197531-27154.jpg",
        },
        {
          id: "t5",
          name: "Aria L.",
          role: "Socialite",
          testimonial: "Every piece I purchase feels unique and exceptionally made.",
          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-model-looking-her-bed-camera_114579-64941.jpg",
        },
      ]}
      title="Client Reflections"
      description="What our patrons say about their LuxeOr journey."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Start Your Custom Journey"
      description="Book a private consultation or inquire about our bespoke design services."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Your Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Your Email",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Describe your vision...",
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/coffee-shop-small-business_23-2149196234.jpg"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="LuxeOr"
      columns={[
        {
          title: "Collections",
          items: [
            {
              label: "Jewelry",
              href: "#products",
            },
            {
              label: "Fashion",
              href: "#products",
            },
          ],
        },
        {
          title: "Company",
          items: [
            {
              label: "Our Story",
              href: "#about",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
        {
          title: "Support",
          items: [
            {
              label: "FAQ",
              href: "#",
            },
            {
              label: "Returns",
              href: "#",
            },
          ],
        },
      ]}
      copyrightText="© 2024 LuxeOr. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
