import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Target, Eye, Heart, Award, Users, TrendingUp, Shield, Clock } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const valores = [
  {
    icon: <Target className="w-8 h-8" />,
    titulo: 'Foco em Resultados',
    descricao: 'Não vendemos tecnologia, entregamos resultados mensuráveis para seu negócio.',
  },
  {
    icon: <Heart className="w-8 h-8" />,
    titulo: 'Parceria de Verdade',
    descricao: 'Tratamos cada cliente como parceiro, com atendimento próximo e personalizado.',
  },
  {
    icon: <Shield className="w-8 h-8" />,
    titulo: 'Confiança',
    descricao: 'Transparência total em todos os processos e relatórios.',
  },
  {
    icon: <TrendingUp className="w-8 h-8" />,
    titulo: 'Inovação Constante',
    descricao: 'Sempre atualizados com as últimas tecnologias do mercado.',
  },
];

const timeline = [
  {
    ano: '2001',
    titulo: 'Fundação',
    descricao: 'A Avanzato nasceu com a missão de simplificar a tecnologia para empresas.',
  },
  {
    ano: '2008',
    titulo: 'Expansão',
    descricao: 'Crescimento para atender médias e grandes empresas em toda a Grande São Paulo.',
  },
  {
    ano: '2015',
    titulo: 'Cloud First',
    descricao: 'Pioneiros em migração para nuvem no mercado brasileiro.',
  },
  {
    ano: '2020',
    titulo: 'Segurança Avançada',
    descricao: 'Lançamento de serviços de cibersegurança de última geração.',
  },
  {
    ano: '2024',
    titulo: '+23 Anos',
    descricao: 'Mais de duas décadas transformando a TI de centenas de empresas.',
  },
];

const equipe = [
  {
    nome: 'Carlos Silva',
    cargo: 'CEO & Fundador',
    imagem: '/avatar-1.jpg',
  },
  {
    nome: 'Ana Paula Mendes',
    cargo: 'Diretora de Operações',
    imagem: '/avatar-2.jpg',
  },
  {
    nome: 'Ricardo Oliveira',
    cargo: 'CTO',
    imagem: '/avatar-1.jpg',
  },
  {
    nome: 'Mariana Costa',
    cargo: 'Gerente de Projetos',
    imagem: '/avatar-2.jpg',
  },
];

const certificacoes = [
  'Microsoft Gold Partner',
  'AWS Advanced Consulting Partner',
  'Cisco Certified Partner',
  'VMware Professional Partner',
  'Fortinet Partner',
  'Veeam ProPartner',
];

const Sobre = () => {
  const heroRef = useRef<HTMLDivElement>(null);
  const valoresRef = useRef<HTMLDivElement>(null);
  const timelineRef = useRef<HTMLDivElement>(null);
  const equipeRef = useRef<HTMLDivElement>(null);

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

      // Valores animation
      const valorCards = valoresRef.current?.querySelectorAll('.valor-card');
      if (valorCards && valorCards.length > 0) {
        gsap.fromTo(
          valorCards,
          { y: 50, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.6,
            stagger: 0.1,
            ease: 'back.out(1.7)',
            scrollTrigger: {
              trigger: valoresRef.current,
              start: 'top 80%',
            },
          }
        );
      }

      // Timeline animation
      const timelineItems = timelineRef.current?.querySelectorAll('.timeline-item');
      if (timelineItems && timelineItems.length > 0) {
        gsap.fromTo(
          timelineItems,
          { x: -50, opacity: 0 },
          {
            x: 0,
            opacity: 1,
            duration: 0.6,
            stagger: 0.15,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: timelineRef.current,
              start: 'top 80%',
            },
          }
        );
      }

      // Equipe animation
      const membroCards = equipeRef.current?.querySelectorAll('.membro-card');
      if (membroCards && membroCards.length > 0) {
        gsap.fromTo(
          membroCards,
          { y: 50, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.6,
            stagger: 0.1,
            ease: 'back.out(1.7)',
            scrollTrigger: {
              trigger: equipeRef.current,
              start: 'top 80%',
            },
          }
        );
      }
    });

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

  return (
    <div className="bg-[#0e0e0e] min-h-screen">
      {/* Hero Section */}
      <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="max-w-4xl">
            <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">
              Sobre Nós
            </span>
            
            <h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">
              Transformando a <span className="text-gradient">TI</span> em vantagem competitiva
            </h1>
            
            <p className="animate-item text-xl text-gray-400 mb-8 leading-relaxed">
              Há mais de 23 anos, a Avanzato Tecnologia é referência em soluções de TI Gerenciada, 
              Cloud Computing e Segurança da Informação. Nossa missão é capacitar empresas de todos 
              os tamanhos a alcançarem seus objetivos através da tecnologia.
            </p>
            
            <div className="animate-item flex flex-wrap gap-8">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center border border-[#cbf400]/20">
                  <Award className="w-6 h-6 text-[#cbf400]" />
                </div>
                <div>
                  <div className="text-2xl font-black text-white">+500</div>
                  <div className="text-sm text-gray-500">Clientes atendidos</div>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center border border-[#cbf400]/20">
                  <Users className="w-6 h-6 text-[#cbf400]" />
                </div>
                <div>
                  <div className="text-2xl font-black text-white">+50</div>
                  <div className="text-sm text-gray-500">Colaboradores</div>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center border border-[#cbf400]/20">
                  <Clock className="w-6 h-6 text-[#cbf400]" />
                </div>
                <div>
                  <div className="text-2xl font-black text-white">24/7</div>
                  <div className="text-sm text-gray-500">Suporte técnico</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Missão, Visão, Valores */}
      <section ref={valoresRef} className="py-20 bg-[#1a1a1a]">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 mb-20">
            {/* Missão */}
            <div className="valor-card bg-[#0e0e0e] rounded-2xl p-8 border border-white/5">
              <div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-6 border border-[#cbf400]/20">
                <Target className="w-7 h-7 text-[#cbf400]" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">Missão</h3>
              <p className="text-gray-400 leading-relaxed">
                Capacitar empresas de todos os tamanhos a alcançarem seus objetivos, 
                assegurando que a TI seja uma aliada estratégica e não um obstáculo.
              </p>
            </div>
            
            {/* Visão */}
            <div className="valor-card bg-[#0e0e0e] rounded-2xl p-8 border border-white/5">
              <div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-6 border border-[#cbf400]/20">
                <Eye className="w-7 h-7 text-[#cbf400]" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">Visão</h3>
              <p className="text-gray-400 leading-relaxed">
                Ser reconhecida como a melhor empresa de TI Gerenciada do Brasil, 
                referência em inovação, qualidade e relacionamento com clientes.
              </p>
            </div>
          </div>
          
          {/* Valores */}
          <div className="text-center mb-12">
            <h2 className="text-3xl font-black text-white mb-4">Nossos Valores</h2>
            <p className="text-gray-400">Princípios que guiam cada decisão</p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {valores.map((valor, index) => (
              <div key={index} className="valor-card bg-[#0e0e0e] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-colors">
                <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4 text-[#cbf400]">
                  {valor.icon}
                </div>
                <h4 className="text-lg font-bold text-white mb-2">{valor.titulo}</h4>
                <p className="text-sm text-gray-400">{valor.descricao}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section ref={timelineRef} className="py-20 bg-[#0e0e0e]">
        <div className="container-custom">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-black text-white mb-4">Nossa História</h2>
            <p className="text-gray-400">Mais de duas décadas de evolução</p>
          </div>
          
          <div className="relative">
            {/* Linha vertical */}
            <div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-px bg-[#cbf400]/20 md:-translate-x-px" />
            
            <div className="space-y-12">
              {timeline.map((item, index) => (
                <div key={index} className={`timeline-item relative flex items-center ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'}`}>
                  {/* Conteúdo */}
                  <div className={`ml-12 md:ml-0 md:w-1/2 ${index % 2 === 0 ? 'md:pr-12 md:text-right' : 'md:pl-12'}`}>
                    <div className="bg-[#1a1a1a] rounded-xl p-6 border border-white/5">
                      <span className="text-[#cbf400] font-black text-2xl">{item.ano}</span>
                      <h4 className="text-white font-bold text-lg mt-2">{item.titulo}</h4>
                      <p className="text-gray-400 text-sm mt-2">{item.descricao}</p>
                    </div>
                  </div>
                  
                  {/* Ponto na linha */}
                  <div className="absolute left-4 md:left-1/2 w-4 h-4 rounded-full bg-[#cbf400] border-4 border-[#0e0e0e] md:-translate-x-1/2" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Certificações */}
      <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">Certificações</h2>
            <p className="text-gray-400">Parcerias que garantem excelência</p>
          </div>
          
          <div className="flex flex-wrap justify-center gap-4">
            {certificacoes.map((cert, index) => (
              <div key={index} className="px-6 py-3 bg-[#0e0e0e] rounded-full border border-[#cbf400]/20 text-[#cbf400] font-medium">
                {cert}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Equipe */}
      <section ref={equipeRef} className="py-20 bg-[#0e0e0e]">
        <div className="container-custom">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-black text-white mb-4">Nossa Equipe</h2>
            <p className="text-gray-400">Profissionais dedicados ao seu sucesso</p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {equipe.map((membro, index) => (
              <div key={index} className="membro-card bg-[#1a1a1a] rounded-2xl overflow-hidden border border-white/5 group">
                <div className="aspect-square overflow-hidden">
                  <img
                    src={membro.imagem}
                    alt={membro.nome}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                </div>
                <div className="p-6">
                  <h4 className="text-white font-bold text-lg">{membro.nome}</h4>
                  <p className="text-[#cbf400] text-sm">{membro.cargo}</p>
                </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">
              Pronto para transformar sua TI?
            </h2>
            <p className="text-gray-400 mb-8 max-w-2xl mx-auto">
              Entre em contato conosco e descubra como podemos ajudar sua empresa a crescer.
            </p>
            <a
              href="/contato"
              className="btn-primary inline-flex items-center gap-2"
            >
              Fale com um especialista
            </a>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Sobre;
