Fakultas Teknik UNMA

Alamat Kampus {settings.address || 'Jl. K.H. Abdul Halim No. 103, Majalengka Kulon, Kec. Majalengka, Kabupaten Majalengka, Jawa Barat 45418'}

Telepon / WhatsApp {settings.phone || '(0233) 281496'} {settings.whatsapp && ( Chat WhatsApp Resmi )}

Email Resmi {settings.email || 'teknik@unma.ac.id'}

Jam Layanan Senin – Jumat: 08.00 – 16.00 WIB

{/* Form Pesan Kanan */}

KIRIM PESAN

Kirim Pesan / Pengaduan

Silakan lengkapi formulir di bawah ini. Tim administrasi Fakultas Teknik akan menindaklanjuti pesan Anda.

Nama Lengkap setData( 'name', e.target.value, ) } placeholder="Contoh: Ahmad Nur'ain" className="h-11 w-full rounded-lg border border-[#D7D1CC] bg-[#FAF8F5] px-3.5 text-sm text-[#17171A] placeholder-[#87878D] transition-all focus:border-[#7A1F2A] focus:bg-white focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden" required /> {errors.name && (

{errors.name}

)}

Nomor Telepon / WhatsApp setData( 'phone_number', e.target.value, ) } placeholder="Contoh: 08123456789" className="h-11 w-full rounded-lg border border-[#D7D1CC] bg-[#FAF8F5] px-3.5 font-mono text-sm text-[#17171A] placeholder-[#87878D] transition-all focus:border-[#7A1F2A] focus:bg-white focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden" /> {errors.phone_number && (

{errors.phone_number}

)}

Alamat Email setData('email', e.target.value) } placeholder="nama@email.com" className="h-11 w-full rounded-lg border border-[#D7D1CC] bg-[#FAF8F5] px-3.5 font-mono text-sm text-[#17171A] placeholder-[#87878D] transition-all focus:border-[#7A1F2A] focus:bg-white focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden" required /> {errors.email && (

{errors.email}

)}

Pesan / Pertanyaan

setData(
                                                    'message',
                                                    e.target.value,
                                                )
                                            }
                                            placeholder="Tuliskan pesan, pertanyaan seputar alumni/SKPI, atau tanggapan Anda..."
                                            className="w-full rounded-lg border border-[#D7D1CC] bg-[#FAF8F5] p-3 text-sm text-[#17171A] placeholder-[#87878D] transition-all focus:border-[#7A1F2A] focus:bg-white focus:ring-2 focus:ring-[#7A1F2A]/10 focus:outline-hidden"
                                            required
                                        />
                                        {errors.message && (
                                            <p className="mt-1 text-red-600">
                                                {errors.message}
                                            </p>
                                        )}
                                    </div>

<div className="space-y-3 pt-2">
                                        {turnstile.isActive && (
                                            <div ref={turnstile.containerRef} />
                                        )}
                                        <button
                                            type="submit"
                                            disabled={processing}
                                            className="group inline-flex items-center justify-center gap-2 rounded-xl bg-[#7A1F2A] px-6 py-3 text-xs font-semibold text-white shadow-xs transition-all duration-200 hover:bg-[#681923] active:scale-95 disabled:opacity-50 sm:text-sm"
                                        >
                                            <Send className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
                                            <span>
                                                {processing
                                                    ? 'Mengirim Pesan...'
                                                    : 'Kirim Pesan Sekarang'}
                                            </span>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </main>

{/* MODAL POPUP KONFIRMASI PENGIRIMAN PESAN */}
                {showSuccessModal && (
                    <div
                        role="dialog"
                        aria-modal="true"
                        aria-labelledby="contact-modal-title"
                        className="fixed inset-0 z-50 flex animate-in items-center justify-center bg-black/60 p-4 backdrop-blur-xs duration-200 fade-in"
                    >
                        <div className="relative w-full max-w-md animate-in rounded-2xl border border-[#E7E3DF] bg-white p-6 text-center shadow-2xl duration-200 zoom-in-95 sm:p-8">
                            {/* Tombol Tutup Silang di Kanan Atas */}
                            <button
                                type="button"
                                onClick={() => setShowSuccessModal(false)}
                                className="absolute top-4 right-4 rounded-lg p-1.5 text-[#87878D] transition-colors hover:bg-[#FAF9F7] hover:text-[#17171A]"
                                aria-label="Tutup popup"
                            >
                                <X className="h-4 w-4" />
                            </button>

{/* Badge Icon Elegan */}
                            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl border border-[#E7D0D3] bg-[#F8EEEF] text-[#7A1F2A]">
                                <FileCheck className="h-8 w-8" />
                            </div>

<p className="mb-1 text-[11px] font-bold tracking-wider text-[#87630E] uppercase">
                                PENGADUAN / PESAN DITERIMA
                            </p>

<h3
                                id="contact-modal-title"
                                className="alumni-display mb-2 text-xl leading-tight font-bold text-[#17171A] sm:text-2xl"
                            >
                                Pesan Berhasil Terkirim
                            </h3>

<p className="mb-6 text-xs leading-relaxed text-[#5F5F64] sm:text-sm">
                                Terima kasih{' '}
                                {submittedName ? (
                                    <strong>{submittedName}</strong>
                                ) : (
                                    'Bapak/Ibu'
                                )}
                                . Pesan Anda telah tercatat di sekretariat
                                Fakultas Teknik UNMA dan akan segera kami tindak
                                lanjuti melalui kontak yang Anda cantumkan.
                            </p>

<div className="mb-6 flex items-center justify-center gap-2 rounded-xl border border-[#E7E3DF] bg-[#FAF9F7] p-3.5 text-xs text-[#5F5F64]">
                                <Clock className="h-4 w-4 shrink-0 text-[#7A1F2A]" />
                                <span>
                                    Estimasi respons admin:{' '}
                                    <strong>1 × 24 jam kerja</strong> (Senin –
                                    Jumat).
                                </span>
                            </div>

<button
                                type="button"
                                onClick={() => setShowSuccessModal(false)}
                                className="inline-flex w-full items-center justify-center rounded-xl bg-[#7A1F2A] px-4 py-2.5 text-xs font-semibold text-white shadow-xs transition-all duration-200 hover:bg-[#681923] active:scale-98"
                            >
                                Tutup & Selesai
                            </button>
                        </div>
                    </div>
                )}
            </div>
        </PortalLayout>
    );
}