"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 FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

import { MessageSquareText, HardHat, PhoneCall, Hammer, Award } from 'lucide-react';

export default function ServicesPage() {
  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="services" data-section="services">
        <FeatureCardOne
          title="Our Specialties"
          description="Our expertise covers the full spectrum of outdoor transformations, from foundational structural elements to exquisite aesthetic enhancements."
          features={[
            {
              title: "Retaining Walls",
              description: "Engineered, reinforced, and built to last. From decorative garden walls to 100+ foot structural systems.",
              imageSrc: "https://img.b2bpic.net/free-photo/gray-brick-wall-background_1372-494.jpg",
              imageAlt: "Engineered retaining wall in a luxurious garden",
            },
            {
              title: "Patios & Outdoor Living",
              description: "Custom stone patios, fire features, pergolas, and elegant hardscapes that transform how you use your yard.",
              imageSrc: "https://img.b2bpic.net/free-photo/rustic-patio-with-deck-furniture-vegetation_23-2150698338.jpg",
              imageAlt: "Custom stone patio with fire feature",
            },
            {
              title: "Drainage & Grading Solutions",
              description: "Water problems solved properly. No shortcuts. No temporary fixes.",
              imageSrc: "https://img.b2bpic.net/free-photo/crop-woman-planting-sprouts-garden_23-2147714879.jpg",
              imageAlt: "Landscaping drainage correction project",
            },
            {
              title: "Landscape Design & Installation",
              description: "Rock, mulch, trees, grading, screening, leveling, and complete transformations.",
              imageSrc: "https://img.b2bpic.net/free-photo/vertical-shot-material-pieces-wooden-boxes_181624-18062.jpg",
              imageAlt: "Landscape design with new trees and rock features",
            },
            {
              title: "Demolition & Site Prep",
              description: "Garage removal, pool fill-ins, regrading, and large-scale site reshaping.",
              imageSrc: "https://img.b2bpic.net/free-photo/greenhouse-still-life_23-2148127869.jpg",
              imageAlt: "Site preparation with heavy machinery",
            },
          ]}
          gridVariant="two-items-per-row"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          cardClassName="bg-card p-6 rounded-soft border border-border transition-all duration-300 hover:scale-[1.02]"
          cardTitleClassName="text-2xl font-semibold text-foreground"
          cardDescriptionClassName="text-foreground/70"
          mediaClassName="rounded-soft mb-4 object-cover h-48 w-full"
        />
      </div>

      <div id="why-choose-us" data-section="why-choose-us">
        <FeatureCardOne
          title="What Sets Us Apart"
          description="We believe every landscape project deserves integrity, expertise, and clear communication. Here’s why clients choose us for their most important outdoor transformations."
          features={[
            { title: "We Actually Listen", description: "Clients consistently say we take the time to understand their vision before offering expert guidance.", imageSrc: "https://img.b2bpic.net/free-photo/lost-school-sport-gym-with-swimming-pool-chernobyl-city-zone-radioactivity-ghost-town_627829-11732.jpg" },
            { title: "Real Engineering Knowledge", description: "8–12 foot retaining walls? Complex grading? Drainage nightmares? We handle what others avoid.", imageSrc: "https://img.b2bpic.net/free-photo/watering-can_23-2148006090.jpg" },
            { title: "Communication From Start to Finish", description: "Clear updates. On-time arrivals. Honest answers. Always.", imageSrc: "https://img.b2bpic.net/free-photo/big-fence-urban-park_53876-32203.jpg" },
            { title: "No Shortcuts. Ever.", description: "Solid construction. Proper base prep. Quality materials, built to last.", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-luxury-swimming-pool-with-palm-trees-thai-style-decoration_1258-111445.jpg" },
          ]}
          gridVariant="two-items-per-row"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          cardClassName="bg-card p-6 rounded-soft border border-border transition-all duration-300 hover:scale-[1.02]"
          cardTitleClassName="text-2xl font-semibold text-foreground"
          cardDescriptionClassName="text-foreground/70"
        />
      </div>

      <div id="process" data-section="process">
        <FaqDouble
          title="Our Process"
          description="We believe in transparency and meticulous planning. Our four-step approach ensures your project is executed flawlessly, from initial concept to a stunning reality."
          faqs={[
            { id: "step-1", title: "Step 1: Consultation", content: "We begin with a detailed on-site consultation. We walk the property with you, listen carefully to your ideas and aspirations, and discuss your specific goals and challenges to understand your vision completely." },
            { id: "step-2", title: "Step 2: Design & Planning", content: "Following the consultation, our experts refine the vision. We provide thoughtful recommendations, present design concepts, and detail the scope of work, ensuring alignment with your aesthetic and functional requirements before any work begins." },
            { id: "step-3", title: "Step 3: Precision Execution", content: "Once the plan is approved, our master craftsmen bring your vision to life. We commit to on-time project commencement, maintain clean and organized job sites, and provide clear communication throughout every phase of construction. No shortcuts, ever." },
            { id: "step-4", title: "Step 4: Final Walkthrough", content: "Our commitment extends to the very end. We conduct a thorough final walkthrough with you to ensure every detail meets our exacting standards and, most importantly, your complete satisfaction. We don’t leave until it’s done right." },
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          accordionClassName="bg-card rounded-soft border border-border p-5 my-2"
          accordionTitleClassName="text-xl font-semibold text-foreground"
          accordionContentClassName="text-foreground/70 mt-3"
        />
      </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>
  );
}