'use client';

import { useEffect, useRef } from 'react';
import type { PublicTestimonio } from '@/lib/funnel/public-queries';

function iniciales(nombre: string): string {
  return nombre
    .split(/\s+/)
    .slice(0, 2)
    .map((p) => p[0]?.toUpperCase() ?? '')
    .join('');
}

function Estrellas({ rating }: { rating: number }) {
  return (
    <div className="flex gap-0.5" aria-label={`${rating} de 5 estrellas`}>
      {[1, 2, 3, 4, 5].map((n) => (
        <svg
          key={n}
          viewBox="0 0 24 24"
          className={`w-4 h-4 ${n <= rating ? 'fill-yellow-400' : 'fill-gray-200'}`}
          aria-hidden="true"
        >
          <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
        </svg>
      ))}
    </div>
  );
}

export default function TestimoniosCliente({ testimonios }: { testimonios: PublicTestimonio[] }) {
  const sectionRef = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('opacity-100', 'translate-y-0');
            entry.target.classList.remove('opacity-0', 'translate-y-6');
          }
        });
      },
      { threshold: 0.1 }
    );
    const elements = sectionRef.current?.querySelectorAll('.reveal');
    elements?.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  return (
    <section
      className="section"
      id="testimonios"
      ref={sectionRef}
      aria-labelledby="testimonios-heading"
    >
      <div className="container">
        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col items-center text-center gap-4 mb-16">
          <span className="badge badge-dark">Testimonios</span>
          <h2
            id="testimonios-heading"
            className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black max-w-3xl"
          >
            Lo que dicen
            <br />
            quienes ya reformaron.
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
          {testimonios.map((t, i) => (
            <article
              key={t.id}
              className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col gap-5 bg-white border border-gray-200 rounded-2xl p-8 shadow-sm hover:shadow-md"
              style={{ transitionDelay: `${i * 80}ms` }}
            >
              <Estrellas rating={t.rating} />

              <blockquote className="text-lg leading-relaxed text-gray-800 italic">
                {t.texto}
              </blockquote>

              {t.fotos.length > 0 && (
                <div className="flex flex-wrap gap-2">
                  {t.fotos.map((url, idx) => (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      key={idx}
                      src={url}
                      alt=""
                      className="w-16 h-16 object-cover rounded-lg border border-gray-200"
                    />
                  ))}
                </div>
              )}

              <footer className="flex items-center gap-3 mt-auto pt-4 border-t border-gray-100">
                <div className="w-10 h-10 bg-black text-white rounded-full flex items-center justify-center text-xs font-bold tracking-wider shrink-0">
                  {iniciales(t.nombre)}
                </div>
                <div>
                  <div className="text-sm font-bold text-black">{t.nombre}</div>
                  {t.contexto && <div className="text-xs text-gray-500">{t.contexto}</div>}
                </div>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}