'use client';

import { ThemeProvider } from '@/components/ThemeProvider';
import { NavbarStyleApple } from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import { AboutMetric } from '@/components/sections/about/AboutMetric';
import { AnimatedAuroraBackground } from '@/components/background/AnimatedAuroraBackground';
import { FooterLogoEmphasis } from '@/components/sections/footer/FooterLogoEmphasis';
import { Diamond, Gem, HeartHandshake } from 'lucide-react';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About Hala Diamonds',
  description: "Learn about Hala Diamonds' commitment to craftsmanship, quality, and customer satisfaction."
};

export default function AboutUs() {
  const navItems = [
    { name: 'Home', id: '/' },
    { name: 'About Us', id: '/about' },
    { name: 'Contact Us', id: '/contact' }
  ];

  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"
    >
      <NavbarStyleApple navItems={navItems} brandName="Hala Diamonds" />

      <div id="about-us" data-section="about-us">
        <AboutMetric
          title="About Hala Diamonds"
          description="" // Empty description, AboutMetric component doesn't have one
          metrics={[
            { icon: Diamond, label: 'Years in Business', value: '50+' },
            { icon: Gem, label: 'Certified Gemologists', value: '15+' },
            { icon: HeartHandshake, label: 'Satisfied Customers', value: '10K+' }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

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

      <FooterLogoEmphasis
        logoSrc="/path/to/hala-diamonds-logo.png" // Placeholder, update with actual logo path
        logoAlt="Hala Diamonds Logo"
        logoText="Hala Diamonds"
        columns={[
          { items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
          { items: [{ label: 'Contact Us', href: '/contact' }] }
        ]}
      />
    </ThemeProvider>
  );
}
