"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import FooterSimple from "@/components/sections/footer/FooterSimple";

export default function ShopPage() {
  return (
    <ThemeProvider 
      defaultButtonVariant="text-stagger" 
      defaultTextAnimation="entrance-slide" 
      borderRadius="rounded" 
      contentWidth="medium" 
      sizing="medium" 
      background="circleGradient" 
      cardStyle="glass-elevated" 
      primaryButtonStyle="gradient" 
      secondaryButtonStyle="glass" 
      headingFontWeight="normal"
    >
      <NavbarStyleFullscreen
        brandName="GreenScape"
        navItems={[
          { name: "Shop", id: "/shop" },
          { name: "Services", id: "/#services" },
          { name: "About", id: "/#about" },
          { name: "Team", id: "/#team" },
          { name: "Testimonials", id: "/#testimonials" },
          { name: "Contact", id: "/#contact" },
        ]}
        button={{ text: "Call Now", href: "/#contact" }}
      />
      <div className="pt-32 pb-20">
        <ProductCardFour
          title="Our Products"
          description="High-quality gardening tools and plants for your outdoor space."
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            { id: "1", name: "Pruning Shears", price: "$45.00", variant: "Gardening Tools", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-2.jpg" },
            { id: "2", name: "Organic Soil Mix", price: "$25.00", variant: "Soil & Fertilizer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-4.jpg" },
            { id: "3", name: "Ceramic Planter", price: "$55.00", variant: "Decor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-5.jpg" },
            { id: "4", name: "Garden Shovel", price: "$35.00", variant: "Gardening Tools", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/landscaping/img-3.jpg" },
          ]}
        />
      </div>
      <FooterSimple
        columns={[
          { title: "Services", items: [{ label: "Landscape Design", href: "/#services" }] },
          { title: "Company", items: [{ label: "About", href: "/#about" }] },
        ]}
        bottomLeftText="© 2026 GreenScape Landscaping"
        bottomRightText="All rights reserved."
      />
    </ThemeProvider>
  );
}