"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="Geüpcycled Threads"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Over mij", id: "/about" },
            { name: "Shop", id: "/shop" },
            { name: "Contact", id: "/contact" }
          ]}
          bottomLeftText="Duurzame Mode"
          bottomRightText="hallo@geupycyledthreads.nl"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardTwentyFour 
          title="Het Geüpcycling Proces"
          description="Ontdek hoe ik vintage en voorgekochte kledingstukken transformeer in prachtige nieuwe creaties door zorgvuldige selectie, ontwerp en vakmanschap."
          features={[
            {
              id: "1",              title: "Duurzame Materialen Selecteren",              author: "Stap 1",              description: "Ik zoek zorgvuldig naar vintage, tweedehands en overschotkledingstukken met groot potentieel. Elk stuk wordt gecontroleerd op kwaliteit, duurzaamheid en unieke kenmerken die zullen opvallen in zijn nieuwe vorm.",              tags: ["Selectie", "Sourcing"],
              imageSrc: "https://img.b2bpic.net/free-photo/woman-shopping-thrift-store_23-2150952333.jpg"
            },
            {
              id: "2",              title: "Ontwerp & Planning",              author: "Stap 2",              description: "Ik schets en plan de transformatie, stellend hoe de stof en originele ontwerpelementen kunnen worden herontworpen. Dit is waar creativiteit duurzaamheid ontmoet.",              tags: ["Ontwerp", "Planning"],
              imageSrc: "https://img.b2bpic.net/free-photo/man-owner-counter-packing-clothes-yellow-plastic-bag_23-2148175679.jpg"
            },
            {
              id: "3", 
              title: "Handgemaakte Constructie",              author: "Stap 3",              description: "Elk stuk wordt voorzichtig gesneden, genaamd en afgewerkt met de hand. Dit nauwgezet proces garandeert kwaliteit en maakt unieke details mogelijk die elk kledingstuk uniiek maken.",              tags: ["Ambacht", "Handgemaakt"],
              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="Elk stuk is belangrijk. Door geüpcycled mode te kiezen, maakt u echt verschil voor onze planeet en steunt u duurzame, ethische creatie."
          tag="Impact"
          metrics={[
            {
              id: "1",              value: "80%",              description: "Minder water gebruikt vergeleken met conventionele kledingproductie"
            },
            {
              id: "2",              value: "Nul",              description: "Afval naar stortplaats van ons productieproces"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterLogoReveal logoText="Geüpcycled Threads" />
    </ThemeProvider>
  );
}
