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

   
    <!-- Hero Section Carousel - FULL VIEWPORT HEIGHT -->
   @include('./partials/hero')

    <!-- Optional: Content after the full-screen hero -->
    <!--
    <div class="container py-5" style="background-color: #f0f2f5;">
        <h2>محتوى إضافي بعد القسم الرئيسي</h2>
        <p>هذا النص يظهر أسفل قسم الشاشة الكاملة.</p>
    </div>
    -->

    <!-- ============================================ -->
<!--              NEWS & EVENTS SECTION           -->
<!-- ============================================ -->
    @include('./partials/news-events')

<!-- ============================================ -->
<!--        CERTIFICATES & AWARDS SECTION         -->
<!-- ============================================ -->
<section class="certificates-section" id="certificates">
    <div class="container">

        <!-- Section Header -->
        <div class="section-header">
            <h2>{{ __('certificates.section_title') }}</h2>
            <p>{{ __('certificates.section_subtitle') }}</p>
        </div>

        <!-- Certificates Grid -->
        <div class="row g-4">

            <!-- Certificate Card 1 -->
            <div class="col-lg-4 col-md-6">
                <div class="iso-card">
                     <div class="iso-card-image-wrapper">
                        <a href="#"><img src="{{ asset('img/certificate.jpg') }}" alt="{{ __('certificates.cert_1_alt') }}"></a>
                    </div>
                    <div class="iso-card-content">
                        <h2>{{ __('certificates.cert_1_title') }}</h2>
                        <a href="#" class="iso-card-link"><i class="fa-solid fa-eye"></i><span>{{ __('certificates.view_certificate') }}</span></a>
                    </div>
                </div>
            </div>

            <!-- Certificate Card 2 -->
            <div class="col-lg-4 col-md-6">
                <div class="iso-card">
                     <div class="iso-card-image-wrapper">
                        <a href="#"><img src="{{ asset('img/certificate.jpg') }}" alt="{{ __('certificates.cert_2_alt') }}"></a>
                    </div>
                    <div class="iso-card-content">
                        <h2>{{ __('certificates.cert_2_title') }}</h2>
                        <a href="#" class="iso-card-link"><i class="fa-solid fa-eye"></i><span>{{ __('certificates.view_certificate') }}</span></a>
                    </div>
                </div>
            </div>

            <!-- Certificate Card 3 -->
            <div class="col-lg-4 col-md-6">
                <div class="iso-card">
                    <div class="iso-card-image-wrapper">
                        <a href="#"><img src="{{ asset('img/certificate.jpg') }}" alt="{{ __('certificates.cert_3_alt') }}"></a>
                    </div>
                    <div class="iso-card-content">
                        <h2>{{ __('certificates.cert_3_title') }}</h2>
                        <a href="#" class="iso-card-link"><i class="fa-solid fa-eye"></i><span>{{ __('certificates.view_certificate') }}</span></a>
                    </div>
                </div>
            </div>

            <!-- Certificate Card 4 -->
            <div class="col-lg-4 col-md-6">
                <div class="iso-card">
                      <div class="iso-card-image-wrapper">
                        <a href="#"><img src="{{ asset('img/certificate.jpg') }}" alt="{{ __('certificates.cert_4_alt') }}"></a>
                    </div>
                    <div class="iso-card-content">
                        <h2>{{ __('certificates.cert_4_title') }}</h2>
                        <a href="#" class="iso-card-link"><i class="fa-solid fa-eye"></i><span>{{ __('certificates.view_certificate') }}</span></a>
                    </div>
                </div>
            </div>

            <!-- Certificate Card 5 -->
            <div class="col-lg-4 col-md-6">
                <div class="iso-card">
                     <div class="iso-card-image-wrapper">
                        <a href="#"><img src="{{ asset('img/certificate.jpg') }}" alt="{{ __('certificates.cert_5_alt') }}"></a>
                    </div>
                    <div class="iso-card-content">
                        <h2>{{ __('certificates.cert_5_title') }}</h2>
                        <a href="#" class="iso-card-link"><i class="fa-solid fa-eye"></i><span>{{ __('certificates.view_certificate') }}</span></a>
                    </div>
                </div>
            </div>

            <!-- Certificate Card 6 -->
            <div class="col-lg-4 col-md-6">
                <div class="iso-card">
                      <div class="iso-card-image-wrapper">
                        <a href="#"><img src="{{ asset('img/certificate.jpg') }}" alt="{{ __('certificates.cert_6_alt') }}"></a>
                    </div>
                    <div class="iso-card-content">
                        <h2>{{ __('certificates.cert_6_title') }}</h2>
                        <a href="#" class="iso-card-link"><i class="fa-solid fa-eye"></i><span>{{ __('certificates.view_certificate') }}</span></a>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- View More Button -->
        <div class="text-center mt-5">
            <a href="#" class="btn btn-more-certs">{{ __('certificates.view_more_button') }}</a>
        </div>

    </div>
</section>
<!-- Events Section -->
<section class="events-section">
  <div class="container">
    <!-- Section Header -->
    <div class="text-center mb-5">
      <h2 class="events-title">{{ __('events.section_title') }}</h2>
      <p class="events-subtitle">{{ __('events.section_subtitle') }}</p>
    </div>

    <!-- Events Grid -->
    <div class="row justify-content-center">
      <!-- Card 1 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="event-card">
          <div class="event-card-img-container">
            <img src="{{ asset('img/blog1.jpg') }}" alt="{{ __('events.event_1_alt') }}">
            <div class="date-badge">
              <span class="month">{{ __('events.month_july') }}</span>
              <span class="day">20</span>
              <span class="year">2025</span>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">{{ __('events.event_1_title') }}</p>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="event-card">
          <div class="event-card-img-container">
            <img src="{{ asset('img/blog2.jpg') }}" alt="{{ __('events.event_2_alt') }}">
            <div class="date-badge">
              <span class="month">{{ __('events.month_june') }}</span>
              <span class="day">02</span>
              <span class="year">2025</span>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">{{ __('events.event_2_title') }}</p>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="event-card">
          <div class="event-card-img-container">
            <img src="{{ asset('img/blog3.jpg') }}" alt="{{ __('events.event_3_alt') }}">
            <div class="date-badge">
              <span class="month">{{ __('events.month_may') }}</span>
              <span class="day">25</span>
              <span class="year">2025</span>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">{{ __('events.event_3_title') }}</p>
          </div>
        </div>
      </div>

      <!-- Card 4 -->
      <div class="col-xl-3 col-md-6 mb-4">
        <div class="event-card">
          <div class="event-card-img-container">
            <img src="{{ asset('img/blog4.jpg') }}" alt="{{ __('events.event_4_alt') }}">
            <div class="date-badge">
              <span class="month">{{ __('events.month_may') }}</span>
              <span class="day">25</span>
              <span class="year">2025</span>
            </div>
          </div>
          <div class="card-body">
            <p class="card-text">{{ __('events.event_4_title') }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- "View All" Button -->
    <div class="text-center mt-4">
      <a href="#" class="btn btn-view-all">{{ __('events.view_all_button') }}</a>
    </div>
  </div>
</section>

<!-- Partners Section -->
<section class="partners-section">
  <div class="container">
    <!-- Section Title -->
    <h2 class="partners-title">{{ __('partners.section_title') }}</h2>

    <!-- Partners Logo Grid -->
    <div class="row g-4 justify-content-center">
      <!-- Partner 1 -->
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="partner-logo-item">
          <a href="#" title="{{ __('partners.partner_1') }}">
            <img src="{{ asset('img/partners/p1.jpg') }}" alt="{{ __('partners.partner_1') }}">
          </a>
        </div>
      </div>
      <!-- Partner 2 -->
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="partner-logo-item">
          <a href="#" title="{{ __('partners.partner_2') }}">
            <img src="{{ asset('img/partners/p2.png') }}" alt="{{ __('partners.partner_2') }}">
          </a>
        </div>
      </div>
      <!-- Partner 3 -->
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="partner-logo-item">
          <a href="#" title="{{ __('partners.partner_3') }}">
            <img src="{{ asset('img/partners/p3.png') }}" alt="{{ __('partners.partner_3') }}">
          </a>
        </div>
      </div>
      <!-- Partner 4 -->
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="partner-logo-item">
          <a href="#" title="{{ __('partners.partner_4') }}">
            <img src="{{ asset('img/partners/p4.jpeg') }}" alt="{{ __('partners.partner_4') }}">
          </a>
        </div>
      </div>
      <!-- Partner 5 -->
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="partner-logo-item">
          <a href="#" title="{{ __('partners.partner_5') }}">
            <img src="{{ asset('img/partners/p5.png') }}" alt="{{ __('partners.partner_5') }}">
          </a>
        </div>
      </div>
      <!-- Partner 6 -->
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="partner-logo-item">
          <a href="#" title="{{ __('partners.partner_6') }}">
            <img src="{{ asset('img/partners/p6.png') }}" alt="{{ __('partners.partner_6') }}">
          </a>
        </div>
      </div>
      <!-- Partner 7 -->
      <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="partner-logo-item">
          <a href="#" title="{{ __('partners.partner_7') }}">
            <img src="{{ asset('img/partners/p7.webp') }}" alt="{{ __('partners.partner_7') }}">
          </a>
        </div>
      </div>
      <!-- Empty placeholder for alignment -->
      <div class="col-lg-3 col-md-4 col-sm-6 d-none d-md-block d-lg-none">
      </div>
    </div>
  </div>
</section>

<!-- CTA & Contact Section -->
<section class="cta-contact-section">
  <div class="container">
    <div class="row g-4 align-items-stretch">

      <!-- Left Column: App CTA -->
      <div class="col-lg-6">
        <div class="app-cta-card">
          <div class="row w-100 align-items-center">
            <div class="col-md-7">
              <div class="cta-text-content">
                <p class="cta-subtitle">{{ __('contact.cta_subtitle') }}</p>
                <h2 class="cta-title">{{ __('contact.cta_title') }}</h2>
                <div class="app-store-buttons">
                  <a href="#" title="{{ __('contact.google_play_title') }}" class="me-2">
                    <img src="{{ asset('img/playstore.png') }}" alt="{{ __('contact.google_play_alt') }}">
                  </a>
                  <a href="#" title="{{ __('contact.app_store_title') }}">
                    <img src="{{ asset('img/appstore.png') }}" alt="{{ __('contact.app_store_alt') }}">
                  </a>
                </div>
              </div>
            </div>
            <div class="col-md-5 d-none d-md-block">
              <img src="{{ asset('img/mobile-portrait.png') }}" alt="{{ __('contact.phone_mockup_alt') }}" class="phone-mockup">
            </div>
          </div>
        </div>
      </div>

      <!-- Right Column: Location & Info -->
      <div class="col-lg-6">
        <div class="contact-info-wrapper">
          <a href="#" title="{{ __('contact.map_title') }}">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14449.27965030669!2d56.333977!3d25.124873!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ef4f9035b95693d%3A0xd0c3605e762d6b74!2sHuman%20Resources%20Department!5e0!3m2!1sen!2sus!4v1749548709809!5m2!1sen!2sus"  style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
          </a>
          <div class="row g-4">
            <!-- Info Box 1: Call Center -->
            <div class="col-md-6">
              <div class="info-box">
                <div class="info-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-headset" viewBox="0 0 16 16">
                    <path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866-.5L6 11.333V9a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z"/>
                  </svg>
                </div>
                <div class="info-text">
                  <h5 class="info-title">{{ __('contact.call_center_title') }}</h5>
                  <p class="info-detail">{{ __('contact.call_center_number') }}</p>
                </div>
              </div>
            </div>
            <!-- Info Box 2: Working Hours -->
            <div class="col-md-6">
              <div class="info-box">
                <div class="info-text w-100">
                  <h5 class="info-title">{{ __('contact.working_hours_title') }}</h5>
                  <p class="info-detail">
                    {!! __('contact.working_hours_detail') !!}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
@endsection