"use client";

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

export default function TechnologyPage() {
  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="technology-features" data-section="technology-features">
        <FeatureCardTwentySeven
          title="Advanced Performance Technology"
          description="KTM's innovation center develops cutting-edge systems that push the boundaries of motorcycle engineering"
          tag="Innovation"
          tagIcon={Cpu}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Innovations", href: "#" },
            { text: "R&D Center", href: "#" },
          ]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "traction",
              title: "Advanced Traction Control",
              description: "Cutting-edge traction control systems that adapt to track conditions in real-time, ensuring optimal grip and performance.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/close-up-detail-shots-of-advanced-ktm-mo-1772497658395-c8042a05.png?_wi=4",
              imageAlt: "Advanced Traction Technology",
            },
            {
              id: "suspension",
              title: "WP Suspension",
              description: "Precision-tuned suspension components from WP that deliver superior handling and comfort across all riding conditions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/close-up-detail-shots-of-advanced-ktm-mo-1772497658395-c8042a05.png?_wi=5",
              imageAlt: "WP Suspension System",
            },
            {
              id: "braking",
              title: "Brembo Braking Systems",
              description: "Professional-grade Brembo brakes engineered for maximum stopping power and reliability in extreme conditions.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/close-up-detail-shots-of-advanced-ktm-mo-1772497658395-c8042a05.png?_wi=6",
              imageAlt: "Brembo Braking Technology",
            },
          ]}
          gridVariant="uniform-4-items"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="technology-about" data-section="technology-about">
        <TextAbout
          tag="Engineering Excellence"
          title="KTM invests heavily in research and development to ensure every component meets the highest standards of performance and reliability."
          buttons={[
            { text: "Download Whitepaper", href: "#" },
            { text: "Meet Engineers", href: "/racing" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta-technology" data-section="cta-technology">
        <ContactText
          text="Discover how KTM's cutting-edge technology can transform your riding experience."
          animationType="reveal-blur"
          buttons={[
            { text: "Test Latest Models", href: "/models" },
            { text: "Schedule Demo", href: "/contact" },
          ]}
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>

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