"use client";

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

export default function TechnologyPage() {
  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="tech-features" data-section="tech-features">
        <FeatureProcessSteps
          tag="Technology Innovation"
          tagIcon={Zap}
          title="Connected Intelligence"
          description="Discover the cutting-edge technology systems that elevate the RS9 driving experience"
          steps={[
            {
              number: "01",
              title: "MMI Touch Response",
              description: "Dual-screen infotainment system with haptic feedback provides intuitive control over navigation, entertainment, and vehicle settings through natural touch gestures.",
              tag: "Interface"
            },
            {
              number: "02",
              title: "Virtual Cockpit Plus",
              description: "12.3-inch digital instrument cluster delivers customizable displays with performance data, navigation, and real-time vehicle dynamics visualization.",
              tag: "Display"
            },
            {
              number: "03",
              title: "Audi Connect Services",
              description: "Cloud-based connectivity enables remote vehicle monitoring, over-the-air updates, and seamless integration with smart home and mobile ecosystems.",
              tag: "Connectivity"
            }
          ]}
          buttons={[
            { text: "Schedule Demo", href: "/contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          tag="Help Center"
          tagIcon={HelpCircle}
          title="Frequently Asked Questions"
          description="Everything you need to know about the AUDI RS9"
          faqs={[
            {
              id: "1",
              title: "What is the fuel economy of the RS9?",
              content: "The AUDI RS9 delivers an estimated combined fuel economy of 16-18 MPG depending on driving conditions and transmission settings. While performance-focused, the engine incorporates efficiency technologies to optimize fuel consumption without compromising power delivery."
            },
            {
              id: "2",
              title: "What is the warranty coverage?",
              content: "The RS9 comes with AUDI's comprehensive warranty: 4 years/50,000 miles basic coverage, 6 years/70,000 miles powertrain coverage, and 12 years/unlimited miles corrosion protection. Extended warranties are available for additional peace of mind."
            },
            {
              id: "3",
              title: "What safety features are included?",
              content: "The RS9 features advanced driver assistance systems including adaptive cruise control, lane keeping assist, automatic emergency braking, blind spot monitoring, and a 360-degree camera system. It achieves top safety ratings from NHTSA and IIHS."
            },
            {
              id: "4",
              title: "How does the four-wheel drive system work?",
              content: "The RS9 utilizes AUDI's Quattro all-wheel drive with dynamic torque vectoring. The system intelligently distributes power between all four wheels, sending up to 100% of torque to any wheel for optimal traction and cornering performance."
            },
            {
              id: "5",
              title: "What is the cargo capacity?",
              content: "The sedan offers 20.5 cubic feet of trunk space, expandable to 42 cubic feet with the rear seats folded. The innovative trunk design accommodates both daily cargo and performance equipment seamlessly."
            },
            {
              id: "6",
              title: "Are there customization options available?",
              content: "Yes, the RS9 offers extensive personalization including exclusive paint finishes, interior trim materials, wheel designs, performance upgrades, and bespoke technology packages. Our specialists can create a vehicle tailored to your preferences."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </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>
  );
}