import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Headphones, Check, ArrowRight, Clock, MessageSquare, Monitor, Phone, Users, Wrench } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const beneficios = [
  'Atendimento rápido',
  'Chamados ilimitados',
  'SLA garantido',
];

const canais = [
  { icon: Phone, titulo: 'Telefone', descricao: '0800 para chamados', tempo: 'Imediato' },
  { icon: MessageSquare, titulo: 'Chat', descricao: 'Atendimento real', tempo: '< 5 min' },
  { icon: Monitor, titulo: 'Remoto', descricao: 'Acesso seguro', tempo: '< 15 min' },
  { icon: Users, titulo: 'Presencial', descricao: 'Técnico no local', tempo: '4-24h' },
];

const niveis = [
  { nome: 'N1 - Básico', descricao: 'Primeiro atendimento', exemplos: ['Reset de senha', 'Instalação de software'] },
  { nome: 'N2 - Intermediário', descricao: 'Problemas complexos', exemplos: ['Configuração de rede', 'Problemas de impressão'] },
  { nome: 'N3 - Avançado', descricao: 'Especialistas', exemplos: ['Servidores', 'Active Directory'] },
];

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

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

  return (
    <div className="bg-[#0e0e0e] min-h-screen">
      {/* 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">
                <Headphones 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">Suporte</span>
              </div>
              <h1 className="animate-item text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6">Suporte <span className="text-gradient">24/7</span></h1>
              <p className="animate-item text-xl text-gray-400 mb-8 leading-relaxed">Atendimento ágil e eficiente.</p>
              <div className="animate-item flex flex-wrap gap-4">
                <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Gostaria%20de%20suporte" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Contratar suporte<ArrowRight className="w-5 h-5" /></a>
                <a href="tel:+551148101704" className="btn-secondary">Ligar agora</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-support.png" alt="Suporte" className="relative w-full h-auto animate-float" />
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-12 bg-[#1a1a1a] border-y border-white/5">
        <div className="container-custom">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            {[{ valor: '15min', label: 'resposta' }, { valor: '98%', label: 'resolução' }, { valor: '4.9/5', label: 'satisfação' }, { valor: '24/7', label: 'disponível' }].map((s, i) => (
              <div key={i}>
                <div className="text-4xl font-black text-[#cbf400] mb-1">{s.valor}</div>
                <p className="text-gray-500 text-sm">{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefícios */}
      <section className="py-20 bg-[#0e0e0e]">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-black text-white mb-6">Por que ter <span className="text-gradient">suporte</span>?</h2>
              <div className="space-y-4">
                {beneficios.map((b, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className="w-6 h-6 rounded-full bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0"><Check className="w-4 h-4 text-[#cbf400]" /></div>
                    <span className="text-gray-300">{b}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-white/5">
              <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"><Clock className="w-7 h-7 text-[#cbf400]" /></div>
                <div>
                  <div className="text-white font-bold">SLA Garantido</div>
                  <div className="text-gray-400 text-sm">Compromisso de atendimento</div>
                </div>
              </div>
              <div className="space-y-4">
                {[{ t: 'Críticos', v: '15 min' }, { t: 'Normais', v: '1 hora' }, { t: 'Baixos', v: '4 horas' }].map((s, i) => (
                  <div key={i} className="flex justify-between items-center py-3 border-b border-white/5 last:border-0">
                    <span className="text-gray-400">{s.t}</span>
                    <span className="text-[#cbf400] font-bold">{s.v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Canais */}
      <section ref={canaisRef} className="py-20 bg-[#1a1a1a]">
        <div className="container-custom">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-black text-white mb-4">Canais de Atendimento</h2>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {canais.map((c, i) => (
              <div key={i} className="canal-card bg-[#0e0e0e] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-colors text-center">
                <div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mx-auto mb-4 text-[#cbf400]"><c.icon className="w-8 h-8" /></div>
                <h4 className="text-lg font-bold text-white mb-2">{c.titulo}</h4>
                <p className="text-gray-400 text-sm mb-4">{c.descricao}</p>
                <div className="inline-flex items-center gap-2 px-3 py-1 bg-[#cbf400]/10 rounded-full"><span className="text-[#cbf400] text-sm font-medium">{c.tempo}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Níveis */}
      <section 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">Níveis de Suporte</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {niveis.map((n, i) => (
              <div key={i} className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 rounded-lg bg-[#cbf400]/10 flex items-center justify-center"><Wrench className="w-5 h-5 text-[#cbf400]" /></div>
                  <h4 className="text-lg font-bold text-white">{n.nome}</h4>
                </div>
                <p className="text-gray-400 text-sm mb-4">{n.descricao}</p>
                <ul className="space-y-2">
                  {n.exemplos.map((e, j) => (
                    <li key={j} className="flex items-center gap-2 text-sm text-gray-300"><Check className="w-4 h-4 text-[#cbf400]" />{e}</li>
                  ))}
                </ul>
              </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">Experimente nosso suporte</h2>
            <p className="text-gray-400 mb-8">30 dias de teste gratuito.</p>
            <div className="flex flex-wrap justify-center gap-4">
              <a href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Quero%20testar%20suporte" target="_blank" rel="noopener noreferrer" className="btn-primary inline-flex items-center gap-2">Testar grátis<ArrowRight className="w-5 h-5" /></a>
              <a href="tel:+551148101704" className="btn-secondary">Ligar</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Suporte;
