"use client";

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

export default function ContactPage() {
  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="contact-info" data-section="contact-info">
        <MetricSplitMediaAbout
          tag="Get In Touch"
          tagIcon={Sparkles}
          title="Reserve Your RS9 Experience"
          description="Ready to own the ultimate expression of performance and luxury? Our specialists are standing by to guide you through the RS9 ownership journey. From personalization consultations to test drive scheduling, we're here to make your dream a reality."
          metrics={[
            { value: "24/7", title: "Concierge Support" },
            { value: "48hr", title: "Response Guarantee" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/mini-coupe-parking-highway-bridge_114579-4016.jpg"
          imageAlt="AUDI RS9 contact and support"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqDouble
          tag="Quick Answers"
          tagIcon={HelpCircle}
          title="Common Questions"
          description="Get instant answers to frequently asked questions about reserving your RS9"
          faqs={[
            {
              id: "1",
              title: "How do I schedule a test drive?",
              content: "Contact your local AUDI dealer or call our RS9 specialist hotline at 1-800-AUDI-RS9. Test drives are by appointment only and require a valid driver's license and proof of insurance."
            },
            {
              id: "2",
              title: "What is the reservation process?",
              content: "Secure your RS9 with a refundable $5,000 reservation deposit. This guarantees your build slot and allows you to begin the personalization process with our design consultants."
            },
            {
              id: "3",
              title: "How long is the delivery timeframe?",
              content: "Current delivery estimates range from 8-12 weeks for standard configurations. Highly customized builds may require additional time. Your specialist will provide precise timing during ordering."
            },
            {
              id: "4",
              title: "Are financing options available?",
              content: "Yes, AUDI Financial Services offers competitive financing and lease programs specifically for the RS9. Our finance team can customize a package based on your preferences and qualification."
            }
          ]}
          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>
  );
}