"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Car, Gauge, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="large"
        background="grid"
        cardStyle="gradient-mesh"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Home",          id: "hero"},
        {
          name: "About",          id: "about"},
        {
          name: "Services",          id: "services"},
        {
          name: "Shop",          id: "products"},
        {
          name: "Pricing",          id: "pricing"},
        {
          name: "Team",          id: "team"},
        {
          name: "Testimonials",          id: "testimonials"},
        {
          name: "FAQ",          id: "faq"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Velocity Customs"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{
        variant: "plain"}}
      title="Rev Up Your Ride: Expert Car Care & Customization"
      description="At Velocity Customs, we combine passion with precision to deliver unparalleled automotive services. From routine maintenance to bespoke modifications, trust our skilled technicians to keep your vehicle performing at its peak."
      tag="Your Ultimate Automotive Partner"
      buttons={[
        {
          text: "Book a Service",          href: "#contact"},
        {
          text: "Explore Services",          href: "#services"},
      ]}
      buttonAnimation="slide-up"
      mediaItems={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/gray-coupe-road-focus_417767-24.jpg",          imageAlt: "Front view of a luxury sports car"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-people-looking-car_23-2150171244.jpg",          imageAlt: "Rear view of a classic muscle car"}
      ]}
      mediaAnimation="opacity"
      rating={5}
      ratingText="Trusted by 5,000+ Car Owners"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={true}
      title="Passion for Performance, Precision in Every Detail"
      description="Velocity Customs was founded on a simple principle: every car deserves the best. Our team of certified mechanics brings years of experience and a genuine love for automobiles to every job, ensuring your vehicle receives the highest standard of care. We use only top-grade parts and advanced diagnostic tools."
      metrics={[
        {
          value: "15+",          title: "Years Experience"},
        {
          value: "2,500+",          title: "Cars Serviced"},
        {
          value: "100%",          title: "Satisfaction"},
      ]}
      tag="Our Story"
      imageSrc="http://img.b2bpic.net/free-photo/shiny-new-car-auto-service-got-problem-with-tyres-which-will-be-sorted-soon_613910-17078.jpg"
      imageAlt="Skilled mechanic working diligently on a car engine"
      mediaAnimation="slide-up"
      metricsAnimation="opacity"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      carouselMode="buttons"
      features={[
        {
          title: "Oil Change & Filter Replacement",          description: "Essential for engine health, our comprehensive oil change service includes premium oil and filter replacement.",          imageSrc: "http://img.b2bpic.net/free-photo/male-mechanic-working-car-auto-repair-shop_23-2150377019.jpg",          imageAlt: "Mechanic performing an oil change"},
        {
          title: "Tire Rotation & Balancing",          description: "Extend tire life and improve handling with our professional tire rotation and precision balancing services.",          imageSrc: "http://img.b2bpic.net/free-photo/mechanics-examining-car_1170-1364.jpg",          imageAlt: "Tires being rotated on a car lift"},
        {
          title: "Brake System Inspection & Repair",          description: "Ensure your safety with thorough brake inspections and expert repair or replacement of components.",          imageSrc: "http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367555.jpg",          imageAlt: "Close-up of brake repair"},
      ]}
      title="Comprehensive Car Services"
      description="From routine maintenance to complex repairs, our certified technicians handle it all with expertise and care."
      tag="Our Expertise"
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      carouselMode="buttons"
      products={[
        {
          id: "p1",          brand: "Velocity Performance",          name: "Forged Alloy Wheels",          price: "$1,200",          rating: 5,
          reviewCount: "87",          imageSrc: "http://img.b2bpic.net/free-photo/car-wheel-with-new-tires-close-up_1303-31684.jpg",          imageAlt: "Stylish car alloy wheel"},
        {
          id: "p2",          brand: "LumenDrive",          name: "LED Headlight Upgrade",          price: "$350",          rating: 4,
          reviewCount: "123",          imageSrc: "http://img.b2bpic.net/free-photo/sideways-rear-view-mirror-modern-car_23-2148510549.jpg",          imageAlt: "Modern LED car headlight"},
        {
          id: "p3",          brand: "SonicFlow",          name: "Performance Exhaust System",          price: "$899",          rating: 5,
          reviewCount: "65",          imageSrc: "http://img.b2bpic.net/free-photo/view-travel-items-inside-car-ready-trip_23-2151078273.jpg",          imageAlt: "Performance exhaust system"},
        {
          id: "p4",          brand: "GlossGuard",          name: "Ultimate Detailing Kit",          price: "$150",          rating: 4,
          reviewCount: "201",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2795.jpg",          imageAlt: "Car detailing kit"},
        {
          id: "p5",          brand: "RidePerfect",          name: "Adjustable Coilovers",          price: "$1,400",          rating: 5,
          reviewCount: "42",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-fixing-car-undercarriage-autoservice_7502-4425.jpg",          imageAlt: "Adjustable car suspension coilover"},
        {
          id: "p6",          brand: "LuxeComfort",          name: "Custom Leather Seat Covers",          price: "$700",          rating: 4,
          reviewCount: "98",          imageSrc: "http://img.b2bpic.net/free-photo/glove-compartment-car-with-black-leather_181624-22102.jpg",          imageAlt: "Premium car interior accessory"},
      ]}
      title="Shop Premium Car Products"
      description="Enhance your driving experience with our curated selection of high-quality parts and accessories."
      tag="Our Selection"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",          tag: "Essential Care",          tagIcon: Car,
          price: "$99",          period: "/service",          description: "Basic maintenance for daily drivers.",          button: {
            text: "Choose Basic",            href: "#contact"},
          featuresTitle: "Includes:",          features: [
            "Standard Oil Change",            "Tire Pressure Check",            "Fluid Top-off",            "Multi-point Inspection"],
        },
        {
          id: "advanced",          tag: "Optimal Performance",          tagIcon: Gauge,
          price: "$249",          period: "/service",          description: "In-depth service for enhanced vehicle longevity.",          button: {
            text: "Choose Advanced",            href: "#contact"},
          featuresTitle: "Includes:",          features: [
            "Synthetic Oil Change",            "Tire Rotation & Balance",            "Brake Check",            "Battery Health Test",            "Engine Diagnostics"],
        },
        {
          id: "premium",          tag: "Ultimate Customization",          tagIcon: Sparkles,
          price: "Custom Quote",          period: "/project",          description: "Tailored solutions for high-performance and custom builds.",          button: {
            text: "Get Quote",            href: "#contact"},
          featuresTitle: "Includes:",          features: [
            "Full Performance Tuning",            "Custom Exhaust Installation",            "Suspension Upgrades",            "Bespoke Interior Work",            "Advanced Diagnostics & Calibration"],
        },
      ]}
      title="Transparent Service Packages"
      description="Find the perfect plan for your vehicle's needs, from routine maintenance to full performance upgrades."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      team={[
        {
          id: "tm1",          name: "Alex 'Speed' Johnson",          role: "Lead Mechanic & Founder",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-standing-with-arms-crossed_1170-1161.jpg",          imageAlt: "Alex Johnson, Lead Mechanic"},
        {
          id: "tm2",          name: "Maria 'Spark' Rodriguez",          role: "Engine Specialist",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanics-workshop_329181-11826.jpg",          imageAlt: "Maria Rodriguez, Engine Specialist"},
        {
          id: "tm3",          name: "David 'Detail' Chen",          role: "Body & Customization Expert",          imageSrc: "http://img.b2bpic.net/free-photo/male-car-mechanic-training-aprentice-car-repair-shop_23-2150367529.jpg",          imageAlt: "David Chen, Body & Customization Expert"},
      ]}
      title="Meet Our Dedicated Team"
      description="Our team of passionate and certified automotive experts are here to provide your vehicle with the best care."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Sarah J.",          role: "Enthusiast",          company: "Local Driver",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/satisfied-customer-shaking-hands-with-mechanic_1170-1275.jpg",          imageAlt: "Sarah J."},
        {
          id: "t2",          name: "Michael C.",          role: "Commuter",          company: "Daily Rider",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171289.jpg",          imageAlt: "Michael C."},
        {
          id: "t3",          name: "Emily R.",          role: "Collector",          company: "Classic Car Owner",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-man-shirt-jacket-showing-double-thumbs-up-looking-confident_176474-31008.jpg",          imageAlt: "Emily R."},
        {
          id: "t4",          name: "David K.",          role: "Adventure Seeker",          company: "Off-Road Driver",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-21197.jpg",          imageAlt: "David K."},
        {
          id: "t5",          name: "Jessica L.",          role: "Family Driver",          company: "Mom's Taxi",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-showing-check-list-customer_1170-1267.jpg",          imageAlt: "Jessica L."},
      ]}
      kpiItems={[
        {
          value: "99%",          label: "Customer Satisfaction"},
        {
          value: "5/5",          label: "Average Rating"},
        {
          value: "24/7",          label: "Roadside Assistance"},
      ]}
      title="Hear What Our Customers Say"
      description="Our commitment to quality service and customer satisfaction speaks for itself."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "f1",          title: "How do I book a service?",          content: "You can easily book a service through our website, by calling us directly, or by visiting our workshop during business hours. We recommend booking in advance to ensure availability."},
        {
          id: "f2",          title: "What types of vehicles do you service?",          content: "We service all makes and models of passenger vehicles, including cars, SUVs, and light trucks. Our technicians are trained to work with a wide range of automotive systems."},
        {
          id: "f3",          title: "Do you offer warranty on your repairs?",          content: "Yes, we stand behind our work. All our repairs come with a standard 12-month/12,000-mile warranty on parts and labor, providing you with peace of mind."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/laptop-car-bonnet_1170-1495.jpg"
      imageAlt="Mechanic using a laptop for car diagnostics"
      mediaAnimation="slide-up"
      mediaPosition="right"
      title="Frequently Asked Questions"
      description="Have questions? We've got answers. Find common queries about our services, booking, and more."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "radial-gradient"}}
      text="Ready to give your car the care it deserves? Get in touch with us today for a consultation or to schedule your next service."
      buttons={[
        {
          text: "Call Us Now",          href: "tel:+1234567890"},
        {
          text: "Get Directions",          href: "https://maps.google.com/?q=Velocity+Customs+Workshop"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Services",          items: [
            {
              label: "Oil Change",              href: "#services"},
            {
              label: "Brake Repair",              href: "#services"},
            {
              label: "Diagnostics",              href: "#services"},
            {
              label: "Custom Builds",              href: "#services"},
          ],
        },
        {
          title: "About Us",          items: [
            {
              label: "Our Story",              href: "#about"},
            {
              label: "Our Team",              href: "#team"},
            {
              label: "Testimonials",              href: "#testimonials"},
            {
              label: "FAQ",              href: "#faq"},
          ],
        },
        {
          title: "Contact",          items: [
            {
              label: "Book Now",              href: "#contact"},
            {
              label: "Location",              href: "https://maps.google.com/?q=Velocity+Customs+Workshop"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/building-garage-door_1150-10767.jpg"
      logoAlt="Velocity Customs Logo"
      logoText="Velocity Customs"
      copyrightText="© 2024 Velocity Customs. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
