@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('header')
    <!-- hero section  -->
    <section class="bg-[#f3feed] pt-8 md:pt-10 px-6">
        <div class="max-w-6xl mx-auto min-h-[600px] flex flex-col md:flex-row items-center">
            <!-- Text Content -->
            <div class="md:w-1/2 flex flex-col justify-center text-left h-full">
                <h1 class="text-3xl md:text-5xl font-bold text-gray-900">
                    Contact Us
                </h1>
                <p class="text-gray-700 mt-4 text-sm md:text-base max-w-lg">
                    Our dedicated support team is available 24/7 to assist you at any
                    time, ensuring that your inquiries and concerns are addressed
                    promptly. You can reach out to us through any of the contact methods
                    listed below, and we will be happy to assist you.
                </p>
                <!-- auth  -->
                <div class="flex space-x-4 md:gap-8 mt-8">
                    @if (user())
                        <a href="{{ route('user.dashboard') }}" class="gradient-bg px-12 py-2 rounded-4xl text-black">
                            Dashboard
                        </a>
                    @else
                        <a href="{{ route('user.login') }}" class="gradient-bg px-12 py-2 rounded-4xl text-black">
                            Sign In
                        </a>
                        <a href="{{ route('user.register') }}" class="gradient-border4 px-12 py-2 rounded-4xl">
                            Sign up
                        </a>
                    @endif
                </div>
            </div>

            <!-- Image Content -->
            <div class="md:w-1/2 flex justify-end items-center mt-6 md:mt-0">
                <img src="{{ asset('/assets/templates/lunex/images/contact-hero.png') }}" alt="AI Robot"
                    class="max-w-full h-auto md:max-h-[500px]" />
            </div>
        </div>
    </section>
@endsection


@section('contents')
    <!-- contact form  -->
    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40 relative">
        <div
            class="shadow-lg overflow-hidden md:self-center w-full lg:w-1/2 mx-auto p-8 md:p-12 lg:p-16 rounded-2xl gradient-border3">
            <!-- Content -->
            <h3 class="text-black font-semibold text-center mb-8 md:mb-16 text-lg md:text-2xl">
                Contact Us slip
            </h3>
            <form action="{{ route('contact-validate') }}" method="post" enctype="multipart/form-data" class="gen-form"
                data-action="reset">
                @csrf
                <input type="email" name="email" id="email" placeholder="Email Address*"
                    class="border border-gray-400 rounded-lg px-2 py-3 w-full mb-8 md:mb-16 text-black focus:outline-none focus:border-[#a3db2f] focus:ring-1 focus:ring-[#a3db2f]" />
                <input type="text" name="subject" id="subject" placeholder="Subject"
                    class="border border-gray-400 rounded-lg px-2 py-3 w-full mb-8 md:mb-16 text-black focus:outline-none focus:border-[#a3db2f] focus:ring-1 focus:ring-[#a3db2f]" />

                <textarea name="message" id="message" rows="6"
                    class="border border-gray-400 rounded-lg px-2 py-3 w-full mb-8 md:mb-16 text-black focus:outline-none focus:border-[#a3db2f] focus:ring-1 focus:ring-[#a3db2f]"
                    placeholder="Message"></textarea>

                <button type="submit"
                    class="bg-[#a3db2f] w-full rounded-3xl text-black py-2 cursor-pointer hover:transform hover:scale-105 transition-transform">
                    Send Message
                </button>
            </form>
        </div>
    </section>

    <!-- contact  -->
    <section class="px-8 lg:px-40 mt-8 lg:mt-20">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- Call Section -->
            <div class="border border-gray-800 bg-[#fafafa] rounded-2xl p-4 flex items-center space-x-4">
                <div class="w-12 h-12 bg-[#f0f0f0] rounded-full flex items-center justify-center p-1">
                    <img src="{{ asset('/assets/templates/lunex/images/contact-phone.svg') }}" alt="" />
                </div>
                <div>
                    <h3 class="text-black font-medium">Call</h3>
                    <p class="text-gray-800">+{{ site('phone') }}</p>
                </div>
            </div>

            <!-- Email Section -->
            <div class="border border-gray-800 bg-[#fafafa] rounded-2xl p-4 flex items-center space-x-4">
                <div class="w-12 h-12 bg-[#f0f0f0] rounded-full flex items-center justify-center p-1">
                    <img src="{{ asset('/assets/templates/lunex/images/contact-email.svg') }}" alt="" />
                </div>
                <div>
                    <h3 class="text-black font-medium">Email</h3>
                    <p class="text-gray-800">{{ site('email') }}</p>
                </div>
            </div>

            <!-- Office Section -->
            <div class="border border-gray-800 bg-[#fafafa] rounded-2xl p-4 flex items-center space-x-4">
                <div class="w-12 h-12 bg-[#f0f0f0] rounded-full flex items-center justify-center p-1">
                    <img src="{{ asset('/assets/templates/lunex/images/contact-location.svg') }}" alt="" />
                </div>
                <div>
                    <h3 class="text-black font-medium">Office</h3>
                    <p class="text-gray-800">
                        {{ site('address') }}, {{ site('city') }}, <br> {{ site('state') }}, {{ site('country') }}
                    </p>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('scripts')
@endsection
