"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 NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import { Briefcase, Facebook, Home, Instagram, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="large"
        background="circleGradient"
        cardStyle="outline"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "Home",          id: "/"},
        {
          name: "Services",          id: "/services"},
        {
          name: "About",          id: "/about"},
        {
          name: "Contact",          id: "/contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-photo/pressure-washing-logo_53876-140224.jpg"
      logoAlt="Green Mountain Washing Logo"
      brandName="Green Mountain Washing"
      button={{
        text: "Get Free Estimate",        href: "/contact"}}
    />
  </div>

  <div id="about-us-story" data-section="about-us-story">
      <AboutMetric
      useInvertedBackground={false}
      title="Our Story: Local, Friendly, Professional"
      metrics={[
        {
          icon: Home,
          label: "Vermont Roots",          value: "Born & Raised"},
        {
          icon: Briefcase,
          label: "Trusted Service",          value: "Community First"},
        {
          icon: Sparkles,
          label: "Quality Driven",          value: "Attention to Detail"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="our-team" data-section="our-team">
      <TeamCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      members={[
        {
          id: "tm-1",          name: "John Doe",          role: "Owner & Lead Technician",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-cleaning-his-house_23-2148112048.jpg",          imageAlt: "John Doe, Owner of Green Mountain Washing"},
        {
          id: "tm-2",          name: "Jane Smith",          role: "Senior Cleaning Specialist",          imageSrc: "http://img.b2bpic.net/free-photo/housekeeper-with-happy-surprised-face-duster_23-2148076043.jpg",          imageAlt: "Jane Smith, Cleaning Specialist"},
        {
          id: "tm-3",          name: "Robert Green",          role: "Customer Relations",          imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-blonde-woman-wearing-white-shirt-standing-co-working-space-leaning-desk-posing_74855-9949.jpg",          imageAlt: "Robert Green, Customer Relations"},
      ]}
      title="Meet the Green Mountain Washing Team"
      description="We're a dedicated, owner-operated local business committed to providing the best exterior cleaning services in Vermont. We treat your home like our own!"
    />
  </div>

  <div id="trust-professionalism" data-section="trust-professionalism">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Fully Insured",        "Local Vermont Business",        "5-Star Rated Service",        "Experienced Technicians",        "Customer Satisfaction Guaranteed"]}
      title="Your Trusted Local Cleaning Partner"
      description="Green Mountain Washing is fully insured and locally owned, bringing you peace of mind with every service."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoAlt="Green Mountain Washing Logo"
      logoText="Green Mountain Washing"
      copyrightText="© 2024 Green Mountain Washing. All rights reserved."
      socialLinks={[
        {
          icon: Facebook,
          href: "#",          ariaLabel: "Facebook"},
        {
          icon: Instagram,
          href: "#",          ariaLabel: "Instagram"},
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
