"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from "@/components/navbar/NavbarStyleMinimal";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import MediaSplitTabsAbout from "@/components/sections/about/MediaSplitTabsAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import TestimonialCardNine from "@/components/sections/testimonial/TestimonialCardNine";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBaseSocial from "@/components/sections/footer/FooterBaseSocial";
import { Youtube, Twitter, Linkedin, Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="neon-glow"
      primaryButtonStyle="outline"
      secondaryButtonStyle="outline"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="AUDI A10"
          button={{
            text: "Reserve Now",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Introducing AUDI A10"
          description="Experience the future of automotive excellence. The all-new A10 redefines performance, luxury, and innovation for the modern driver."
          tag="Premium Luxury Sedan"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507382209-vmocpnfc.jpg"
          imageAlt="AUDI A10 luxury sedan"
          frameStyle="card"
          buttons={[
            {
              text: "Explore Features",
              href: "feature"
            },
            {
              text: "View Models",
              href: "product"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Why Choose AUDI A10"
          description="The AUDI A10 represents decades of engineering excellence combined with cutting-edge technology."
          tabs={[
            {
              id: "engineering",
              label: "Engineering",
              description: "Crafted for those who demand the finest in performance. Every detail has been meticulously refined to deliver an unparalleled driving experience that transcends expectations."
            },
            {
              id: "comfort",
              label: "Comfort",
              description: "Luxury redefined with premium materials and innovative design. Experience ultimate comfort on every journey with ergonomic seating and climate control."
            },
            {
              id: "technology",
              label: "Technology",
              description: "Advanced systems that adapt to you. Intelligent features work seamlessly to enhance your driving experience with cutting-edge innovation."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg"
          imageAlt="AUDI A10 side profile"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardOne
          title="Premium Features"
          description="Engineered to perfection. The A10 combines advanced technology with timeless elegance, delivering innovation at every turn."
          features={[
            {
              title: "Aerodynamic Design",
              description: "Sculpted with precision for optimal performance and visual impact.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg",
              imageAlt: "AUDI A10 side profile"
            },
            {
              title: "Luxury Interior",
              description: "Premium materials and meticulous craftsmanship create an exceptional cabin experience.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg",
              imageAlt: "AUDI A10 luxury interior"
            },
            {
              title: "LED Technology",
              description: "Cutting-edge headlight and taillight systems for enhanced visibility and style.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507385348-h08ys5lv.jpg",
              imageAlt: "AUDI A10 headlight design"
            },
            {
              title: "Performance Wheels",
              description: "Engineered for grip and elegance with premium tire technology.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507386084-fimpt5k0.jpg",
              imageAlt: "AUDI A10 wheel design"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardTwo
          title="A10 Models"
          description="Choose your perfect A10. Available in multiple trim levels to match your lifestyle and preferences."
          products={[
            {
              id: "1",
              brand: "AUDI",
              name: "A10 Standard",
              price: "$55,000",
              rating: 5,
              reviewCount: "2.3k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg",
              imageAlt: "AUDI A10 Standard"
            },
            {
              id: "2",
              brand: "AUDI",
              name: "A10 Sport",
              price: "$65,000",
              rating: 5,
              reviewCount: "1.8k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg",
              imageAlt: "AUDI A10 Sport"
            },
            {
              id: "3",
              brand: "AUDI",
              name: "A10 Premium",
              price: "$75,000",
              rating: 5,
              reviewCount: "1.5k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507385348-h08ys5lv.jpg",
              imageAlt: "AUDI A10 Premium"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metric" data-section="metric">
        <MetricCardTen
          title="A10 Performance Metrics"
          description="Industry-leading specifications that set new standards"
          metrics={[
            {
              id: "1",
              title: "Peak Horsepower",
              subtitle: "Maximum performance output",
              category: "Performance",
              value: "382 HP"
            },
            {
              id: "2",
              title: "0-60 Acceleration",
              subtitle: "Lightning-fast performance",
              category: "Speed",
              value: "3.8s"
            },
            {
              id: "3",
              title: "Top Speed",
              subtitle: "Maximum velocity capability",
              category: "Capability",
              value: "186 mph"
            },
            {
              id: "4",
              title: "Fuel Economy",
              subtitle: "Combined efficiency rating",
              category: "Efficiency",
              value: "32 mpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardNine
          title="Trusted by Drivers Worldwide"
          description="Hear what AUDI A10 owners have to say about their driving experience"
          testimonials={[
            {
              id: "1",
              quote: "The A10 transformed my daily commute into pure enjoyment. The engineering is flawless and the comfort is unmatched.",
              name: "Michael Johnson",
              role: "Executive",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766504480835-8xmeyz3k.jpg",
              imageAlt: "Michael Johnson"
            },
            {
              id: "2",
              quote: "Absolute perfection in every detail. The A10 is worth every penny and more. I recommend it without hesitation.",
              name: "Sarah Anderson",
              role: "Business Owner",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414402772-ruzjnlgd.jpg",
              imageAlt: "Sarah Anderson"
            },
            {
              id: "3",
              quote: "The performance and luxury combined make the A10 the best car I have ever owned. Simply exceptional.",
              name: "James Wilson",
              role: "Automotive Enthusiast",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507389329-xpn9l1hz.jpg",
              imageAlt: "James Wilson"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Newsletter"
          title="Ready to Experience the A10?"
          description="Stay updated with the latest AUDI A10 news, exclusive offers, and special events."
          useInvertedBackground="noInvert"
          onSubmit={(email) => console.log("Email submitted:", email)}
        />
      </div>

      <div id="productCardTwo" data-section="productCardTwo">
        <ProductCardTwo
          title="A10 Featured Selection"
          description="Explore our most popular A10 variants with customer reviews and ratings."
          starColor="#ff0000"
          products={[
            {
              id: "1",
              brand: "AUDI",
              name: "A10 Standard Edition",
              price: "$55,000",
              rating: 5,
              reviewCount: "2.3k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg",
              imageAlt: "AUDI A10 Standard"
            },
            {
              id: "2",
              brand: "AUDI",
              name: "A10 Sport Edition",
              price: "$65,000",
              rating: 5,
              reviewCount: "1.8k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg",
              imageAlt: "AUDI A10 Sport"
            },
            {
              id: "3",
              brand: "AUDI",
              name: "A10 Premium Edition",
              price: "$75,000",
              rating: 5,
              reviewCount: "1.5k",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507385348-h08ys5lv.jpg",
              imageAlt: "AUDI A10 Premium"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseSocial
          columns={[
            {
              title: "Models",
              items: [
                { label: "A10 Standard", href: "product" },
                { label: "A10 Sport", href: "product" },
                { label: "A10 Premium", href: "product" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#" },
                { label: "News", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "Contact Us", href: "contact" },
                { label: "Service Centers", href: "#" },
                { label: "Owner Portal", href: "#" }
              ]
            }
          ]}
          description="Experience the pinnacle of automotive luxury and performance with AUDI A10. Engineering excellence meets timeless design."
          socialLinks={[
            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" },
            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" }
          ]}
          logoText="AUDI A10"
          copyrightText="© 2025 AUDI. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}