"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 TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function TestimonialsPage() {
  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="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Clients Say It Best"
          description="Hear directly from homeowners and businesses who entrusted us with their outdoor visions and experienced our commitment to quality and communication."
          testimonials={[
            { id: "1", name: "Sarah J.", date: "July 2023", title: "Craftsmanship without compromise!", quote: "“Custom European Landscaping truly delivers on their promise. No engineering shortcuts, everything done the right way. We couldn't be happier with our new retaining wall.”", tag: "Retaining Wall Project", avatarSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", avatarAlt: "Sarah J." },
            { id: "2", name: "Michael C.", date: "April 2024", title: "Top-notch work and incredible crew.", quote: "“The team is professional, punctual, and their work is top-notch. Best experience I’ve ever had with a landscaping company. They transformed our yard.”", tag: "Full Landscape Transformation", avatarSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", avatarAlt: "Michael C." },
            { id: "3", name: "Emily R.", date: "November 2023", title: "Honest, straight-shooting, and professional.", quote: "“Harvey and his crew are straight shooting and honest. They listened to our vision and delivered beyond expectations. Highly recommend their precision stonework.”", tag: "Custom Patio Installation", avatarSrc: "https://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", avatarAlt: "Emily R." },
            { id: "4", name: "David K.", date: "September 2022", title: "They solve complex problems others avoid.", quote: "“Our drainage issues were a nightmare until Custom European Landscaping stepped in. Their real engineering knowledge made all the difference. Problem completely solved.”", tag: "Drainage Solution", avatarSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", avatarAlt: "David K." },
            { id: "5", name: "Olivia P.", date: "June 2023", title: "Exceptional communication from start to finish.", quote: "“What truly set them apart was the communication. Clear updates, on-time arrivals, and always honest answers. It made the entire process stress-free and enjoyable.”", tag: "Outdoor Living Area", avatarSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", avatarAlt: "Olivia P." },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      
      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted By Many"
          description="We are proud to have earned the trust of clients through our commitment to excellence and quality craftsmanship."
          names={[
            "5.0 Star Rated", "7+ Years of Excellence", "Hundreds of Projects Completed", "Precision Craftsmanship", "No Shortcuts", "Complex Retaining Walls", "Drainage Expertise", "Professional & Punctual",
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={60}
          showCard={false}
        />
      </div>

      <div id="why-choose-us" data-section="why-choose-us">
        <FeatureCardOne
          title="Why Our Clients Recommend Us"
          description="It comes down to our core values: integrity, expertise, and clear communication. These are the reasons clients trust us and recommend our work."
          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" },
          ]}
          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="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>
  );
}