@extends('layouts.app')

@section('title', __('navigation.careers'))

@section('content')
<main class="careers-page">
  <!-- Hero Section -->
  <section class="hero-section bg-primary text-white py-5">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <h1 class="display-4 fw-bold mb-4">{{ __('navigation.join_our_team') }}</h1>
          <p class="lead mb-4">{{ __('navigation.dynamic_team') }}</p>
        </div>
        <div class="col-lg-6">
          <img src="{{ asset('images/careers-hero.png') }}" alt="Join Our Team" class="img-fluid">
        </div>
      </div>
    </div>
  </section>

  <!-- Why Join Us -->
  <section class="why-join py-5 bg-light">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center mb-5">
          <h2 class="display-5 fw-bold">{{ __('navigation.why_join_kawnsoft') }}</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 mb-4">
          <div class="benefit-item">
            <i class="fas fa-rocket fa-3x text-primary mb-3"></i>
            <h4>{{ __('navigation.innovation') }}</h4>
            <p>{{ __('navigation.work_on_cutting_edge_technologies_and_innovative_projects') }}</p>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="benefit-item">
            <i class="fas fa-users fa-3x text-primary mb-3"></i>
            <h4>{{ __('navigation.team_collaboration') }}</h4>
            <p>{{ __('navigation.collaborate_with_talented_professionals_in_a_supportive_environment') }}</p>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="benefit-item">
            <i class="fas fa-chart-line fa-3x text-primary mb-3"></i>
            <h4>{{ __('navigation.growth_opportunities') }}</h4>
            <p>{{ __('navigation.continuous_learning_and_career_development_opportunities') }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Open Positions -->
  <section class="open-positions py-5">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center mb-5">
          <h2 class="display-5 fw-bold">{{ __('navigation.open_positions') }}</h2>
          <p class="lead">{{ __('navigation.current_job_openings') }}</p>
        </div>
      </div>
      <div class="row">
        <!-- Job positions would be loaded from database -->
        <div class="col-md-6 mb-4">
          <div class="job-card">
            <h4>Senior PHP Developer</h4>
            <p>Full-time • Yemen</p>
            <p>Experience with Laravel, MySQL, and modern web technologies...</p>
            <a href="#" class="btn btn-primary">{{ __('navigation.apply_now') }}</a>
          </div>
        </div>
        <!-- Add more positions -->
      </div>
    </div>
  </section>

  <!-- Application Form -->
  <section class="application-form py-5 bg-light">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center mb-5">
          <h2 class="display-5 fw-bold">{{ __('navigation.apply_for_position') }}</h2>
          <p class="lead">{{ __('navigation.send_resume') }}</p>
        </div>
      </div>
      <div class="row justify-content-center">
        <div class="col-lg-8">
          <form action="{{ route('careers.apply', app()->getLocale()) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="name" class="form-label">{{ __('navigation.name') }}</label>
                <input type="text" class="form-control" id="name" name="applicant_name" required>
              </div>
              <div class="col-md-6 mb-3">
                <label for="email" class="form-label">{{ __('navigation.email') }}</label>
                <input type="email" class="form-control" id="email" name="applicant_email" required>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="phone" class="form-label">{{ __('navigation.phone') }}</label>
                <input type="tel" class="form-control" id="phone" name="applicant_phone">
              </div>
              <div class="col-md-6 mb-3">
                <label for="position" class="form-label">{{ __('navigation.position') }}</label>
                <select class="form-select" id="position" name="job_title">
                  <option value="">{{ __('navigation.select_position') }}</option>
                  <option value="senior-php-developer">{{ __('navigation.senior_php_developer') }}</option>
                  <!-- Add more positions -->
                </select>
              </div>
            </div>
            <div class="mb-3">
              <label for="cover_letter" class="form-label">{{ __('navigation.cover_letter') }}</label>
              <textarea class="form-control" id="cover_letter" name="cover_letter" rows="4"></textarea>
            </div>
            <div class="mb-3">
              <label for="resume" class="form-label">{{ __('navigation.resume_cv') }}</label>
              <input type="file" class="form-control" id="resume" name="resume" accept=".pdf,.doc,.docx">
            </div>
            <button type="submit" class="btn btn-primary">{{ __('navigation.submit_application') }}</button>
          </form>
        </div>
      </div>
    </div>
  </section>
</main>
@endsection