import Link from "next/link";

export default function NotFound() {
  return (
    <div className="nf-hero">
      {/* subtle brick grid overlay */}
      <div className="nf-bg-grid" aria-hidden="true" />

      {/* radial glow behind 404 */}
      <div className="nf-glow" aria-hidden="true" />

      <div className="nf-inner">
        <p className="nf-eyebrow">ERROR</p>

        <h1 className="nf-number" aria-label="404">404</h1>

        <h2 className="nf-heading">
          That page is not part of<br />the current yard layout.
        </h2>

        <p className="nf-sub">
          Head back to the homepage, check our material catalogs,
          or contact the yard — we'll find what you're looking for.
        </p>

        <div className="nf-actions">
          <Link href="/" className="button button-primary">
            ← Back home
          </Link>
          <Link href="/contact" className="nf-btn-ghost">
            Contact the yard
          </Link>
        </div>

        <div className="nf-cards">
          <Link href="/masonry-supplies#catalog" className="nf-card">
            <span className="nf-card-label">Masonry Catalog</span>
            <strong className="nf-card-title">
              Brick, mortar, cement &amp; tools
            </strong>
            <span className="nf-card-cta">
              Open masonry inventory
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
            </span>
          </Link>

          <Link href="/landscaping-supplies#catalog" className="nf-card">
            <span className="nf-card-label">Natural Stone</span>
            <strong className="nf-card-title">
              Flagstone, gravel &amp; decorative rock
            </strong>
            <span className="nf-card-cta">
              Browse landscaping materials
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" /></svg>
            </span>
          </Link>
        </div>
      </div>
    </div>
  );
}