"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";

export default function GaleriePage() {
  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={[
              { 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" },
            ]}
            button={{ text: "Jetzt Angebot anfordern", href: "/kontakt" }}
            brandName="Rümpel Fix Lippe"
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroSplitKpi
            background={{ variant: "plain" }}
            title="Unsere Galerie: Vorher-Nachher-Eindrücke unserer Arbeit"
            description="Sehen Sie selbst, wie wir Räume verwandeln – von unaufgeräumt zu besenrein. Unsere Galerie zeigt erfolgreiche Projekte in Bad Salzuflen und Umgebung."
            kpis={[
              { value: "10+", label: "Jahre Erfahrung" },
              { value: "1000+", label: "Zufriedene Kunden" },
              { value: "100%", label: "Umweltgerecht" },
            ]}
            enableKpiAnimation={false}
            buttons={[{ text: "Jetzt kostenloses Angebot anfordern", href: "/kontakt" }]}
            imageSrc="http://img.b2bpic.net/free-photo/view-cleaning-products-with-copy-space_23-2149303681.jpg?_wi=1"
            imageAlt="Galeriebild eines aufgeräumten Zimmers"
            mediaAnimation="none"
          />
        </div>

        <div id="gallery" data-section="gallery">
          <FeatureCardTwentyThree
            textboxLayout="default"
            useInvertedBackground={false}
            carouselMode="buttons"
            animationType="slide-up"
            features={[
              {
                id: "1",                title: "Wohnungsauflösung Modern",                tags: ["Vorher", "Nachher"],
                imageSrc: "http://img.b2bpic.net/free-photo/pile-old-furniture-home-with-copy-space_23-2147726515.jpg?_wi=1",                imageAlt: "Wohnungsauflösung Modern"},
              {
                id: "2",                title: "Büroentrümpelung",                tags: ["Vorher", "Nachher"],
                imageSrc: "http://img.b2bpic.net/free-photo/top-view-old-device-desk_23-2150756327.jpg?_wi=1",                imageAlt: "Büroentrümpelung"},
              {
                id: "3",                title: "Garagenauflösung",                tags: ["Vorher", "Nachher"],
                imageSrc: "http://img.b2bpic.net/free-photo/car-full-garbage-dump_23-2150117849.jpg?_wi=1",                imageAlt: "Garagenauflösung"},
              {
                id: "4",                title: "Kellerentrümpelung",                tags: ["Vorher", "Nachher"],
                imageSrc: "http://img.b2bpic.net/free-photo/top-view-man-cleaning-dirty-surface_23-2149175240.jpg?_wi=1",                imageAlt: "Kellerentrümpelung"},
              {
                id: "5",                title: "Dachbodenentrümpelung",                tags: ["Vorher", "Nachher"],
                imageSrc: "http://img.b2bpic.net/free-photo/cleaning-products-tools-shelf_23-2149303682.jpg?_wi=1",                imageAlt: "Dachbodenentrümpelung"},
              {
                id: "6",                title: "Gartenabfallentsorgung",                tags: ["Vorher", "Nachher"],
                imageSrc: "http://img.b2bpic.net/free-photo/different-trash-bins-full-different-types-rubbish-outdoors_23-2149313262.jpg?_wi=1",                imageAlt: "Gartenabfallentsorgung"},
            ]}
            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="contact" data-section="contact">
          <ContactSplitForm
            useInvertedBackground={false}
            title="Ihr Weg zu einem aufgeräumten Zuhause"
            description="Interessiert an unseren Dienstleistungen? Kontaktieren Sie uns noch heute für eine kostenlose Beratung und ein unverbindliches Angebot. Wir freuen uns auf Ihre Anfrage!"
            inputs={[
              { name: "name", type: "text", placeholder: "Ihr Name", required: true },
              { name: "email", type: "email", placeholder: "Ihre E-Mail-Adresse", required: true },
              { name: "phone", type: "tel", placeholder: "Ihre Telefonnummer (optional)" },
            ]}
            textarea={{ name: "message", placeholder: "Ihre Nachricht und Anliegen", rows: 4, required: true }}
            imageSrc="http://img.b2bpic.net/free-photo/business-partners-greeting-each-other_1262-20511.jpg?_wi=2"
            imageAlt="Freundliches Team im Kundenservice"
            mediaAnimation="none"
            buttonText="Anfrage senden"
          />
        </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>
  );
}