@extends('layouts.landing-page')

@section('content')
    <!-- Explore Navigation -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold mb-2">Contact Us</h1>
        <p class="text-gray-300 text-base w-4/12">
            Hubungi kami jika Anda memiliki pertanyaan, saran, atau masalah terkait layanan kami. Tim kami akan merespons
            secepat mungkin.
        </p>
    </div>

    <section class="mb-11 grid grid-cols-1 md:grid-cols-2 gap-8">

        <!-- Contact Form -->
        <div class="bg-black p-6 rounded-lg shadow-md">
            <h2 class="text-lg font-semibold text-white mb-4">Kirim Pesan</h2>
            <form action="{{ route('contact.submit') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-gray-400 mb-1" for="name">Nama</label>
                    <input type="text" id="name" name="name" required
                        class="w-full px-3 py-2 rounded bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                </div>

                <div>
                    <label class="block text-gray-400 mb-1" for="email">Email</label>
                    <input type="email" id="email" name="email" required
                        class="w-full px-3 py-2 rounded bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                </div>

                <div>
                    <label class="block text-gray-400 mb-1" for="subject">Subjek</label>
                    <input type="text" id="subject" name="subject"
                        class="w-full px-3 py-2 rounded bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-red-500">
                </div>

                <div>
                    <label class="block text-gray-400 mb-1" for="message">Pesan</label>
                    <textarea id="message" name="message" rows="5" required
                        class="w-full px-3 py-2 rounded bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-red-500"></textarea>
                </div>

                <button type="submit"
                    class="bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded font-semibold transition duration-300">
                    Kirim Pesan
                </button>
            </form>
        </div>



    </section>
@endsection