import { A } from "@solidjs/router";
import { useI18n } from "../providers/i18n-provider";
import { BookraCharacter } from "../components/bookra-character";

export function NotFoundRoute() {
  const i18n = useI18n();

  return (
    <div class="min-h-[60vh] flex flex-col items-center justify-center px-4 animate-fade-in">
      <div class="text-center max-w-lg">
        <div class="flex justify-center mb-8">
          <BookraCharacter pose="404" size="xl" animate={false} />
        </div>
        
        <h1 class="text-display-xl font-semibold text-ink mb-4">
          {i18n.locale() === 'cs' ? 'Stránka nenalezena' : 'Page Not Found'}
        </h1>
        
        <p class="text-lg text-ink-muted mb-8">
          {i18n.locale() === 'cs' 
            ? 'Omlouváme se, ale stránka kterou hledáte neexistuje.' 
            : 'Sorry, the page you are looking for does not exist.'}
        </p>
        
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
          <A href="/" class="btn-primary inline-flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>
            </svg>
            {i18n.locale() === 'cs' ? 'Zpět domů' : 'Back Home'}
          </A>
          
          <A href="/contact" class="btn-secondary inline-flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
            </svg>
            {i18n.locale() === 'cs' ? 'Kontaktujte nás' : 'Contact Us'}
          </A>
        </div>
      </div>
    </div>
  );
}
