"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 KontaktPage() {
  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="kontakt-intro" data-section="kontakt-intro">
        <MetricSplitMediaAbout
          title="Get in Touch with KingCars"
          description="Ready to experience the KingCars difference? Contact our team through any of the channels below. We respond to all inquiries with the same precision and care we apply to our vehicles. Your journey to exceptional automotive excellence begins here."
          tag="Contact Us"
          metrics={[
            { value: "24/7", title: "Available Support" },
            { value: "<2h", title: "Average Response Time" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-making-desicion-buy-car_1303-13859.jpg"
          imageAlt="Premium automotive facility"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      <div id="kontakt-methods" data-section="kontakt-methods">
        <SocialProofOne
          title="Reach Out"
          description="Choose your preferred method of communication. We're here to assist."
          textboxLayout="default"
          useInvertedBackground={true}
          names={[
            "Phone",            "WhatsApp",            "Email",            "Personal Consultation",            "VIP Showroom Access",            "Test Drive Booking"]}
          speed={40}
          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"
          imageAlt="Premium automotive facility"
          logoText="KingCars"
          copyrightText="© 2025 KingCars. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}