"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroOverlayTestimonial from "@/components/sections/hero/HeroOverlayTestimonial";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Star, Leaf } from "lucide-react";

export default function LandscapingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="large"
      background="none"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            brandName="GreenScape"
            navItems={[
              { name: "Products", id: "products" },
              { name: "New Arrivals", id: "new-arrivals" },
              { name: "Reviews", id: "reviews" },
              { name: "Contact", id: "contact" },
            ]}
            button={{ text: "Shop Now", href: "#products" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroOverlayTestimonial
            tag="Premium Garden Gear"
            tagIcon={Leaf}
            title="Elevate Your Garden"
            description="Discover our curated collection of professional landscaping tools and garden supplies designed for durability and performance."
            testimonials={[]}
            buttons={[
              { text: "Shop Collection", href: "#products" },
              { text: "New Arrivals", href: "#new-arrivals" },
            ]}
            buttonAnimation="slide-up"
            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/hero.jpg"
            imageAlt="Premium garden supplies display"
            showDimOverlay={true}
            textPosition="top"
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardOne
            title="Featured Products"
            description="Hand-picked essentials for your green space."
            animationType="slide-up"
            gridVariant="four-items-2x2-equal-grid"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              { id: "1", name: "Ergonomic Shears", price: "$45.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-2.jpg" },
              { id: "2", name: "Garden Tote Bag", price: "$32.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-3.jpg" },
              { id: "3", name: "Smart Sprinkler", price: "$89.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-4.jpg" },
              { id: "4", name: "Soil Tester", price: "$28.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-5.jpg" },
            ]}
          />
        </div>

        <div id="new-arrivals" data-section="new-arrivals">
          <ProductCardOne
            title="New Arrivals"
            description="The latest additions to our shop."
            animationType="slide-up"
            gridVariant="four-items-2x2-equal-grid"
            textboxLayout="default"
            useInvertedBackground={true}
            products={[
              { id: "5", name: "Bamboo Hand Rake", price: "$18.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-6.jpg" },
              { id: "6", name: "Organic Seed Kit", price: "$25.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-7.jpg" },
            ]}
          />
        </div>

        <div id="reviews" data-section="reviews">
          <TestimonialCardThirteen
            title="Customer Reviews"
            description="See what our customers are saying about our products."
            showRating={true}
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            testimonials={[
              { id: "1", name: "Sarah M.", handle: "Verified Buyer", testimonial: "The shears are incredibly sharp and comfortable. Highly recommend!", rating: 5, icon: Star },
              { id: "2", name: "David K.", handle: "Verified Buyer", testimonial: "Smart sprinkler system works perfectly. My garden looks healthier than ever.", rating: 5, icon: Star },
            ]}
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactSplitForm
            title="Stay Updated"
            description="Join our newsletter to receive the latest gardening tips and product news."
            useInvertedBackground={false}
            buttonText="Subscribe"
            inputs={[
              { name: "name", type: "text", placeholder: "Full Name", required: true },
              { name: "email", type: "email", placeholder: "Email Address", required: true },
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterSimple
            columns={[
              { title: "Shop", items: [{ label: "Featured Products", href: "#products" }, { label: "New Arrivals", href: "#new-arrivals" }] },
              { title: "Support", items: [{ label: "Contact Us", href: "#contact" }, { label: "Returns", href: "#" }] },
            ]}
            bottomLeftText="© 2026 GreenScape Shop"
            bottomRightText="All rights reserved"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}