"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterCard from '@/components/sections/footer/FooterCard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
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="contact-form-details" data-section="contact-form-details">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Get in Touch"
      title="Connect with Ling's Team"
      description="We're here to help you find your next car, answer your questions, or simply chat about the best deals. Drop us a line!"
      imageSrc="http://img.b2bpic.net/free-photo/close-up-futuristic-soft-drink_23-2151282091.jpg"
      imageAlt="Modern Car Interior Driving"
      mediaAnimation="opacity"
      mediaPosition="right"
      inputPlaceholder="Your Email Address"
      buttonText="Send Message"
      termsText="By sending a message, you agree to our privacy policy and terms of service."
    />
  </div>

  <div id="customer-service-metrics" data-section="customer-service-metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      metrics={[
        {
          id: "service-metric-1",
          value: "98%",
          description: "Customer Satisfaction",
        },
        {
          id: "service-metric-2",
          value: "24/7",
          description: "Online Support",
        },
        {
          id: "service-metric-3",
          value: "1-Hour",
          description: "Average Response Time",
        },
      ]}
      title="Our Commitment to Service"
      description="At LINGsCARS, exceptional customer service is paramount. We're always here to support your leasing journey."
    />
  </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>
  );
}
