/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/not-found.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function NotFound() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
      // JSX element — HTML-like tag becomes React component in browser
      <h1 className="mb-2 font-display text-6xl font-bold text-brand-900">
        // Line 13: {t('notFound.title')}
        {t('notFound.title')}
      // JSX element — HTML-like tag becomes React component in browser
      </h1>
      // JSX element — HTML-like tag becomes React component in browser
      <p className="mb-6 text-lg text-gray-500">{t('notFound.message')}</p>
      // JSX element — HTML-like tag becomes React component in browser
      <Link href="/">
        // JSX element — HTML-like tag becomes React component in browser
        <Button>{t('notFound.goHome')}</Button>
      // JSX element — HTML-like tag becomes React component in browser
      </Link>
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 20: );
  );
// Closing brace — end of block (function, if, object, JSX)
}