'use client';

import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Bracelets - Hala Diamonds',
  description: 'Explore exquisite diamond bracelets from Hala Diamonds.'
};

export default function BraceletsPage() {
  const navItems = [
    { name: 'Home', id: '/' },
    { name: 'About Us', id: '/about' },
    { name: 'Contact Us', id: '/contact' },
    { name: 'Bracelets', id: '/bracelets' },
    { name: 'Earrings', id: '/earrings' },
    { name: 'Necklaces', id: '/necklaces' },
    { name: 'Rings', id: '/rings-collection' }
  ];

  const products = [
    { id: '1', brand: 'Hala', name: 'Delicate Diamond Bracelet', price: '$2,500', rating: 4.8, reviewCount: '120', imageSrc: 'https://images.unsplash.com/photo-1582294132371-331215b3a628?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Delicate Diamond Bracelet' },
    { id: '2', brand: 'Hala', name: 'Tennis Bracelet Classic', price: '$5,000', rating: 4.9, reviewCount: '95', imageSrc: 'https://images.unsplash.com/photo-1596489397395-8e7c1f8d4e1f?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Tennis Bracelet Classic' },
    { id: '3', brand: 'Hala', name: 'Baguette Diamond Bangle', price: '$3,800', rating: 4.7, reviewCount: '78', imageSrc: 'https://images.unsplash.com/photo-1582294132371-331215b3a628?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Baguette Diamond Bangle' }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="large"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Exquisite Diamond Bracelets"
          description="Discover our stunning collection of diamond bracelets, perfect for every occasion."
          products={products}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <AnimatedAuroraBackground invertColors={false} className="-z-10" />

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            { title: 'Company', items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
            { title: 'Support', items: [{ label: 'Contact Us', href: '/contact' }] }
          ]}
          bottomLeftText="© 2024 Hala Diamonds. All rights reserved."
          bottomRightText="Privacy Policy  Terms of Service"
        />
      </div>
    </ThemeProvider>
  );
}
