"use client";

import { useEffect, useState } from "react";
import dynamic from "next/dynamic";

// Dynamically import KernelPanic404Wrapper to avoid SSR issues
const KernelPanic404 = dynamic(() => import("./components/KernelPanic404Wrapper"), {
  ssr: false,
  loading: () => (
    <div style={{ 
      position: "fixed", 
      top: 0, 
      left: 0, 
      width: "100%", 
      height: "100%", 
      display: "flex", 
      alignItems: "center", 
      justifyContent: "center", 
      backgroundColor: "#020202", 
      color: "#33ff00", 
      fontFamily: "monospace" 
    }}>
      <div>Loading terminal...</div>
    </div>
  ),
});

export default function NotFound() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <div style={{ 
        position: "fixed", 
        top: 0, 
        left: 0, 
        width: "100vw", 
        height: "100vh", 
        margin: 0, 
        padding: 0, 
        overflow: "hidden",
        backgroundColor: "#020202",
        zIndex: 9998
      }}>
        <div style={{ 
          display: "flex", 
          alignItems: "center", 
          justifyContent: "center", 
          width: "100%", 
          height: "100%", 
          color: "#33ff00", 
          fontFamily: "monospace" 
        }}>
          Loading terminal...
        </div>
      </div>
    );
  }

  return (
    <div style={{ 
      position: "fixed", 
      top: 0, 
      left: 0, 
      width: "100vw", 
      height: "100vh", 
      margin: 0, 
      padding: 0, 
      overflow: "hidden",
      backgroundColor: "#020202",
      zIndex: 9998
    }}>
      <KernelPanic404 />
    </div>
  );
}