import { useEffect, useRef } from 'react';
import { Headphones, Moon, Activity, Volume2, Music, Bell } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

const upcomingFeatures = [
  {
    icon: Headphones,
    title: 'Áudio Integrado',
    subtitle: 'Tecnologia de condução óssea para máxima segurança',
    features: [
      { icon: Volume2, title: 'Notificações por Voz', desc: 'Receba métricas importantes em áudio sem olhar para nada' },
      { icon: Music, title: 'Reprodução de Música', desc: 'Ouça suas playlists favoritas durante a corrida' },
      { icon: Bell, title: 'Alertas Inteligentes', desc: 'Notificações de frequência cardíaca e zona de treino' },
    ],
  },
];

const roadmapItems = [
  {
    icon: Moon,
    title: 'Display Noturno',
    description: 'Modo de visualização otimizado para corridas noturnas com ajuste automático de brilho e contraste adaptativo.',
    quarter: 'Q3 2026',
    color: 'pink',
  },
  {
    icon: Activity,
    title: 'Integração com Sensores',
    description: 'Conexão com monitores de frequência cardíaca, pods de corrida e outros dispositivos ANT+ para métricas completas.',
    quarter: 'Q4 2026',
    color: 'teal',
  },
];

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

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const elements = entry.target.querySelectorAll('.reveal-future');
            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-future 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">
            <svg className="w-3 h-3 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Em Breve
          </Badge>
          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
            Futuras Atualizações
          </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">
            O VisionRun Pro está em constante evolução. Confira as próximas funcionalidades que estão sendo desenvolvidas.
          </p>
        </div>

        {/* Audio Feature Card */}
        <div className="mb-12 reveal-future opacity-0">
          <div className="bg-gradient-to-br from-slate-800/80 to-slate-800/40 border border-slate-700 rounded-2xl p-6 lg:p-8">
            <div className="flex items-center gap-4 mb-6">
              <div className="w-12 h-12 rounded-xl bg-slate-700/50 border border-slate-600 flex items-center justify-center">
                <Headphones className="w-6 h-6 text-white" />
              </div>
              <div>
                <h3 className="font-display font-semibold text-xl text-white">
                  Áudio Integrado
                </h3>
                <p className="text-slate-400 text-sm">
                  Tecnologia de condução óssea para máxima segurança
                </p>
              </div>
            </div>

            <div className="grid sm:grid-cols-3 gap-4">
              {upcomingFeatures[0].features.map((feature, index) => {
                const Icon = feature.icon;
                return (
                  <div
                    key={index}
                    className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-slate-500 transition-colors"
                  >
                    <Icon className="w-5 h-5 text-slate-400 mb-2" />
                    <h4 className="font-semibold text-white text-sm mb-1">
                      {feature.title}
                    </h4>
                    <p className="text-slate-400 text-xs leading-relaxed">
                      {feature.desc}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Roadmap Grid */}
        <div className="grid md:grid-cols-2 gap-6">
          {roadmapItems.map((item, index) => {
            const Icon = item.icon;
            const colorClasses =
              item.color === 'pink'
                ? 'bg-pink-500/10 text-pink-400 border-pink-500/30'
                : 'bg-teal-500/10 text-teal-400 border-teal-500/30';

            return (
              <div
                key={index}
                className="reveal-future opacity-0 bg-slate-800/50 border border-slate-700 rounded-2xl p-6 hover:border-slate-500 transition-all duration-300"
              >
                <div className="flex items-start justify-between mb-4">
                  <div className="w-10 h-10 rounded-lg bg-slate-700/50 flex items-center justify-center">
                    <Icon className="w-5 h-5 text-white" />
                  </div>
                  <Badge className={`${colorClasses} text-xs font-semibold`}>
                    {item.quarter}
                  </Badge>
                </div>

                <h3 className="font-display font-semibold text-lg text-white mb-2">
                  {item.title}
                </h3>
                <p className="text-slate-400 text-sm leading-relaxed">
                  {item.description}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}