portfolio/app/components/Contact.tsx

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

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",
  });
  // Record the time when the form is rendered
  const [formLoadedTimestamp, setFormLoadedTimestamp] = useState<number>(Date.now());

  useEffect(() => {
    setFormLoadedTimestamp(Date.now());
    setTimeout(() => {
      setIsVisible(true);
    }, 350);
  }, []);

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

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

    // Honeypot check
    const honeypot = formData.get("hp-field");
    if (honeypot) {
      setBanner({
        show: true,
        message: "Bot detected",
        type: "error",
      });
      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
      return;
    }

    // Time-based anti-bot check
    const timestampStr = formData.get("timestamp") as string;
    const timestamp = parseInt(timestampStr, 10);
    if (Date.now() - timestamp < 3000) {
      setBanner({
        show: true,
        message: "Please take your time filling out the form.",
        type: "error",
      });
      setTimeout(() => setBanner((prev) => ({ ...prev, show: false })), 3000);
      return;
    }

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

    const jsonData = JSON.stringify(data);

    const submitButton = form.querySelector("button[type='submit']");
    if (submitButton) {
      submitButton.setAttribute("disabled", "true");
      submitButton.textContent = "Sending...";

      const response = await sendEmail(jsonData);
      if (response.success) {
        form.reset();
        submitButton.textContent = "Sent!";
        setTimeout(() => {
          submitButton.removeAttribute("disabled");
          submitButton.textContent = "Send Message";
        }, 2000);
      }
      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-fade-in" : "opacity-0"}`}
    >
      <h2 className="text-4xl font-bold text-center text-gray-900 mb-8">
        Get in Touch
      </h2>
      <div className="bg-white/30 p-8 rounded-3xl shadow-xl max-w-lg mx-auto">
        {banner.show && (
          <div
            className={`mb-4 text-center rounded-full py-2 px-4 text-white ${
              banner.type === "success" ? "bg-green-500" : "bg-red-500"
            }`}
          >
            {banner.message}
          </div>
        )}
        <form className="space-y-6" onSubmit={onSubmit}>
          {/* Honeypot field */}
          <input
            type="text"
            name="hp-field"
            style={{ display: "none" }}
            autoComplete="off"
          />
          {/* Hidden timestamp field */}
          <input
            type="hidden"
            name="timestamp"
            value={formLoadedTimestamp.toString()}
          />

          <div>
            <label
              htmlFor="name"
              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              Name
            </label>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Your Name"
              required
              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm"
            />
          </div>

          <div>
            <label
              htmlFor="email"
              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              Email
            </label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="you@example.com"
              required
              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm"
            />
          </div>

          <div>
            <label
              htmlFor="message"
              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
            >
              Message
            </label>
            <textarea
              name="message"
              id="message"
              placeholder="Your Message..."
              rows={5}
              required
              className="mt-1 bg-white/60 block w-full p-3 border border-gray-300 rounded-lg shadow-sm "
            ></textarea>
          </div>

          <div className="flex items-center">
            <input
              type="checkbox"
              name="privacy"
              id="privacy"
              required
              className="h-5 w-5 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
            />
            <label htmlFor="privacy" className="ml-2 text-sm text-gray-700 dark:text-gray-300">
              I accept the{" "}
              <Link
              href="/privacy-policy"
              className="text-blue-800 transition-underline"
            >
              privacy policy
            </Link>.
                        </label>
          </div>

          <button
            type="submit"
            className="w-full py-3 px-6 text-lg font-semibold text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600"
          >
            Send Message
          </button>
        </form>
      </div>
    </section>
  );
}