import SEO from '../../components/SEO';
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Network, Check, ArrowRight, Wifi, Server, Shield, Cable, Router } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const beneficios = [
  'Alta performance',
  'Redução de falhas',
  'Wi-Fi corporativo',
  'VLANs',
];

const servicos = [
  { titulo: 'Cabeamento estruturado', descricao: 'Instalação profissional de cabos.', icon: Cable },
  { titulo: 'Configuração de VLANs', descricao: 'Segmentação de rede segura.', icon: Server },
  { titulo: 'Wi-Fi corporativo', descricao: 'Cobertura completa e segura.', icon: Wifi },
  { titulo: 'Switches gerenciáveis', descricao: 'Equipamentos enterprise.', icon: Router },
  { titulo: 'Balanceamento de link', descricao: 'Alta disponibilidade.', icon: Network },
  { titulo: 'Firewall pfSense', descricao: 'Proteção perimetral.', icon: Shield },
];

const diferenciais = [
  'Projetos documentados',
  'Escalabilidade',
  'Integração com segurança',
];

const Redes = () => {
  const heroRef = useRef<HTMLDivElement>(null);
  const servicosRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      const heroItems = heroRef.current?.querySelectorAll('.animate-item');
      if (heroItems?.length) {
        gsap.fromTo(heroItems, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, stagger: 0.1, ease: 'expo.out' });
      }

      const servicoCards = servicosRef.current?.querySelectorAll('.servico-card');
      if (servicoCards?.length) {
        gsap.fromTo(servicoCards, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: 'back.out(1.7)', scrollTrigger: { trigger: servicosRef.current, start: 'top 80%' } });
      }
    });

    return () => ctx.revert();
  }, []);

  return (
    <div className="bg-[#0e0e0e] min-h-screen">
      <SEO
        title="Redes e Infraestrutura de TI"
        description="Projetos de rede cabeada e wireless, switches, roteadores Cisco. Infraestrutura completa de TI para empresas."
      />
      {/* Hero */}
      <section ref={heroRef} className="pt-32 pb-20 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
        <div className="container-custom relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="animate-item flex items-center gap-2 mb-6">
                <Network className="w-5 h-5 text-[#cbf400]" />
                <span className="text-[#cbf400] font-semibold">Serviços</span>
                <span className="text-gray-500">/</span>
                <span className="text-white">Redes</span>
              </div>
              <h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">Infraestrutura de <span className="text-gradient">Redes</span></h1>
              <p className="animate-item text-xl text-gray-400 mb-8 leading-relaxed">Redes seguras, rápidas e escaláveis.</p>
              <div className="animate-item flex flex-wrap gap-4">
                <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20projeto%20de%20rede" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Solicitar projeto<ArrowRight className="w-5 h-5" /></a>
              </div>
            </div>
            <div className="animate-item relative">
              <div className="absolute -inset-4 bg-gradient-to-r from-[#cbf400]/20 to-transparent rounded-2xl blur-2xl" />
              <img src="/service-ti.png" alt="Redes" className="relative w-full h-auto animate-float" />
            </div>
          </div>
        </div>
      </section>

      {/* Benefícios */}
      <section className="py-20 bg-[#1a1a1a]">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Benefícios</h2>
          </div>
          <div className="flex flex-wrap justify-center gap-4">
            {beneficios.map((b, i) => (
              <div key={i} className="flex items-center gap-3 px-6 py-4 bg-[#0e0e0e] rounded-xl border border-white/5">
                <Check className="w-5 h-5 text-[#cbf400]" />
                <span className="text-gray-300">{b}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Serviços */}
      <section ref={servicosRef} className="py-20 bg-[#0e0e0e]">
        <div className="container-custom">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Nossos Serviços</h2>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {servicos.map((s, i) => (
              <div key={i} className="servico-card bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-colors">
                <div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4 text-[#cbf400]"><s.icon className="w-8 h-8" /></div>
                <h4 className="text-lg font-bold text-white mb-2">{s.titulo}</h4>
                <p className="text-gray-400 text-sm">{s.descricao}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Diferenciais */}
      <section className="py-20 bg-[#1a1a1a]">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-black text-white mb-4">Diferenciais</h2>
          </div>
          <div className="flex flex-wrap justify-center gap-4">
            {diferenciais.map((d, i) => (
              <div key={i} className="px-6 py-3 bg-[#0e0e0e] rounded-xl border border-[#cbf400]/20 text-[#cbf400] font-semibold">{d}</div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 bg-[#0e0e0e]">
        <div className="container-custom">
          <div className="bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl p-12 text-center border border-[#cbf400]/20">
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Pronto para sua rede?</h2>
            <p className="text-gray-400 mb-8">Solicite um projeto personalizado.</p>
            <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20projeto%20de%20rede" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Solicitar projeto<ArrowRight className="w-5 h-5" /></a>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Redes;