import Link from "next/link";
import SiteHeader from "./components/SiteHeader";

export default function NotFound() {
  return (
    <main className="dark-page">
      <SiteHeader />
      <div className="dark-shell">
        <section className="dark-page-hero">
          <p className="dark-eyebrow">Page Not Found</p>
          <h1 className="dark-page-title">This page is no longer available.</h1>
          <p className="dark-page-intro">
            The resource you followed may have moved or been removed. Use one
            of the public-service starting points below.
          </p>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: "1rem",
              marginTop: "2rem",
            }}
          >
            <Link href="/#find-help" className="primary-button">
              Find Help
            </Link>
            <Link href="/guides" className="primary-button">
              How-To Guides
            </Link>
            <Link href="/scam-prevention" className="primary-button">
              Scam Prevention
            </Link>
          </div>
        </section>
      </div>
    </main>
  );
}
