'use client';
import { useEffect } from 'react';
import Link from 'next/link';
import { Icon } from '@iconify/react';
import { Button } from '@/app/(landing)/components/ui/button';
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from '@/app/(landing)/components/ui/empty';

export function NotFoundPage() {
  useEffect(() => {
    document.title = '404 — Página no encontrada | Rynext Technologies';
  }, []);

  return (
    <main
      id="main-content"
      className="relative flex w-full items-center justify-center px-8 pb-24 pt-40"
    >
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -top-16 -left-20 h-[24rem] w-[24rem] rounded-full blur-[110px]"
        style={{ background: 'rgba(59,130,246,0.16)' }}
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -top-16 -right-20 h-[24rem] w-[24rem] rounded-full blur-[110px]"
        style={{ background: 'rgba(139,92,246,0.16)' }}
      />

      <Empty className="relative border-none">
        <EmptyHeader>
          <EmptyTitle
            className="font-display font-black"
            style={{ fontSize: 'clamp(6rem, 20vw, 10rem)', lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--foreground)' }}
          >
            404
          </EmptyTitle>
          <EmptyDescription style={{ color: 'var(--muted-foreground)' }}>
            La página que buscas no existe o fue movida.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <div className="flex gap-3">
            <Button asChild>
              <Link href="/">
                <Icon icon="ph:house" className="mr-2 size-4" />
                Ir al inicio
              </Link>
            </Button>
            <Button asChild variant="outline">
              <Link href="/portafolio">
                <Icon icon="ph:compass" className="mr-2 size-4" />
                Ver portafolio
              </Link>
            </Button>
          </div>
        </EmptyContent>
      </Empty>
    </main>
  );
}