import React from "react";

const ContactForm = () => {
  return (
    <div className="max-w-2xl mx-auto bg-white p-6">
      {/* Header */}
      <div className="flex items-center justify-center mb-6">
        <img src="/assets/icons-contact.png" alt="contact" />
        <h2 className="ml-4 text-xl font-bold">Hubungi Kami</h2>
      </div>
      <h3 className="text-lg font-semibold text-gray-800 mb-1">Tulis Pesan</h3>
      <p className="text-sm text-gray-600 mb-6">Silahkan tinggalkan pesan Anda pada kolom yang tersedia</p>

      {/* Form */}
      <form>
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Nama</label>
          <input type="text" placeholder="Masukkan nama lengkap Anda" className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required />
        </div>

        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
          <input type="email" placeholder="name@mail.com" className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required />
        </div>

        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">No. Handphone (Optional)</label>
          <input type="text" placeholder="Masukkan no.handphone" className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
        </div>

        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Subjek</label>
          <select className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" defaultValue="">
            <option value="" disabled>
              Pilih Subjek
            </option>
            <option value="1">Pertanyaan</option>
            <option value="2">Kritik</option>
            <option value="3">Saran</option>
          </select>
        </div>

        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Pesan</label>
          <textarea placeholder="Tulis pesan Anda" rows={4} className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
        </div>

        <button type="submit" className="w-fit bg-blue-500 flex justify-self-end text-white p-2 px-8 rounded-md hover:bg-blue-600 transition">
          Kirim
        </button>
      </form>
    </div>
  );
};

export default ContactForm;