"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 SicherheitPage() {
  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="sicherheit-trust" data-section="sicherheit-trust">
        <MetricSplitMediaAbout
          title="Trust. Transparency. Total Verification."
          description="Every vehicle undergoes rigorous multi-point inspection. Insurance, maintenance records, accident history—all verified. Every driver is screened with care. We operate with absolute transparency because trust is not earned through words, but through unwavering standards."
          tag="Our Standard"
          metrics={[
            { value: "100%", title: "Vehicle Verification Rate" },
            { value: "24hrs", title: "Inspection Turnaround" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-making-desicion-buy-car_1303-13859.jpg?_wi=5"
          imageAlt="Premium automotive facility"
          useInvertedBackground={false}
          mediaAnimation="fade"
          metricsAnimation="fade"
        />
      </div>

      <div id="sicherheit-proof" data-section="sicherheit-proof">
        <SocialProofOne
          title="Certified & Insured"
          description="All vehicles carry comprehensive insurance and are certified by leading European standards bodies."
          textboxLayout="default"
          useInvertedBackground={true}
          names={[
            "TÜV Certified",
            "ISO 9001",
            "DIN Standard",
            "DEKRA Approved",
            "AXA Insurance",
            "Allianz Verified",
          ]}
          speed={35}
          showCard={true}
          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=6"
          imageAlt="Premium automotive facility"
          logoText="KingCars"
          copyrightText="© 2025 KingCars. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}