@extends('components.home-layout')
@section('contactActive')
active
@endsection

@section('content')
<!-- banner-section start -->
<section class="banner-section inner-banner contact">
    <div class="overlay">
        <div class="banner-content d-flex align-items-center">
            <div class="container">
                <div class="row justify-content-start">
                    <div class="col-lg-7 col-md-10">
                        <div class="main-content">
                            <h1>Contact Us</h1>
                            <div class="breadcrumb-area">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb d-flex align-items-center">
                                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Contact Us</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- banner-section end -->

<!-- Apply for a loan In start -->
<section class="apply-for-loan contact">
    <div class="overlay pt-120 pb-120">
        <div class="container wow fadeInUp">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="section-header text-center">
                        <h2 class="title">Get in touch with us.</h2>
                        <p>Thank you for your interest in Fortlink.ai
                            We are dedicated to providing exceptional customer service and support. If you have any
                            questions, feedback, or need assistance, we're here to help. Please find below the various
                            ways you can reach out to us:</p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="form-content">
                        <form action="{{route('contact')}}" method="POST">
                            @csrf
                            <div class="row">
                                {{-- <div class="col-6">
                                    <div class="single-input">
                                        <label for="name">Name</label>
                                        <input type="text" id="name" placeholder="What's your name?">
                                    </div>
                                </div> --}}
                                <div class="col-12">
                                    <div class="single-input">
                                        <label for="email">Email</label>
                                        <input required type="text" name="email" id="email"
                                            placeholder="What's your email?">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="single-input">
                                        <label for="phone">Phone</label>
                                        <input required type="text" name="phone" id="phone"
                                            placeholder="(123) 480 - 3540">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="single-input">
                                        <label for="loan">Service interested in</label>
                                        <input required type="text" name="title" id="loan"
                                            placeholder="Ex. Investment, Wealth planning">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="single-input">
                                        <label for="message">Message</label>
                                        <textarea required name="message" id="message"
                                            placeholder="I would like to get in touch with you..." cols="30"
                                            rows="10"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="btn-area text-center">
                                <button class="cmn-btn">Send Message</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Apply for a loan In end -->

<!-- Need more help In start -->
<section class="account-feature loan-feature need-more-help">
    <div class="overlay pt-120 pb-120">
        <div class="container wow fadeInUp">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="section-header text-center">
                        {{-- <h5 class="sub-title">You can reach out to us for all your</h5> --}}
                        <h2 class="title">Need More Help?</h2>
                        <p>Queries, complaints and feedback. We will be happy to serve you</p>
                    </div>
                </div>
            </div>
            <div class="row cus-mar">
                <div class="col-md-4">
                    <div class="single-box">
                        <div class="icon-box">
                            <img src="assets/images/icon/need-help-1.png" alt="icon">
                        </div>
                        <h5>Sales</h5>
                        <p><a href="mailto:sales@fortlink.ai" style="color: inherit; ">sales@fortlink.ai</a></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-box">
                        <div class="icon-box">
                            <img src="assets/images/icon/need-help-2.png" alt="icon">
                        </div>
                        <h5>Help & Support</h5>
                        <p><a href="mailto:{{config('company.email')}}"
                                style="color: inherit; ">{{config('company.email')}}</a></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="single-box">
                        <div class="icon-box">
                            <img src="assets/images/icon/need-help-3.png" alt="icon">
                        </div>
                        <h5>Media & Press</h5>
                        <p><a href="mailto:press@fortlink.ai" style="color: inherit; ">press@fortlink.ai</a></p>
                    </div>
                </div>
            </div>
            {{-- Display a google map location --}}
            <div class="row pt-5">
                <div class="col-12">
                    <div class="google-map">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2999.333338884809!2d-95.9389569!3d41.2580775!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87938fd9949b4ee3%3A0xa957c5baec6cd94d!2sFortlink.ai!5e0!3m2!1sen!2sus!4v1688978847968!5m2!1sen!2sus"
                            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>

            </div>
        </div>
    </div>

</section>
@if (session()->has('message'))
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 4000)" x-show="show"
    style="background: rgb(236, 236, 236); color: rgb(5, 243, 80); text-align: center; padding: 8px; font-size: 18px; width:40%; position: fixed; z-index: 90000; right: 45%;  top:0; transform: translate(50%)">
    <p>{{ session('message') }}</p>

    {{ session()->forget('message') }}

</div>
@endif
<!-- Need more help In end -->
@endsection