@extends('layouts.app')

@section('title', 'Contact | ' . config('app.name'))

@push('styles')
    @vite('resources/css/pages/contact.css')
@endpush

@section('content')
 
 <section class="contact-hero">

    <div class="contact-bg">
        <img src="{{ asset('images/pages/contact_page_bg.jpg') }}">
    </div>

    <!-- <div class="hero-overlay"></div> -->

    <!-- <div class="hex-overlay"></div> -->

    <div class="mesh-sphere"></div>

    <div class="hero-particles"></div>

    <div class="container">

        <div class="contact-heading">
            <h1>Contact Us</h1>
        </div>

        <div class="contact-card">
             <div class="contact-title">

                <span>FEEL FREE TO GET IN TOUCH!</span>

                <h2>How we can help you?</h2>

            </div>

            <form class="contact-form">

                <div class="row">

                    <div class="col-md-6 mb-4">
                        <input type="text"
                               class="form-control"
                               placeholder="Your name*">
                    </div>

                    <div class="col-md-6 mb-4">
                        <input type="email"
                               class="form-control"
                               placeholder="Your email address*">
                    </div>

                    <div class="col-md-6 mb-4">
                        <input type="text"
                               class="form-control"
                               placeholder="Your phone*">
                    </div>

                    <div class="col-md-6 mb-4">
                        <input type="text"
                               class="form-control"
                               placeholder="Company name*">
                    </div>

                    <div class="col-12 mb-4">

                        <textarea class="form-control"
                                  rows="6"
                                  placeholder="Your message"></textarea>

                    </div>

                </div>

                <div class="text-center">
                    <button class="btn contact-btn">
                        Send Message
                    </button>
                </div>

            </form>
        </div>

        <div class="location-wrapper">
             <div class="row justify-content-center">

                {{-- Saudi --}}
                <div class="col-lg-3 col-md-6">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/saudi.svg') }}">
                        </div>

                        <h4>Saudi Arabia</h4>

                        <p>
                            King Fahad Road, Tulip Tower,<br>
                            2nd Floor, Office 205, Riyadh
                        </p>

                    </div>

                </div>

                {{-- UAE --}}
                <div class="col-lg-3 col-md-6">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/uae.svg') }}">
                        </div>

                        <h4>United Arab Emirates</h4>

                        <p>
                            Mazaya Business Avenue<br>
                            Office 1605, BB2, JLT Dubai
                        </p>

                    </div>

                </div>

                {{-- UK --}}
                <div class="col-lg-3 col-md-6">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/uk.svg') }}">
                        </div>

                        <h4>United Kingdom</h4>

                        <p>
                            7th Floor, Uncommon, 34-37<br>Liverpool St, London EC2M 7PP
                        </p>

                    </div>

                </div>

                {{-- USA --}}
                <div class="col-lg-3 col-md-6">

                    <div class="location-card">

                        <div class="location-icon">
                            <img src="{{ asset('images/icons/us.svg') }}">
                        </div>

                        <h4>United States</h4>

                        <p>
                            Suite 444, 320 E Clayton Street,<br> Athens, Georgia 30601
                        </p>

                    </div>

                </div>

            </div>
        </div>

    </div>

</section>

{{-- Bottom Contact Bar --}}

<section class="contact-bottom">

    <div class="container">

        <div class="contact-bottom-box">

            <div class="contact-phone-icon">

                <i class="bi bi-telephone-fill"></i>

            </div>

            <div>

                <h5>Call us directly</h5>

                <p>
                    Phone: +971 4 205 4912
                    |
                    info@securx.com
                </p>

            </div>

        </div>

    </div>

</section>

@endsection


@push('scripts')
    @vite('resources/js/contact.js')
@endpush