export default function InquiryForm() {
  const inputClass = "w-full bg-gray-50 border border-gray-200 text-gray-800 px-4 py-3 rounded-[12px] focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-sm placeholder:text-gray-400";

  return (
    <div className="bg-white rounded-[24px] p-8 md:p-10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 h-full flex flex-col">
      <div className="mb-8">
        <div className="contact-form-title font-display font-bold text-dark mb-1">Send a Message</div>
        <p className="text-gray-600 text-sm">Please fill out the form below and our team will get back to you within 24-48 business hours.</p>
      </div>

      <form className="space-y-5 flex-1 flex flex-col">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div className="space-y-2">
            <label className="text-sm font-medium text-gray-700 block">First Name</label>
            <input type="text" placeholder="Jane" className={inputClass} />
          </div>
          <div className="space-y-2">
            <label className="text-sm font-medium text-gray-700 block">Last Name</label>
            <input type="text" placeholder="Doe" className={inputClass} />
          </div>
        </div>

        <div className="space-y-2">
          <label className="text-sm font-medium text-gray-700 block">Email Address <span className="text-red-500">*</span></label>
          <input type="email" placeholder="jane.doe@example.com" required className={inputClass} />
        </div>

        <div className="space-y-2">
          <label className="text-sm font-medium text-gray-700 block">Inquiry Topic <span className="text-red-500">*</span></label>
          <div className="relative">
            <select required className={inputClass + " appearance-none cursor-pointer"}>
              <option value="" disabled selected>Select a topic...</option>
              <option value="admissions">Admissions & Enrollment</option>
              <option value="research">Research Opportunities</option>
              <option value="partnerships">Corporate Partnerships</option>
              <option value="media">Media Inquiry</option>
              <option value="repository">Publication Repository Access</option>
              <option value="other">Other</option>
            </select>
            <div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500">
              <i className="fas fa-chevron-down text-xs"></i>
            </div>
          </div>
        </div>

        <div className="space-y-2">
          <label className="text-sm font-medium text-gray-700 block">Message <span className="text-red-500">*</span></label>
          <textarea rows={5} placeholder="How can we help you?" required className={inputClass + " resize-none"} />
        </div>

        <div className="pt-2 pb-2 space-y-4">
          <label className="flex items-start gap-3 cursor-pointer">
            <input type="checkbox" required className="custom-checkbox mt-1 shrink-0" />
            <span className="text-xs text-gray-600 leading-relaxed">
              I consent to having Paris Research University collect my details via this form to respond to my inquiry. I understand my data will be handled in accordance with the{" "}
              <a href="#" className="text-primary hover:underline">Privacy Policy</a>.
            </span>
          </label>
          <div className="bg-gray-50 p-4 rounded-[12px] border border-gray-200 flex items-center justify-between max-w-xs">
            <span className="text-sm text-gray-600 font-medium">I am human</span>
            <input type="checkbox" required className="custom-checkbox w-6 h-6 rounded-full border-2" />
          </div>
        </div>

        <button type="submit" className="w-full bg-primary text-white font-bold py-4 rounded-[12px] text-sm hover:bg-opacity-90 transition-colors shadow-md flex items-center justify-center gap-2">
          Send Message <i className="fas fa-paper-plane text-xs"></i>
        </button>
      </form>
    </div>
  );
}