"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import TextAbout from '@/components/sections/about/TextAbout';
import { Droplets, Scissors, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="fluid"
      cardStyle="inset"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Home", id: "#hero" },
              { name: "Services", id: "#services" },
              { name: "About", id: "#about" },
              { name: "Contact", id: "#contact" }
            ]}
            brandName="Niño's Lawncare"
            button={{ text: "Free Quote", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroCarouselLogo
            logoText="Niño's Lawncare"
            description="East Texas's Most Trusted Lawn Care. Serving Gladewater and beyond with professionalism and community pride."
            buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
            slides={[
              { imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-fresh-spring-green-grass_1232-4264.jpg", imageAlt: "Professional lawn care services" },
              { imageSrc: "http://img.b2bpic.net/free-photo/smiling-gardener-shirt-mowing-lawn-with-modern-lawn-mower-summer-season-side-view-brunet_7502-10485.jpg", imageAlt: "Yard maintenance" },
              { imageSrc: "http://img.b2bpic.net/free-photo/agricultural-harvester-field_181624-43423.jpg", imageAlt: "Tree trimming and land clearing" },
              { imageSrc: "http://img.b2bpic.net/free-photo/caucasian-male-worker-gloves-removing-dry-leaves-from-sidewalk-with-hand-blower-park-side-view_7502-10152.jpg", imageAlt: "Professional pressure washing" },
              { imageSrc: "http://img.b2bpic.net/free-photo/busy-man-using-weedwacker-garden_329181-20572.jpg", imageAlt: "Lawn care results" },
              { imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-working-with-weedwacker_329181-20603.jpg", imageAlt: "Landscaping detail" }
            ]}
          />
        </div>

        <div id="awards" data-section="awards">
          <MetricCardSeven
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "2023", title: "40U40 Winner", items: ["Outdoor Beautification Award"] },
              { id: "m2", value: "2024", title: "Best of ETX", items: ["Top-rated local choice"] }
            ]}
            title="Award-Winning Service"
            description="Recognized for excellence and beautification in the East Texas community."
          />
        </div>

        <div id="services" data-section="services">
          <FeatureBento
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            features={[
              { title: "Core Lawn Care", description: "Mowing, trimming, weed eating, and seasonal leaf bagging.", bentoComponent: "reveal-icon", icon: Scissors },
              { title: "Land Maintenance", description: "Flower bed upkeep, tree trimming, and land clearing services.", bentoComponent: "reveal-icon", icon: Star },
              { title: "Exterior Improvements", description: "Professional pressure washing and expert fence installation.", bentoComponent: "reveal-icon", icon: Droplets }
            ]}
            title="Complete Lawn & Property Care"
            description="Professional services tailored to keep your property looking its best year-round."
          />
        </div>

        <div id="about" data-section="about">
          <TextAbout
            useInvertedBackground={false}
            title="Meet Juan Niño"
            buttons={[{ text: "Contact Juan", href: "#contact" }]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFive
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              { id: "t1", name: "Sarah J.", date: "Oct 2023", title: "Homeowner", quote: "Incredibly dependable and thorough.", tag: "5 Stars", avatarSrc: "" },
              { id: "t2", name: "Mark R.", date: "Nov 2023", title: "Resident", quote: "Niño's team transformed my lawn completely.", tag: "5 Stars", avatarSrc: "" },
              { id: "t3", name: "Emily D.", date: "Jan 2024", title: "Local", quote: "Affordable, professional, and friendly.", tag: "5 Stars", avatarSrc: "" },
              { id: "t4", name: "David L.", date: "Feb 2024", title: "Client", quote: "Attention to detail is unmatched.", tag: "5 Stars", avatarSrc: "" },
              { id: "t5", name: "Jason W.", date: "Mar 2024", title: "Regular", quote: "Great service every time. Highly recommended.", tag: "5 Stars", avatarSrc: "" }
            ]}
            title="What Our Clients Say"
            description="Trusted by hundreds across East Texas for dependability and detail."
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCenter
            useInvertedBackground={true}
            background={{ variant: "gradient-bars" }}
            tag="Get In Touch"
            title="Book Your Lawn Service"
            description="Call (903) 424-5782, email jnino433@gmail.com, or use the form below."
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="Niño's Lawncare"
            columns={[
              {
                title: "Contact",                items: [
                  { label: "(903) 424-5782", href: "tel:9034245782" },
                  { label: "jnino433@gmail.com", href: "mailto:jnino433@gmail.com" }
                ]
              },
              {
                title: "Social",                items: [
                  { label: "Facebook (1.5K)", href: "#" },
                  { label: "BBB Profile", href: "#" }
                ]
              }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}