@extends('layouts.app')

@section('title', 'Kontak - MTs Maulana Malik Ibrahim - Beji')

@section('content')
    <main id="kontak" class="mt-2">
        <section class="relative overflow-hidden w-screen left-1/2 -translate-x-1/2 min-h-[40vh] md:min-h-[55vh] p-0 flex items-center justify-center">
            <img src="{{ asset('img/gedung/gedung2.jpeg') }}" alt="Gedung MTs Maulana Malik Ibrahim" class="absolute inset-0 h-full w-full object-cover">
            <div class="absolute inset-0 bg-black/40"></div>
            <div class="relative z-10 mx-auto w-fit text-center p-6 md:p-8 text-white">
                <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight">Kontak</h1>
                <p class="mt-2 text-sm md:text-base text-white/90">Hubungi kami untuk informasi pendaftaran dan layanan</p>
            </div>
        </section>

        <section class="mt-10 mx-auto max-w-7xl">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <div class="text-xs text-black/60">Alamat</div>
                    <div class="mt-1 text-sm">Kasurejo RT. 022 RW. 007, Desa Gunungsari, Kecamatan Beji, Kabupaten Pasuruan</div>
                </div>
                <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <div class="text-xs text-black/60">Email</div>
                    <div class="mt-1 text-sm">info@mtsmmi-beji.sch.id</div>
                </div>
                <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                    <div class="text-xs text-black/60">Telepon</div>
                    <div class="mt-1 text-sm">0821-2345-6789</div>
                </div>
            </div>
        </section>

        <section class="mt-6 mx-auto max-w-7xl">
            <div class="rounded-xl bg-white p-6 md:p-8 shadow-sm ring-1 ring-black/5">
                <h2 class="text-xl font-bold">Formulir Kontak</h2>
                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="text-xs text-black/60">Nama Lengkap</label>
                        <input type="text" class="mt-1 w-full rounded-md ring-1 ring-black/10 p-2" placeholder="Nama Anda" />
                    </div>
                    <div>
                        <label class="text-xs text-black/60">Email</label>
                        <input type="email" class="mt-1 w-full rounded-md ring-1 ring-black/10 p-2" placeholder="email@contoh.com" />
                    </div>
                    <div class="md:col-span-2">
                        <label class="text-xs text-black/60">Pesan</label>
                        <textarea class="mt-1 w-full rounded-md ring-1 ring-black/10 p-2 h-28" placeholder="Tuliskan pertanyaan atau informasi yang Anda butuhkan"></textarea>
                    </div>
                </div>
                <div class="mt-4 flex items-center gap-3">
                    <a href="https://wa.me/6282123456789" class="inline-flex rounded-md bg-[#50c878] px-4 py-2 text-white shadow-sm hover:bg-[#45b46b]">WhatsApp</a>
                    <a href="mailto:info@mtsmmi-beji.sch.id" class="inline-flex rounded-md bg-sky-500 px-4 py-2 text-white shadow-sm hover:bg-sky-600">Kirim Email</a>
                </div>
            </div>
        </section>

        <section class="mt-6 mx-auto max-w-7xl">
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-black/5 overflow-hidden">
                <iframe
                    src="https://www.google.com/maps?q=MTs+Maulana+Malik+Ibrahim+-+Beji&output=embed"
                    class="w-full h-[320px] md:h-[420px]"
                    style="border:0;"
                    allowfullscreen
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </section>
    </main>
@endsection