"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import MediaAbout from '@/components/sections/about/MediaAbout';
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 { CheckCircle, Users, Handshake, CalendarCheck } from 'lucide-react';

export default function UeberUnsPage() {
  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-page" data-section="about-page">
          <MediaAbout

            useInvertedBackground={false}
            imageSrc="http://img.b2bpic.net/free-photo/diverse-group-workers-making-house-renovation-after-flood_23-2151044372.jpg"
            imageAlt="Team bei der Arbeit"
            title="Über Rümpel Fix Lippe"
            description="Wir sind Ihr zuverlässiger Partner für Entrümpelungen und Haushaltsauflösungen im Kreis Lippe und Umgebung. Mit langjähriger Erfahrung, Diskretion und Professionalität stehen wir Ihnen zur Seite."
            buttons={[
              { text: "Unsere Leistungen", href: "/dienstleistungen" },
              { text: "Kontaktieren Sie uns", href: "/kontakt" }
            ]}
            tag="Ihr Spezialist"
          />
        </div>

        <div id="about-metrics" data-section="about-metrics">
          <MetricCardThree

            useInvertedBackground={true}
            animationType="depth-3d"
            metrics={[
              { id: "m1", icon: CheckCircle, title: "Erfolgreiche Projekte", value: "500+" },
              { id: "m2", icon: Users, title: "Zufriedene Kunden", value: "98%" },
              { id: "m3", icon: Handshake, title: "Jahre Erfahrung", value: "10+" },
              { id: "m4", icon: CalendarCheck, title: "Termintreue", value: "100%" }
            ]}
            title="Unsere Zahlen sprechen für sich"
            description="Wir sind stolz auf unsere Erfolge und die Zufriedenheit unserer Kunden."
          />
        </div>

        <div id="team-page" data-section="team-page">
          <TeamCardTen
            textboxLayout="default"
            useInvertedBackground={false}
            memberVariant="card"
            membersAnimation="slide-up"
            team={[
              { id: "t1", name: "Hans Mustermann", role: "Geschäftsführer", imageSrc: "https://randomuser.me/api/portraits/men/1.jpg", imageAlt: "Hans Mustermann" },
              { id: "t2", name: "Lena Schmidt", role: "Einsatzleiterin", imageSrc: "https://randomuser.me/api/portraits/women/2.jpg", imageAlt: "Lena Schmidt" },
              { id: "t3", name: "Max Meier", role: "Logistik Experte", imageSrc: "https://randomuser.me/api/portraits/men/3.jpg", imageAlt: "Max Meier" }
            ]}
            title="Unser engagiertes Team"
            tag="Experten für jede Aufgabe"
          />
        </div>

        <div id="social-proof-about" data-section="social-proof-about">
          <SocialProofOne
            textboxLayout="default"
            useInvertedBackground={true}
            title="Unsere Partner"
            description="Wir arbeiten mit verschiedenen lokalen Unternehmen zusammen, um Ihnen den besten Service zu bieten."
            logos={[
              "https://img.logoipsum.com/280.svg",              "https://img.logoipsum.com/281.svg",              "https://img.logoipsum.com/282.svg",              "https://img.logoipsum.com/283.svg"
            ]}
            names={["Entsorgungsdienst Lippe", "Möbellogistik OWL", "ImmobilienService Detmold", "Wohnungsbau Paderborn"]}
            speed={40}
            showCard={false}
          />
        </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>
  );
}
