"use client";

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

export default function ErlebnisPage() {
  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="erlebnis-hero" data-section="erlebnis-hero">
        <ProductCardOne
          title="Complete Fleet Experience"
          description="Explore our carefully curated collection of premium vehicles, each selected for exceptional performance and luxury craftsmanship."
          products={[
            {
              id: "audi-q7",              name: "Audi Q7",              price: "€89,500",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APMOF2j7NyxhWnJr297eoLE6AD/uploaded-1772493374437-0w9aqhtf.png",              imageAlt: "Audi Q7 Premium SUV"},
            {
              id: "mustang-gt",              name: "Mustang GT",              price: "€78,900",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APMOF2j7NyxhWnJr297eoLE6AD/uploaded-1772493374437-bpenzi4u.png",              imageAlt: "Mustang GT Performance"},
            {
              id: "ferrari-812",              name: "Ferrari 812 Superfast",              price: "€289,000",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APMOF2j7NyxhWnJr297eoLE6AD/uploaded-1772493374437-z9mhdsyb.png",              imageAlt: "Ferrari 812 Superfast"},
            {
              id: "bmw-m5",              name: "BMW M5 Competition",              price: "€125,600",              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APMOF2j7NyxhWnJr297eoLE6AD/uploaded-1772493374437-is9xyszk.png",              imageAlt: "BMW M5 Competition"},
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="erlebnis-details" data-section="erlebnis-details">
        <MetricSplitMediaAbout
          title="The Driving Experience"
          description="Each vehicle in our fleet represents hours of meticulous selection and preparation. We deliver not just transportation, but an unforgettable experience. Performance-tested, luxury-verified, perfection-guaranteed."
          tag="Premium Experience"
          metrics={[
            { value: "500+", title: "Satisfied Clients" },
            { value: "24/7", title: "Concierge Support" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-making-desicion-buy-car_1303-13859.jpg"
          imageAlt="Premium automotive facility"
          useInvertedBackground={true}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </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>
  );
}