"use client";

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

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroBillboardGallery
          title="Curated Performance. Uncompromised Selection."
          description="Exceptional vehicles for those who understand that true luxury lies in restraint, precision, and absolute control."
          background={{ variant: "plain" }}
          mediaItems={[
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APMOF2j7NyxhWnJr297eoLE6AD/uploaded-1772493374436-c64iwdfl.png",              imageAlt: "KingCars brand identity"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APMOF2j7NyxhWnJr297eoLE6AD/uploaded-1772493374437-0w9aqhtf.png",              imageAlt: "Audi Q7 Performance SUV"},
            {
              imageSrc:
                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APMOF2j7NyxhWnJr297eoLE6AD/uploaded-1772493374437-bpenzi4u.png",              imageAlt: "Mustang Premium Sedan"},
          ]}
          mediaAnimation="none"
          buttonAnimation="none"
        />
      </div>

      <div id="erlebnis" data-section="erlebnis">
        <ProductCardOne
          title="Signature Selection"
          description="Five carefully chosen vehicles, each representing the pinnacle of automotive engineering and design."
          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="none"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Selection. Stewardship. Authority."
          description="KingCars is not a rental company. We are custodians of exceptional vehicles, entrusted with their care and matched only with drivers who understand their worth. Every vehicle is inspected to exacting standards. Every transaction is handled with discretion and precision. We select clients as carefully as we select cars."
          tag="Our Approach"
          metrics={[
            { value: "15+", title: "Years of Excellence" },
            { value: "100%", title: "Inspection Standard" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/woman-making-desicion-buy-car_1303-13859.jpg"
          imageAlt="Premium automotive facility"
          useInvertedBackground={false}
          mediaAnimation="none"
          metricsAnimation="none"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted Partners"
          description="Selected by discerning clients and partners across Europe."
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Audi",            "BMW",            "Ferrari",            "Lamborghini",            "Porsche",            "Mercedes-Benz",            "Bentley",            "Rolls-Royce"]}
          speed={40}
          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"
          imageAlt="Premium automotive facility"
          logoText="KingCars"
          copyrightText="© 2025 KingCars. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}