import { useI18n } from '../../lib/i18n';
import { useScrollReveal } from '../../hooks/useScrollReveal';

const testimonials = [1, 2, 3] as const;

export default function TestimonialsSection() {
  const { t } = useI18n();
  const { ref, isVisible } = useScrollReveal();

  const colors = ['#f59e0b', '#6366f1', '#30a46c'];

  return (
    <div className="w-full py-20">
      <div ref={ref} className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className={`text-center mb-16 transition-all duration-700 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
          <span className="inline-block text-xs font-semibold uppercase tracking-[0.15em] mb-3 px-3 py-1 rounded-full"
            style={{ color: 'var(--fox-amber)', background: 'var(--fox-glow)' }}>
            {t('testimonials.label')}
          </span>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight" style={{ fontFamily: 'var(--font-heading)', color: 'var(--text-primary)' }}>
            {t('testimonials.title')}
          </h2>
        </div>

        {/* Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {testimonials.map((num, i) => (
            <div
              key={num}
              className={`relative p-7 rounded-2xl transition-all duration-700 hover:-translate-y-1 hover:shadow-lg ${
                isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
              }`}
              style={{
                transitionDelay: isVisible ? `${200 + i * 150}ms` : '0ms',
                background: 'var(--bg-elevated)',
                border: '1px solid var(--border-default)',
              }}
            >
              {/* Quote mark */}
              <div className="absolute top-5 right-6 text-5xl font-serif leading-none" style={{ color: 'var(--border-default)' }}>
                "
              </div>

              {/* Quote text */}
              <p className="text-sm leading-relaxed mb-6 relative z-10" style={{ color: 'var(--text-secondary)' }}>
                "{t(`testimonials.${num}.quote`)}"
              </p>

              {/* Author */}
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full flex items-center justify-center text-[11px] font-bold text-white shrink-0"
                  style={{ background: colors[i] }}>
                  {t(`testimonials.${num}.name`).split(' ').map(w => w[0]).join('')}
                </div>
                <div>
                  <div className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
                    {t(`testimonials.${num}.name`)}
                  </div>
                  <div className="text-[12px]" style={{ color: 'var(--text-muted)' }}>
                    {t(`testimonials.${num}.role`)}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}