import { useState, useEffect, useRef } from 'react';
import { Droplets, Feather, Sparkles } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

const colorOptions = [
  { name: 'Midnight Blue', color: '#1e3a5f', bg: 'bg-[#1e3a5f]' },
  { name: 'Rose Pink', color: '#e891a8', bg: 'bg-[#e891a8]' },
  { name: 'Classic Grey', color: '#6b7280', bg: 'bg-[#6b7280]' },
  { name: 'Pure White', color: '#f8fafc', bg: 'bg-[#f8fafc]' },
  { name: 'Carbon Black', color: '#1f2937', bg: 'bg-[#1f2937]' },
  { name: 'Nordic Blue', color: '#0ea5e9', bg: 'bg-[#0ea5e9]' },
];

const designFeatures = [
  {
    icon: Droplets,
    title: 'Resistente à Água',
    description: 'Protegido contra suor e chuva leve durante suas corridas.',
  },
  {
    icon: Feather,
    title: 'Leve e Confortável',
    description: 'Apenas 45g para conforto máximo durante longas corridas.',
  },
  {
    icon: Sparkles,
    title: 'Acabamento Premium',
    description: 'Materiais de alta qualidade com design moderno e sofisticado.',
  },
];

export function Colors() {
  const [selectedColor, setSelectedColor] = useState(0);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const elements = entry.target.querySelectorAll('.reveal-colors');
            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();
  }, []);

  return (
    <section ref={sectionRef} className="py-24 lg:py-32 bg-slate-900/50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-16 reveal-colors opacity-0">
          <Badge className="mb-4 bg-slate-800 text-pink-400 border-pink-500/30 hover:bg-slate-700 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase">
            Design Premium
          </Badge>
          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
            Design & Cores Personalizáveis
          </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 ergonômico e personalizável com acabamentos premium que combinam estilo e funcionalidade.
          </p>
        </div>

        {/* Design Features */}
        <div className="grid md:grid-cols-3 gap-6 mb-16">
          {designFeatures.map((feature, index) => {
            const Icon = feature.icon;

            return (
              <div
                key={index}
                className="reveal-colors opacity-0 group bg-slate-800/50 border border-slate-700 rounded-2xl p-6 hover:border-slate-500 transition-all duration-300"
              >
                <div className="w-12 h-12 rounded-xl bg-slate-700/50 border border-slate-600 flex items-center justify-center mb-4 group-hover:bg-slate-700 transition-colors">
                  <Icon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-display font-semibold text-lg text-white mb-2">
                  {feature.title}
                </h3>
                <p className="text-slate-400 text-sm leading-relaxed">
                  {feature.description}
                </p>
              </div>
            );
          })}
        </div>

        {/* Color Selector */}
        <div className="reveal-colors opacity-0">
          <h3 className="font-display font-semibold text-xl text-white text-center mb-8">
            Escolha Sua Cor
          </h3>

          <div className="flex flex-wrap justify-center gap-4 lg:gap-6">
            {colorOptions.map((color, index) => (
              <button
                key={index}
                onClick={() => setSelectedColor(index)}
                className={`group relative transition-all duration-300 ${
                  selectedColor === index ? 'scale-110' : 'hover:scale-105'
                }`}
              >
                <div
                  className={`w-16 h-16 lg:w-20 lg:h-20 rounded-2xl ${color.bg} shadow-lg transition-all duration-300 ${
                    selectedColor === index
                      ? 'ring-4 ring-orange-500 ring-offset-4 ring-offset-[#0f172a]'
                      : 'ring-2 ring-slate-700 group-hover:ring-slate-500'
                  }`}
                />
                <span
                  className={`absolute -bottom-8 left-1/2 -translate-x-1/2 text-xs font-medium whitespace-nowrap transition-colors duration-300 ${
                    selectedColor === index ? 'text-orange-400' : 'text-slate-400'
                  }`}
                >
                  {color.name}
                </span>
              </button>
            ))}
          </div>

          {/* Selected Color Preview */}
          <div className="mt-16 text-center">
            <div
              className="inline-flex items-center gap-3 px-6 py-3 rounded-full bg-slate-800 border border-slate-700"
            >
              <div
                className={`w-6 h-6 rounded-full ${colorOptions[selectedColor].bg} ring-2 ring-slate-600`}
              />
              <span className="text-white font-medium">
                {colorOptions[selectedColor].name}
              </span>
              <span className="text-slate-400 text-sm">
                - Selecionado
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
