@php

    $page_title = 'Contact Us';
    $short_description = 'We are available 24/7. You can reach us via any of the means below.';

@endphp

{{-- layout --}}
@extends('templates.' . site('template') . '.layouts.front')


@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.min.css">
@endpush



@section('contents')
    <!-- Hero Section -->
    <section class="relative pt-8 lg:pt-20 bg-contain bg-center bg-no-repeat md:mt-32"
        style="background-image: url('{{ asset('/assets/templates/pandel/images/contact-bg.svg') }}')">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1 class="text-4xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#FF3BFF] via-[#ECBFBF] to-[#5C24FF] lg:to-[#D94FD5] p-1 md:p-4"
                data-aos="fade-up" data-aos-duration="1500">
                Contact Us
            </h1>

            <p class="text-white text-sm mb-4 md:mb-8 md:mt-12 font-semibold" data-aos="fade-up" data-aos-duration="1500">
                We are available 24/7. You can reach us via any of the means below.
            </p>
        </div>

        <div class="bg-gray-800/30 p-6 rounded-lg space-y-6 md:w-1/2 mx-auto mb-8">
            <form action="{{ route('contact-validate') }}" method="post" enctype="multipart/form-data"
                class="lg:py-10 text-white gen-form" data-action="reset">
                @csrf
                <!-- Email Field -->
                <div class="flex flex-col space-y-2 mb-4">
                    <label for="email" class="text-sm font-medium text-gray-300">Email</label>
                    <input type="email" name="email" id="email"
                        class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-md p-2 focus:outline-none"
                        required />
                </div>

                <!-- Subject Field -->
                <div class="flex flex-col space-y-2 mb-4">
                    <label for="subject" class="text-sm font-medium text-gray-300">Subject</label>
                    <input type="text"name="subject" id="subject"
                        class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-md p-2 focus:outline-none"
                        required />
                </div>

                <!-- Message Field -->
                <div class="flex flex-col space-y-2 mb-4">
                    <label for="message" class="text-sm font-medium text-gray-300">Message</label>
                    <textarea name="message" id="message" rows="4"
                        class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-md p-2 focus:outline-none" required></textarea>
                </div>

                <!-- Send Message Button -->
                <div class="flex justify-start ">
                    <button type="submit"
                        class="bg-sky-800 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition-colors duration-200">
                        Send Message
                    </button>
                </div>
            </form>
        </div>
    </section>

    <section class="container mx-auto px-6 lg:px-40 py-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Call Section -->
            <div class="border border-gray-800 rounded-lg p-4 flex items-center space-x-4">
                <div class="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center p-1">
                    <img src="{{ asset('/assets/templates/pandel/images/contact-phone.svg') }}" alt="" />
                </div>
                <div>
                    <h3 class="text-gray-400 font-medium">Call</h3>
                    <p class="text-white">{{ site('phone') }}</p>
                </div>
            </div>

            <!-- Email Section -->
            <div class="border border-gray-800 rounded-lg p-4 flex items-center space-x-4">
                <div class="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center p-1">
                    <img src="{{ asset('/assets/templates/pandel/images/contact-email.svg') }}" alt="" />
                </div>
                <div>
                    <h3 class="text-gray-400 font-medium">Email</h3>
                    <p class="text-white">{{ site('email') }}</p>
                </div>
            </div>

            <!-- Office Section -->
            <div class="border border-gray-800 rounded-lg p-4 flex items-center space-x-4">
                <div class="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center p-1">
                    <img src="{{ asset('/assets/templates/pandel/images/contact-location.svg') }}" alt="" />
                </div>
                <div>
                    <h3 class="text-gray-400 font-medium">Office</h3>
                    <p class="text-white">
                        {{ site('address') }},
                        {{ site('city') }}, <br> {{ site('state') }}, {{ site('country') }}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <img src="{{ asset('/assets/templates/pandel/images/abstract-bg.svg') }}" alt=""
        class="absolute w-full hidden md:flex top-60 -z-10" hidden />
@endsection


@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.min.js"></script>
@endsection
