"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterMedia from "@/components/sections/footer/FooterMedia";

export default function UberUnsPage() {
  const navItems = [
    { name: "Erlebnis", id: "erlebnis" },
    { name: "Sicherheit", id: "sicherheit" },
    { name: "Über uns", id: "uber-uns" },
    { name: "Kontakt", id: "kontakt" },
  ];

  const footerColumns = [
    {
      title: "Navigation",
      items: [
        { label: "Erlebnis", href: "/erlebnis" },
        { label: "Sicherheit", href: "/sicherheit" },
        { label: "Über uns", href: "/uber-uns" },
      ],
    },
    {
      title: "Contact",
      items: [
        { label: "Telefon", href: "#" },
        { label: "WhatsApp", href: "#" },
        { label: "E-Mail", href: "mailto:info@kingcars.de" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Datenschutz", href: "#" },
        { label: "Impressum", href: "#" },
        { label: "AGB", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmall"
      background="grid"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="KingCars" navItems={navItems} />
      </div>

      <div id="uber-uns-mission" data-section="uber-uns-mission">
        <MetricSplitMediaAbout
          title="Our Commitment to Excellence"
          description="Founded on the principle that luxury is not about excess—it's about precision, restraint, and mastery. KingCars exists to connect discerning individuals with vehicles that deserve them. We do not compete on price. We compete on character. Every vehicle tells a story. We ensure it's a perfect one."
          tag="Our Philosophy"
          metrics={[
            { value: "15+", title: "Years of Excellence" },
            { value: "1000+", title: "Premium Vehicles Managed" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-making-desicion-buy-car_1303-13859.jpg?_wi=7"
          imageAlt="Premium automotive facility"
          useInvertedBackground={false}
          mediaAnimation="blur-reveal"
          metricsAnimation="blur-reveal"
        />
      </div>

      <div id="uber-uns-values" data-section="uber-uns-values">
        <SocialProofOne
          title="Guided by Core Values"
          description="Precision, discretion, integrity, and an unwavering commitment to excellence in every interaction."
          textboxLayout="default"
          useInvertedBackground={true}
          names={[
            "Precision",
            "Discretion",
            "Integrity",
            "Excellence",
            "Stewardship",
            "Respect",
          ]}
          speed={45}
          showCard={false}
          tagAnimation="none"
          buttonAnimation="none"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/woman-making-desicion-buy-car_1303-13859.jpg?_wi=8"
          imageAlt="Premium automotive facility"
          logoText="KingCars"
          copyrightText="© 2025 KingCars. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}