"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Leaf, Recycle, Heart, Zap, ShoppingBag } from 'lucide-react';
import Link from 'next/link';

export default function HomePage() {
  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="Atelier B."
          navItems={[
            { name: "Home", id: "/" },
            { name: "Over mij", id: "/about" },
            { name: "Shop", id: "/shop" },
            { name: "Contact", id: "/contact" }
          ]}
          bottomLeftText="Duurzame Mode"
          bottomRightText="hallo@atelierb.nl"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard 
          title="Transformeer Oud in Nieuw"
          titleClassName="text-7xl md:text-8xl lg:text-9xl"
          description="Ontdek duurzaam vervaardigde modestukken gemaakt van geüpcycled materialen. Elk kledingstuk vertelt een verhaal van transformatie, creativiteit en milieuverantwoordelijkheid."
          descriptionClassName="text-lg md:text-xl pt-8 md:pt-12"
          background={{ variant: "sparkles-gradient" }}
          tag="Eco-Bewuste Mode"
          tagIcon={Leaf}
          imageSrc="https://img.b2bpic.net/free-photo/full-shot-woman-posing-fast-fashion-concept_23-2150805333.jpg"
          imageAlt="Atelier B. mode transformatie showcase"
          imageClassName="w-1/2 h-auto object-cover object-center crop-20"
          buttons={[
            { text: "Shop Nu & Ontdek", href: "/shop" },
            { text: "Lees Ons Verhaal", href: "/about" }
          ]}
          buttonClassName="px-8 py-4 text-lg font-semibold"
          mediaWrapperClassName="flex justify-center items-center"
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric 
          title="Ik transformeer oude, verwaaide kledingstukken in prachtige, draagbare kunst. Elk stuk dat ik creëer is uniek—een viering van creativiteit, duurzaamheid en tweede kansen."
          useInvertedBackground="invertDefault"
          metrics={[
            { icon: Recycle, label: "Kledingstukken Geüpcycled", value: "500+" },
            { icon: Leaf, label: "Afval Afgeleid", value: "2.000 kg" },
            { icon: Heart, label: "Tevreden Klanten", value: "1.200+" },
            { icon: Zap, label: "Jaren Ervaring", value: "5+" }
          ]}
          buttons={[
            { text: "Verken Winkel", href: "/shop" },
            { text: "Over Ons Proces", href: "/about" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne 
          title="Aanbevolen Collectie"
          description="Blader door onze nieuwste geüpcycled creaties. Elk stuk is uniek en klaar om zijn nieuwe thuis te vinden."
          tag="Shop Nu"
          tagIcon={ShoppingBag}
          products={[
            {
              id: "1",              name: "Vintage Denim Jas",              price: "€75",              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-young-women-posing-outdoors_23-2149412643.jpg",              imageAlt: "Atelier B. vintage denim jas"
            },
            {
              id: "2",              name: "Patchwork Zomerjurk",              price: "€95",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-woman-wearing-vacation-outfit_23-2150668926.jpg",              imageAlt: "Handgemaakte patchwork zomerjurk"
            },
            {
              id: "3",              name: "Biologisch Katoenen Shirt",              price: "€65",              imageSrc: "https://img.b2bpic.net/free-photo/casual-curly-man-handrail_23-2147678271.jpg",              imageAlt: "Duurzaam biologisch katoenen shirt"
            },
            {
              id: "4",              name: "Geüpcycled Joggingbroek",              price: "€85",              imageSrc: "https://img.b2bpic.net/free-photo/woman-holding-bag-fruit-park_23-2148595056.jpg",              imageAlt: "Comfortabele geüpcycled joggingbroek"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Bekijk Volledige Winkel", href: "/shop" }
          ]}
          textBoxButtonClassName="bg-primary-cta hover:bg-primary-cta/90 text-white px-8 py-4 text-lg font-semibold rounded-lg transition-all duration-300"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne 
          title="Wat Klanten Ervan Houden"
          description="1,200+ glückliche Kunden vertrauen uns - Echte recensies van mensen die hun perfecte geüpcycled stuk hebben ontdekt"
          testimonials={[
            {
              id: "1",              name: "Emma S.",              role: "Mode Liefhebber",              company: "Amsterdam",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg",              imageAlt: "Klant Emma"
            },
            {
              id: "2",              name: "Sophie D.",              role: "Duurzaamheid Voorstander",              company: "Parijs",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg",              imageAlt: "Klant Sophie"
            },
            {
              id: "3",              name: "Marcus B.",              role: "Ontwerp Professional",              company: "Berlijn",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "Klant Marcus"
            },
            {
              id: "4",              name: "Lisa M.",              role: "Eco-Krijger",              company: "Kopenhagen",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg",              imageAlt: "Klant Lisa"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText 
          text="Klaar om je perfecte geüpcycled stuk te ontdekken? Neem contact op voor vragen, aangepaste verzoeken, of om gewoon je passie voor duurzame mode te delen."
          animationType="entrance-slide"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Neem Contact Op", href: "/contact" },
            { text: "Volg @atelierb", href: "https://instagram.com" }
          ]}
        />
      </div>

      <FooterLogoReveal logoText="Atelier B." />
    </ThemeProvider>
  );
}