import { useEffect, useRef } from 'react';
import { Cpu, Battery, Wifi } from 'lucide-react';

const specCategories = [
  {
    icon: Cpu,
    title: 'Processador',
    specs: [
      { label: 'Microcontrolador', value: 'ESP32 Dual-Core' },
      { label: 'Frequência', value: '240 MHz' },
      { label: 'Memória RAM', value: '520 KB SRAM' },
      { label: 'Flash', value: '4 MB' },
    ],
  },
  {
    icon: Battery,
    title: 'Energia',
    specs: [
      { label: 'Bateria', value: 'Li-Po 500mAh' },
      { label: 'Autonomia', value: '8 horas' },
      { label: 'Carregamento', value: 'USB-C (2h)' },
      { label: 'Standby', value: '72 horas' },
    ],
  },
  {
    icon: Wifi,
    title: 'Conectividade',
    specs: [
      { label: 'Bluetooth', value: '4.2 BLE' },
      { label: 'Wi-Fi', value: '802.11 b/g/n' },
      { label: 'GPS', value: 'Multi-GNSS' },
      { label: 'ANT+', value: 'Compatível' },
    ],
  },
];

const dimensions = [
  { label: 'Peso', value: '35 gramas' },
  { label: 'Largura', value: '145 mm' },
  { label: 'Altura', value: '48 mm' },
  { label: 'Profundidade', value: '40 mm' },
];

const resistance = [
  { label: 'À água', value: 'IPX4' },
  { label: 'À poeira', value: 'IP5X' },
  { label: 'Temperatura', value: '-10°C a 45°C' },
  { label: 'Umidade', value: '10% a 90%' },
];

const display = [
  { label: 'Tipo', value: 'Projeção HUD' },
  { label: 'Brilho', value: 'Auto-ajustável' },
  { label: 'Visualização', value: 'Sempre visível' },
  { label: 'Cores', value: 'Monocromático' },
];

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

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const elements = entry.target.querySelectorAll('.reveal-specs');
            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="especificacoes" 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-specs opacity-0">
          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
            Especificações Técnicas
          </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">
            Conheça todos os detalhes técnicos do VisionRun Pro e descubra a tecnologia por trás da inovação.
          </p>
        </div>

        {/* Main Specs Grid */}
        <div className="grid md:grid-cols-3 gap-6 mb-8">
          {specCategories.map((category, index) => {
            const Icon = category.icon;

            return (
              <div
                key={index}
                className="reveal-specs opacity-0 bg-slate-800/50 border border-slate-700 rounded-2xl p-6"
              >
                <div className="flex items-center gap-3 mb-6">
                  <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>
                  <h3 className="font-display font-semibold text-lg text-white">
                    {category.title}
                  </h3>
                </div>

                <div className="space-y-3">
                  {category.specs.map((spec, specIndex) => (
                    <div
                      key={specIndex}
                      className="flex justify-between items-center py-2 border-b border-slate-700/50 last:border-0"
                    >
                      <span className="text-slate-400 text-sm">{spec.label}</span>
                      <span className="text-white font-medium text-sm font-mono">
                        {spec.value}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>

        {/* Secondary Specs */}
        <div className="grid md:grid-cols-3 gap-6 reveal-specs opacity-0">
          {/* Dimensions */}
          <div className="bg-slate-800/30 border border-slate-700/50 rounded-2xl p-6">
            <div className="flex items-center gap-2 mb-4">
              <svg className="w-5 h-5 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
              </svg>
              <h4 className="font-display font-semibold text-white">Dimensões</h4>
            </div>
            <div className="space-y-2">
              {dimensions.map((item, index) => (
                <div key={index} className="flex justify-between text-sm">
                  <span className="text-slate-400">{item.label}</span>
                  <span className="text-white font-mono">{item.value}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Resistance */}
          <div className="bg-slate-800/30 border border-slate-700/50 rounded-2xl p-6">
            <div className="flex items-center gap-2 mb-4">
              <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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
              <h4 className="font-display font-semibold text-white">Resistência</h4>
            </div>
            <div className="space-y-2">
              {resistance.map((item, index) => (
                <div key={index} className="flex justify-between text-sm">
                  <span className="text-slate-400">{item.label}</span>
                  <span className="text-white font-mono">{item.value}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Display */}
          <div className="bg-slate-800/30 border border-slate-700/50 rounded-2xl p-6">
            <div className="flex items-center gap-2 mb-4">
              <svg className="w-5 h-5 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              <h4 className="font-display font-semibold text-white">Display</h4>
            </div>
            <div className="space-y-2">
              {display.map((item, index) => (
                <div key={index} className="flex justify-between text-sm">
                  <span className="text-slate-400">{item.label}</span>
                  <span className="text-white font-mono">{item.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
