"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TextAbout from '@/components/sections/about/TextAbout';
import { Eye, Gauge, ShieldCheck, Smartphone, Speaker, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="mediumSizeLargeTitles"
        background="circleGradient"
        cardStyle="solid"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Catalog",
          id: "#catalog",
        },
        {
          name: "Specifications",
          id: "#specs",
        },
        {
          name: "Gallery",
          id: "#gallery",
        },
        {
          name: "Testimonials",
          id: "#testimonials",
        },
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Auto Dealer"
      button={{
        text: "Schedule Test Drive",
        href: "#contact",
      }}
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "radial-gradient",
      }}
      imagePosition="right"
      title="Drive Your Dream Car: Explore Our Advanced 3D Showroom"
      description="Discover a seamless car buying experience with our interactive 3D models. Rotate, zoom, and change colors in real-time to find your perfect vehicle."
      kpis={[
        {
          value: "25+",
          label: "Years Experience",
        },
        {
          value: "5000+",
          label: "Vehicles Sold",
        },
        {
          value: "98%",
          label: "Customer Satisfaction",
        },
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Explore Catalog",
          href: "#catalog",
        },
        {
          text: "Schedule Test Drive",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/happy-customers-car-dealership_23-2149106169.jpg?_wi=1"
      imageAlt="Interactive 3D car model on display"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-handsome-business-man-car-showrrom_1303-21194.jpg",
          alt: "Satisfied customer 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/elegant-male-taxi-driver-costume_23-2149204586.jpg",
          alt: "Satisfied customer 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-afroamerican-man-leaving-car_23-2148508939.jpg",
          alt: "Satisfied customer 3",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-having-mobile-talk-while-waiting-electric-car-charge-station-eco-cars_1157-50634.jpg",
          alt: "Satisfied customer 4",
        },
        {
          src: "http://img.b2bpic.net/free-photo/astonished-young-woman-holding-her-hand-keys-from-new-car-flat-has-unexpected-gift-posing-isolated-wearing-casual-attire_176532-11556.jpg",
          alt: "Satisfied customer 5",
        },
      ]}
      avatarText="Join our 5000+ happy drivers!"
      marqueeItems={[
        {
          type: "text",
          text: "Latest Models",
        },
        {
          type: "text",
          text: "3D Virtual Tours",
        },
        {
          type: "text",
          text: "Customizable Options",
        },
        {
          type: "text",
          text: "Expert Support",
        },
        {
          type: "text",
          text: "Seamless Financing",
        },
      ]}
      marqueeSpeed={30}
      showMarqueeCard={true}
    />
  </div>

  <div id="catalog" data-section="catalog">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        {
          id: "honda-civic",
          name: "Honda Civic",
          price: "$25,000",
          imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3041.jpg?_wi=1",
          imageAlt: "Honda Civic 3D model",
          priceButtonProps: {
            text: "View 3D Model",
          },
        },
        {
          id: "honda-crv",
          name: "Honda CR-V",
          price: "$30,000",
          imageSrc: "http://img.b2bpic.net/free-photo/grey-coupe-rainy-highway-motion-focus_169016-69693.jpg?_wi=1",
          imageAlt: "Honda CR-V 3D model",
          priceButtonProps: {
            text: "View 3D Model",
          },
        },
        {
          id: "honda-accord",
          name: "Honda Accord",
          price: "$28,000",
          imageSrc: "http://img.b2bpic.net/free-photo/grey-sedan-driving-city-street-with-traffic-dynamic-commute_169016-69795.jpg",
          imageAlt: "Honda Accord 3D model",
          priceButtonProps: {
            text: "View 3D Model",
          },
        },
        {
          id: "toyota-corolla",
          name: "Toyota Corolla",
          price: "$22,000",
          imageSrc: "http://img.b2bpic.net/free-photo/young-curly-sexy-woman-leather-jacket-against-red-muscle-car-street_627829-6957.jpg",
          imageAlt: "Toyota Corolla 3D model",
          priceButtonProps: {
            text: "View 3D Model",
          },
        },
        {
          id: "toyota-rav4",
          name: "Toyota RAV4",
          price: "$32,000",
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-front-car_23-2147724809.jpg",
          imageAlt: "Toyota RAV4 3D model",
          priceButtonProps: {
            text: "View 3D Model",
          },
        },
        {
          id: "toyota-camry",
          name: "Toyota Camry",
          price: "$27,000",
          imageSrc: "http://img.b2bpic.net/free-photo/blue-sedan-speeds-winter-road-with-motion-blur-winter-car-drive_169016-71219.jpg",
          imageAlt: "Toyota Camry 3D model",
          priceButtonProps: {
            text: "View 3D Model",
          },
        },
      ]}
      title="Our Featured Vehicle Catalog: Honda & Toyota"
      description="Browse our extensive collection of new and pre-owned Honda and Toyota models. Each vehicle features a stunning 3D visualization."
    />
  </div>

  <div id="specs" data-section="specs">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Engine & Performance",
          description: "Experience powerful and efficient engines designed for dynamic driving. Explore horsepower, torque, and fuel efficiency with interactive metrics.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/engine-piston-cross-section_1232-2590.jpg",
            imageAlt: "Car engine details",
          },
          items: [
            {
              icon: Gauge,
              text: "Turbocharged Engines",
            },
            {
              icon: Fuel,
              text: "Optimized Fuel Economy",
            },
            {
              icon: Zap,
              text: "Instant Torque Delivery",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-customers-car-dealership_23-2149106169.jpg?_wi=2",
          imageAlt: "detailed car engine block modern",
        },
        {
          title: "Interior Comfort & Technology",
          description: "Step into a world of comfort and advanced technology. Customize seating, ambient lighting, and explore infotainment features in stunning detail.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/woman-driver-hands-steering-wheel-inside-car_169016-46726.jpg",
            imageAlt: "Car interior details",
          },
          items: [
            {
              icon: AirVent,
              text: "Premium Ergonomic Seating",
            },
            {
              icon: Smartphone,
              text: "Seamless Connectivity",
            },
            {
              icon: Speaker,
              text: "Immersive Audio System",
            },
          ],
          reverse: true,
          imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1339-3041.jpg?_wi=2",
          imageAlt: "detailed car engine block modern",
        },
        {
          title: "Advanced Safety Features",
          description: "Your safety is our priority. Discover intelligent safety systems, driver-assistance technologies, and robust structural designs.",
          media: {
            imageSrc: "http://img.b2bpic.net/free-photo/interactive-transparent-window-screen-smart-car_53876-105390.jpg",
            imageAlt: "Car safety features",
          },
          items: [
            {
              icon: ShieldCheck,
              text: "Collision Avoidance",
            },
            {
              icon: Eye,
              text: "Lane Keeping Assist",
            },
            {
              icon: ParkingMeter,
              text: "Automatic Parking Aid",
            },
          ],
          reverse: false,
          imageSrc: "http://img.b2bpic.net/free-photo/grey-coupe-rainy-highway-motion-focus_169016-69693.jpg?_wi=2",
          imageAlt: "detailed car engine block modern",
        },
      ]}
      title="Detailed Technical Specifications with Interactive 3D"
      description="Dive deep into the performance and features of our vehicles. Our interactive 3D models allow you to inspect every detail up close."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <BlogCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      carouselMode="buttons"
      title="Experience Our 3D Gallery: Explore Every Angle"
      description="Walk around your desired car virtually. Our 3D gallery offers multiple views, zoom capabilities, and real-time color customization for each model."
      blogs={[
        {
          id: "civic-gallery-1",
          category: "Honda Civic",
          title: "Dynamic Side Profile",
          excerpt: "View the sleek lines and aerodynamic design of the Honda Civic from a perfect side angle, highlighting its sporty stance.",
          imageSrc: "http://img.b2bpic.net/free-photo/rear-light-new-red-car_23-2147962989.jpg",
          imageAlt: "Honda Civic side view",
          authorName: "3D Visuals",
          authorAvatar: "http://img.b2bpic.net/free-photo/handsome-smiling-bearded-man-white-shirt-doing-selfie-near-his-new-car-outdoors-streets-city_496169-530.jpg",
          date: "2024-07-20",
        },
        {
          id: "crv-gallery-2",
          category: "Honda CR-V",
          title: "Rugged Front View",
          excerpt: "Get an immersive front view of the Honda CR-V, showcasing its bold grille and robust design, ready for any adventure.",
          imageSrc: "http://img.b2bpic.net/free-photo/nature-landscape-with-black-sand-beach_23-2151380307.jpg",
          imageAlt: "Honda CR-V front view",
          authorName: "3D Visuals",
          authorAvatar: "http://img.b2bpic.net/free-photo/young-woman-testing-car-car-showroom_1303-20298.jpg",
          date: "2024-07-20",
        },
        {
          id: "accord-gallery-3",
          category: "Honda Accord",
          title: "Elegant Rear Angle",
          excerpt: "Appreciate the sophisticated rear design of the Honda Accord, with its stylish taillights and refined chrome accents.",
          imageSrc: "http://img.b2bpic.net/free-photo/young-digital-nomad-traveling-winter-time_23-2149207318.jpg",
          imageAlt: "Honda Accord rear view",
          authorName: "3D Visuals",
          authorAvatar: "http://img.b2bpic.net/free-photo/happy-couple-car-dealership_23-2148130144.jpg",
          date: "2024-07-20",
        },
        {
          id: "corolla-gallery-4",
          category: "Toyota Corolla",
          title: "Urban Aesthetic",
          excerpt: "Discover the urban charm of the Toyota Corolla from a low-angle perspective, emphasizing its contemporary and efficient design.",
          imageSrc: "http://img.b2bpic.net/free-photo/yellow-sport-car-with-black-autotuning-highway-front-view_114579-5060.jpg",
          imageAlt: "Toyota Corolla urban view",
          authorName: "3D Visuals",
          authorAvatar: "http://img.b2bpic.net/free-photo/where-we-gonna-go-positive-manager-showing-features-new-car-female-customer_146671-16546.jpg",
          date: "2024-07-20",
        },
        {
          id: "rav4-gallery-5",
          category: "Toyota RAV4",
          title: "Adventure Ready",
          excerpt: "See the Toyota RAV4 in its natural habitat – a rugged outdoor setting, highlighting its capability and adventurous spirit.",
          imageSrc: "http://img.b2bpic.net/free-photo/black-white-view-off-road-vehicle-driven-rough-terrain_23-2151476154.jpg",
          imageAlt: "Toyota RAV4 adventure view",
          authorName: "3D Visuals",
          authorAvatar: "http://img.b2bpic.net/free-photo/portrait-happy-woman-standing-by-car-street-young-pretty-caucasain-woman-standing-car-with-opened-door_657921-614.jpg",
          date: "2024-07-20",
        },
        {
          id: "camry-gallery-6",
          category: "Toyota Camry",
          title: "Executive Front Shot",
          excerpt: "A commanding front view of the Toyota Camry, showcasing its refined grille and sleek headlights, perfect for a professional drive.",
          imageSrc: "http://img.b2bpic.net/free-photo/people-driving-cars-city-street_23-2149092023.jpg",
          imageAlt: "Toyota Camry front view",
          authorName: "3D Visuals",
          authorAvatar: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-22308.jpg",
          date: "2024-07-20",
        },
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      carouselMode="buttons"
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          role: "Marketing Director",
          testimonial: "Auto Dealer made finding my dream car incredibly easy! The 3D showroom allowed me to explore every detail from home. Highly recommend!",
          imageSrc: "http://img.b2bpic.net/free-photo/man-taking-selfie-car-dealership_23-2148130205.jpg",
          imageAlt: "Sarah Johnson",
        },
        {
          id: "2",
          name: "Michael Chen",
          role: "Software Engineer",
          testimonial: "The interactive 3D models are a game-changer. I could customize my car's color and wheels before even stepping foot in the dealership. Fantastic experience!",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-car-keys-by-her-new-car_1303-28500.jpg",
          imageAlt: "Michael Chen",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          role: "Small Business Owner",
          testimonial: "Professional service and a truly modern approach to car sales. Auto Dealer helped me find the perfect family SUV with all the features I needed.",
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171285.jpg",
          imageAlt: "Emily Rodriguez",
        },
        {
          id: "4",
          name: "David Kim",
          role: "Financial Analyst",
          testimonial: "Transparent pricing and an efficient process. The team was knowledgeable, and I appreciated the detailed technical specs available online.",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-expression_1194-1786.jpg",
          imageAlt: "David Kim",
        },
        {
          id: "5",
          name: "Jessica Lee",
          role: "Educator",
          testimonial: "I was hesitant to buy a car online, but Auto Dealer's 3D features made me confident in my choice. The car was exactly as I saw it virtually!",
          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-lady-sunglasses-trench-coat-opening-cabriolet-car-door-dreamily-looking-camera-outdoor_574295-4807.jpg",
          imageAlt: "Jessica Lee",
        },
      ]}
      title="What Our Customers Say"
      description="Hear from satisfied customers who found their perfect vehicle and enjoyed our exceptional service and innovative 3D experience."
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Your Trusted Partner in Automotive Excellence"
      buttons={[
        {
          text: "Learn More About Us",
          href: "#contact",
        },
      ]}
      description="Auto Dealer is committed to providing a transparent, enjoyable, and cutting-edge car buying experience. With years of expertise and a focus on innovation, we leverage advanced 3D visualization to help you discover, explore, and confidently drive away in your dream car. Our dedicated team ensures exceptional service every step of the way."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get in Touch"
      title="Request Information or Schedule Your Test Drive"
      description="Our team is ready to assist you with any questions about our vehicles or to help you book a personalized test drive. Reach out today!"
      inputPlaceholder="Enter your email"
      buttonText="Send Message"
      termsText="By sending a message, you're confirming that you agree with our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Auto Dealer"
      leftLink={{
        text: "Privacy Policy",
        href: "#",
      }}
      rightLink={{
        text: "Terms of Service",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
