"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="radialGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          brandName="Lumière"
          navItems={[
            { name: "Collection", id: "products" },
            { name: "About", id: "about" },
            { name: "Custom Design", id: "features" },
            { name: "Contact", id: "contact" },
            { name: "Gallery", id: "testimonial" }
          ]}
          bottomLeftText="Fine Jewelry Boutique"
          bottomRightText="hello@lumierejewels.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi 
          title="Timeless Elegance, Expertly Crafted"
          description="Discover our curated collection of fine jewelry, each piece a testament to luxury craftsmanship and timeless beauty. From engagement rings to bespoke accessories, find the perfect expression of your most precious moments."
          tag="Fine Jewelry Boutique"
          imageSrc="https://img.b2bpic.net/free-photo/portrait-woman-grey-dress-selecting-pair-female-shoes-shop_627829-10319.jpg"
          imageAlt="Luxury jewelry collection"
          imagePosition="right"
          kpis={[
            { value: "25+", label: "Years of Excellence" },
            { value: "5,000+", label: "Satisfied Clients" },
            { value: "100%", label: "Ethical Sourcing" }
          ]}
          enableKpiAnimation={true}
          buttons={[
            { text: "Explore Collection", href: "#products" },
            { text: "Schedule Appointment", href: "#contact" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour 
          title="Featured Collection"
          description="Hand-selected pieces that capture the essence of refined beauty and exceptional craftsmanship"
          tag="Premium Selection"
          products={[
            {
              id: "1",              name: "Sapphire Embrace Ring",              price: "$3,850",              variant: "18K White Gold · 5 Sizes",              imageSrc: "https://img.b2bpic.net/free-photo/set-different-gold-rings-showcase-luxury-jewelry-store-close-up-photo_613910-20947.jpg",              imageAlt: "Sapphire engagement ring"
            },
            {
              id: "2",              name: "Celestial Gold Necklace",              price: "$2,450",              variant: "18K Yellow Gold · Adjustable",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-helping-his-girlfriend-with-fitting-necklace-je_7502-7600.jpg",              imageAlt: "Gold pendant necklace"
            },
            {
              id: "3",              name: "Diamond Brilliance Bracelet",              price: "$4,200",              variant: "Platinum · 7 Length Options",              imageSrc: "https://img.b2bpic.net/free-photo/side-view-seller-recommending-gold-products-customer_651396-1491.jpg",              imageAlt: "Diamond tennis bracelet"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "View All Jewelry", href: "#" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout 
          tag="Our Story"
          title="A Legacy of Artisan Excellence"
          description="Founded in 1999, Lumière has been synonymous with exquisite jewelry and uncompromising craftsmanship. Each piece in our collection is thoughtfully curated and ethically sourced, reflecting our commitment to beauty, quality, and responsible luxury. Our master jewelers bring decades of expertise to every creation, ensuring that your precious moments are adorned with nothing but the finest."
          metrics={[
            { value: "25+", title: "Years of Trusted Service" },
            { value: "5,000+", title: "Discerning Clients Served" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/jewelry-maker-working-alone-atelier_23-2149025952.jpg"
          imageAlt="Master jeweler at work"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne 
          tag="Services"
          title="Bespoke Luxury Experiences"
          description="Discover our comprehensive services designed to bring your jewelry vision to life with unparalleled expertise and attention to detail."
          imageSrc="https://img.b2bpic.net/free-photo/close-up-portrait-elegant-beautiful-woman-sitting-vintage-cafe-black-velvet-dress-evening-gown-rich-stylish-lady-elegant-fashion-trend-holding-golden-purse-hands_285396-7234.jpg"
          imageAlt="Custom jewelry design process"
          mediaPosition="right"
          useInvertedBackground="invertDefault"
          accordionItems={[
            {
              id: "1",              title: "Custom Design Services",              content: "Work one-on-one with our master designers to create your one-of-a-kind piece. From initial concept to final polish, we bring your vision to life with meticulous attention to detail and exceptional artistry."
            },
            {
              id: "2",              title: "Ethical Gemstone Sourcing",              content: "All our diamonds and gemstones are responsibly sourced with full traceability. We prioritize conflict-free stones and sustainable practices, ensuring your jewelry reflects not just beauty, but values."
            },
            {
              id: "3",              title: "Expert Restoration & Repair",              content: "Preserve the beauty of treasured heirlooms with our restoration services. Our craftspeople carefully restore, repair, and resize your precious pieces to their original brilliance."
            },
            {
              id: "4",              title: "Personal Shopping Appointments",              content: "Experience personalized service in our elegant boutique. Schedule a private appointment with our jewelry specialists to explore collections tailored to your style and preferences."
            }
          ]}
          buttons={[
            { text: "Schedule Consultation", href: "#contact" }
          ]}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen 
          testimonial="Lumière created the most beautiful engagement ring I could have imagined. Their attention to detail, expertise, and genuine care throughout the process made the entire experience unforgettable. This is where luxury meets authenticity."
          rating={5}
          author="Sarah Mitchell, Bride"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/positive-woman-with-short-hair-bright-lips-glasses-smiling-outside-trendy-lady-black-clothes-posing-stairs_197531-19325.jpg", alt: "Sarah Mitchell" },
            { src: "https://img.b2bpic.net/free-photo/portrait-sexual-woman-with-beautiful-blue-eyes-curly-hair-which-wearing-monochrome-black-dress-sitting-comfortable-chair-keeping-hand-near-face-lovely-posing-camera_8353-12174.jpg", alt: "Client review" },
            { src: "https://img.b2bpic.net/free-photo/pretty-smiling-woman-dressed-black-sweater-posing_114579-81856.jpg", alt: "Happy customer" },
            { src: "https://img.b2bpic.net/free-photo/confident-beautiful-young-woman-portrait_23-2148148150.jpg", alt: "Satisfied client" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm 
          title="Schedule Your Appointment"
          description="Connect with our jewelry specialists to explore our collection, discuss custom designs, or book a private viewing. We look forward to creating something beautiful with you."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "appointment", type: "text", placeholder: "Preferred Date & Time", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your jewelry dreams—custom design ideas, preferences, or questions...",            rows: 5,
            required: false
          }}
          imageSrc="https://img.b2bpic.net/free-photo/charming-blonde-beautiful-woman-white-blouse-vintage-pearl-necklace-sits-street-cafe-licks-knife_197531-30009.jpg"
          imageAlt="Luxury jewelry boutique showroom"
          mediaPosition="right"
          buttonText="Request Appointment"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal 
          columns={[
            {
              title: "Collection",              items: [
                { label: "Rings", href: "#products" },
                { label: "Necklaces", href: "#products" },
                { label: "Bracelets", href: "#products" },
                { label: "Custom Design", href: "#features" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Restoration", href: "#features" },
                { label: "Sourcing", href: "#features" },
                { label: "Appointments", href: "#contact" },
                { label: "About Us", href: "#about" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Email", href: "mailto:hello@lumierejewels.com" },
                { label: "Phone", href: "tel:+1-555-0123" },
                { label: "Address", href: "#" },
                { label: "Hours", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Lumière Fine Jewelry. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}