export default function PartnershipForm() {
  return (
    <div className="bg-white rounded-[24px] p-8 md:p-10 shadow-2xl">
      {/* Title — dùng div tránh main.css override h3 */}
      <div className="ps-form-title text-ui-text font-bold mb-2">Partnership Inquiry</div>
      <p className="text-sm text-ui-muted mb-8">
        Fill out this brief form and our Global Relations office will contact you.
      </p>

      <form className="space-y-5">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Institution Name</label>
            <input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="e.g. Oxford University" />
          </div>
          <div>
            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Contact Person</label>
            <input type="text" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="Full Name" />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
          <div>
            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Email Address</label>
            <input type="email" className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue" placeholder="email@institution.edu" />
          </div>
          <div>
            <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Partnership Type</label>
            <select className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-brand-blue appearance-none">
              <option>Academic Exchange</option>
              <option>Joint Research</option>
              <option>Industry Partnership</option>
              <option>Other</option>
            </select>
          </div>
        </div>

        <div>
          <label className="block text-xs font-semibold text-ui-text uppercase tracking-wider mb-2">Message</label>
          <textarea rows={3} className="w-full px-4 py-3 bg-ui-bg border border-ui-border rounded-xl text-sm text-gray-800 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-blue resize-none" placeholder="Briefly describe your proposed collaboration..." />
        </div>

        <button type="button" className="w-full py-4 bg-brand-blue text-white font-bold rounded-xl hover:bg-brand-hover transition-colors shadow-md mt-4">
          Submit Inquiry
        </button>
      </form>
    </div>
  );
}