import { ChevronRightIcon } from '@heroicons/react/20/solid'
import {
    BookOpenIcon,
    QueueListIcon,
    CodeBracketSquareIcon,
} from '@heroicons/react/24/solid'
import Footer from '../components/Footer'

const links = [
    {
        name: 'Documentation',
        href: '/introduction',
        external: false,
        description: 'Learn more about the Badge Programm',
        icon: BookOpenIcon,
    },
    {
        name: 'Live Demo',
        href: '/#api-small-demo',
        external: false,
        description: 'Try the Badge API with a live demo',
        icon: QueueListIcon,
    },
    {
        name: 'Project on openCode',
        href: 'https://gitlab.opencode.de/open-code/badgebackend',
        external: true,
        description: 'Have a look at the project on openCode',
        icon: CodeBracketSquareIcon,
    },
]

export default function Custom404() {
    return (
        <div className="h-screen bg-white">
            <main className="mx-auto w-full max-w-7xl px-6 pb-16 pt-24 sm:pb-24 lg:px-8">
                <img
                    alt="Badge Programm Logo"
                    src="/assets/badge-programm-logo.svg"
                    className="mx-auto h-10 w-auto sm:h-32"
                />
                <div className="mx-auto mt-10 max-w-2xl text-center sm:mt-24">
                    <p className="text-2xl font-semibold text-blue-600">404</p>
                    <h1 className="mt-4 text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-6xl">
                        Uuupss... <br />
                        Page not found
                    </h1>
                    <p className="mt-6 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
                        Sorry, we couldn’t find the page you’re looking for.
                    </p>
                </div>
                <div className="mx-auto mt-16 flow-root max-w-lg sm:mt-20">
                    <h2 className="sr-only">Popular pages</h2>
                    <ul
                        role="list"
                        className="-mt-6 divide-y divide-gray-900/5 border-b border-gray-900/5"
                    >
                        {links.map((link, linkIdx) => (
                            <li
                                key={linkIdx}
                                className="relative flex gap-x-6 py-6"
                            >
                                <div className="flex size-10 flex-none items-center justify-center rounded-lg shadow-sm ring-1 ring-gray-900/10">
                                    <link.icon
                                        aria-hidden="true"
                                        className="size-6 text-blue-600"
                                    />
                                </div>
                                <div className="flex-auto">
                                    <h3 className="text-sm/6 font-semibold text-gray-900">
                                        <a
                                            href={link.href}
                                            rel="noopener noreferrer"
                                            target={
                                                link.external
                                                    ? '_blank'
                                                    : '_self'
                                            }
                                        >
                                            <span
                                                aria-hidden="true"
                                                className="absolute inset-0"
                                            />
                                            {link.name}
                                        </a>
                                    </h3>
                                    <p className="mt-2 text-sm/6 text-gray-600">
                                        {link.description}
                                    </p>
                                </div>
                                <div className="flex-none self-center">
                                    <ChevronRightIcon
                                        aria-hidden="true"
                                        className="size-5 text-gray-400"
                                    />
                                </div>
                            </li>
                        ))}
                    </ul>
                    <div className="mt-10 flex justify-center">
                        <a href="/" className="font-semibold text-blue-600">
                            <span aria-hidden="true">&larr;</span> Back to home
                        </a>
                    </div>
                </div>
            </main>
            <div className="bg-gray-50">
                <Footer />
            </div>
        </div>
    )
}