function ContactSection({ contactEmail }) {
  const initialFormData = {
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    company: "",
    title: "",
    organizationType: "",
    interest: "",
    timeline: "",
    message: "",
    website: "",
  };

  const [formData, setFormData] = React.useState(initialFormData);
  const [status, setStatus] = React.useState({ type: "idle", message: "" });
  const [isSubmitting, setIsSubmitting] = React.useState(false);

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

  const handleSubmit = async (event) => {
    event.preventDefault();
    setIsSubmitting(true);
    setStatus({ type: "idle", message: "" });

    const payload = new FormData();
    Object.entries(formData).forEach(([key, value]) => payload.append(key, value));

    try {
      const response = await fetch("contact.php", {
        method: "POST",
        body: payload,
      });
      const result = await response.json();

      if (!response.ok || !result.ok) {
        throw new Error(result.message || "Something went wrong. Please try again.");
      }

      setStatus({ type: "success", message: result.message });
      setFormData(initialFormData);
    } catch (error) {
      setStatus({
        type: "error",
        message: error.message || "Unable to send your message right now.",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <section className="section contact-section" id="contact">
      <div className="contact-card">
        <div className="contact-copy">
          <p className="eyebrow">Let&apos;s build what&apos;s next</p>
          <h2>Partner with Agile Developer Studios on modern healthcare AI.</h2>
          <p>
            Share your role, organization, timeline, and what you&apos;re trying to solve so we can respond with
            the right next step.
          </p>
          <a className="inline-link contact-inline-link" href={`mailto:${contactEmail}`}>
            {contactEmail}
          </a>
        </div>

        <form className="contact-form" onSubmit={handleSubmit}>
          <input
            className="contact-honeypot"
            type="text"
            name="website"
            value={formData.website}
            onChange={handleChange}
            tabIndex="-1"
            autoComplete="off"
          />

          <label className="contact-field">
            <span>First Name</span>
            <input type="text" name="firstName" value={formData.firstName} onChange={handleChange} required />
          </label>

          <label className="contact-field">
            <span>Last Name</span>
            <input type="text" name="lastName" value={formData.lastName} onChange={handleChange} required />
          </label>

          <label className="contact-field">
            <span>Email</span>
            <input type="email" name="email" value={formData.email} onChange={handleChange} required />
          </label>

          <label className="contact-field">
            <span>Phone Number</span>
            <input type="tel" name="phone" value={formData.phone} onChange={handleChange} />
          </label>

          <label className="contact-field">
            <span>Company Name</span>
            <input type="text" name="company" value={formData.company} onChange={handleChange} required />
          </label>

          <label className="contact-field">
            <span>Title / Role</span>
            <input type="text" name="title" value={formData.title} onChange={handleChange} required />
          </label>

          <label className="contact-field">
            <span>Organization Type</span>
            <select name="organizationType" value={formData.organizationType} onChange={handleChange} required>
              <option value="">Select one</option>
              <option value="Healthcare provider">Healthcare provider</option>
              <option value="Pathology lab">Pathology lab</option>
              <option value="Biotech / Medtech">Biotech / Medtech</option>
              <option value="Research institution">Research institution</option>
              <option value="Other">Other</option>
            </select>
          </label>

          <label className="contact-field">
            <span>What are you interested in?</span>
            <select name="interest" value={formData.interest} onChange={handleChange} required>
              <option value="">Select one</option>
              <option value="AutoSlide demo">AutoSlide demo</option>
              <option value="Custom AI product">Custom AI product</option>
              <option value="Healthcare workflow automation">Healthcare workflow automation</option>
              <option value="Partnership discussion">Partnership discussion</option>
              <option value="General inquiry">General inquiry</option>
            </select>
          </label>

          <label className="contact-field contact-field-full">
            <span>Project Timeline</span>
            <input type="text" name="timeline" value={formData.timeline} onChange={handleChange} placeholder="For example: ASAP, this quarter, exploring options" />
          </label>

          <label className="contact-field contact-field-full">
            <span>How can we help?</span>
            <textarea
              name="message"
              rows="6"
              value={formData.message}
              onChange={handleChange}
              placeholder="Tell us about your workflow, current challenge, or the kind of product you want to build."
              required
            ></textarea>
          </label>

          <div className="contact-form-footer">
            <button className="button button-primary" type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Sending..." : "Send Message"}
            </button>
            <span className={`contact-status contact-status-${status.type}`}>{status.message}</span>
          </div>
        </form>
      </div>
    </section>
  );
}