import { motion } from 'motion/react';
import { Link } from 'react-router-dom';
import { ArrowLeft } from 'lucide-react';
import SEO from '@/components/SEO';

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] px-6 text-center">
      <SEO 
        title="Página não encontrada | Onyx Growth" 
        description="O caminho que você buscou não existe." 
        url="https://onyx.com.br/404"
        schema={{
          "@context": "https://schema.org",
          "@type": "WebPage",
          "name": "Página não encontrada | Onyx Growth"
        }}
      />
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
      >
        <h1 className="text-8xl md:text-[150px] font-display font-bold text-white/5 mb-4 leading-none">404</h1>
        <h2 className="text-3xl md:text-5xl font-display font-semibold mb-6">Visão bloqueada.</h2>
        <p className="text-gray-400 text-lg mb-10 max-w-md mx-auto">
          A página que você está tentando acessar foi movida, deletada ou nunca existiu neste sistema de arquitetura.
        </p>
        <Link to="/" className="inline-flex items-center gap-2 bg-white text-black px-8 py-4 rounded-full text-lg font-medium hover:bg-gray-200 transition-colors">
          <ArrowLeft className="w-5 h-5" /> Retornar ao Início
        </Link>
      </motion.div>
    </div>
  );
}
