import { Link } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import { ArrowLeft } from "lucide-react";

export function NotFoundPage() {
  return (
    <>
      <Helmet>
        <title>Página Não Encontrada | Helena Fontes</title>
        <meta name="description" content="A página que você está procurando não existe ou foi movida." />
      </Helmet>

      <div className="min-h-[80vh] flex flex-col items-center justify-center px-6 lg:px-8 text-center pt-32 pb-24">
        <span className="text-[10px] uppercase tracking-[0.3em] font-bold text-brand-gold mb-4 block">
          Erro 404
        </span>
        <h1 className="text-4xl md:text-6xl lg:text-8xl font-serif text-brand-dark leading-[1.1] mb-8">
          Destino <br className="hidden md:block" />
          <span className="italic text-stone-400">indisponível</span>
        </h1>
        <p className="text-stone-500 font-light max-w-lg mx-auto mb-12">
          A página que você procura pode ter sido alterada, retirada do ar para garantir a exclusividade, ou o endereço foi digitado incorretamente.
        </p>
        <Link 
          to="/" 
          className="inline-flex items-center gap-4 bg-brand-dark hover:bg-brand-gold text-white px-8 py-5 text-[10px] font-bold uppercase tracking-[0.3em] transition-colors"
        >
          <ArrowLeft size={16} />
          Retornar à Homepage
        </Link>
      </div>
    </>
  );
}