"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ContactText from "@/components/sections/contact/ContactText";
import TextAbout from "@/components/sections/about/TextAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { Globe, Zap } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Models", id: "models" },
    { name: "Performance", id: "performance" },
    { name: "Racing", id: "racing" },
    { name: "Technology", id: "technology" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Models",      items: [
        { label: "Motocross", href: "/models" },
        { label: "Adventure", href: "/models" },
        { label: "Street", href: "/models" },
        { label: "Electric", href: "/models" },
      ],
    },
    {
      title: "Racing",      items: [
        { label: "MotoGP", href: "/racing" },
        { label: "Motocross", href: "/racing" },
        { label: "Enduro", href: "/racing" },
        { label: "Rally", href: "/racing" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About KTM", href: "https://www.ktmgroup.com" },
        { label: "Careers", href: "https://jobs.ktm.com" },
        { label: "Press", href: "https://press.ktm.com" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Use", href: "#" },
        { label: "Impressum", href: "#" },
        { label: "Cookie Settings", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="grid"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="KTM"
          bottomLeftText="Ready to Race"
          bottomRightText="Made for Champions"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactText
          text="Let's connect. Get in touch with KTM to find the perfect bike, schedule a test ride, or join our racing community."
          animationType="reveal-blur"
          buttons={[
            { text: "Find a Dealer", href: "#" },
            { text: "Book Test Ride", href: "https://testride.ktm.com" },
          ]}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <TextAbout
          tag="Contact Information"
          title="Reach out to our team for sales inquiries, technical support, or racing partnership opportunities. We're here to help you find your perfect KTM experience."
          buttons={[
            { text: "Email Support", href: "mailto:hello@ktm.com" },
            { text: "Call Us", href: "tel:+1234567890" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="dealer-network" data-section="dealer-network">
        <SocialProofOne
          title="Authorized KTM Dealers"
          description="Visit one of our authorized dealerships worldwide for sales, service, and genuine parts"
          tag="Find Dealer"
          tagIcon={Globe}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "Europe Dealers",            "Americas Dealers",            "Asia-Pacific Dealers",            "EMEA Region",            "North America",            "South America",            "Oceania Dealers"]}
          speed={50}
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={footerColumns}
          bottomLeftText="© 2025 KTM AG. All rights reserved."
          bottomRightText="Ready to Race"
        />
      </div>
    </ThemeProvider>
  );
}