Contact Page — AIM Buddy List and Retro CGI Guestbook

// Contact page component (minified identifier: om)
const ContactPage = () => {
  const [formState, setFormState] = useState("idle"); // "idle" | "submitting" | "success"

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormState("submitting");
    setTimeout(() => setFormState("success"), 1500); // ← simulated delay, no real backend
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 pb-16"
    >
      {/* AIM Buddy List — col-span-1 */}
      <div className="md:col-span-1">
        {/* AIM window chrome */}
      </div>

      {/* Guestbook Window — col-span-2 */}
      <div className="md:col-span-2">
        <Window title="Sign_My_Guestbook.cgi" icon={<PenSquare />} className="h-full">
          {/* Guestbook form or success state */}
        </Window>
      </div>
    </motion.div>
  );
};

// AIM Buddy List — group structure
// "Socials (3/3)" group
<ul>
  <li><a href="#">GitHub</a></li>     // Github icon (Lucide)
  <li><a href="#">LinkedIn</a></li>   // Linkedin icon (Lucide)
  <li><a href="#">Twitter</a></li>    // Twitter icon (Lucide)
</ul>

// "Direct (1/1)" group
<ul>
  <li><a href="mailto:hello@example.com">Email Me</a></li>
</ul>

// Form state transitions
"idle"       → user submits → "submitting" (1.5s timeout) → "success"
"success"    → user clicks "Sign again?" → "idle"

// Submit handler — NOTE: no real backend, data is not transmitted
const handleSubmit = (e) => {
  e.preventDefault();
  setFormState("submitting");
  setTimeout(() => setFormState("success"), 1500);
};

<div className="flex-1 flex flex-col items-center justify-center text-center animate-pulse">
  <h3 className="font-display text-2xl text-y2k-lime mb-2">MESSAGE SAVED!</h3>
  <p className="font-code text-sm text-gray-300">
    Thanks for dropping by my corner of the web.
  </p>
  <button onClick={() => setFormState("idle")} className="mt-6 font-code text-xs text-y2k-teal underline">
    Sign again?
  </button>
</div>