"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { BarChart, Camera, Car, Crown, Diamond, Gauge, Lightbulb, MapPin, Palette, Sparkles, Zap, ZoomIn, RotateCw, Disc } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSmallSizeLargeTitles"
        background="fluid"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Showroom",          id: "#showroom"},
        {
          name: "Collection",          id: "#collection"},
        {
          name: "Performance",          id: "#performance"},
        {
          name: "Configure",          id: "#configure"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Apex Motors"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "plain"}}
      title="Experience Tomorrow's Drive, Today."
      description="Step into the future with Apex Motors. Our immersive 3D showroom redefines luxury automotive exploration, blending cutting-edge technology with unparalleled design."
      tag="The Future of Luxury Mobility"
      tagAnimation="blur-reveal"
      buttons={[
        {
          text: "Explore 3D Showroom",          href: "#showroom"},
        {
          text: "Configure Your Dream Car",          href: "#configure"},
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-car-with-vibrant-colors_23-2150796950.jpg",          imageAlt: "Futuristic interactive car dashboard"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746622.jpg",          imageAlt: "Luxury futuristic car interior with neon accents"}
      ]}
      mediaAnimation="blur-reveal"
      rating={5}
      ratingText="Unrivaled Experience"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Crafting the Future of Automotive Excellence"
      metrics={[
        {
          icon: Gauge,
          label: "Precision Engineered",          value: "100%"},
        {
          icon: Sparkles,
          label: "Innovation Driven",          value: "Beyond Limits"},
        {
          icon: Diamond,
          label: "Immersive Design",          value: "3D Experience"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="showroom" data-section="showroom">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Dynamic 3D Exploration",          description: "Freely rotate, zoom, and inspect every angle of our hyper-realistic 3D car models. Experience true-to-life reflections and HDRI lighting.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/airport-hall-with-seats-sides_1127-2089.jpg",            imageAlt: "High-fidelity 3D car model rendering"},
          items: [
            {
              icon: RotateCw,
              text: "360° View"},
            {
              icon: ZoomIn,
              text: "Detail Zoom"},
            {
              icon: Lightbulb,
              text: "Dynamic Lighting"},
          ],
          reverse: false
        },
        {
          title: "Interactive Configurator",          description: "Personalize your vehicle in real-time. Change colors, wheels, and interior options instantly, with live price updates for complete transparency.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/smart-car-interface-projection-hologram_53876-96639.jpg",            imageAlt: "Interactive car configurator interface"},
          items: [
            {
              icon: Palette,
              text: "Color Options"},
            {
              icon: Disc,
              text: "Wheel Designs"},
            {
              icon: Car,
              text: "Feature Toggle"},
          ],
          reverse: true
        },
        {
          title: "Cinematic Storytelling",          description: "Engage with scroll-driven camera fly-throughs, animated performance stats, and interactive hotspots that reveal the engineering marvels of each car.",          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828186.jpg",            imageAlt: "Cinematic view of car interior with interactive elements"},
          items: [
            {
              icon: Camera,
              text: "Fly-through Animations"},
            {
              icon: MapPin,
              text: "Interactive Hotspots"},
            {
              icon: BarChart,
              text: "Animated Stats"},
          ],
          reverse: false
        },
      ]}
      title="Immersive Showroom, Unmatched Interaction"
      description="Our state-of-the-art virtual showroom brings you closer to the vehicle than ever before. Explore every detail with cinematic precision and interactive controls."
    />
  </div>

  <div id="collection" data-section="collection">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "lambo",          name: "Velocitor GT",          price: "$2,800,000",          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-representation-water-vehicle_23-2151048205.jpg",          imageAlt: "Futuristic Lamborghini-inspired hypercar"},
        {
          id: "ferrari",          name: "Aethel GT",          price: "$2,200,000",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-side-mirror-modern-white-cabriolet-car_181624-25257.jpg",          imageAlt: "Modern Ferrari-inspired grand tourer"},
        {
          id: "porsche",          name: "Electra Coupe",          price: "$1,500,000",          imageSrc: "http://img.b2bpic.net/free-photo/view-small-four-wheeled-vehicle-mobility-fast-travel_23-2151016476.jpg",          imageAlt: "Futuristic Porsche-inspired electric sports car"},
        {
          id: "mclaren",          name: "Zenith X",          price: "$3,100,000",          imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138945.jpg",          imageAlt: "Cutting-edge McLaren-inspired supercar"},
        {
          id: "tesla",          name: "Quantum Drive",          price: "$950,000",          imageSrc: "http://img.b2bpic.net/free-photo/view-four-wheeled-vehicle-mobility-fast-travel_23-2151016449.jpg",          imageAlt: "Visionary Tesla-inspired electric sedan"},
        {
          id: "audi",          name: "Aura SUV",          price: "$1,100,000",          imageSrc: "http://img.b2bpic.net/free-photo/modern-car-futuristic-road_23-2151021131.jpg",          imageAlt: "Sophisticated Audi-inspired luxury electric SUV"},
      ]}
      title="The Apex Collection"
      description="Discover our curated selection of ultra-premium hypercars and luxury electric vehicles, designed for the discerning enthusiast. Each model represents the pinnacle of performance and design."
    />
  </div>

  <div id="performance" data-section="performance">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        {
          id: "speed",          value: "0-60 in 1.9s",          description: "Lightning-fast acceleration defines our hypercars. Experience G-forces like never before."},
        {
          id: "horsepower",          value: "1200+ HP",          description: "Engineered for extreme output, our powerplants deliver exhilarating horsepower on demand."},
        {
          id: "torque",          value: "1500+ Nm",          description: "Instantaneous torque delivery ensures a responsive and commanding driving experience."},
      ]}
      title="Unleash Unrivaled Performance"
      description="Experience the raw power and precision engineering behind every Apex Motors vehicle. Our performance metrics are a testament to our commitment to speed, agility, and dynamic control."
    />
  </div>

  <div id="configure" data-section="configure">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "base",          badge: "Standard",          badgeIcon: Car,
          price: "$1,200,000",          name: "Founders Edition",          buttons: [
            {
              text: "Configure Now"},
          ],
          features: [
            "Standard Performance Drivetrain",            "Premium Interior Trim",            "Advanced Driver-Assist System",            "24/7 Concierge Support"],
        },
        {
          id: "sport",          badge: "Sport Pack",          badgeIcon: Zap,
          price: "$1,550,000",          name: "Performance Edition",          buttons: [
            {
              text: "Configure Now"},
          ],
          features: [
            "Enhanced Aerodynamic Package",            "Track-Optimized Suspension",            "Carbon Ceramic Brakes",            "Exclusive Performance Wheels"],
        },
        {
          id: "luxury",          badge: "Luxury Pack",          badgeIcon: Crown,
          price: "$1,875,000",          name: "Signature Edition",          buttons: [
            {
              text: "Configure Now"},
          ],
          features: [
            "Bespoke Leather Interior",            "Hand-finished Wood/Carbon Accents",            "Premium Audio System",            "Personalized Delivery Experience"],
        },
      ]}
      title="Tailor Your Masterpiece"
      description="The Apex configurator allows you to customize every aspect of your luxury vehicle, from performance packages to bespoke interior finishes. Build your dream car, with transparent pricing."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "FuturaTech",        "AeroDesign Labs",        "Elite Auto Group",        "Quantum Dynamics",        "Velocity Media",        "LuxeVision Studios",        "Global Mobility Alliance"]}
      title="Trusted by Innovators, Featured by Leaders"
      description="Apex Motors is proud to collaborate with leading names in technology, design, and luxury. Our commitment to excellence is recognized across industries."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient"}}
      tag="Connect with Apex Motors"
      tagAnimation="slide-up"
      title="Your Journey to the Future Starts Here"
      description="Ready to experience automotive luxury redefined? Contact our specialist team to arrange a private consultation or to inquire about bespoke commissions."
      buttons={[
        {
          text: "Get in Touch",          href: "mailto:info@apexmotors.com"},
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Apex Motors"
      columns={[
        {
          title: "Explore",          items: [
            {
              label: "Showroom",              href: "#showroom"},
            {
              label: "Collection",              href: "#collection"},
            {
              label: "Performance",              href: "#performance"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Partners",              href: "#social-proof"},
            {
              label: "Careers",              href: "#"},
          ],
        },
        {
          title: "Legal",          items: [
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
            {
              label: "Cookie Policy",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 Apex Motors. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
