import { useEffect, useRef } from 'react';
import { Gauge, Route, Smartphone, Map, TrendingUp } from 'lucide-react';

const features = [
  {
    icon: Gauge,
    title: 'Cálculo da velocidade em tempo real',
    description: 'Acompanhe sua velocidade instantânea durante toda a corrida',
  },
  {
    icon: Route,
    title: 'Cálculo da distância percorrida',
    description: 'Saiba exatamente quantos quilômetros você já completou',
  },
  {
    icon: Smartphone,
    title: 'Monitoramento pelo celular',
    description: 'Sincronização automática com o aplicativo móvel',
  },
  {
    icon: Map,
    title: 'Exibição do circuito percorrido',
    description: 'Visualize todo o trajeto no aplicativo após o treino',
  },
  {
    icon: TrendingUp,
    title: 'Acompanhamento de desempenho',
    description: 'Análise completa do seu progresso durante a corrida',
  },
];

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

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const elements = entry.target.querySelectorAll('.reveal-feature');
            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 id="funcionalidades" 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-feature opacity-0">
          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
            Funcionalidades Atuais
          </h2>
          <div className="w-16 h-1 bg-gradient-to-r from-orange-500 to-orange-400 mx-auto rounded-full mb-6" />
        </div>

        {/* Features Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, index) => {
            const Icon = feature.icon;

            return (
              <div
                key={index}
                className="reveal-feature 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-1"
              >
                {/* Icon */}
                <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>

                {/* Content */}
                <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>

        {/* Operational Notice */}
        <div className="mt-12 reveal-feature opacity-0">
          <div className="bg-gradient-to-r from-teal-500/10 to-teal-500/5 border border-teal-500/20 rounded-2xl p-6">
            <div className="flex items-start gap-4">
              <div className="w-10 h-10 rounded-lg bg-teal-500/20 flex items-center justify-center flex-shrink-0">
                <svg className="w-5 h-5 text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <div>
                <h4 className="font-display font-semibold text-white mb-1">
                  Funcionalidades Completamente Operacionais
                </h4>
                <p className="text-slate-400 text-sm leading-relaxed">
                  Todas as funcionalidades listadas acima já estão implementadas e funcionando perfeitamente no VisionRun Pro. O sistema foi testado extensivamente para garantir precisão e confiabilidade durante suas corridas.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
