'use client';

import { ThemeProvider } from 'next-themes';
import { Sparkles, CheckCircle, Gem, Package, Globe, LifeBuoy } from 'lucide-react';

// Navbar
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
// Sections
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import ContactText from '@/components/sections/contact/ContactText';

export default function Home() {
  return (
    <ThemeProvider
      attribute="class"
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="medium"
      background="noise"
      cardStyle="solid"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <NavbarStyleFullscreen
        brandName="JewelCo"
        logoSrc="https://framerusercontent.com/images/tXk8i4fR6LgQ2pA877J1sFm0.png?_wi=1"
        navItems={[
          { name: 'Products', id: 'products' },
          { name: 'Reviews', id: 'reviews' },
          { name: 'FAQ', id: 'faq' },
          { name: 'Trust', id: 'trust' },
          { name: 'Support', id: 'support' }
        ]}
        button={{
          text: 'Buy Now',
          href: '#products',
        }}
      />

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Our Exquisite Collection"
          description="Discover a world of meticulously crafted jewelry pieces, designed to captivate and enchant."
          products={[
            {
              id: '1',
              brand: 'JewelCo',
              name: 'Diamond Solitaire Ring',
              price: '$2,500',
              rating: 4.8,
              reviewCount: '120 reviews',
              imageSrc: 'https://framerusercontent.com/images/k8o8370k8z.jpg?_wi=1',
              imageAlt: 'Diamond Solitaire Ring',
            },
            {
              id: '2',
              brand: 'JewelCo',
              name: 'Emerald Cut Necklace',
              price: '$1,800',
              rating: 4.5,
              reviewCount: '95 reviews',
              imageSrc: 'https://framerusercontent.com/images/XmXz1rKq2QyNl0o.jpg?_wi=1',
              imageAlt: 'Emerald Cut Necklace',
            },
            {
              id: '3',
              brand: 'JewelCo',
              name: 'Sapphire Drop Earrings',
              price: '$1,200',
              rating: 4.9,
              reviewCount: '78 reviews',
              imageSrc: 'https://framerusercontent.com/images/r9o8370k8z.jpg?_wi=1',
              imageAlt: 'Sapphire Drop Earrings',
            },
            {
              id: '4',
              brand: 'JewelCo',
              name: 'Pearl Bracelet',
              price: '$750',
              rating: 4.6,
              reviewCount: '60 reviews',
              imageSrc: 'https://framerusercontent.com/images/L9o8370k8z.jpg?_wi=1',
              imageAlt: 'Pearl Bracelet',
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardTen
          title="What Our Customers Say"
          description="Hear from our happy clients about their experience with our exquisite jewelry."
          testimonials={[
            {
              id: '1',
              name: 'Sarah L.',
              role: 'Customer',
              quote: 'Absolutely stunning! The ring exceeded my expectations. The quality is exceptional, and the customer service was fantastic.',
              imageSrc: 'https://framerusercontent.com/images/3K0gI79v7iIeQ5k.jpg?_wi=1',
              imageAlt: 'Sarah L.',
            },
            {
              id: '2',
              name: 'David R.',
              role: 'Customer',
              quote: 'I purchased a necklace for my wife, and she absolutely adores it. The craftsmanship is superb, and it arrived beautifully packaged.',
              imageSrc: 'https://framerusercontent.com/images/P2QyNl0o.jpg?_wi=1',
              imageAlt: 'David R.',
            },
            {
              id: '3',
              name: 'Emily W.',
              role: 'Customer',
              quote: 'Fast shipping and a truly gorgeous piece. The details are incredible, and I receive compliments every time I wear it. Highly recommend!',
              imageSrc: 'https://framerusercontent.com/images/R1tKq2QyNl0o.jpg?_wi=1',
              imageAlt: 'Emily W.',
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our products, shipping, and services."
          faqs={[
            {
              id: '1',
              title: 'What is your return policy?',
              content: 'We offer a 30-day money-back guarantee on all purchases. Items must be in their original condition.',
            },
            {
              id: '2',
              title: 'Do you offer international shipping?',
              content: 'Yes, we provide insured worldwide shipping. Delivery times vary by destination.',
            },
            {
              id: '3',
              title: 'Are your diamonds ethically sourced?',
              content: 'Absolutely. All our diamonds are sourced from reputable suppliers who adhere to strict ethical and conflict-free practices.',
            },
            {
              id: '4',
              title: 'Can I customize a jewelry piece?',
              content: 'We offer custom design services. Please contact our support team to discuss your ideas and requirements.',
            },
          ]}
          imageSrc="https://framerusercontent.com/images/d3WzNl0o.jpg?_wi=1"
          imageAlt="FAQ Section Image"
          mediaPosition="right"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="trust" data-section="trust">
        <FeatureCardTwentySeven
          title="Unwavering Trust & Quality"
          description="Our commitment to excellence ensures a premium experience from selection to delivery."
          features={[
            {
              id: '1',
              title: 'GRA Certified Quality',
              descriptions: [
                'Every gem is accompanied by a Gemological Research Academy (GRA) certificate, guaranteeing authenticity and quality.',
              ],
              imageSrc: 'https://framerusercontent.com/images/GRA_cert.svg?_wi=1',
              imageAlt: 'GRA Certificate',
            },
            {
              id: '2',
              title: 'Premium Packaging',
              descriptions: [
                'Each piece arrives in elegant, premium packaging, perfect for gifting or safekeeping.',
              ],
              imageSrc: 'https://framerusercontent.com/images/packaging.svg?_wi=1',
              imageAlt: 'Premium Packaging',
            },
            {
              id: '3',
              title: 'Worldwide Insured Shipping',
              descriptions: [
                'We offer secure and insured shipping to customers globally, ensuring your precious item arrives safely.',
              ],
              imageSrc: 'https://framerusercontent.com/images/shipping.svg?_wi=1',
              imageAlt: 'Worldwide Shipping',
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="support" data-section="support">
        <ContactText
          text="Need assistance? Our dedicated customer support team is here to help with any inquiries."
          buttons={[
            {
              text: 'Contact Support',
              href: 'mailto:support@jewelco.com',
            },
          ]}
          background={{ variant: 'radial-gradient' }}
          useInvertedBackground={false}
        />
      </div>
    </ThemeProvider>
  );
}
