import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight, Home } from "lucide-react";
import { SiteFrame } from "./components/SiteFrame/SiteFrame";
import styles from "./inner-page.module.css";

export const metadata: Metadata = {
  title: "Page Not Found",
  robots: { index: false },
};

export default function NotFound() {
  return (
    <SiteFrame>
      <section className={styles.pageSection}>
        <div className={styles.container}>
          <span className={styles.eyebrow}>404</span>
          <h1 className={styles.title}>This page doesn&apos;t exist.</h1>
          <p className={styles.description}>
            The link may be outdated or mistyped. Head back to the homepage, or
            tell us what you were looking for and we&apos;ll point you in the
            right direction.
          </p>
          <div className={styles.actions}>
            <Link href="/" className={styles.primaryButton}>
              <Home size={16} /> Back to homepage
            </Link>
            <Link href="/contact" className={styles.secondaryButton}>
              Contact us <ArrowRight size={16} />
            </Link>
          </div>
        </div>
      </section>
    </SiteFrame>
  );
}