"use client";

import { useState } from "react";
import { ChevronLeft, ChevronRight, Quote } from "lucide-react";
import { TESTIMONIALS } from "@/lib/constants";

export default function TestimonialsSection() {
  const [active, setActive] = useState(0);
  const [hovered, setHovered] = useState<number | null>(null);
  // Cards clamp to four lines; "Read more" opens the full quote (4.10).
  const [expanded, setExpanded] = useState<number | null>(null);

  const prev = () => setActive((a) => (a === 0 ? TESTIMONIALS.length - 1 : a - 1));
  const next = () => setActive((a) => (a === TESTIMONIALS.length - 1 ? 0 : a + 1));

  return (
    <section className="section-padding bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <span className="text-[#CC1414] text-sm font-semibold uppercase tracking-wider">
            Testimonials
          </span>
          <h2 className="text-3xl md:text-4xl font-black text-gray-900 mt-2">
            What Our Customers Say
          </h2>
        </div>

        {/* Desktop Grid */}
        <div className="hidden md:grid grid-cols-2 lg:grid-cols-4 gap-5">
          {TESTIMONIALS.map((t, i) => (
            <div
              key={t.name}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(null)}
              className={`bg-gray-50 rounded-2xl p-6 border transition-all ${
                i === hovered
                  ? "border-[#CC1414] shadow-lg shadow-red-100"
                  : "border-transparent hover:border-gray-200"
              }`}
            >
              <Quote size={24} className="text-[#CC1414]/30 mb-3" />
              <p className={`text-gray-600 text-sm leading-relaxed ${expanded === i ? "" : "line-clamp-4"}`}>
                &ldquo;{t.content}&rdquo;
              </p>
              {t.content.length > 180 && (
                <button
                  type="button"
                  onClick={() => setExpanded(expanded === i ? null : i)}
                  aria-expanded={expanded === i}
                  className="mt-1 text-xs font-semibold text-[#CC1414] hover:underline"
                >
                  {expanded === i ? "Show less" : "Read more"}
                </button>
              )}
              <div className="mb-5" />
              <div className="flex items-center gap-3 mt-auto">
                <div className="w-10 h-10 bg-[#CC1414] rounded-full flex items-center justify-center text-white font-bold text-sm shrink-0">
                  {t.avatar}
                </div>
                <div>
                  <div className="text-sm font-bold text-gray-900">{t.name}</div>
                  <div className="text-xs text-gray-400">{t.role}</div>
                  {t.company ? <div className="text-xs font-medium text-gray-600">{t.company}</div> : null}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Mobile Carousel */}
        <div className="md:hidden relative">
          <div className="bg-gray-50 rounded-2xl p-6 border border-[#CC1414]/20">
            <Quote size={24} className="text-[#CC1414]/30 mb-3" />
            <p className="text-gray-600 text-sm leading-relaxed mb-5">
              &ldquo;{TESTIMONIALS[active].content}&rdquo;
            </p>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-[#CC1414] rounded-full flex items-center justify-center text-white font-bold text-sm">
                {TESTIMONIALS[active].avatar}
              </div>
              <div>
                <div className="text-sm font-bold text-gray-900">{TESTIMONIALS[active].name}</div>
                <div className="text-xs text-gray-400">{TESTIMONIALS[active].role}</div>
              </div>
            </div>
          </div>

          {/* Controls */}
          <div className="flex items-center justify-center gap-3 mt-5">
            <button
              onClick={prev}
              className="w-9 h-9 rounded-full border border-gray-200 flex items-center justify-center hover:bg-[#CC1414] hover:border-[#CC1414] hover:text-white transition-all"
            >
              <ChevronLeft size={16} />
            </button>
            {TESTIMONIALS.map((_, i) => (
              <button
                key={i}
                onClick={() => setActive(i)}
                className={`w-2 h-2 rounded-full transition-all ${
                  i === active ? "bg-[#CC1414] w-5" : "bg-gray-300"
                }`}
              />
            ))}
            <button
              onClick={next}
              className="w-9 h-9 rounded-full border border-gray-200 flex items-center justify-center hover:bg-[#CC1414] hover:border-[#CC1414] hover:text-white transition-all"
            >
              <ChevronRight size={16} />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}