import React, { useCallback, useRef, useState } from "react"; import Link from "next/link"; export default function BottomFooter() { // ig easter egg const [lavaActive, setLavaActive] = useState(false); const lavaTimeout = useRef(null); // LinkedIn easter egg const [shaking, setShaking] = useState(false); const shakeTimeout = useRef(null); // x easter egg const [showCracks, setShowCracks] = useState(false); const [collapse, setCollapse] = useState(false); const crackTimeout = useRef(null); // Lava flood handler (top-down flood) const handleInstagramClick = useCallback((e: React.MouseEvent) => { e.preventDefault(); setLavaActive(true); clearTimeout(lavaTimeout.current); lavaTimeout.current = setTimeout(() => setLavaActive(false), 2000); }, []); // LinkedIn shake handler const handleLinkedInClick = useCallback((e: React.MouseEvent) => { e.preventDefault(); if (shaking) return; // prevent stacking setShaking(true); const body = document.body; body.classList.remove("shake-screen"); void body.offsetWidth; body.classList.add("shake-screen"); shakeTimeout.current = setTimeout(() => { setShaking(false); body.classList.remove("shake-screen"); }, 1000); }, [shaking]); // X (crack and collapse) handler const handleXClick = useCallback((e: React.MouseEvent) => { e.preventDefault(); setShowCracks(true); crackTimeout.current = setTimeout(() => { setCollapse(true); setTimeout(() => { setShowCracks(false); setCollapse(false); }, 1500); }, 1000); }, []); React.useEffect(() => { return () => { clearTimeout(lavaTimeout.current); clearTimeout(shakeTimeout.current); clearTimeout(crackTimeout.current); document.body.classList.remove("shake-screen"); }; }, []); return ( <> {/* Lava Flood Overlay */} {lavaActive && (

)} {/* Crack & Collapse Overlay */} {(showCracks || collapse) && (

{/* Add more cracks for extra effect if you wish */}

)} {/* Footer */} ); }