import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ArrowRight, Server, Cloud, Shield, Headphones, Network, Phone, HardDrive, Cpu, ClipboardCheck, Monitor } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

interface Service {
  id: number;
  title: string;
  description: string;
  image: string;
  icon: React.ReactNode;
  features: string[];
  link: string;
}

const services: Service[] = [
  {
    id: 1,
    title: 'TI Gerenciada',
    description: 'Monitoramento 24/7 de toda sua infraestrutura. Foco no seu negócio enquanto cuidamos da sua tecnologia.',
    image: '/service-ti.png',
    icon: <Server className="w-6 h-6" />,
    features: ['Monitoramento proativo', 'Gestão de infraestrutura', 'Backup automatizado', 'Relatórios mensais'],
    link: '/servicos/ti-gerenciada',
  },
  {
    id: 2,
    title: 'Cloud Computing',
    description: 'Migração e gestão de ambientes em nuvem. Escalabilidade e segurança para seu crescimento.',
    image: '/service-cloud.png',
    icon: <Cloud className="w-6 h-6" />,
    features: ['Migração para nuvem', 'AWS/Azure/GCP', 'Otimização de custos', 'Arquitetura serverless'],
    link: '/servicos/cloud-computing',
  },
  {
    id: 3,
    title: 'Segurança',
    description: 'Proteção contra ameaças digitais. Segurança de ponta a ponta para seus dados e sistemas.',
    image: '/service-security.png',
    icon: <Shield className="w-6 h-6" />,
    features: ['Firewall gerenciado', 'Antivírus corporativo', 'VPN segura', 'Auditoria de segurança'],
    link: '/servicos/seguranca',
  },
  {
    id: 4,
    title: 'Suporte Técnico',
    description: 'Atendimento ágil para seus colaboradores. Resolução rápida de problemas técnicos.',
    image: '/service-support.png',
    icon: <Headphones className="w-6 h-6" />,
    features: ['Help desk 24/7', 'Suporte remoto', 'Atendimento presencial', 'Base de conhecimento'],
    link: '/servicos/suporte',
  },
  {
    id: 5,
    title: 'Infraestrutura de Redes',
    description: 'Redes corporativas seguras, rápidas e escaláveis. Cabeamento e configuração profissional.',
    image: '/service-ti.png',
    icon: <Network className="w-6 h-6" />,
    features: ['Cabeamento estruturado', 'Wi-Fi corporativo', 'VLANs', 'Switches gerenciáveis'],
    link: '/servicos/redes',
  },
  {
    id: 6,
    title: 'PABX em Nuvem',
    description: 'Telefonia IP moderna e econômica. Reduza custos e modernize sua comunicação.',
    image: '/service-support.png',
    icon: <Phone className="w-6 h-6" />,
    features: ['Ramais remotos', 'URA', 'Gravação de chamadas', 'Integração CRM'],
    link: '/servicos/pabx',
  },
  {
    id: 7,
    title: 'Backup Corporativo',
    description: 'Proteção total contra perda de dados. Backup em nuvem e recuperação de desastres.',
    image: '/service-cloud.png',
    icon: <HardDrive className="w-6 h-6" />,
    features: ['Backup automático', 'Proteção ransomware', 'Recuperação rápida', 'DRaaS'],
    link: '/servicos/backup',
  },
  {
    id: 8,
    title: 'Servidores',
    description: 'Implantação e virtualização de servidores. Alta performance e disponibilidade.',
    image: '/service-ti.png',
    icon: <Cpu className="w-6 h-6" />,
    features: ['Virtualização', 'Servidor de arquivos', 'Alta disponibilidade', 'Redução de custos'],
    link: '/servicos/servidores',
  },
  {
    id: 9,
    title: 'Consultoria em TI',
    description: 'Planejamento estratégico tecnológico. Diagnóstico e roadmap para sua empresa.',
    image: '/about-image.jpg',
    icon: <ClipboardCheck className="w-6 h-6" />,
    features: ['Diagnóstico', 'Planejamento', 'Auditoria', 'Roadmap estratégico'],
    link: '/servicos/consultoria',
  },
  {
    id: 10,
    title: 'Monitoramento e NOC',
    description: 'Visibilidade total da sua infraestrutura. Monitoramento 24/7 com alertas em tempo real.',
    image: '/service-ti.png',
    icon: <Monitor className="w-6 h-6" />,
    features: ['Monitoramento 24/7', 'Alertas em tempo real', 'Painéis personalizados', 'Prevenção de falhas'],
    link: '/servicos/noc',
  },
];

const ServiceCard = ({ service }: { service: Service }) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    const x = (e.clientX - rect.left - rect.width / 2) / 20;
    const y = (e.clientY - rect.top - rect.height / 2) / 20;
    setMousePos({ x, y });
  };

  // Gerar caminho WebP com fallback PNG/JPG
  const webpImage = service.image.replace(/\.(png|jpg|jpeg)$/, '.webp');

  return (
    <div
      ref={cardRef}
      className="service-card-border group relative bg-[#1a1a1a] rounded-2xl overflow-hidden shadow-lg cursor-pointer border border-white/5"
      style={{
        transform: isHovered
          ? `perspective(1000px) rotateX(${-mousePos.y}deg) rotateY(${mousePos.x}deg) translateZ(20px)`
          : 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)',
        transition: 'transform 0.3s ease-out',
      }}
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        setMousePos({ x: 0, y: 0 });
      }}
    >
      {/* Image container com WebP + lazy loading */}
      <div className="relative h-48 bg-gradient-to-br from-[#2a2a2a] to-[#1a1a1a] overflow-hidden">
        <picture>
          <source srcSet={webpImage} type="image/webp" />
          <img
            src={service.image}
            alt={service.title}
            loading="lazy"
            width="300"
            height="300"
            className="w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-110"
          />
        </picture>
        
        {/* Icon badge */}
        <div className="absolute top-4 left-4 w-12 h-12 rounded-xl bg-[#0e0e0e] shadow-lg flex items-center justify-center text-[#cbf400] border border-[#cbf400]/20">
          {service.icon}
        </div>

        {/* Gradient overlay on hover */}
        <div className="absolute inset-0 bg-gradient-to-t from-[#cbf400]/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
      </div>

      {/* Content */}
      <div className="p-5">
        <h3 className="text-lg font-bold text-white mb-2 group-hover:text-[#cbf400] transition-colors">
          {service.title}
        </h3>
        <p className="text-gray-400 text-sm mb-4 line-clamp-2">
          {service.description}
        </p>

        {/* Features list */}
        <ul className="space-y-1.5 mb-4">
          {service.features.slice(0, 3).map((feature, i) => (
            <li key={i} className="flex items-center gap-2 text-xs text-gray-300">
              <span className="w-1.5 h-1.5 rounded-full bg-[#cbf400]" />
              {feature}
            </li>
          ))}
        </ul>

        {/* CTA */}
        <a
          href={service.link}
          className="inline-flex items-center gap-2 text-[#cbf400] font-semibold text-sm group/link"
        >
          Saiba mais
          <ArrowRight className="w-4 h-4 transition-transform group-hover/link:translate-x-1" />
        </a>
      </div>

      {/* Glow border effect */}
      <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
        <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#cbf400]/20 via-[#cbf400]/10 to-[#cbf400]/20 blur-sm" />
      </div>
    </div>
  );
};

const Services = () => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const cardsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(
        titleRef.current,
        { y: 50, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.8,
          ease: 'expo.out',
          scrollTrigger: {
            trigger: titleRef.current,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      const cards = cardsRef.current?.querySelectorAll('.service-card-border');
      if (cards) {
        gsap.fromTo(
          cards,
          { y: 100, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.8,
            stagger: 0.08,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: cardsRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  return (
    <section
      id="services"
      ref={sectionRef}
      className="section-padding bg-[#0e0e0e] relative overflow-hidden"
    >
      {/* Background decoration */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-[#cbf400]/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
      <div className="absolute bottom-0 left-0 w-96 h-96 bg-[#cbf400]/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2" />

      <div className="container-custom relative z-10">
        {/* Section header */}
        <div ref={titleRef} className="text-center max-w-2xl mx-auto mb-16">
          <span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
            Nossas Soluções
          </span>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">
            Serviços completos em{' '}
            <span className="text-gradient">Tecnologia</span>
          </h2>
          <p className="text-gray-400 text-lg">
            Oferecemos soluções integradas para transformar a infraestrutura de TI da sua empresa
            em um diferencial competitivo.
          </p>
        </div>

        {/* Services grid */}
        <div
          ref={cardsRef}
          className="grid md:grid-cols-2 lg:grid-cols-5 gap-5"
        >
          {services.map((service) => (
            <ServiceCard key={service.id} service={service} />
          ))}
        </div>

        {/* Bottom CTA */}
        <div className="text-center mt-12">
          <p className="text-gray-400 mb-4">
            Precisa de uma solução personalizada?
          </p>
          <a
            href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20uma%20solução%20personalizada"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-primary inline-flex items-center gap-2"
          >
            Fale com um consultor
            <ArrowRight className="w-5 h-5" />
          </a>
        </div>
      </div>
    </section>
  );
};

export default Services;