"use client";

import React from 'react';
import Link from 'next/link';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

import { CalendarCheck } from 'lucide-react';

export default function WorkPage() {
  const navItems = [
    { name: 'Home', id: '/' },
    { name: 'Services', id: '/services' },
    { name: 'Our Work', id: '/work' },
    { name: 'Testimonials', id: '/testimonials' },
    { name: 'Contact', id: '/contact' },
  ];
  
  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Services", href: "/services" },
        { label: "Our Work", href: "/work" },
      ],
    },
    {
      items: [
        { label: "Testimonials", href: "/testimonials" },
        { label: "Contact Us", href: "/contact" },
        { label: "(XXX) XXX-XXXX", href: "tel:XXX-XXX-XXXX" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Custom European Landscaping"
          bottomLeftText="Timeless Craftsmanship"
          bottomRightText="(XXX) XXX-XXXX"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardTwo
          title="Transformations That Speak For Themselves"
          description="Explore our portfolio of exceptional European-inspired landscapes. Each project is a testament to our precision craftsmanship and dedication to creating dream outdoor spaces."
          products={[
            {
              id: "1",
              brand: "Luxury Outdoor Living",
              name: "12’ Retaining Wall Replacement",
              price: "Project Est. $80k+",
              rating: 5,
              reviewCount: "Client Favorite",
              imageSrc: "https://img.b2bpic.net/free-photo/wuxi-nianhuawan-natural-park_1359-1141.jpg",
              imageAlt: "Completed 12-foot retaining wall",
            },
            {
              id: "2",
              brand: "Event Spaces",
              name: "Backyard Wedding Transformation",
              price: "Project Est. $50k+",
              rating: 5,
              reviewCount: "Stunning Outcome",
              imageSrc: "https://img.b2bpic.net/free-photo/wedding-venue_1157-733.jpg",
              imageAlt: "Transformed backyard for a wedding venue",
            },
            {
              id: "3",
              brand: "Water Management",
              name: "Flooded Basement Drainage Correction",
              price: "Project Est. $30k+",
              rating: 5,
              reviewCount: "Problem Solved",
              imageSrc: "https://img.b2bpic.net/free-photo/watering-can_23-2148006090.jpg",
              imageAlt: "Effective drainage solution around a house",
            },
            {
              id: "4",
              brand: "Custom Patios",
              name: "Modern Stone Patio with Pergola",
              price: "Project Est. $45k+",
              rating: 5,
              reviewCount: "Elegant Design",
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-luxury-swimming-pool-with-palm-trees-thai-style-decoration_1258-111445.jpg",
              imageAlt: "Modern stone patio with an integrated pergola",
            },
            {
              id: "5",
              brand: "Commercial Solutions",
              name: "Large Condo Association Retaining Wall",
              price: "Project Est. $120k+",
              rating: 5,
              reviewCount: "Community Impact",
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-social-distancing-concept_23-2148740142.jpg",
              imageAlt: "Large retaining wall for a condo association",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          cardClassName="bg-card rounded-soft overflow-hidden group"
          imageClassName="group-hover:scale-105 transition-transform duration-300"
          cardBrandClassName="text-sm text-foreground/60"
          cardNameClassName="text-lg font-semibold text-foreground"
          cardPriceClassName="text-xl font-bold text-accent"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="The Team Behind The Work"
          description={[
            "At Custom European Landscaping, we don’t cut corners. We build landscapes the right way.",
            "Founded by Harvey and built on reputation, integrity, and communication, our team specializes in high-quality retaining walls, patios, grading, drainage correction, and full landscape transformations."
          ]}
          useInvertedBackground={false}
          titleClassName="text-5xl lg:text-6xl font-serif text-foreground leading-tight"
          descriptionClassName="text-lg leading-relaxed text-foreground/80"
          buttonContainerClassName="mt-8"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Start Your Project"
          title="Inspired by Our Work?"
          description="Let’s build something exceptional together. Schedule your complimentary consultation and let us bring our craftsmanship to your property."
          tagIcon={CalendarCheck}
          background={{ variant: "plain" }}
          useInvertedBackground={true}
          imageSrc="https://img.b2bpic.net/free-photo/greenhouse-owner-presenting-flowers-options-potential-customer-retailer_158595-7007.jpg"
          imageAlt="Luxury landscaping design consultation with client and architect"
          mediaAnimation="opacity"
          mediaPosition="right"
          inputPlaceholder="Your Name or Email"
          buttonText="Schedule Your Consultation"
          termsText="Or call us directly at (XXX) XXX-XXXX for immediate assistance."
          titleClassName="text-5xl lg:text-6xl font-serif leading-tight"
          descriptionClassName="text-lg leading-relaxed text-foreground/80"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={footerColumns}
          logoText="Custom European Landscaping"
          className="bg-card"
          logoClassName="text-4xl font-serif text-foreground mb-4"
          columnClassName="text-foreground/80"
          itemClassName="text-foreground/70 hover:text-foreground transition-colors"
          containerClassName="border-t-2 border-border pt-12 pb-8"
        />
      </div>
    </ThemeProvider>
  );
}