"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import Link from 'next/link';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          brandName="Upcycled Threads"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Shop", id: "/shop" },
            { name: "Contact", id: "/contact" }
          ]}
          bottomLeftText="Sustainable Fashion"
          bottomRightText="hello@upcycledthreads.com"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardTwentyFour 
          title="The Upcycling Process"
          description="Discover how I transform vintage and pre-loved garments into stunning new creations through careful curation, design, and craftsmanship."
          features={[
            {
              id: "1",              title: "Sourcing Quality Materials",              author: "Step 1",              description: "I carefully hunt for vintage, secondhand, and surplus garments with great potential. Each piece is inspected for quality, durability, and unique characteristics that will shine in its new form.",              tags: ["Selection", "Sourcing"],
              imageSrc: "https://img.b2bpic.net/free-photo/woman-shopping-thrift-store_23-2150952333.jpg"
            },
            {
              id: "2",              title: "Design & Planning",              author: "Step 2",              description: "I sketch and plan the transformation, envisioning how the fabric and original design elements can be reimagined. This is where creativity meets sustainability.",              tags: ["Design", "Planning"],
              imageSrc: "https://img.b2bpic.net/free-photo/man-owner-counter-packing-clothes-yellow-plastic-bag_23-2148175679.jpg"
            },
            {
              id: "3", 
              title: "Handcrafted Construction",              author: "Step 3",              description: "Each piece is carefully cut, sewn, and finished by hand. This meticulous process ensures quality and allows for unique details that make each garment one-of-a-kind.",              tags: ["Crafting", "Handmade"],
              imageSrc: "https://img.b2bpic.net/free-photo/various-type-clothes-clothing-store_23-2148175674.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen 
          title="Every piece matters. By choosing upcycled fashion, you're making a real difference for our planet and supporting sustainable, ethical creation."
          tag="Impact"
          metrics={[
            {
              id: "1",              value: "80%",              description: "Less water used compared to conventional clothing production"
            },
            {
              id: "2",              value: "Zero",              description: "Waste sent to landfill from our production process"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterLogoReveal logoText="Upcycled Threads" />
    </ThemeProvider>
  );
}