@extends('layouts.app')
@section('title','Journey of Life GCC - Empowering Lives Through Knowledge')
@section('content')
<!-- Hero -->
<section class="hero">
  <div class="container">
    <div class="hero-content">
      <div class="hero-left">
        <img src="/images/hero.jpg" alt="Journey of Life GCC" onerror="this.style.display='none'">
      </div>
      <div class="hero-text">
        <span class="hero-badge">🌙 Since 1993</span>
        <h1>Empowering Lives<br>Through Knowledge</h1>
        <p>Journey of Life GCC provides free Islamic education, Arabic language, and personal development programs to learners across the Gulf and worldwide.</p>
        <p>Join thousands of students who have transformed their lives through our programs.</p>
        <div class="hero-stats">
          <div class="stat-item"><div class="stat-number">30<span>+</span></div><div class="stat-label">Years of Service</div></div>
          <div class="stat-item"><div class="stat-number">1K<span>+</span></div><div class="stat-label">Students Served</div></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Services -->
@if($services->count())
<section class="services-section">
  <div class="container">
    <div class="section-header">
      <span class="section-badge">What We Offer</span>
      <h2 class="section-title">Our Programs & Services</h2>
    </div>
    <div class="services-grid">
      @foreach($services as $service)
      <div class="service-card">
        @if($service->featured_image)
        <img src="/storage/{{ $service->featured_image }}" alt="{{ $service->title }}" class="service-image" onerror="this.style.display='none'">
        @endif
        <div class="service-content">
          <div class="service-icon">
            <i class="{{ $service->icon ?? 'fas fa-graduation-cap' }}"></i>
            <span style="font-size:0.8rem;color:#6b7280">{{ $service->mode }} • {{ $service->duration }}</span>
          </div>
          <h3 class="service-title">{{ $service->title }}</h3>
          <p class="service-description">{{ $service->short_description }}</p>
          <a href="{{ route('services.show', $service->slug) }}" class="read-more">Learn More <i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>
@endif

<!-- Blog -->
@if($posts->count())
<section class="blog-section">
  <div class="container">
    <div class="section-header">
      <span class="section-badge">Latest Articles</span>
      <h2 class="section-title">From Our Blog</h2>
    </div>
    <div class="blog-grid">
      @foreach($posts as $post)
      <div class="blog-card">
        @if($post->featured_image)
        <img src="/storage/{{ $post->featured_image }}" alt="{{ $post->title }}" class="blog-image" onerror="this.style.display='none'">
        @endif
        <div class="blog-content">
          <div class="blog-date"><i class="fas fa-calendar"></i> {{ $post->published_at?->format('M d, Y') }}</div>
          <h3 class="blog-title">{{ $post->title }}</h3>
          <p class="blog-excerpt">{{ Str::limit($post->excerpt, 120) }}</p>
          <a href="{{ route('blog.show', $post->slug) }}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      @endforeach
    </div>
  </div>
</section>
@endif

<!-- CTA -->
<section class="cta-section">
  <div class="container">
    <div class="cta-content">
      <h2>Ready to Start Your Journey?</h2>
      <div class="cta-buttons">
        <a href="{{ route('contact') }}" class="btn btn-primary"><i class="fas fa-envelope"></i> Contact Us</a>
        <a href="https://wa.me/97333850267" class="btn btn-whatsapp" target="_blank"><i class="fab fa-whatsapp"></i> WhatsApp Us</a>
      </div>
    </div>
  </div>
</section>

<!-- Contact Info -->
<section class="contact-section">
  <div class="container">
    <div class="section-header"><h2 class="section-title">Get In Touch</h2></div>
    <div class="contact-grid">
      <div class="contact-item">
        <div class="contact-icon icon-green"><i class="fab fa-whatsapp"></i></div>
        <div class="contact-info"><h3>WhatsApp</h3><p>+973 33850267</p></div>
      </div>
      <div class="contact-item">
        <div class="contact-icon icon-blue"><i class="fas fa-phone"></i></div>
        <div class="contact-info"><h3>Call Us</h3><p>+973 33959121</p></div>
      </div>
      <div class="contact-item">
        <div class="contact-icon icon-red"><i class="fas fa-envelope"></i></div>
        <div class="contact-info"><h3>Email</h3><p>info@journeyoflifegcc.com</p></div>
      </div>
      <div class="contact-item">
        <div class="contact-icon icon-blue"><i class="fas fa-map-marker-alt"></i></div>
        <div class="contact-info"><h3>Location</h3><p>Al Saya, Kingdom of Bahrain</p></div>
      </div>
    </div>
  </div>
</section>
@endsection