import { useEffect, useRef } from 'react';
import { Weight, Users, Wind, Hand } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

const comfortFeatures = [
  {
    icon: Weight,
    title: '35g',
    subtitle: 'Ultra-Leve',
    description: 'Peso mínimo para máximo conforto durante longas distâncias',
    bullets: [
      'Design otimizado',
      'Sem pontos de pressão',
      'Distribuição equilibrada',
    ],
    color: 'orange',
  },
  {
    icon: Users,
    title: '100%',
    subtitle: 'Ergonômico',
    description: 'Ajuste perfeito para todos os tipos de rosto e cabeça',
    bullets: [
      'Hastes ajustáveis',
      'Ponte nasal flexível',
      'Fit personalizado',
    ],
    color: 'teal',
  },
  {
    icon: Wind,
    title: 'Active',
    subtitle: 'Ventilação',
    description: 'Sistema de ventilação ativa para prevenir embaçamento',
    bullets: [
      'Fluxo de ar otimizado',
      'Anti-fog coating',
      'Respirável',
    ],
    color: 'cyan',
  },
  {
    icon: Hand,
    title: 'Pro',
    subtitle: 'Grip Seguro',
    description: 'Tecnologia antiderrapante para estabilidade total',
    bullets: [
      'Borracha hidrogrip',
      'Não escorrega',
      'Testado em chuva',
    ],
    color: 'orange',
  },
];

export function Comfort() {
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const elements = entry.target.querySelectorAll('.reveal-comfort');
            elements.forEach((el, index) => {
              setTimeout(() => {
                el.classList.add('animate-fade-in-up');
              }, index * 100);
            });
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.15 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => observer.disconnect();
  }, []);

  const getColorClasses = (color: string) => {
    const colors: Record<string, { bg: string; text: string; bullet: string }> = {
      orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', bullet: 'bg-orange-500' },
      teal: { bg: 'bg-teal-500/10', text: 'text-teal-400', bullet: 'bg-teal-500' },
      cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', bullet: 'bg-cyan-500' },
    };
    return colors[color] || colors.orange;
  };

  return (
    <section id="design" ref={sectionRef} className="py-24 lg:py-32 bg-[#0f172a]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16 reveal-comfort opacity-0">
          <Badge className="mb-4 bg-slate-800 text-orange-400 border-orange-500/30 hover:bg-slate-700 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase">
            Conforto Premium
          </Badge>
          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
            Conforto & Ergonomia
          </h2>
          <div className="w-16 h-1 bg-gradient-to-r from-orange-500 to-orange-400 mx-auto rounded-full mb-6" />
          <p className="text-slate-400 text-lg max-w-2xl mx-auto">
            Design pensado para proporcionar conforto excepcional durante toda a sua corrida.
          </p>
        </div>

        {/* Comfort Cards Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {comfortFeatures.map((feature, index) => {
            const colors = getColorClasses(feature.color);
            const Icon = feature.icon;

            return (
              <div
                key={index}
                className="reveal-comfort opacity-0 group relative bg-slate-800/50 border border-slate-700 rounded-2xl p-6 hover:border-slate-500 transition-all duration-300 hover:-translate-y-2"
              >
                {/* Icon */}
                <div
                  className={`w-12 h-12 rounded-xl ${colors.bg} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}
                >
                  <Icon className={`w-6 h-6 ${colors.text}`} />
                </div>

                {/* Title */}
                <div className="mb-3">
                  <span className={`font-display font-bold text-2xl ${colors.text}`}>
                    {feature.title}
                  </span>
                  <h3 className="font-display font-semibold text-white">
                    {feature.subtitle}
                  </h3>
                </div>

                {/* Description */}
                <p className="text-slate-400 text-sm mb-4 leading-relaxed">
                  {feature.description}
                </p>

                {/* Bullets */}
                <ul className="space-y-2">
                  {feature.bullets.map((bullet, bulletIndex) => (
                    <li key={bulletIndex} className="flex items-center gap-2 text-sm text-slate-300">
                      <span className={`w-1.5 h-1.5 rounded-full ${colors.bullet} flex-shrink-0`} />
                      {bullet}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>

        {/* Availability Badge */}
        <div className="mt-16 text-center reveal-comfort opacity-0">
          <Badge className="bg-teal-500/10 text-teal-400 border-teal-500/30 hover:bg-teal-500/20 px-6 py-2 text-sm font-semibold">
            <svg className="w-4 h-4 mr-2 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            Disponível Agora
          </Badge>
        </div>
      </div>
    </section>
  );
}
