"use client";
import { Reveal } from "@/components/landing-page/Reveal";
import React from "react";

const ContactForm = () => {
  return (
    <div className="max-w-2xl mx-auto bg-white p-6">
      <Reveal>
        {/* Header */}
        <div className="flex items-center justify-center mb-6">
          <img src="/assets/icons-contact.png" alt="contact" />
          <h2 className="ml-4 text-2xl 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>
      </Reveal>
    </div>
  );
};

export default ContactForm;