@extends('layouts.layouts')

@section('content')
    <section class="section-kontak" style="margin-top:120px">
        <div class="container">

            <div class="text-center mb-5">
                <h3 class="fw-bold">Hubungi Kami</h3>
                <p class="text-muted">Kami siap membantu Anda</p>
            </div>

            <div class="row g-4">

                {{-- INFO SEKOLAH --}}
                <div class="col-md-4">
                    <div class="kontak-box">
                        <h5 class="fw-bold mb-3">Informasi Kontak</h5>

                        <p>
                            📧 <strong>Email</strong><br>
                            <a href="mailto:sekolah@email.com">
                                sman2majujaya@gmail.com
                            </a>
                        </p>

                        <p>
                            📞 <strong>Telepon / WhatsApp</strong><br>
                            <a href="https://wa.me/628123xxxxx" target="_blank">
                                0812-3456-xxxx
                            </a>
                        </p>

                        <p>
                            📍 <strong>Alamat</strong><br>
                            Jl Komando 3 No.86<br>
                            Kota.Karawang
                        </p>
                    </div>
                </div>

                {{-- FORM KONTAK --}}
                <div class="col-md-8">

                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div class="kontak-box">
                        <form action="{{ route('kontak.kirim') }}" method="POST">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Nama</label>
                                <input type="text" name="nama" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Pesan</label>
                                <textarea name="pesan" rows="5" class="form-control" required></textarea>
                            </div>

                            <button class="btn btn-danger px-5">
                                Kirim Pesan
                            </button>
                        </form>
                    </div>
                </div>

            </div>

            {{-- GOOGLE MAPS --}}
            <div class="row mt-5">
                <div class="col-12">
                    <div class="map-box mt-4">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24113.09030391481!2d107.36748076782825!3d-6.350687900344543!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e6976a819e1f315%3A0xceb08873a5f570cb!2sSMA%20Negeri%202%20Klari!5e0!3m2!1sen!2sid!4v1765781856114!5m2!1sen!2sid"
                            width="100%" height="350" style="border:0;" allowfullscreen loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>

                </div>
            </div>

        </div>
    </section>
@endsection