"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Facebook, Film, Instagram, Linkedin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="medium"
        sizing="large"
        background="blurBottom"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "/"},
        {
          name: "About Us",          id: "/about"},
        {
          name: "Personal Leasing",          id: "/personal-leasing"},
        {
          name: "Business Leasing",          id: "/business-leasing"},
        {
          name: "Electric Vehicles",          id: "/electric-vehicles"},
        {
          name: "Special Offers",          id: "/special-offers"},
        {
          name: "Vehicle Search",          id: "/vehicle-search"},
        {
          name: "Reviews",          id: "/reviews"},
        {
          name: "FAQ",          id: "/faq"},
        {
          name: "Blog",          id: "/blog"},
        {
          name: "Contact",          id: "/contact"},
      ]}
      brandName="LINGsCARS"
    />
  </div>

  <div id="vehicle-catalog" data-section="vehicle-catalog">
      <ProductCatalog
      layout="section"
      products={[
        {
          id: "catalog-product-1",          name: "Mercedes-Benz A-Class",          price: "£380 / month",          rating: 5,
          reviewCount: "120 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/stunning-young-woman-waring-dress-posing-front-her-car-outdoors-ownership-driver_158595-6800.jpg",          imageAlt: "Mercedes-Benz A-Class"},
        {
          id: "catalog-product-2",          name: "BMW 3 Series Saloon",          price: "£450 / month",          rating: 4,
          reviewCount: "95 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-street-landscape-with-rainbow_23-2150169065.jpg",          imageAlt: "BMW 3 Series Saloon"},
        {
          id: "catalog-product-3",          name: "Audi Q2 SUV",          price: "£390 / month",          rating: 5,
          reviewCount: "110 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-taking-photos_23-2149005003.jpg",          imageAlt: "Audi Q2 SUV"},
        {
          id: "catalog-product-4",          name: "Volkswagen Tiguan",          price: "£360 / month",          rating: 4,
          reviewCount: "80 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-dealership_23-2148130188.jpg",          imageAlt: "Volkswagen Tiguan"},
        {
          id: "catalog-product-5",          name: "Ford Kuga SUV",          price: "£340 / month",          rating: 4,
          reviewCount: "70 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-protective-mask-sitting-car_1157-32371.jpg",          imageAlt: "Ford Kuga SUV"},
        {
          id: "catalog-product-6",          name: "Nissan Juke",          price: "£290 / month",          rating: 3,
          reviewCount: "60 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-her-tablet-outside-drinking-coffee_23-2149318503.jpg",          imageAlt: "Nissan Juke"},
        {
          id: "catalog-product-7",          name: "Peugeot 2008 SUV",          price: "£310 / month",          rating: 4,
          reviewCount: "75 reviews",          imageSrc: "http://img.b2bpic.net/free-photo/person-taking-care-electric-car_23-2149362836.jpg",          imageAlt: "Peugeot 2008 SUV"},
      ]}
      searchPlaceholder="Search by make, model, or budget..."
      filters={[
        {
          label: "Make",          options: [
            "Any",            "BMW",            "Audi",            "Mercedes",            "Tesla"],
          selected: "Any",          onChange: () => {},
        },
        {
          label: "Type",          options: [
            "Any",            "Electric",            "Hybrid",            "Petrol",            "Diesel"],
          selected: "Any",          onChange: () => {},
        },
        {
          label: "Budget",          options: [
            "Any",            "Under £300",            "£300-£500",            "Over £500"],
          selected: "Any",          onChange: () => {},
        },
      ]}
    />
  </div>

  <div id="manufacturer-partners" data-section="manufacturer-partners">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Toyota",        "Honda",        "Nissan",        "Hyundai",        "Kia",        "BMW",        "Mercedes-Benz"]}
      title="Trusted Manufacturer Partners"
      description="We work directly with leading automotive manufacturers to bring you the best and latest models, ensuring quality and peace of mind."
      speed={30}
      showCard={false}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoSrc="http://img.b2bpic.net/free-vector/abstract-background-design_1040-584.jpg"
      logoAlt="LINGsCARS Logo"
      logoText="LINGsCARS"
      copyrightText="© 2024 LINGsCARS. All rights reserved."
      socialLinks={[
        {
          icon: Facebook,
          href: "https://facebook.com/lingscars",          ariaLabel: "Facebook"},
        {
          icon: Instagram,
          href: "https://instagram.com/lingscars",          ariaLabel: "Instagram"},
        {
          icon: Linkedin,
          href: "https://linkedin.com/company/lingscars",          ariaLabel: "LinkedIn"},
        {
          icon: Film,
          href: "https://youtube.com/lingscars",          ariaLabel: "YouTube"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
