import { useEffect, useRef } from 'react';
import { useParams, Link } from 'react-router-dom';
import { gsap } from 'gsap';
import { Calendar, Clock, User, ArrowLeft, Share2, Facebook, Linkedin, Twitter } from 'lucide-react';

const posts = {
  'ransomware-como-proteger-sua-empresa': {
    titulo: 'Ransomware: Como proteger sua empresa em 2024',
    categoria: 'Segurança',
    autor: 'Carlos Silva',
    data: '15 Jan 2024',
    tempoLeitura: '8 min',
    imagem: '/hero-dashboard.jpg',
    conteudo: `
      <p>O ransomware se tornou uma das maiores ameaças cibernéticas para empresas de todos os tamanhos. Em 2023, os ataques aumentaram em 93%, causando prejuízos bilionários ao redor do mundo.</p>
      
      <h2>O que é Ransomware?</h2>
      <p>Ransomware é um tipo de malware que criptografa os arquivos de uma vítima e exige pagamento de resgate para restaurar o acesso. Os atacantes geralmente exigem pagamento em criptomoedas, dificultando o rastreamento.</p>
      
      <h2>Como se proteger?</h2>
      <p>Existem várias medidas que sua empresa pode adotar para se proteger contra ransomware:</p>
      
      <h3>1. Backup Regular</h3>
      <p>Mantenha backups atualizados e armazenados offline. A regra 3-2-1 é fundamental: 3 cópias, 2 tipos de mídia diferentes, 1 cópia offsite.</p>
      
      <h3>2. Treinamento de Funcionários</h3>
      <p>90% dos ataques começam com phishing. Treine sua equipe para identificar emails suspeitos e nunca clicar em links desconhecidos.</p>
      
      <h3>3. Antivírus e Firewall</h3>
      <p>Mantenha seus sistemas de segurança sempre atualizados. Use soluções de endpoint protection modernas.</p>
      
      <h3>4. Segmentação de Rede</h3>
      <p>Isolamento de sistemas críticos pode impedir que o ransomware se espalhe pela rede inteira.</p>
      
      <h2>O que fazer se for atacado?</h2>
      <p>Se sua empresa for vítima de ransomware:</p>
      <ul>
        <li>Desconecte os sistemas infectados imediatamente</li>
        <li>Não pague o resgate (não há garantia de recuperação)</li>
        <li>Entre em contato com especialistas em segurança</li>
        <li>Restaure a partir de backups limpos</li>
        <li>Notifique as autoridades competentes</li>
      </ul>
      
      <h2>Conclusão</h2>
      <p>A melhor defesa contra ransomware é a prevenção. Invista em segurança da informação, mantenha backups atualizados e eduque seus colaboradores. A Avanzato oferece soluções completas de proteção contra ransomware.</p>
    `,
  },
};

const BlogPost = () => {
  const { slug } = useParams<{ slug: string }>();
  const contentRef = useRef<HTMLDivElement>(null);
  
  const post = slug ? posts[slug as keyof typeof posts] : null;

  useEffect(() => {
    if (contentRef.current) {
      gsap.fromTo(
        contentRef.current.querySelectorAll('h2, h3, p, ul, li'),
        { y: 20, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.5,
          stagger: 0.05,
          ease: 'expo.out',
        }
      );
    }
  }, [slug]);

  if (!post) {
    return (
      <div className="bg-[#0e0e0e] min-h-screen pt-32">
        <div className="container-custom text-center">
          <h1 className="text-4xl font-black text-white mb-4">Artigo não encontrado</h1>
          <p className="text-gray-400 mb-8">O artigo que você procura não existe ou foi removido.</p>
          <Link to="/blog" className="btn-primary inline-flex items-center gap-2">
            <ArrowLeft className="w-5 h-5" />
            Voltar para o blog
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-[#0e0e0e] min-h-screen">
      {/* Header */}
      <section className="pt-32 pb-12 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">
          <Link
            to="/blog"
            className="inline-flex items-center gap-2 text-gray-400 hover:text-[#cbf400] transition-colors mb-6"
          >
            <ArrowLeft className="w-5 h-5" />
            Voltar para o blog
          </Link>
          
          <div className="max-w-4xl">
            <div className="flex items-center gap-4 mb-6">
              <span className="px-3 py-1 bg-[#cbf400]/10 text-[#cbf400] text-sm font-medium rounded-full">
                {post.categoria}
              </span>
              <span className="text-gray-500 text-sm flex items-center gap-1">
                <Calendar className="w-4 h-4" />
                {post.data}
              </span>
              <span className="text-gray-500 text-sm flex items-center gap-1">
                <Clock className="w-4 h-4" />
                {post.tempoLeitura}
              </span>
            </div>
            
            <h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
              {post.titulo}
            </h1>
            
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-full bg-[#cbf400]/10 flex items-center justify-center">
                <User className="w-6 h-6 text-[#cbf400]" />
              </div>
              <div>
                <div className="text-white font-medium">{post.autor}</div>
                <div className="text-gray-500 text-sm">Especialista em TI</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Imagem Destaque */}
      <section className="pb-12">
        <div className="container-custom">
          <div className="aspect-video rounded-2xl overflow-hidden">
            <img
              src={post.imagem}
              alt={post.titulo}
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </section>

      {/* Conteúdo */}
      <section className="py-12">
        <div className="container-custom">
          <div className="grid lg:grid-cols-4 gap-12">
            {/* Sidebar - Compartilhar */}
            <div className="lg:col-span-1">
              <div className="sticky top-32">
                <h3 className="text-white font-bold mb-4 flex items-center gap-2">
                  <Share2 className="w-5 h-5" />
                  Compartilhar
                </h3>
                <div className="flex flex-col gap-3">
                  <a
                    href={`https://facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 px-4 py-3 bg-[#1a1a1a] rounded-lg text-gray-400 hover:text-white hover:bg-[#1877f2] transition-colors"
                  >
                    <Facebook className="w-5 h-5" />
                    Facebook
                  </a>
                  <a
                    href={`https://twitter.com/intent/tweet?url=${encodeURIComponent(window.location.href)}&text=${encodeURIComponent(post.titulo)}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 px-4 py-3 bg-[#1a1a1a] rounded-lg text-gray-400 hover:text-white hover:bg-[#1da1f2] transition-colors"
                  >
                    <Twitter className="w-5 h-5" />
                    Twitter
                  </a>
                  <a
                    href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(window.location.href)}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center gap-3 px-4 py-3 bg-[#1a1a1a] rounded-lg text-gray-400 hover:text-white hover:bg-[#0a66c2] transition-colors"
                  >
                    <Linkedin className="w-5 h-5" />
                    LinkedIn
                  </a>
                </div>
              </div>
            </div>
            
            {/* Conteúdo Principal */}
            <div className="lg:col-span-3">
              <div
                ref={contentRef}
                className="prose prose-invert prose-lg max-w-none"
                dangerouslySetInnerHTML={{ __html: post.conteudo }}
              />
              
              {/* CTA */}
              <div className="mt-12 p-8 bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl border border-[#cbf400]/20">
                <h3 className="text-2xl font-bold text-white mb-4">
                  Precisa de ajuda com segurança?
                </h3>
                <p className="text-gray-400 mb-6">
                  Nossa equipe de especialistas pode ajudar a proteger sua empresa contra ransomware e outras ameaças cibernéticas.
                </p>
                <a
                  href="https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Li%20o%20artigo%20sobre%20ransomware%20e%20gostaria%20de%20saber%20mais%20sobre%20segurança"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn-primary inline-flex items-center gap-2"
                >
                  Falar com especialista
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Posts Relacionados */}
      <section className="py-20 bg-[#1a1a1a]">
        <div className="container-custom">
          <h2 className="text-2xl font-bold text-white mb-8">Artigos relacionados</h2>
          
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                titulo: 'LGPD: O que mudou em 2024',
                categoria: 'Compliance',
                imagem: '/service-security.png',
                slug: 'lgpd-o-que-mudou-em-2024',
              },
              {
                titulo: 'Backup 3-2-1: A regra de ouro',
                categoria: 'Backup',
                imagem: '/service-support.png',
                slug: 'backup-3-2-1-regra-de-ouro',
              },
              {
                titulo: '5 sinais de que sua TI precisa de ajuda',
                categoria: 'TI Gerenciada',
                imagem: '/service-ti.png',
                slug: '5-sinais-de-que-sua-ti-precisa-de-ajuda',
              },
            ].map((relacionado, index) => (
              <Link
                key={index}
                to={`/blog/${relacionado.slug}`}
                className="group bg-[#0e0e0e] rounded-2xl overflow-hidden border border-white/5 hover:border-[#cbf400]/30 transition-colors"
              >
                <div className="aspect-video overflow-hidden">
                  <img
                    src={relacionado.imagem}
                    alt={relacionado.titulo}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                </div>
                <div className="p-4">
                  <span className="text-[#cbf400] text-sm">{relacionado.categoria}</span>
                  <h4 className="text-white font-bold mt-1 group-hover:text-[#cbf400] transition-colors">
                    {relacionado.titulo}
                  </h4>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default BlogPost;
