"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import { Facebook, Film, History, Instagram, Linkedin, Shield, Sparkles } 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="about-introduction" data-section="about-introduction">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Journey: Driven by Ling's Passion"
      metrics={[
        {
          icon: Shield,
          label: "Mission",
          value: "To make car leasing transparent, affordable, and fun for everyone.",
        },
        {
          icon: History,
          label: "Our History",
          value: "From a bold vision to the UK's favourite, LINGsCARS has disrupted the industry for over two decades.",
        },
        {
          icon: Sparkles,
          label: "Why Trust Us?",
          value: "Unbeatable prices, honest communication, and a customer-first approach define every interaction.",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="team-section" data-section="team-section">
      <TeamCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      members={[
        {
          id: "team-ling",
          name: "Ling Valentine",
          role: "Chief Leasing Officer & Founder",
          description: "The fearless leader and creative force behind LINGsCARS, ensuring every customer gets a deal as legendary as her personality.",
          imageSrc: "http://img.b2bpic.net/free-photo/blue-light-background-portrait_52683-91435.jpg",
          imageAlt: "Ling Valentine Portrait",
          socialLinks: [
            {
              icon: Linkedin,
              url: "https://linkedin.com/in/lingvalentine",
            },
          ],
        },
        {
          id: "team-member-finance",
          name: "John Smith",
          role: "Head of Finance",
          description: "John ensures our deals are genuinely unbeatable, meticulously crunching numbers to pass maximum savings onto you.",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-customer-service-representative_23-2151933142.jpg",
          imageAlt: "John Smith Portrait",
        },
        {
          id: "team-member-support",
          name: "Sarah Chen",
          role: "Customer Experience Lead",
          description: "Sarah and her team are dedicated to providing seamless support, making your leasing journey smooth from start to finish.",
          imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
          imageAlt: "Sarah Chen Portrait",
        },
      ]}
      title="Meet the LINGsCARS Dream Team"
      description="Behind every great deal is a passionate team. Meet the experts who make your leasing experience extraordinary."
    />
  </div>

  <div id="awards-recognition" data-section="awards-recognition">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "UK Leasing Awards 'Innovator of the Year'",
        "Motor Trader 'Online Retailer Award'",
        "Google 'Customer Satisfaction Excellence'",
        "Feefo 'Trusted Service Award'",
        "Car Dealer Magazine 'Used Car Award'",
        "Great British Entrepreneur Awards Finalist",
        "What Car? 'Best Lease Deals Recognition'",
      ]}
      title="Recognised for Excellence"
      description="Our dedication to transparency, innovation, and customer satisfaction hasn't gone unnoticed. We're proud of our accolades!"
      speed={35}
      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>
  );
}
