"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
import ParallaxAbout from '@/components/sections/about/ParallaxAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ProductCardFive from '@/components/sections/product/ProductCardFive';
import MetricCardSix from '@/components/sections/metrics/MetricCardSix';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Zap, Flame, Sparkles, Award, TrendingUp, Users, Wrench, Heart, MapPin } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="animatedAurora"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="outline"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="FoFdom"
          navItems={[
            { name: "Garage", id: "hero" },
            { name: "Culture", id: "about" },
            { name: "Features", id: "features" },
            { name: "Community", id: "testimonials" },
            { name: "Connect", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitLarge
          title="Unseen Wheels Ultimate Style"
          description="Step into the world of FoFdom — where rare cars and bold culture collide"
          tag="Exclusive Community"
          tagIcon={Zap}
          buttons={[
            { text: "Enter the Garage", href: "contact" },
            { text: "Explore Culture", href: "about" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701513561-77gcebw6.jpg"
          imageAlt="Exotic performance car showcase"
          className="overflow-hidden"
          containerClassName="relative z-10"
          titleClassName="text-5xl md:text-6xl font-extrabold tracking-tight"
          descriptionClassName="text-lg md:text-xl opacity-90"
          tagClassName="inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-semibold"
        />
      </div>

      <div id="about" data-section="about">
        <ParallaxAbout
          title="FoFdom: The Underground Movement"
          description="A curated sanctuary for car enthusiasts who refuse to settle for the ordinary. We celebrate raw passion, authentic customization, and the unspoken code of exclusive automotive culture. From rare finds to heavily modified masterpieces, FoFdom is where true gearheads connect, share, and elevate the scene."
          tag="Our Culture"
          tagIcon={Flame}
          buttons={[
            { text: "Join the Movement", href: "contact" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701520211-yuyjvph7.jpg"
          imageAlt="FoFdom underground car culture community"
          titleClassName="text-5xl md:text-6xl font-extrabold"
          descriptionClassName="text-lg md:text-xl opacity-90 max-w-2xl"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Core Features"
          description="What makes FoFdom the ultimate hub for car culture enthusiasts"
          tag="Community Pillars"
          tagIcon={Sparkles}
          features={[
            {
              title: "Rare Finds",
              description: "Access an exclusive catalog of sought-after, limited-edition, and one-of-a-kind vehicles. Discover cars that define the underground scene.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701515401-y0bopo8e.jpg",
              imageAlt: "rare car collectible vehicle limited edition exclusive automotive"
            },
            {
              title: "Customization Hub",
              description: "Showcase your builds. Connect with builders, tuners, and modifiers. Share your vision and get inspired by the most audacious modifications.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701514475-nqbyqhrz.jpg",
              imageAlt: "car customization tuning modification performance parts"
            },
            {
              title: "Exclusive Access",
              description: "Member-only events, drop announcements, and first-look opportunities. Be part of a community that gatekeeps nothing but authenticity.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701524660-s9qo9uf3.jpg",
              imageAlt: "exclusive club members only VIP access community gathering"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFive
          title="Featured Rides"
          description="Currently in the FoFdom garage: hand-picked vehicles setting the tone"
          tag="Showcase"
          tagIcon={Award}
          products={[
            {
              id: "car-1",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701516448-chpbquia.jpg",
              imageAlt: "High-performance sports car",
              button: { text: "View Details" },
              isFavorited: false
            },
            {
              id: "car-2",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701517461-jf8jx81y.jpg",
              imageAlt: "Luxury exclusive vehicle",
              button: { text: "View Details" },
              isFavorited: false
            },
            {
              id: "car-3",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701518462-5nxhvx4a.jpg",
              imageAlt: "Heavily customized tuned car",
              button: { text: "View Details" },
              isFavorited: false
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSix
          title="By The Numbers"
          description="The scale and impact of FoFdom's underground network"
          tag="Community Stats"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "members",
              value: "8.5K+",
              tag: "Members",
              tagIcon: Users,
              title: "Active Community Members"
            },
            {
              id: "cars",
              value: "2.3K+",
              tag: "Vehicles",
              tagIcon: Zap,
              title: "Cataloged Cars"
            },
            {
              id: "events",
              value: "140+",
              tag: "Events",
              tagIcon: Sparkles,
              title: "Annual Meetups & Showcases"
            },
            {
              id: "mods",
              value: "1.8K+",
              tag: "Builds",
              tagIcon: Wrench,
              title: "Custom Modifications Shared"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Community Voices"
          description="What FoFdom members are saying about their experience"
          tag="Testimonials"
          tagIcon={Heart}
          testimonials={[
            {
              id: "1",
              name: "Marcus Chen",
              role: "Build Curator",
              company: "Underground Garage",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701526128-2xo4gjam.jpg",
              imageAlt: "Marcus Chen"
            },
            {
              id: "2",
              name: "Aria Rodriguez",
              role: "Community Lead",
              company: "FoFdom East Coast",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701527031-mbf7ish2.jpg",
              imageAlt: "Aria Rodriguez"
            },
            {
              id: "3",
              name: "Jake Summers",
              role: "Performance Expert",
              company: "Custom Tuning Lab",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701528070-59qa9qva.jpg",
              imageAlt: "Jake Summers"
            },
            {
              id: "4",
              name: "Sophia Nakamura",
              role: "Rare Car Collector",
              company: "Import Specialists",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701529085-jao59cln.jpg",
              imageAlt: "Sophia Nakamura"
            },
            {
              id: "5",
              name: "Alex Torres",
              role: "Event Organizer",
              company: "Street Scene Collective",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701530153-7o5crwxc.jpg",
              imageAlt: "Alex Torres"
            },
            {
              id: "6",
              name: "David Kim",
              role: "Vintage Restoration",
              company: "Heritage Motors",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767701530929-yof6wsq9.jpg",
              imageAlt: "David Kim"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline
          text="Ready to enter the FoFdom garage?"
          inputPlaceholder="your@email.com"
          buttonText="Request Access"
          animationType="entrance-slide"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="FoFdom"
          title="Where raw passion meets exclusive automotive culture"
          columns={[
            {
              title: "Explore",
              items: [
                { label: "Garage", href: "#hero" },
                { label: "Culture", href: "#about" },
                { label: "Features", href: "#features" },
                { label: "Community", href: "#testimonials" }
              ]
            },
            {
              title: "Community",
              items: [
                { label: "Join FoFdom", href: "#contact" },
                { label: "Events", href: "#" },
                { label: "Member Forum", href: "#" },
                { label: "Showcase Your Build", href: "#" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Build Guides", href: "#" },
                { label: "Tuning Tips", href: "#" },
                { label: "Rare Finds Blog", href: "#" },
                { label: "Community Rules", href: "#" }
              ]
            }
          ]}
          contactItems={[
            { icon: Zap, text: "community@fofodom.io" },
            { icon: MapPin, text: "Underground Network • Global" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}