import { useEffect, useRef } from 'react';
import { Cpu, Box, MapPin, Battery } from 'lucide-react';
import { Badge } from '@/components/ui/badge';

const techCards = [
  {
    icon: Cpu,
    title: 'Microcontrolador ESP32',
    description: 'Processador dual-core de 240MHz com conectividade Wi-Fi e Bluetooth integrada para máxima performance.',
    tags: [
      { label: 'Dual-core Xtensa', color: 'slate' },
      { label: '520KB SRAM', color: 'slate' },
      { label: 'Wi-Fi 802.11 b/g/n', color: 'slate' },
      { label: 'Bluetooth 4.2', color: 'slate' },
    ],
    color: 'blue',
  },
  {
    icon: Box,
    title: 'Impressão 3D Avançada',
    description: 'Estrutura fabricada com tecnologia de impressão 3D de alta precisão, garantindo design ergonômico e peso reduzido.',
    tags: [
      { label: 'Material PLA+', color: 'orange' },
      { label: 'Resistente a UV', color: 'orange' },
      { label: 'Ultra-leve', color: 'orange' },
      { label: 'Design customizável', color: 'orange' },
    ],
    color: 'orange',
  },
  {
    icon: MapPin,
    title: 'Módulo GPS',
    description: 'GPS de alta precisão para rastreamento exato de localização, velocidade e distância em tempo real.',
    tags: [
      { label: 'Precisão <3m', color: 'slate' },
      { label: 'Atualização 10Hz', color: 'slate' },
      { label: 'Multi-GNSS', color: 'slate' },
      { label: 'Cold start <30s', color: 'slate' },
    ],
    color: 'teal',
  },
  {
    icon: Battery,
    title: 'Bateria Inteligente',
    description: 'Sistema de energia otimizado com bateria de lítio recarregável via USB-C para até 8 horas de uso contínuo.',
    tags: [
      { label: 'Li-Po 500mAh', color: 'orange' },
      { label: 'USB-C Fast Charge', color: 'orange' },
      { label: '8h autonomia', color: 'orange' },
      { label: 'Carregamento 2h', color: 'orange' },
    ],
    color: 'green',
  },
];

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

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

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

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

  return (
    <section id="tecnologia" 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-tech opacity-0">
          <Badge className="mb-4 bg-slate-800 text-cyan-400 border-cyan-500/30 hover:bg-slate-700 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase">
            Tecnologia Avançada
          </Badge>
          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
            Tecnologia de Ponta
          </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">
            Hardware e software de última geração combinados para criar uma experiência única em óculos de corrida inteligentes.
          </p>
        </div>

        {/* Tech Cards Grid */}
        <div className="grid md:grid-cols-2 gap-6 lg:gap-8">
          {techCards.map((card, index) => {
            const Icon = card.icon;

            return (
              <div
                key={index}
                className="reveal-tech opacity-0 group relative bg-gradient-to-br from-slate-800/80 to-slate-800/40 border border-slate-700 rounded-2xl p-6 lg:p-8 hover:border-slate-500 transition-all duration-300 hover:-translate-y-1"
              >
                {/* Header */}
                <div className="flex items-start gap-4 mb-4">
                  <div className="w-12 h-12 rounded-xl bg-slate-700/50 border border-slate-600 flex items-center justify-center flex-shrink-0 group-hover:bg-slate-700 transition-colors">
                    <Icon className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="font-display font-semibold text-xl text-white mb-1">
                      {card.title}
                    </h3>
                    <div className="w-12 h-0.5 bg-orange-500 rounded-full" />
                  </div>
                </div>

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

                {/* Tags */}
                <div className="flex flex-wrap gap-2">
                  {card.tags.map((tag, tagIndex) => (
                    <Badge
                      key={tagIndex}
                      variant="secondary"
                      className={`${
                        tag.color === 'orange'
                          ? 'bg-orange-500/10 text-orange-400 border-orange-500/20'
                          : 'bg-slate-700 text-slate-300 border-slate-600'
                      } border text-xs font-medium px-3 py-1`}
                    >
                      {tag.label}
                    </Badge>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        {/* Connectivity Banner */}
        <div className="mt-12 reveal-tech opacity-0">
          <div className="bg-gradient-to-r from-slate-800/60 to-slate-800/30 border border-slate-700 rounded-2xl p-6 lg:p-8">
            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-xl bg-teal-500/10 border border-teal-500/30 flex items-center justify-center">
                  <svg className="w-6 h-6 text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-display font-semibold text-lg text-white">
                    Conectividade Sem Limites
                  </h4>
                  <p className="text-slate-400 text-sm">
                    O ESP32 oferece conectividade Bluetooth 4.2 e Wi-Fi integrada
                  </p>
                </div>
              </div>
              <div className="flex flex-wrap gap-2">
                {['Bluetooth LE', 'Wi-Fi Direct', 'OTA Updates', 'Low Power Mode'].map((item, i) => (
                  <Badge
                    key={i}
                    className={`${
                      i % 2 === 0
                        ? 'bg-slate-700 text-slate-300 border-slate-600'
                        : 'bg-teal-500/10 text-teal-400 border-teal-500/30'
                    } border text-xs font-medium px-3 py-1`}
                  >
                    {item}
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}