import SEO from '../../components/SEO';
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ArrowRight, Shield, Check, AlertTriangle, Lock, Globe, Zap, Network } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const problemas = [
  "VPN não conecta",
  "Internet lenta ou instável",
  "Balanceamento não funciona",
  "Regras de firewall bloqueando",
  "VLANs não comunicam",
  "Falta de alta disponibilidade",
];

const servicos = [
  {
    titulo: "VPN",
    desc: "OpenVPN, IPsec, WireGuard - configuração segura de acesso remoto.",
    icon: <Lock className="w-6 h-6" />
  },
  {
    titulo: "Multi-WAN",
    desc: "Balanceamento de links e failover automático para máxima disponibilidade.",
    icon: <Network className="w-6 h-6" />
  },
  {
    titulo: "Firewall",
    desc: "Regras avançadas, NAT, port forwarding e segurança de rede.",
    icon: <Shield className="w-6 h-6" />
  },
  {
    titulo: "VLAN",
    desc: "Segmentação de rede para maior segurança e organização.",
    icon: <Globe className="w-6 h-6" />
  },
  {
    titulo: "Alta Disponibilidade",
    desc: "CARP e sincronização para redundância de firewalls.",
    icon: <Zap className="w-6 h-6" />
  },
  {
    titulo: "Proxy e Filtros",
    desc: "Squid, SquidGuard, pfBlockerNG para controle de acesso.",
    icon: <Check className="w-6 h-6" />
  },
];

const PfSense = () => {
  const heroRef = useRef<HTMLDivElement>(null);
  const contentRef = 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 contentItems = contentRef.current?.querySelectorAll('.content-item');
      if (contentItems?.length) {
        gsap.fromTo(contentItems, { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: 'expo.out', scrollTrigger: { trigger: contentRef.current, start: 'top 80%' } });
      }
    });

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

  const schemaData = {
    "@context": "https://schema.org",
    "@type": "Service",
    "name": "Suporte pfSense",
    "description": "Especialistas em pfSense - VPN, firewall, balanceamento de links e alta disponibilidade",
    "provider": { "@type": "Organization", "name": "Avanzato Consultoria" }
  };

  return (
    <div className="bg-[#0e0e0e] min-h-screen">
      <SEO
        title="Suporte pfSense e OPNsense"
        description="Configuracao e suporte pfSense/OPNsense: firewall, VPN, load balancing, HA, multi-WAN. Especialistas certificados."
      />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} />

      <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">
                <Shield className="w-5 h-5 text-[#cbf400]" />
                <span className="text-[#cbf400] font-semibold">Tecnologias</span>
                <span className="text-gray-500">/</span>
                <span className="text-white">pfSense</span>
              </div>
              <h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">
                Especialistas em <span className="text-gradient">pfSense</span>
              </h1>
              <p className="animate-item text-xl text-gray-400 mb-8">
                Configuração e suporte de firewalls pfSense. VPN, balanceamento de links, VLANs e alta disponibilidade para sua rede.
              </p>
              <div className="animate-item flex flex-wrap gap-4">
                <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Preciso%20de%20suporte%20pfSense" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">
                  Solicitar suporte<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" />
              <div className="relative bg-[#1a1a1a] rounded-2xl p-8 border border-white/5">
                <AlertTriangle className="w-10 h-10 text-[#cbf400] mb-4" />
                <h3 className="text-xl font-bold text-white mb-4">Problemas que resolvemos:</h3>
                <ul className="space-y-3">
                  {problemas.map((p, i) => (
                    <li key={i} className="flex items-center gap-3 text-gray-300">
                      <span className="w-2 h-2 rounded-full bg-[#cbf400]" />{p}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section ref={contentRef} className="py-20">
        <div className="container-custom">
          <h2 className="content-item text-3xl md:text-4xl font-black text-white text-center mb-12">
            Nossos <span className="text-gradient">Serviços</span>
          </h2>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {servicos.map((s, i) => (
              <div key={i} className="content-item bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all">
                <div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center text-[#cbf400] mb-4">{s.icon}</div>
                <h3 className="text-xl font-bold text-white mb-3">{s.titulo}</h3>
                <p className="text-gray-400">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-[#1a1a1a]">
        <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">Firewall com problema?</h2>
            <p className="text-gray-400 mb-8 max-w-2xl mx-auto">Nossa equipe é especialista em pfSense e resolve qualquer problema rapidamente.</p>
            <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Tenho%20problema%20no%20pfSense" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">
              Falar com especialista<ArrowRight className="w-5 h-5" />
            </a>
          </div>
        </div>
      </section>
    </div>
  );
};

export default PfSense;