@extends('layouts.base')

@section('title', $title ?? 'Career Opportunities')

@inject('content', 'App\Http\Controllers\FrontController')
@section('content')

<!-- Page Title Section -->
<section class="py-20 bg-gradient-to-r from-military-dark to-military-green text-white relative overflow-hidden">
    <div class="absolute inset-0 bg-black/30"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
            <nav class="text-sm mb-4">
                <ol class="flex justify-center items-center space-x-2 text-gray-300">
                    <li><a href="{{ route('home') }}" class="hover:text-white">Home</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li class="text-white">Career Opportunities</li>
                </ol>
            </nav>
            <h1 class="text-4xl md:text-6xl font-bold mb-4 font-poppins">Career Opportunities</h1>
            <p class="text-xl text-gray-200">Join Our Elite Military Team</p>
        </div>
    </div>
</section>

<!-- Main Career Section -->
<section class="py-16 bg-gradient-military bg-hero-pattern relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute left-0 top-0 w-48 h-48 opacity-10 bg-no-repeat bg-contain" style="background-image: url('public/grepoksu/2021/09/career.png')"></div>

    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Content Column -->
            <div class="order-2 lg:order-1">
                <div>
                    <p class="text-military-green font-medium uppercase mb-2">LEAVE DEPARTMENT</p>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">Career Opportunities With The Department</h2>
                    <p class="text-xl font-semibold text-gray-200 mb-6">Skilled and professional staff form the foundation of a well-run military department.</p>
                    <div class="text-gray-300 leading-relaxed space-y-4">
                        <p>The Department provides up-to-date facilities and services allowing our personnel to work efficiently and effectively. We are committed to fostering a diverse and inclusive workplace where every team member can thrive.</p>
                        <p>Our department offers comprehensive career development programs, competitive benefits, and the opportunity to serve those who serve our country. Join us in making a difference in the lives of military personnel and their families.</p>
                        <p class="font-semibold text-white">If you are military personnel looking forward to working with our department, we would like to hear from you.</p>
                    </div>

                    <div class="mt-8 p-4 bg-military-gold/20 border-l-4 border-military-gold rounded-r-lg">
                        <p class="text-sm text-gray-200">
                            <i class="fas fa-info-circle text-military-gold mr-2"></i>
                            <strong>Note:</strong> Correspondence will be limited to short-listed candidates only. If you have not been contacted within 30 days of the closing date, please accept that your application has been unsuccessful.
                        </p>
                    </div>

                    <div class="mt-8 flex flex-wrap gap-4">
                        <a href="{{ route('apply-now') }}" class="inline-flex items-center bg-military-green hover:bg-military-dark text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
                            <i class="fas fa-paper-plane mr-2"></i>Apply Online Now
                        </a>
                        <a href="#positions" class="inline-flex items-center bg-white/10 backdrop-blur-sm text-white border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-military-dark transition-all duration-300">
                            <i class="fas fa-list mr-2"></i>View Positions
                        </a>
                    </div>
                </div>
            </div>

            <!-- Image Column -->
            <div class="order-1 lg:order-2">
                <div class="relative">
                    <div class="bg-military-green/20 absolute inset-0 rounded-lg transform rotate-3"></div>
                    <img src="public/grepoksu/2021/09/career.png" alt="Career Opportunities" class="relative z-10 rounded-lg shadow-2xl w-full transform hover:scale-105 transition duration-500">
                    <!-- Stats overlay -->
                    <div class="absolute -bottom-6 -right-6 bg-white rounded-xl shadow-lg p-6 border-l-4 border-military-green z-20">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-military-dark">500+</div>
                            <div class="text-sm text-gray-600">Active Personnel</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Benefits Section -->
<section class="py-16 bg-gradient-military bg-hero-pattern relative">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Image Column -->
            <div>
                <div class="relative">
                    <div class="bg-military-green/20 absolute inset-0 rounded-lg transform -rotate-3"></div>
                    <img src="public/grepoksu/2021/09/about-2.png" alt="Military Benefits" class="relative z-10 rounded-lg shadow-2xl w-full transform hover:scale-105 transition duration-500">
                </div>
            </div>

            <!-- Content Column -->
            <div>
                <div>
                    <p class="text-military-green font-medium uppercase mb-2">WHY JOIN US</p>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">Benefits & Opportunities</h2>
                    <p class="text-gray-300 mb-8">We offer comprehensive benefits and career development opportunities to support our dedicated team members and their families.</p>

                    <ul class="space-y-6">
                        <li class="flex items-start">
                            <div class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-heart text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-white">HEALTH & WELLNESS</span>
                                <span class="text-gray-300"> – Comprehensive health insurance, dental, vision, and wellness programs to keep you and your family healthy.</span>
                            </div>
                        </li>

                        <li class="flex items-start">
                            <div class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-graduation-cap text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-white">PROFESSIONAL DEVELOPMENT</span>
                                <span class="text-gray-300"> – Ongoing training, certification programs, and educational assistance to advance your career.</span>
                            </div>
                        </li>

                        <li class="flex items-start">
                            <div class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-shield-alt text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-white">JOB SECURITY</span>
                                <span class="text-gray-300"> – Stable employment with excellent retirement benefits and long-term career security.</span>
                            </div>
                        </li>

                        <li class="flex items-start">
                            <div class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-users text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-white">FAMILY SUPPORT</span>
                                <span class="text-gray-300"> – Comprehensive support programs for military families including childcare and family counseling services.</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Current Openings Section -->
<section class="py-16 bg-gradient-military bg-hero-pattern text-white relative overflow-hidden">
    <!-- Background Patterns -->
    <div class="absolute top-20 left-10 w-16 h-16 opacity-20 bg-no-repeat bg-contain" style="background-image: url('public/grepoksu/2021/09/career.png')"></div>
    <div class="absolute bottom-20 right-10 w-20 h-20 opacity-20 bg-no-repeat bg-contain" style="background-image: url('public/grepoksu/2021/09/career.png')"></div>

    <div id="positions" class="container mx-auto px-4">
        <!-- Section Title -->
        <div class="text-center mb-12">
            <div>
                <p class="text-military-light font-medium uppercase mb-2">CURRENT OPENINGS</p>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Available Positions</h2>
                <p class="text-gray-300 max-w-2xl mx-auto">Explore current job opportunities within our department. New positions are posted regularly.</p>
            </div>
        </div>

        <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border-l-4 border-military-green hover:bg-white/20 transition-all duration-300">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-xl font-bold text-white">Personnel Specialist</h3>
                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold">Full-time</span>
                </div>
                <p class="text-gray-300 mb-4">Manage personnel records, process leave requests, and provide administrative support to military families.</p>
                <div class="flex items-center text-sm text-gray-400 mb-4">
                    <i class="fas fa-map-marker-alt mr-2"></i>{{$settings->loctaions ?? 'Fort Alcatraz, CA'}}
                    <span class="mx-2">•</span>
                    <i class="fas fa-clock mr-2"></i>Posted 2 days ago
                </div>
                <a href="{{ route('apply-now') }}" class="text-military-green font-semibold hover:text-military-light transition-colors">Apply Now →</a>
            </div>

            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border-l-4 border-military-dark hover:bg-white/20 transition-all duration-300">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-xl font-bold text-white">Case Worker</h3>
                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-semibold">Contract</span>
                </div>
                <p class="text-gray-300 mb-4">Assist military families with benefit applications, counseling services, and resource coordination.</p>
                <div class="flex items-center text-sm text-gray-400 mb-4">
                    <i class="fas fa-map-marker-alt mr-2"></i>Multiple Locations
                    <span class="mx-2">•</span>
                    <i class="fas fa-clock mr-2"></i>Posted 1 week ago
                </div>
                <a href="{{ route('apply-now') }}" class="text-military-green font-semibold hover:text-military-light transition-colors">Apply Now →</a>
            </div>

            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border-l-4 border-military-gold hover:bg-white/20 transition-all duration-300">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-xl font-bold text-white">IT Support Specialist</h3>
                    <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-semibold">Remote</span>
                </div>
                <p class="text-gray-300 mb-4">Provide technical support for department systems, maintain databases, and ensure data security.</p>
                <div class="flex items-center text-sm text-gray-400 mb-4">
                    <i class="fas fa-map-marker-alt mr-2"></i>Remote/Hybrid
                    <span class="mx-2">•</span>
                    <i class="fas fa-clock mr-2"></i>Posted 3 days ago
                </div>
                <a href="{{ route('apply-now') }}" class="text-military-green font-semibold hover:text-military-light transition-colors">Apply Now →</a>
            </div>

            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border-l-4 border-red-500 hover:bg-white/20 transition-all duration-300">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-xl font-bold text-white">Financial Counselor</h3>
                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold">Full-time</span>
                </div>
                <p class="text-gray-300 mb-4">Provide financial guidance and support to military personnel and their families during transitions.</p>
                <div class="flex items-center text-sm text-gray-400 mb-4">
                    <i class="fas fa-map-marker-alt mr-2"></i>{{$settings->loctaions ?? 'Fort Alcatraz, CA'}}
                    <span class="mx-2">•</span>
                    <i class="fas fa-clock mr-2"></i>Posted 5 days ago
                </div>
                <a href="{{ route('apply-now') }}" class="text-military-green font-semibold hover:text-military-light transition-colors">Apply Now →</a>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section class="py-16 bg-gradient-military bg-hero-pattern relative overflow-hidden">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Content Column -->
            <div>
                <div>
                    <p class="text-military-green font-medium uppercase mb-2">JOIN OUR TEAM</p>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6 text-white">Ready to Start Your Career With Us?</h2>
                    <p class="text-gray-300 mb-8 leading-relaxed">Join our dedicated team and make a difference in the lives of military personnel and their families. We offer competitive benefits, professional growth opportunities, and the chance to serve those who serve our country.</p>

                    <ul class="space-y-4 mb-8">
                        <li class="flex items-start">
                            <div class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-white">COMPETITIVE BENEFITS</span>
                                <span class="text-gray-300"> – Comprehensive health, dental, and retirement packages.</span>
                            </div>
                        </li>

                        <li class="flex items-start">
                            <div class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-white">CAREER GROWTH</span>
                                <span class="text-gray-300"> – Professional development and advancement opportunities.</span>
                            </div>
                        </li>

                        <li class="flex items-start">
                            <div class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-white">MEANINGFUL WORK</span>
                                <span class="text-gray-300"> – Serve those who serve our nation with honor and dedication.</span>
                            </div>
                        </li>
                    </ul>

                    <div class="flex flex-wrap gap-4">
                        <a href="{{ route('apply-now') }}" class="bg-military-green hover:bg-military-dark text-white px-8 py-3 rounded-lg font-bold transition-all duration-300 transform hover:scale-105 shadow-lg">
                            <i class="fas fa-paper-plane mr-2"></i>Start Your Application
                        </a>
                        <a href="{{ route('contact') }}" class="border-2 border-white text-white px-8 py-3 rounded-lg font-bold hover:bg-white hover:text-military-dark transition-all duration-300">
                            <i class="fas fa-phone mr-2"></i>Contact HR Department
                        </a>
                    </div>
                </div>
            </div>

            <!-- Image Column -->
            <div>
                <div class="relative">
                    <div class="bg-military-green/20 absolute inset-0 rounded-lg transform rotate-3"></div>
                    <img src="public/grepoksu/2021/09/about1.png" alt="Military Team" class="relative z-10 rounded-lg shadow-2xl w-full transform hover:scale-105 transition duration-500">
                </div>
            </div>
        </div>
    </div>
</section>



@endsection
