"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";

import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';

import { ArrowRight, Star, CalendarCheck } from 'lucide-react';

export default function AboutPage() {
  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="about-hero" data-section="about-hero">
          <HeroSplitKpi
            title="Rümpel Fix Lippe: Ihr verlässlicher Partner"
            description="Seit über 5 Jahren sind wir in Lippe Ihr Experte für professionelle Entrümpelungen und Haushaltsauflösungen."
            background={{
              variant: "rotated-rays-animated"
            }}
            kpis={[
              { value: "5+", label: "Jahre Erfahrung" },
              { value: "100%", label: "Kundenzufriedenheit" },
              { value: "24/7", label: "Erreichbarkeit" },
            ]}
            enableKpiAnimation={true}
            tag="Über uns"
            buttons={[
              { text: "Unsere Leistungen", href: "/dienstleistungen" },
              { text: "Kontaktieren Sie uns", href: "/kontakt" }
            ]}
            imageSrc="http://img.b2bpic.net/free-photo/team-young-diverse-people-working-together_1145-201.jpg?_wi=2"
            imageAlt="Team von Rümpel Fix Lippe"
          />
        </div>

        <div id="about-metrics" data-section="about-metrics">
          <MetricCardThree
            title="Unsere Werte und Erfolge"
            description="Vertrauen, Effizienz und Nachhaltigkeit sind die Säulen unserer Arbeit."
            metrics={[
              { id: "1", icon: Star, title: "Top-Bewertungen", value: "4.9/5" },
              { id: "2", icon: ArrowRight, title: "Projekte jährlich", value: "500+" },
              { id: "3", icon: CalendarCheck, title: "Jahre Erfahrung", value: "5+" }
            ]}
            animationType="slide-up"
            useInvertedBackground={true}
            textboxLayout="default"
          />
        </div>

        <div id="team-page" data-section="team-page">
          <TeamCardTen
            useInvertedBackground={false}
            title="Unser Team: Experten für Entrümpelung"
            tag="Unser Team"
            membersAnimation="slide-up"
            memberVariant="card"
            members={[
              { id: "1", name: "Max Mustermann", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-african-man-suit_23-2151241904.jpg?_wi=2", imageAlt: "Max Mustermann" },
              { id: "2", name: "Anna Schmidt", imageSrc: "http://img.b2bpic.net/free-photo/african-woman-using-mobile-phone-while-talking-with-colleague_23-2148767710.jpg?_wi=2", imageAlt: "Anna Schmidt" },
              { id: "3", name: "Peter Müller", imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-dark-hair-beard-green-shirt_1145-200.jpg?_wi=2", imageAlt: "Peter Müller" }
            ]}
          />
        </div>

        <div id="about-social-proof" data-section="about-social-proof">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={true}
            logos={[
              "http://img.b2bpic.net/free-photo/man-working-with-documents-laptop_23-2147775535.jpg?_wi=2",              "http://img.b2bpic.net/free-photo/young-woman-working-project-with-desktop_23-2147820146.jpg?_wi=2",              "http://img.b2bpic.net/free-photo/woman-working-with-laptop-documents-table_23-2147775529.jpg?_wi=2"
            ]}
            names={["Partner A", "Partner B", "Partner C"]}
            title="Unsere Partner & Referenzen"
            description="Vertrauen Sie auf unsere langjährige Erfahrung und zufriedene Kunden in ganz Lippe."
            speed={40}
            showCard={false}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  { label: "Über uns", href: "/ueber-uns" },
                  { label: "Team", href: "/ueber-uns#team" },
                  { label: "Referenzen", href: "/kundenbewertungen" }
                ]
              },
              {
                items: [
                  { label: "Haushaltsauflösungen", href: "/dienstleistungen" },
                  { label: "Entrümpelungen", href: "/dienstleistungen" },
                  { label: "Sperrmüllabholung", href: "/dienstleistungen" }
                ]
              },
              {
                items: [
                  { label: "Anfrage senden", href: "/kontakt" },
                  { label: "Impressum", href: "/impressum" },
                  { label: "Datenschutz", href: "/datenschutz" }
                ]
              }
            ]}
            logoText="Rümpel Fix Lippe"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
