"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TextAbout from '@/components/sections/about/TextAbout';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmall"
      background="aurora"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Luxe Leather"
          navItems={[
            { name: "Shop", id: "/" },
            { name: "About", id: "about" },
            { name: "Collections", id: "/" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="about-story" data-section="about-story">
        <TextAbout
          title="For over two decades, Luxe Leather has been synonymous with exceptional craftsmanship and timeless elegance. Our journey began with a simple philosophy: to create handbags that honor the artisanal traditions while meeting the demands of modern luxury."
          useInvertedBackground="noInvert"
          buttons={[
            { text: "View Our Story", href: "#metrics" },
            { text: "Shop Collection", href: "/" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Legacy of Excellence"
          description="Numbers that reflect our dedication to luxury and client satisfaction."
          metrics={[
            {
              id: "heritage",
              value: "20+",
              title: "Years of Leather Excellence",
              items: [
                "Sourced from finest European tanneries",
                "Master craftspeople with decades of experience",
                "Hand-finished to perfection"
              ]
            },
            {
              id: "clientele",
              value: "5000+",
              title: "Satisfied Luxury Clients",
              items: [
                "Global network of discerning collectors",
                "Repeat clientele rate of 92%",
                "Featured in luxury lifestyle publications"
              ]
            },
            {
              id: "quality",
              value: "100%",
              title: "Ethically Sourced Materials",
              items: [
                "Premium grade leather only",
                "Sustainable production practices",
                "Lifetime warranty on every piece"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="heritage" data-section="heritage">
        <TextAbout
          title="Every Luxe Leather handbag tells a story of meticulous attention to detail, from the selection of premium hides to the final hand-polished finish. We believe in creating pieces that transcend seasonal trends to become treasured heirlooms."
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterLogoReveal
        logoText="Luxe Leather"
      />
    </ThemeProvider>
  );
}