portfolio/app/components/Contact.tsx

import React, { useEffect, useState } from "react";
import { sendEmail } from "@/app/utils/send-email";

export type ContactFormData = {
  name: string;
  email: string;
  message: string;
};

export default function Contact() {
  const [isVisible, setIsVisible] = useState(false);
  const [banner, setBanner] = useState<{
    show: boolean;
    message: string;
    type: "success" | "error";
  }>({
    show: false,
    message: "",
    type: "success",
  });

  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 350); // Delay to start the animation after Projects
  }, []);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();

    const form = e.currentTarget as HTMLFormElement;
    const formData = new FormData(form);

    const data: ContactFormData = {
      name: formData.get("name") as string,
      email: formData.get("email") as string,
      message: formData.get("message") as string,
    };

    // Convert FormData to a plain object
    const jsonData = JSON.stringify(data);

    const response = await sendEmail(jsonData);
    if (response.success) {
      form.reset();
    }

    setBanner({
      show: true,
      message: response.message,
      type: response.success ? "success" : "error",
    });
    setTimeout(() => {
      setBanner((prev) => ({ ...prev, show: false }));
    }, 3000);
  }

  return (
    <section
      id="contact"
      className={`p-10 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
    >
      <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white">
        Contact Me
      </h2>
      <div className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto mt-6 relative">
        {banner.show && (
          <div
            className={`absolute top-0 left-0 right-0 text-white text-center py-2 rounded-2xl animate-fade-out ${banner.type === "success" ? "bg-green-500" : "bg-red-500"}`}
          >
            {banner.message}
          </div>
        )}
        <form className="w-full space-y-4" onSubmit={onSubmit}>
          <input
            type="text"
            name="name"
            placeholder="Name"
            className="w-full p-2 border rounded dark:text-white"
            required
          />
          <input
            type="email"
            name="email"
            placeholder="Email"
            className="w-full p-2 border rounded dark:text-white"
            required
          />
          <textarea
            name="message"
            placeholder="Message"
            className="w-full p-2 border rounded dark:text-white"
            rows={5}
            required
          ></textarea>
          <button
            type="submit"
            className="w-full p-2 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded hover:from-blue-600 hover:to-purple-600 transition"
          >
            Send
          </button>
        </form>
      </div>
    </section>
  );
}