@extends('layouts.app')

@section('title', 'Careers')

@section('content')
<!-- Hero Section -->
<section class="relative py-32 bg-gradient-to-r from-primary to-secondary text-white overflow-hidden">
    <div class="absolute inset-0 bg-black opacity-20"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-3xl text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">Join Our <span class="text-yellow-300">Team</span></h1>
            <p class="text-xl md:text-2xl opacity-90">Explore exciting career opportunities and grow with us</p>
        </div>
    </div>
    <div class="absolute bottom-0 right-0 w-64 h-64 bg-white opacity-5 rounded-full -mb-32 -mr-32"></div>
    <div class="absolute top-0 left-0 w-48 h-48 bg-white opacity-5 rounded-full -mt-24 -ml-24"></div>
</section>

<!-- Job Listings Section -->
<section class="py-20 bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Current Openings</h2>
            <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">We're always looking for talented people to join our team. Check out our current openings below.</p>
            <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
        </div>

        @if($jobPostings->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($jobPostings as $job)
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
                        <div class="p-6">
                            <div class="flex justify-between items-start mb-4">
                                <span class="inline-block px-3 py-1 text-xs font-semibold bg-primary text-white rounded-full">
                                    {{ $job->employment_type }}
                                </span>
                                @if($job->closing_date)
                                    <span class="text-sm text-gray-500 dark:text-gray-400">
                                        Closes: {{ $job->closing_date->format('M d, Y') }}
                                    </span>
                                @endif
                            </div>
                            <h3 class="text-xl font-bold mb-2">{{ $job->title }}</h3>
                            <div class="flex items-center text-gray-600 dark:text-gray-400 mb-2">
                                <i class="fas fa-building mr-2"></i>
                                <span>{{ $job->department }}</span>
                            </div>
                            <div class="flex items-center text-gray-600 dark:text-gray-400 mb-4">
                                <i class="fas fa-map-marker-alt mr-2"></i>
                                <span>{{ $job->location }}</span>
                            </div>
                            @if($job->salary_range)
                                <div class="flex items-center text-gray-600 dark:text-gray-400 mb-4">
                                    <i class="fas fa-money-bill-wave mr-2"></i>
                                    <span>{{ $job->salary_range }}</span>
                                </div>
                            @endif
                            <p class="text-gray-700 dark:text-gray-300 mb-6">
                                {!! \Illuminate\Support\Str::limit(strip_tags($job->description), 150) !!}
                            </p>
                            <a href="{{ route('career.show', $job->slug) }}" class="inline-block px-4 py-2 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition duration-300">
                                View Details
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-12">
                <div class="inline-block p-4 bg-gray-100 dark:bg-gray-800 rounded-full mb-4">
                    <i class="fas fa-briefcase text-3xl text-gray-400"></i>
                </div>
                <h3 class="text-xl font-semibold mb-2">No Open Positions</h3>
                <p class="text-gray-600 dark:text-gray-400">There are no job openings at the moment. Please check back later.</p>
            </div>
        @endif
    </div>
</section>

<!-- Why Join Us Section -->
<section class="py-20 bg-white dark:bg-gray-800">
    <div class="container mx-auto px-4">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Join Us</h2>
            <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">We offer a dynamic work environment where you can grow and make a difference.</p>
            <div class="w-20 h-1 bg-primary mx-auto mt-4"></div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center">
                <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-users text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Collaborative Culture</h3>
                <p class="text-gray-700 dark:text-gray-300">Work with a team of passionate professionals who support and inspire each other.</p>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-chart-line text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Growth Opportunities</h3>
                <p class="text-gray-700 dark:text-gray-300">We invest in our team's development with training, mentorship, and career advancement.</p>
            </div>

            <div class="text-center">
                <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fas fa-balance-scale text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3">Work-Life Balance</h3>
                <p class="text-gray-700 dark:text-gray-300">We value our team's well-being with flexible schedules and a supportive environment.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-gray-900 dark:bg-black text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Take the Next Step?</h2>
        <p class="text-xl max-w-2xl mx-auto mb-10 text-gray-300">Join our team and help us make a difference in the financial consulting industry.</p>
        <a href="{{ route('career') }}" class="px-8 py-3 bg-primary hover:bg-primary-dark text-white font-semibold rounded-lg transition duration-300">
            View Current Openings
        </a>
    </div>
</section>
@endsection