import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ArrowRight, Server, Shield, Cloud, Cpu, Phone, Database, Check } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const tecnologias = [
  {
    categoria: "Sistemas Operacionais",
    icone: <Server className="w-8 h-8" />,
    items: [
      { nome: "Windows Server", desc: "Active Directory, GPO, RDS, File Server", link: "/suporte-windows-server" },
      { nome: "Linux", desc: "Ubuntu, Debian, CentOS, servidores web", link: "/suporte-linux-empresas" },
      { nome: "macOS", desc: "Ambientes Apple corporativos", link: "#" },
    ]
  },
  {
    categoria: "Firewall e Redes",
    icone: <Shield className="w-8 h-8" />,
    items: [
      { nome: "pfSense", desc: "VPN, Multi-WAN, Balanceamento, VLAN", link: "/suporte-pfsense" },
      { nome: "Cisco", desc: "Switches, VLANs, Redes corporativas", link: "/suporte-redes-cisco" },
    ]
  },
  {
    categoria: "Virtualização",
    icone: <Cpu className="w-8 h-8" />,
    items: [
      { nome: "Proxmox", desc: "Cluster, Backup, Alta disponibilidade", link: "/suporte-proxmox" },
      { nome: "VMware", desc: "ESXi, vSphere, vCenter", link: "/suporte-vmware" },
    ]
  },
  {
    categoria: "Microsoft 365",
    icone: <Cloud className="w-8 h-8" />,
    items: [
      { nome: "SharePoint", desc: "Online, Migração, Permissões", link: "/suporte-sharepoint" },
      { nome: "Exchange", desc: "Email corporativo, Migração", link: "#" },
      { nome: "Teams", desc: "Colaboração, Telefonia", link: "#" },
    ]
  },
  {
    categoria: "Backup e Monitoramento",
    icone: <Database className="w-8 h-8" />,
    items: [
      { nome: "Veeam", desc: "Backup corporativo, Replicação", link: "#" },
      { nome: "Zabbix", desc: "Monitoramento de infraestrutura", link: "#" },
    ]
  },
  {
    categoria: "VoIP e Telefonia",
    icone: <Phone className="w-8 h-8" />,
    items: [
      { nome: "Asterisk", desc: "PABX IP, Call Center", link: "#" },
      { nome: "FusionPBX", desc: "Telefonia corporativa", link: "#" },
    ]
  },
];

const problemasComuns = [
  "Erro no SharePoint?",
  "Servidor Windows lento?",
  "Problema no Active Directory?",
  "VPN não conecta?",
  "Backup falhando?",
  "Rede instável?",
];

const Tecnologias = () => {
  const heroRef = useRef<HTMLDivElement>(null);
  const cardsRef = 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 cards = cardsRef.current?.querySelectorAll('.tech-card');
      if (cards?.length) {
        gsap.fromTo(cards, { y: 60, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: 'back.out(1.7)', scrollTrigger: { trigger: cardsRef.current, start: 'top 80%' } });
      }
    });

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

  // Schema.org para SEO
  const schemaData = {
    "@context": "https://schema.org",
    "@type": "ItemList",
    "name": "Tecnologias que a Avanzato trabalha",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "item": { "@type": "Technology", "name": "Windows Server" } },
      { "@type": "ListItem", "position": 2, "item": { "@type": "Technology", "name": "Linux" } },
      { "@type": "ListItem", "position": 3, "item": { "@type": "Technology", "name": "pfSense" } },
      { "@type": "ListItem", "position": 4, "item": { "@type": "Technology", "name": "Proxmox" } },
      { "@type": "ListItem", "position": 5, "item": { "@type": "Technology", "name": "VMware" } },
      { "@type": "ListItem", "position": 6, "item": { "@type": "Technology", "name": "SharePoint" } },
      { "@type": "ListItem", "position": 7, "item": { "@type": "Technology", "name": "Cisco" } },
    ]
  };

  return (
    <div className="bg-[#0e0e0e] min-h-screen">
      {/* Schema.org JSON-LD */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }} />

      {/* 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="text-center max-w-3xl mx-auto">
            <span className="animate-item inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-6 border border-[#cbf400]/20">
              Especialistas Certificados
            </span>
            <h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">
              Tecnologias que <span className="text-gradient">dominamos</span>
            </h1>
            <p className="animate-item text-xl text-gray-400 mb-8">
              Suporte especializado nas principais plataformas utilizadas por empresas.
            </p>
            
            {/* Problemas comuns */}
            <div className="animate-item flex flex-wrap justify-center gap-3">
              {problemasComuns.map((p, i) => (
                <span key={i} className="px-4 py-2 bg-[#1a1a1a] rounded-full text-gray-400 text-sm border border-white/5">
                  {p}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Tecnologias Grid */}
      <section ref={cardsRef} className="py-20">
        <div className="container-custom">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {tecnologias.map((tech, i) => (
              <div key={i} className="tech-card bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center text-[#cbf400]">
                    {tech.icone}
                  </div>
                  <h3 className="text-xl font-bold text-white">{tech.categoria}</h3>
                </div>
                <div className="space-y-4">
                  {tech.items.map((item, j) => (
                    <a 
                      key={j} 
                      href={item.link}
                      className="block p-4 bg-[#0e0e0e] rounded-xl hover:bg-[#cbf400]/5 transition-colors group"
                    >
                      <div className="flex items-center justify-between">
                        <div>
                          <h4 className="text-white font-semibold group-hover:text-[#cbf400] transition-colors">{item.nome}</h4>
                          <p className="text-gray-500 text-sm">{item.desc}</p>
                        </div>
                        <ArrowRight className="w-5 h-5 text-gray-600 group-hover:text-[#cbf400] transition-colors" />
                      </div>
                    </a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <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">
              Precisa de suporte em alguma dessas tecnologias?
            </h2>
            <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
              Nossa equipe de especialistas está pronta para ajudar. Atendimento rápido e eficiente.
            </p>
            <div className="flex flex-wrap justify-center gap-4">
              <a 
                href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Preciso%20de%20suporte%20técnico" 
                target="_blank" 
                rel="noopener noreferrer" 
                className="btn-primary inline-flex items-center gap-2"
              >
                Falar com especialista
                <ArrowRight className="w-5 h-5" />
              </a>
              <a href="/contato" className="btn-secondary">Solicitar orçamento</a>
            </div>
          </div>
        </div>
      </section>

      {/* Por que escolher */}
      <section className="py-20">
        <div className="container-custom">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">
              Por que escolher a <span className="text-gradient">Avanzato</span>?
            </h2>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              { titulo: "Atendimento Rápido", desc: "Resposta em até 15 minutos" },
              { titulo: "Especialistas Certificados", desc: "Equipe qualificada em diversas tecnologias" },
              { titulo: "Suporte 24/7", desc: "Disponível quando você precisar" },
              { titulo: "Garantia de Serviço", desc: "SLA com tempo de resposta" },
            ].map((item, i) => (
              <div key={i} className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 text-center">
                <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mx-auto mb-4">
                  <Check className="w-6 h-6 text-[#cbf400]" />
                </div>
                <h3 className="text-white font-bold mb-2">{item.titulo}</h3>
                <p className="text-gray-400 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default Tecnologias;
