@extends('frontend.layouts.app')  
@section('content')

<!--inner banner start-->
<div class="innerBanner Loader" style="margin-bottom: 35px;">
    <img class="modify-img" 
   
         data-image-small="{{asset('frontend/assets/images/About/career3.png')}}"
         data-image-large="{{asset('frontend/assets/images/About/career3.png')}}"
         data-image-standard="{{asset('frontend/assets/images/About/career3.png')}}"
         alt="">
    <div class="container">
        <div class="row">
            <h1 class="anim " style="font-size: 3.5rem; font-weight: 600;"><span><span>Career With Us</span></span></h1>
        </div>
    </div>
</div>
<!--inner banner end-->

<!-- FAQ and Contact Form in One Row -->
<section class="py-5" style="background-color: #f9fbfc;">
    <div class="container">
        <div class="row g-4 align-items-stretch">

            <!-- FAQ Card -->
      <div class="col-lg-6">
    <div class="card shadow-sm border-0" 
         style="height: 500px; border-radius: 15px; overflow: hidden;">
        <img src="{{ asset('frontend/assets/images/About/career2.png') }}" 
             alt="Full Card Image" 
             style="width: 100%; height: 100%; object-fit: cover; display: block;">
    </div>
</div>



<!-- Contact Form Card -->
            <div class="col-lg-6">
                <div class="card h-100 shadow-sm border-0" 
                    style="min-height: 500px; border-radius: 15px; background: #ffffff; padding: 40px; 
                            box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease, transform 0.3s ease;"
                    onmouseover="this.style.boxShadow='0 10px 40px rgba(0, 0, 0, 0.15)'; this.style.transform='scale(1.02)';"
                    onmouseout="this.style.boxShadow='0 0 30px rgba(0, 0, 0, 0.05)'; this.style.transform='scale(1)';">
                    <div class="card-body d-flex flex-column" style="padding: 3.5rem;">
                        <h4 style="color: #ac7206; margin-bottom: 35px; font-weight: 600;">Send Us a Message</h4>
                        <form action="{{ route('send.email') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div style="display: flex; flex-wrap: wrap; gap: 20px;">
                                <div style="flex: 1; min-width: 45%;">
                                    <label for="name" style="font-weight: 600; display: block; margin-bottom: 8px; font-size: 1.3rem;">Your Name</label>
                                    <input type="text" id="name" name="name" placeholder="Enter your Name " required
                                        style="width: 100%; padding: 12px; font-size: 1.3rem; border: 1px solid #ccc; border-radius: 5px; transition: border-color 0.3s ease;"
                                        onfocus="this.style.borderColor='#007bff';" 
                                        onblur="this.style.borderColor='#ccc';">
                                </div>
                                <div style="flex: 1; min-width: 45%;">
                                    <label for="email" style="font-weight: 600; display: block; margin-bottom: 8px; font-size: 1.3rem;">Your Email</label>
                                    <input type="email" id="email" name="email" placeholder="user@gmail.com" required
                                        style="width: 100%; padding: 12px; font-size: 1.3rem; border: 1px solid #ccc; border-radius: 5px; transition: border-color 0.3s ease;"
                                        onfocus="this.style.borderColor='#007bff';" 
                                        onblur="this.style.borderColor='#ccc';">
                                </div>
                                <div style="flex: 1 1 100%; margin-top: 20px;">
                                    <label for="message" style="font-weight: 600; display: block; margin-bottom: 8px; font-size: 1.3rem;">Message</label>
                                    <textarea id="message" name="message" rows="6" placeholder="Write your message..." required
                                            style="width: 100%; padding: 12px; font-size: 1.3rem; border: 1px solid #ccc; border-radius: 5px; transition: border-color 0.3s ease;"
                                            onfocus="this.style.borderColor='#007bff';" 
                                            onblur="this.style.borderColor='#ccc';"></textarea>
                                </div>
                            </div>

                            <!-- CV Upload -->
                            <div style="margin-top: 20px;">
                                <label for="cv" style="font-weight: 600; display: block; margin-bottom: 8px; font-size: 1.3rem;">Upload CV (optional)</label>
                                <input type="file" id="cv" name="cv" accept=".pdf"
                                    style="width: 100%; padding: 12px; font-size: 1.3rem; border: 1px solid #ccc; border-radius: 5px;">
                            </div>

                            <!-- Submit Button -->
                            <div style="text-align: right; margin-top: 25px;">
                                <button type="submit"
                                        style="background-color: #ca8401; color: white; padding: 12px 30px; font-size: 1.4rem; border: none; border-radius: 5px; cursor: pointer; font-weight: 700; transition: background-color 0.3s ease, box-shadow 0.3s ease;"
                                        onmouseover="this.style.backgroundColor='#0056b3'; this.style.boxShadow='0 5px 15px rgba(0, 0, 0, 0.1)';"
                                        onmouseout="this.style.backgroundColor='#007bff'; this.style.boxShadow='none';">
                                    Send Message
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>




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

@endsection