// ⚛️ React x Getform.io Form Submit

import React, { useEffect, useState } from "https://esm.sh/react@19";
import ReactDOM from "https://esm.sh/react-dom@19/client";

function ContactForm() {
  // Replace with your actual Getform endpoint
  const GETFORM_ENDPOINT = "https://getform.io/f/apjnolva";

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: ""
  });

  const [formStatus, setFormStatus] = useState({
    submitted: false,
    submitting: false,
    error: null
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setFormStatus({ submitted: false, submitting: true, error: null });

    try {
      const response = await fetch(GETFORM_ENDPOINT, {
        method: "POST",
        body: new FormData(e.currentTarget),
        headers: {
          Accept: "application/json"
        }
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      setFormStatus({ submitted: true, submitting: false, error: null });
      setFormData({ name: "", email: "", message: "" });

      // Reset form after 5 seconds
      setTimeout(() => {
        setFormStatus({ submitted: false, submitting: false, error: null });
      }, 5000);
    } catch (error) {
      setFormStatus({
        submitted: false,
        submitting: false,
        error: error instanceof Error ? error.message : "Something went wrong"
      });
    }
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-4 md:p-24 bg-black">
      <div className="w-full max-w-md mx-auto p-6 bg-black rounded-lg shadow-lg border border-gray-800">
        <p className="text-center text-gray-400 mb-3">Getform x React</p>
        <h2 className="text-2xl font-bold mb-6 text-center text-white">
          Contact Us
        </h2>

        {formStatus.submitted && (
          <div className="mb-4 p-4 bg-gray-900 text-white border border-gray-700 rounded-md">
            <p>Thank you! Your message has been submitted successfully.</p>
          </div>
        )}

        {formStatus.error && (
          <div className="mb-4 p-4 bg-gray-900 text-white border border-gray-700 rounded-md">
            <p>{formStatus.error}</p>
          </div>
        )}

        <form onSubmit={handleSubmit}>
          <div className="space-y-4">
            <div className="space-y-2">
              <label
                htmlFor="name"
                className="block text-sm font-medium text-gray-300"
              >
                Name
              </label>
              <input
                id="name"
                name="name"
                type="text"
                value={formData.name}
                onChange={handleChange}
                placeholder="Your name"
                required
                className="w-full px-3 py-2 bg-gray-900 border border-gray-700 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-white focus:border-white placeholder-gray-500"
              />
            </div>

            <div className="space-y-2">
              <label
                htmlFor="email"
                className="block text-sm font-medium text-gray-300"
              >
                Email
              </label>
              <input
                id="email"
                name="email"
                type="email"
                value={formData.email}
                onChange={handleChange}
                placeholder="your.email@example.com"
                required
                className="w-full px-3 py-2 bg-gray-900 border border-gray-700 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-white focus:border-white placeholder-gray-500"
              />
            </div>

            <div className="space-y-2">
              <label
                htmlFor="message"
                className="block text-sm font-medium text-gray-300"
              >
                Message
              </label>
              <textarea
                id="message"
                name="message"
                value={formData.message}
                onChange={handleChange}
                placeholder="Your message here..."
                rows={4}
                required
                className="w-full px-3 py-2 bg-gray-900 border border-gray-700 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-white focus:border-white placeholder-gray-500"
              />
            </div>

            <button
              type="submit"
              disabled={formStatus.submitting}
              className="w-full px-4 py-2 text-black bg-white rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              {formStatus.submitting ? "Submitting..." : "Send Message"}
            </button>
          </div>
        </form>
      </div>
    </main>
  );
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<ContactForm />);