"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterCard from '@/components/sections/footer/FooterCard';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Award, Facebook, Twitter, Instagram, Linkedin } from "lucide-react";

export default function DesignPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Design", id: "/design" },
    { name: "Performance", id: "/performance" },
    { name: "Technology", id: "/technology" },
    { name: "Contact", id: "/contact" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="mediumLarge"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="AUDI RS9"
          navItems={navItems}
          button={{
            text: "Reserve Now",
            href: "/contact"
          }}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureProcessSteps
          tag="Performance Innovation"
          tagIcon={Zap}
          title="Three Pillars of Excellence"
          description="Discover the revolutionary technologies that make the RS9 the ultimate performance sedan"
          steps={[
            {
              number: "01",
              title: "Twin-Turbocharged Engine",
              description: "A bespoke 4.0L V8 engine with dual turbochargers delivers 641 horsepower and 590 lb-ft of torque. Precision engineering meets raw power in every revolution.",
              tag: "Engine"
            },
            {
              number: "02",
              title: "Adaptive Suspension",
              description: "Dynamic air suspension with electronic damping control ensures perfect balance between comfort and track-ready handling on any road surface.",
              tag: "Dynamics"
            },
            {
              number: "03",
              title: "Driver-Centric Cockpit",
              description: "An intuitively designed interior with carbon fiber accents and premium materials creates an immersive driving environment that responds to your every command.",
              tag: "Interior"
            }
          ]}
          buttons={[
            { text: "View Specifications", href: "/technology" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          tag="Performance Benchmarks"
          tagIcon={Award}
          title="Numbers That Inspire"
          description="Witness the quantified excellence of the AUDI RS9"
          metrics={[
            {
              id: "1",
              value: "205 mph",
              title: "Top Speed",
              description: "Electronic speed-limited maximum velocity",
              imageSrc: "https://img.b2bpic.net/free-photo/black-sedan-car-driving-bridge-road_114579-4023.jpg"
            },
            {
              id: "2",
              value: "9.6 g",
              title: "Lateral Grip",
              description: "Cornering performance on track conditions",
              imageSrc: "https://img.b2bpic.net/free-photo/silver-luxury-sedan-parked-port_114579-5199.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="AUDI RS9"
          copyrightText="© 2025 AUDI AG. All rights reserved. The future of performance."
          socialLinks={[
            { icon: Facebook, href: "https://facebook.com/audi", ariaLabel: "AUDI Facebook" },
            { icon: Twitter, href: "https://twitter.com/audi", ariaLabel: "AUDI Twitter" },
            { icon: Instagram, href: "https://instagram.com/audi", ariaLabel: "AUDI Instagram" },
            { icon: Linkedin, href: "https://linkedin.com/company/audi", ariaLabel: "AUDI LinkedIn" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}