"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import ThemedLayout from "@/components/layouts/ThemedLayout";

export default function SecretLayerPage() {
  const [binary, setBinary] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      let str = "";
      for(let i=0; i<800; i++) {
        str += Math.random() > 0.5 ? "1" : "0";
      }
      setBinary(str);
    }, 100);
    return () => clearInterval(interval);
  }, []);

  return (
    <ThemedLayout theme="terminal" siteTitle="LEVEL 2" siteSubtitle="Clearance required">
      <div className="fixed inset-0 overflow-hidden opacity-20 theme-accent break-all font-mono text-xs leading-none z-0 pointer-events-none">
        {binary}
      </div>
      <section className="relative z-10 container mx-auto max-w-4xl px-4 py-12 text-center min-h-[70vh] flex flex-col justify-center items-center">
        <h1 className="text-4xl font-bold text-red-500 mb-8 animate-pulse">
          LEVEL 2 CLEARANCE REQUIRED
        </h1>
        <p className="mb-8 text-xl theme-card p-6 rounded-xl border-2 border-red-500">
          You are not supposed to be here. The cyber-cops have been dispatched. 
          They are bringing donuts. 
        </p>
        <Link href="/" className="bg-red-500 text-white px-8 py-4 rounded-full font-bold hover:bg-red-600 transition">
          FLEE TO MAIN SITE
        </Link>
      </section>
    </ThemedLayout>
  );
}