'use client';

import { useEffect, useRef } from 'react';

type Testimonial = {
  quote: string;
  name: string;
  initials: string;
  context: string;
};

const testimonials: Testimonial[] = [
  {
    quote:
      'Me llamaron en 90 segundos. El presupuesto orientativo cuadró con el final a 200 € de diferencia. Me ahorré tres visitas en blanco.',
    name: 'Laura Martínez',
    initials: 'LM',
    context: 'Cocina en Madrid',
  },
  {
    quote:
      'Subí tres fotos del baño un domingo por la noche. El lunes a las nueve ya tenía un presupuesto desglosado en el WhatsApp.',
    name: 'Sergio Bonet',
    initials: 'SB',
    context: 'Baño en Valencia',
  },
  {
    quote:
      'El render me sirvió para decidir el suelo sin ir a la tienda. Cuando llegó el reformista, ya teníamos media reforma clara.',
    name: 'Marta Vidal',
    initials: 'MV',
    context: 'Comedor en Barcelona',
  },
];

export default function Testimonials() {
  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">
        {/* Header */}
        <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>
          <p className="text-lg text-gray-600 max-w-xl">
            Mismo método, distintos espacios. Sin filtros ni guion.
          </p>
        </div>

        {/* Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
          {testimonials.map((t, i) => (
            <article
              key={t.name}
              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` }}
            >
              {/* Quote mark */}
              <svg
                width="32"
                height="24"
                viewBox="0 0 32 24"
                fill="none"
                aria-hidden="true"
                className="text-black/15"
              >
                <path
                  d="M0 24V13.6C0 6.08 4.16 0.96 12.48 0L13.44 4.16C8.96 5.44 6.72 8.32 6.72 11.52H12.48V24H0ZM18.56 24V13.6C18.56 6.08 22.72 0.96 31.04 0L32 4.16C27.52 5.44 25.28 8.32 25.28 11.52H31.04V24H18.56Z"
                  fill="currentColor"
                />
              </svg>

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

              <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">
                  {t.initials}
                </div>
                <div>
                  <div className="text-sm font-bold text-black">{t.name}</div>
                  <div className="text-xs text-gray-500">{t.context}</div>
                </div>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
