"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function GaleriePage() {
  const navItems = [
    { name: "Startseite", id: "/" },
    { name: "Über uns", id: "/ueber-uns" },
    { name: "Dienstleistungen", id: "/dienstleistungen" },
    { name: "Preise", id: "/preise" },
    { name: "Galerie", id: "/galerie" },
    { name: "Kundenbewertungen", id: "/kundenbewertungen" },
    { name: "Blog", id: "/blog" },
    { name: "Kontakt", id: "/kontakt" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleCentered
            navItems={navItems}
            button={{
              text: "Jetzt Angebot anfordern",              href: "/kontakt"
            }}
            brandName="Rümpel Fix Lippe"
          />
        </div>

        <div id="gallery-page" data-section="gallery-page">
          <ProductCardTwo
            textboxLayout="default"
            useInvertedBackground={false}
            carouselMode="buttons"
            animationType="slide-up"
            gridVariant="three-columns-all-equal-width"
            products={[
              { id: "1", brand: "Wohnung", name: "Wohnungsauflösung Modern", price: "Projekt abgeschlossen", rating: 5, reviewCount: "Vorher/Nachher", imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899435.jpg?_wi=1", imageAlt: "Leeres, modern entrümpeltes Wohnzimmer" },
              { id: "2", brand: "Büro", name: "Büroentrümpelung", price: "Projekt abgeschlossen", rating: 5, reviewCount: "Vorher/Nachher", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-women-working-together_23-2149871306.jpg?_wi=1", imageAlt: "Sauberes und entrümpeltes Büro" },
              { id: "3", brand: "Garage", name: "Garagenauflösung", price: "Projekt abgeschlossen", rating: 5, reviewCount: "Vorher/Nachher", imageSrc: "http://img.b2bpic.net/free-photo/bike-creation-workshop_23-2148866628.jpg?_wi=1", imageAlt: "Aufgeräumte und leere Garage" },
              { id: "4", brand: "Keller", name: "Kellerentrümpelung", price: "Projekt abgeschlossen", rating: 5, reviewCount: "Vorher/Nachher", imageSrc: "http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-16077.jpg?_wi=1", imageAlt: "Gereinigter und entrümpelter Keller" },
              { id: "5", brand: "Dachboden", name: "Dachbodenentrümpelung", price: "Projekt abgeschlossen", rating: 5, reviewCount: "Vorher/Nachher", imageSrc: "http://img.b2bpic.net/free-photo/haunted-house-interior-background_23-2149454760.jpg?_wi=1", imageAlt: "Sauberer und leerer Dachbodenbereich" },
              { id: "6", brand: "Garten", name: "Gartenabfallentsorgung", price: "Projekt abgeschlossen", rating: 5, reviewCount: "Vorher/Nachher", imageSrc: "http://img.b2bpic.net/free-photo/people-doing-community-service-by-collecting-trash_23-2149109092.jpg?_wi=1", imageAlt: "Entfernter Gartenabfall und sauberer Garten" }
            ]}
            title="Unsere Projekte: Vorher & Nachher"
            description="Überzeugen Sie sich selbst von unserer professionellen Arbeit – ein Blick auf unsere erfolgreich abgeschlossenen Projekte in Bad Salzuflen und Umgebung."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  { label: "Startseite", href: "/" },
                  { label: "Über uns", href: "/ueber-uns" }
                ]
              },
              {
                items: [
                  { label: "Dienstleistungen", href: "/dienstleistungen" },
                  { label: "Preise", href: "/preise" },
                  { label: "Galerie", href: "/galerie" }
                ]
              },
              {
                items: [
                  { label: "Kundenbewertungen", href: "/kundenbewertungen" },
                  { label: "Blog", href: "/blog" },
                  { label: "Kontakt", href: "/kontakt" }
                ]
              }
            ]}
            logoText="Rümpel Fix Lippe"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
