"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
import TextAbout from "@/components/sections/about/TextAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import Link from "next/link";
import { Zap, Trophy, Flame, Cpu, Award, Globe, Star, Gauge, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, Rocket } from "lucide-react";

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroBillboardDashboard
          title="The Future of Racing is Here"
          description="Experience next-generation motorcycle technology with KTM's most advanced machines. Engineered for champions, designed for the future."
          tag="Revolutionary Performance"
          tagIcon={Zap}
          tagAnimation="slide-up"
          buttons={[
            { text: "Explore Models", href: "/models" },
            { text: "Book Test Ride", href: "https://testride.ktm.com" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          dashboard={{
            title: "Real-Time Performance Hub",
            logoIcon: Zap,
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/a-futuristic-high-tech-motorcycle-dashbo-1772497657804-e0fdf6d3.png",
            searchPlaceholder: "Search performance data...",
            buttons: [
              { text: "Live Data", href: "#" },
              { text: "Export Report", href: "#" },
            ],
            sidebarItems: [
              { icon: Gauge, active: true },
              { icon: Zap },
              { icon: Settings },
            ],
            stats: [
              {
                title: "Peak Power",
                values: [195, 205, 215],
                valuePrefix: "",
                valueSuffix: "HP",
                description: "Maximum engine output",
              },
              {
                title: "Top Speed",
                values: [299, 305, 310],
                valuePrefix: "",
                valueSuffix: "km/h",
                description: "Verified track performance",
              },
              {
                title: "Acceleration",
                values: [2.95, 2.89, 2.85],
                valuePrefix: "",
                valueSuffix: "s",
                description: "0-100 km/h time",
              },
            ],
            chartTitle: "Performance Metrics",
            chartData: [
              { value: 95 },
              { value: 87 },
              { value: 92 },
              { value: 88 },
              { value: 98 },
            ],
            listTitle: "Latest Updates",
            listItems: [
              { icon: Rocket, title: "2026 Model Launch", status: "Active" },
              { icon: Trophy, title: "Racing Championship Win", status: "Confirmed" },
              { icon: Zap, title: "New Electric Range", status: "Coming Soon" },
            ],
            imageAlt: "KTM Performance Dashboard",
          }}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Our Legacy"
          tagIcon={Trophy}
          tagAnimation="slide-up"
          title="Building the Future of Motorcycling Since 1934. KTM is more than just motorcycles—we are innovation, passion, and relentless pursuit of excellence on two wheels."
          buttons={[
            { text: "Our Story", href: "#" },
            { text: "Join Us", href: "https://jobs.ktm.com" },
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="models" data-section="models">
        <ProductCardOne
          title="2026 Model Range"
          description="Discover our complete lineup of high-performance motorcycles across all categories"
          tag="Latest Models"
          tagIcon={Flame}
          tagAnimation="slide-up"
          buttons={[
            { text: "Configure Your KTM", href: "https://configurator.ktm.com" },
          ]}
          buttonAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "450sx",
              name: "2026 KTM 450 SX-F",
              price: "€7,999",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/a-stunning-2026-ktm-450-sx-f-motocross-b-1772497657472-fe8ae8a8.png?_wi=1",
              imageAlt: "2026 KTM 450 SX-F Motocross",
            },
            {
              id: "1390adv",
              name: "2026 KTM 1390 Super Adventure R",
              price: "€16,499",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/a-premium-2026-ktm-1390-super-adventure--1772497658095-4aa40b33.png?_wi=1",
              imageAlt: "2026 KTM 1390 Adventure",
            },
            {
              id: "690smc",
              name: "2026 KTM 690 SMC R",
              price: "€8,799",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/a-sleek-2026-ktm-690-smc-r-supermoto-bik-1772497658051-1d88b870.png?_wi=1",
              imageAlt: "2026 KTM 690 SMC R Supermoto",
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySeven
          title="Engineered for Performance"
          description="Advanced technology and precision engineering that sets KTM apart"
          tag="Innovation"
          tagIcon={Cpu}
          tagAnimation="slide-up"
          buttons={[{ text: "Learn More", 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=1",
              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=2",
              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=3",
              imageAlt: "Brembo Braking Technology",
            },
          ]}
          gridVariant="uniform-4-items"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="racing" data-section="racing">
        <TeamCardFive
          title="Racing Champions"
          description="Elite riders representing KTM on the world's most competitive stages"
          tag="Our Athletes"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[{ text: "Follow Racing", href: "#" }]}
          buttonAnimation="slide-up"
          animationType="slide-up"
          team={[
            {
              id: "racer1",
              name: "Championship Contender",
              role: "MotoGP Factory Rider",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/portrait-of-a-professional-motocross-rac-1772497657860-c8d4f987.png?_wi=1",
              imageAlt: "Champion Racer",
            },
            {
              id: "racer2",
              name: "Elite Performer",
              role: "Motocross Pro",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/female-professional-motorcycle-racer-in--1772497657783-741dd07c.png?_wi=1",
              imageAlt: "Motocross Champion",
            },
            {
              id: "racer3",
              name: "Record Holder",
              role: "Enduro Champion",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/professional-motocross-champion-in-ktm-t-1772497657761-40600cf6.png?_wi=1",
              imageAlt: "Enduro Champion",
            },
            {
              id: "racer4",
              name: "Innovation Expert",
              role: "Technical Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/professional-motorcycle-mechanic-or-engi-1772497657496-73520b50.png?_wi=1",
              imageAlt: "Technical Expertise",
            },
          ]}
        />
      </div>

      <div id="socialproof" data-section="socialproof">
        <SocialProofOne
          title="Trusted by Champions Worldwide"
          description="Leading the motorsport industry with partnerships spanning every racing discipline"
          tag="Global Leader"
          tagIcon={Globe}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          names={[
            "MotoGP Championship",
            "Motocross World Championship",
            "Enduro World Championship",
            "Supercross Series",
            "Rally Dakar",
            "ISDE Racing",
            "Superbike World Championship",
          ]}
          logos={[
            "http://img.b2bpic.net/free-vector/karting-motor-race-logo-emblem-set_1284-15006.jpg",
            "http://img.b2bpic.net/free-vector/motocross-logo-set-template_52683-48312.jpg",
            "http://img.b2bpic.net/free-vector/motocross-logo-collection_52683-46377.jpg",
            "http://img.b2bpic.net/free-vector/vintage-label-design-with-lettering-composition-dark_1284-43749.jpg",
            "http://img.b2bpic.net/free-vector/hand-drawn-desert-logo-template_23-2149398901.jpg",
            "http://img.b2bpic.net/free-vector/motocross-logo-set-template_52683-48312.jpg",
            "http://img.b2bpic.net/free-vector/vintage-motor-label-with-lettering-composition_1284-45824.jpg",
          ]}
          speed={50}
          showCard={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="What Champions Say"
          description="Testimonials from professional riders and racing teams worldwide"
          tag="Reviews"
          tagIcon={Star}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",
              name: "Max Verstappen Style Racer",
              role: "MotoGP Factory Rider",
              company: "KTM Racing",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/portrait-of-a-professional-motocross-rac-1772497657860-c8d4f987.png?_wi=2",
              imageAlt: "Racing Champion",
            },
            {
              id: "2",
              name: "Elena Rodriguez",
              role: "Motocross Champion",
              company: "KTM Factory Team",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/female-professional-motorcycle-racer-in--1772497657783-741dd07c.png?_wi=2",
              imageAlt: "Motocross Champion",
            },
            {
              id: "3",
              name: "David Thompson",
              role: "Enduro World Champion",
              company: "KTM Enduro Racing",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/professional-motocross-champion-in-ktm-t-1772497657761-40600cf6.png?_wi=2",
              imageAlt: "Enduro Champion",
            },
            {
              id: "4",
              name: "Dr. Marcus Weber",
              role: "Chief Technical Officer",
              company: "KTM Innovation Lab",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APbw46PUyaxpRcSS3bOWIP0kw9/professional-motorcycle-mechanic-or-engi-1772497657496-73520b50.png?_wi=2",
              imageAlt: "Technical Innovation",
            },
          ]}
          kpiItems={[
            { value: "400+", label: "Grand Prix Victories" },
            { value: "68", label: "World Championships" },
            { value: "95%", label: "Rider Satisfaction" },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to join the revolution? Discover your perfect KTM machine and experience the future of motorcycling today."
          animationType="reveal-blur"
          buttons={[
            { text: "Find a Dealer", href: "/contact" },
            { text: "Schedule Test Ride", href: "https://testride.ktm.com" },
          ]}
          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>
  );
}