"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { ChevronRight, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "home" },
            { name: "Parts", id: "parts" },
            { name: "Guide", id: "guide" },
            { name: "Learn", id: "learn" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Explore",            href: "parts"
          }}
          brandName="StanceCar"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="StanceCar"
          description="Master the art of automotive customization. Learn about every component that makes stance cars unique and explore the brands that define the culture."
          buttons={[
            {
              text: "Start Learning",              href: "parts"
            },
            {
              text: "View 3D Model",              href: "interactive"
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp-car_1203-7165.jpg?_wi=1"
          imageAlt="Lowered stance vehicle showcase"
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Educational Platform"
          title="Understanding Stance Car Culture Through Component Knowledge"
          useInvertedBackground={false}
          buttons={[
            {
              text: "Explore Parts",              href: "parts"
            }
          ]}
        />
      </div>

      <div id="parts" data-section="parts">
        <FeatureCardTwentySix
          title="Essential Stance Car Components"
          description="Tap on each component to learn detailed information and discover the most popular brands that car enthusiasts trust."
          features={[
            {
              title: "Suspension System",              description: "The foundation of stance. Lowering springs and coilovers adjust ride height and handling characteristics.",              imageSrc: "http://img.b2bpic.net/free-photo/electric-bike-rear-shock-absorber-close-up_114579-348.jpg?_wi=1",              imageAlt: "Suspension system components",              buttonIcon: ChevronRight,
              buttonHref: "#suspension-details"
            },
            {
              title: "Custom Wheels",              description: "Aftermarket wheels define the aesthetic. Wide, offset wheels are key to achieving the iconic stance look.",              imageSrc: "http://img.b2bpic.net/free-photo/blond-female-leather-jacket-holding-moto-helmet-sitting-car-s-wheel_613910-8147.jpg?_wi=1",              imageAlt: "Custom wheel and tire setup",              buttonIcon: ChevronRight,
              buttonHref: "#wheel-details"
            },
            {
              title: "Body Kit & Aerodynamics",              description: "Front splitters, side skirts, and rear diffusers enhance both appearance and performance.",              imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-white-luxury-car_181624-23559.jpg",              imageAlt: "Body kit components",              buttonIcon: ChevronRight,
              buttonHref: "#bodykit-details"
            },
            {
              title: "Performance Exhaust",              description: "Custom exhaust systems improve engine breathing and create a distinctive aggressive sound.",              imageSrc: "http://img.b2bpic.net/free-photo/mechanic-servicing-car_1170-1336.jpg",              imageAlt: "Performance exhaust system",              buttonIcon: ChevronRight,
              buttonHref: "#exhaust-details"
            },
            {
              title: "Brake System",              description: "High-performance brakes ensure safety and control, essential for modified vehicles.",              imageSrc: "http://img.b2bpic.net/free-photo/car-repair-garage_1170-1496.jpg?_wi=1",              imageAlt: "Performance brake system",              buttonIcon: ChevronRight,
              buttonHref: "#brake-details"
            },
            {
              title: "Engine Modifications",              description: "Tuning and forced induction boost performance to match the aggressive appearance.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-astronaut-pressing-wrist-device-emergency-red-lighting-confirm-alert_482257-132555.jpg",              imageAlt: "Modified engine with turbo",              buttonIcon: ChevronRight,
              buttonHref: "#engine-details"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="interactive" data-section="interactive">
        <ProductCardTwo
          title="Interactive 3D Stance Car Model"
          description="Explore a fully detailed stance car model. Click on different parts to learn specifications, popular brands, and installation details."
          products={[
            {
              id: "suspension",              brand: "Öhlins",              name: "Coilover Suspension Kit",              price: "Professional Grade",              rating: 5,
              reviewCount: "12.5k",              imageSrc: "http://img.b2bpic.net/free-photo/electric-bike-rear-shock-absorber-close-up_114579-348.jpg?_wi=2",              imageAlt: "Öhlins coilover suspension"
            },
            {
              id: "wheels",              brand: "Work Wheels",              name: "Meister S1 Forged Wheels",              price: "Premium Wheels",              rating: 5,
              reviewCount: "8.3k",              imageSrc: "http://img.b2bpic.net/free-photo/blond-female-leather-jacket-holding-moto-helmet-sitting-car-s-wheel_613910-8147.jpg?_wi=2",              imageAlt: "Work Meister S1 wheels"
            },
            {
              id: "brakes",              brand: "Brembo",              name: "GT Series Brake Kit",              price: "Performance Braking",              rating: 5,
              reviewCount: "9.7k",              imageSrc: "http://img.b2bpic.net/free-photo/car-repair-garage_1170-1496.jpg?_wi=2",              imageAlt: "Brembo GT brake system"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Stay Updated"
          tagIcon={Mail}
          title="Join the Stance Community"
          description="Subscribe to receive updates on new components, brand spotlights, and the latest stance car trends."
          background={{
            variant: "radial-gradient"
          }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-vector/autonomous-smart-car-automatic-wireless-sensor-driving-road-around-car-autonomous-smart-car-goes-scans-roads-observe-distance-automatic-braking-system_1150-62848.jpg"
          imageAlt="Stance car community"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime."
          mediaAnimation="none"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp-car_1203-7165.jpg?_wi=2"
          imageAlt="Stance car footer background"
          videoSrc=""
          logoText="StanceCar"
          columns={[
            {
              title: "Learning",              items: [
                { label: "Components", href: "#parts" },
                { label: "Brands", href: "#brands" },
                { label: "Tutorials", href: "#tutorials" },
                { label: "Resources", href: "#resources" }
              ]
            },
            {
              title: "Community",              items: [
                { label: "Forum", href: "#forum" },
                { label: "Gallery", href: "#gallery" },
                { label: "Events", href: "#events" },
                { label: "Meetups", href: "#meetups" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Contact Us", href: "#contact" },
                { label: "Feedback", href: "#feedback" }
              ]
            }
          ]}
          copyrightText="© 2025 StanceCar | Automotive Education Platform"
        />
      </div>
    </ThemeProvider>
  );
}
