import { Link } from 'react-router-dom';
import { Home, ArrowLeft, Search, AlertTriangle } from 'lucide-react';

const NotFound = () => {
  return (
    <div className="bg-[#0e0e0e] min-h-screen flex items-center justify-center">
      <div className="container-custom">
        <div className="max-w-2xl mx-auto text-center">
          {/* Ícone */}
          <div className="relative inline-block mb-8">
            <div className="w-32 h-32 rounded-full bg-[#cbf400]/10 flex items-center justify-center mx-auto">
              <AlertTriangle className="w-16 h-16 text-[#cbf400]" />
            </div>
            <div className="absolute -top-2 -right-2 w-12 h-12 rounded-full bg-[#1a1a1a] border border-[#cbf400]/30 flex items-center justify-center">
              <span className="text-[#cbf400] font-black text-xl">404</span>
            </div>
          </div>
          
          {/* Título */}
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-white mb-4">
            Página não encontrada
          </h1>
          
          {/* Descrição */}
          <p className="text-xl text-gray-400 mb-8">
            Ops! Parece que a página que você está procurando não existe ou foi movida.
          </p>
          
          {/* Sugestões */}
          <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 mb-8">
            <h3 className="text-white font-bold mb-4 flex items-center gap-2">
              <Search className="w-5 h-5 text-[#cbf400]" />
              O que você pode fazer:
            </h3>
            <ul className="text-left space-y-3 text-gray-400">
              <li className="flex items-start gap-3">
                <span className="w-6 h-6 rounded-full bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0 text-[#cbf400] text-sm font-bold">1</span>
                Verifique se digitou o endereço corretamente
              </li>
              <li className="flex items-start gap-3">
                <span className="w-6 h-6 rounded-full bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0 text-[#cbf400] text-sm font-bold">2</span>
                Volte para a página anterior e tente novamente
              </li>
              <li className="flex items-start gap-3">
                <span className="w-6 h-6 rounded-full bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0 text-[#cbf400] text-sm font-bold">3</span>
                Use o menu de navegação para encontrar o que procura
              </li>
              <li className="flex items-start gap-3">
                <span className="w-6 h-6 rounded-full bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0 text-[#cbf400] text-sm font-bold">4</span>
                Entre em contato conosco se precisar de ajuda
              </li>
            </ul>
          </div>
          
          {/* Botões */}
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              to="/"
              className="btn-primary inline-flex items-center gap-2"
            >
              <Home className="w-5 h-5" />
              Ir para Home
            </Link>
            <button
              onClick={() => window.history.back()}
              className="btn-secondary inline-flex items-center gap-2"
            >
              <ArrowLeft className="w-5 h-5" />
              Voltar
            </button>
          </div>
          
          {/* Links úteis */}
          <div className="mt-12 pt-8 border-t border-white/5">
            <p className="text-gray-500 mb-4">Ou acesse diretamente:</p>
            <div className="flex flex-wrap justify-center gap-4">
              <Link to="/servicos/ti-gerenciada" className="text-[#cbf400] hover:underline">
                TI Gerenciada
              </Link>
              <Link to="/servicos/cloud-computing" className="text-[#cbf400] hover:underline">
                Cloud Computing
              </Link>
              <Link to="/servicos/seguranca" className="text-[#cbf400] hover:underline">
                Segurança
              </Link>
              <Link to="/blog" className="text-[#cbf400] hover:underline">
                Blog
              </Link>
              <Link to="/contato" className="text-[#cbf400] hover:underline">
                Contato
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotFound;
