"use client"

import * as React from "react"
import { MessageSquareQuote, Linkedin, ChevronDown, ChevronUp } from "lucide-react"

interface Testimonial {
  name: string
  role: string
  content: string
}

export function Testimonials() {
  const [showAll, setShowAll] = React.useState(false)

  const testimonials: Testimonial[] = [
    {
      name: "Jake Galbraith",
      role: "Senior Software Engineer at eLuma | Online Therapy",
      content: "Brian is the kind of engineer who shows up every day ready to dig into the most complex, unglamorous work imaginable. I watched him methodically untangle a massive legacy data migration — the kind of problem that would make most people run — and he just kept at it. He always came prepared with data, queries, and questions that pushed us toward the right answer faster than I would've gotten there alone.\n\nWhat I appreciated most was his honesty. When he was stuck, he said so. When he made a mistake, he owned it immediately and got to work fixing it. That made him really easy to collaborate with, even on the gnarliest of problems.\n\nHe's also just a genuinely good person to work with. Patient, funny, and always grateful — which goes a long way on a long project. Any team tackling serious data work would be lucky to have Brian."
    },
    {
      name: "Rick Duff",
      role: "Software Engineering Leader",
      content: "Brian and I have known each other for too many years to mention. I recently had the opportunity to reconnect and took advantage of his capabilities to help solve a problem within our organization.\n\nBrian has a broad skillset and years of experience dealing with smaller (and larger) software systems where you need a jack of all trades kind of understanding to solve the problems you encounter.\n\nI would happily recommend Brian to anyone looking for his skills and easy going personality."
    },
    {
      name: "Mohan Palleti",
      role: "Spatial Analysis Consultant, NCDOT, Raleigh, North Carolina",
      content: "I have worked with Brian for 5 years in Triangle Aerial Surveys, where he was the backbone for the IT division. He managed the Network management, to server management, to database management, System installations and maintenance.\n\nThereafter (15 years) I have consulted with Brian off and on multiple different geospatial projects. I can attest to his capabilities in understanding and problem solving skills in any Information technology related field. He is an asset where old technology meets new technology and building a bridge is required."
    },
    {
      name: "Michael Kimsal",
      role: "Fractional CTO for small, growing businesses",
      content: "Have known Brian for years, initially through local tech user groups. I've paired with Brian on multiple web projects; his ability to both investigate technical issues and see them through with patience is something that stood out to me. Some folks can dig in but never find an answer, some can find an answer but not actually take it to completion, but Brian could do both and always with a calm demeanor."
    },
    {
      name: "Steve Nixon",
      role: "Senior Researcher",
      content: "Brian is a deeply knowledgeable IT professional with a broad range of other interests and knowledge as well. He is a lifelong-learner type, plus he is very friendly and loyal."
    },
    {
      name: "Ron W. Pettigrew",
      role: "WordPress & Web Developer",
      content: "In working with Brian, I find him to be very knowledgeable on a broad range of IT topics and very thorough in the work he does. His advice has saved me countless hours. I appreciate his insight, not only as a colleague, but also as one of my mentors."
    }
  ]

  const displayedTestimonials = showAll ? testimonials : testimonials.slice(0, 3)

  return (
    <section id="recommendations" className="py-20 bg-background transition-colors duration-300 border-t border-border/20">
      <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        
        {/* Header Block */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16">
          <div>
            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
              Recommendations
            </h2>
            <p className="mt-4 text-muted-foreground max-w-2xl">
              Kind words and professional endorsements from colleagues, clients, and industry peers over the course of my career.
            </p>
          </div>
          
          <a
            href="https://www.linkedin.com/in/briandmccullough/details/recommendations/"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-accent transition-all shadow-2xs w-fit"
            id="linkedin-recommendations-link"
          >
            <Linkedin className="h-4 w-4 text-blue-600 dark:text-blue-400" />
            <span>Verify on LinkedIn</span>
          </a>
        </div>

        {/* Testimonials Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {displayedTestimonials.map((item, idx) => (
            <div
              key={idx}
              className="relative border border-border/40 bg-muted/10 rounded-2xl p-6 md:p-8 flex flex-col justify-between hover:border-border/80 transition-all duration-300 group"
            >
              {/* Giant Background Quote Icon */}
              <div className="absolute top-4 right-6 text-muted/15 pointer-events-none group-hover:text-cyan-500/10 transition-colors duration-300">
                <MessageSquareQuote className="h-16 w-16" />
              </div>

              <div className="relative">
                {/* Recommendation Content */}
                <blockquote className="text-sm text-muted-foreground leading-relaxed italic mb-6 whitespace-pre-line">
                  &ldquo;{item.content}&rdquo;
                </blockquote>
              </div>

              {/* Author Info */}
              <div className="border-t border-border/10 pt-4 mt-auto">
                <h3 className="text-base font-bold text-foreground group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">
                  {item.name}
                </h3>
                <p className="text-xs font-semibold text-muted-foreground mt-0.5 leading-snug">
                  {item.role}
                </p>
              </div>
            </div>
          ))}
        </div>

        {/* Expand / Collapse Button */}
        {testimonials.length > 3 && (
          <div className="mt-12 flex justify-center">
            <button
              onClick={() => setShowAll(!showAll)}
              className="inline-flex items-center gap-2 rounded-lg border border-border bg-background px-5 py-2.5 text-sm font-semibold text-foreground hover:bg-accent hover:text-accent-foreground shadow-2xs transition-all cursor-pointer"
              id="recommendations-toggle-btn"
            >
              {showAll ? (
                <>
                  <span>Show Less</span>
                  <ChevronUp className="h-4 w-4" />
                </>
              ) : (
                <>
                  <span>Show All {testimonials.length} Recommendations</span>
                  <ChevronDown className="h-4 w-4" />
                </>
              )}
            </button>
          </div>
        )}

      </div>
    </section>
  )
}