@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="px-8 lg:px-40 mt-8 md:mt-12 z-10">
        <div class="bg-contain md:bg-contain bg-center bg-no-repeat min-h-[25vh] md:min-h-[50vh]"
            style="background-image: url('{{ asset('/assets/templates/cavit/images/contact-hero.svg') }}')"></div>
        <img src="{{ asset('/assets/templates/cavit/images/circles.svg') }}" alt=""
            class="absolute md:top-96 md:right-48 hidden lg:block" />
        <img src="{{ asset('/assets/templates/cavit/images/circles.svg') }}" alt=""
            class="absolute md:top-40 md:left-20 hidden lg:block" />

        <div class="mt-4 md:mt-8 grid lg:grid-cols-2 gap-4 lg:gap-20">
            <div>
                <h2 class="text-2xl md:text-4xl lg:text-5xl text-start mt-4 font-semibold text-[#f472b6]">
                    Contact Us
                </h2>
            </div>
            <div>
                <p class="text-white text-base md:text-xl lg:text-2xl text-start leading-8">
                    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>
            </div>
        </div>
    </section>

    <!-- contact form  -->

    <section class="px-8 lg:px-40 mt-8 lg:mt-20 relative">
        <img src="{{ asset('/assets/templates/cavit/images/circles.svg') }}" alt=""
            class="absolute md:top-40 md:left-40 hidden lg:block" />

        <img src="{{ asset('/assets/templates/cavit/images/circles.svg') }}" alt=""
            class="absolute md:bottom-10 md:left-96 hidden lg:block" />
        <div
            class="shadow-lg overflow-hidden border border-transparent bg-clip-border md:self-center w-full lg:w-1/2 mx-auto p-8 md:p-12 lg:p-16 bg-pink-400/5 relative rounded-2xl">
            <!-- Pseudo-element for gradient border -->
            <div class="absolute inset-0 rounded-2xl"
                style="
                z-index: -1;
                background: linear-gradient(to bottom, #ff3bff, #5c24ff);
                padding: 1px; /* Adjust border width */
                mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
              ">
            </div>

            <!-- Content -->
            <h3 class="text-white 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="lg:py-10 text-white 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-white" required />
                <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-white" required />

                <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-white" placeholder="Message" required></textarea>

                <button type="submit"
                    class="gradient-btn-filled-submit w-full rounded-3xl text-white flex items-center justify-center">
                    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 rounded-2xl 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/cavit/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-2xl 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/cavit/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-2xl 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/cavit/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>
@endsection


@section('scripts')
@endsection
