@extends('reddnres.layouts.app')

@section('title', 'REDD PLUS - Home')
@section('meta_description', 'Forests are the backbone of a healthy and sustainable natural environment.')

@section('content')

<section class="hero-slider" id="heroSlider">
  <div class="slides-wrapper">
    @foreach($sliders as $slider)
      @php
        $translation = $slider->translations->first();
        $imgUrl = $translation && $translation->slider_translation_img
          ? Storage::url($translation->slider_translation_img)
          : asset('reddnres/src/Redd-homepage-banner-3.jpg');
        $slideUrl = null;
        if ($slider->slider_url_type === 'EXTERNAL') {
          $slideUrl = $slider->slider_url;
        } elseif ($slider->slider_url_type === 'INTERNAL') {
          $slideUrl = url($slider->slider_url);
        } elseif ($slider->slider_url_type === 'FILE') {
          $slideUrl = Storage::url($slider->slider_url_upload);
        }
      @endphp
      <div class="slide {{ $loop->first ? 'active' : '' }}" style="background-image: url('{{ $imgUrl }}');">
        <div class="slide-content">
          <h1>{{ $translation->slider_translation_title ?? 'REDD PLUS Malaysia' }}</h1>
          @if($slideUrl)
            <div class="slide-links">
              <a href="{{ $slideUrl }}" class="slide-btn" {{ $slider->slider_url_type === 'EXTERNAL' ? 'target="_blank"' : '' }}>
                {{ $slider->slider_url_type === 'EXTERNAL' ? 'LEARN MORE' : 'FIND OUT MORE' }} <span class="arrow-right">&rarr;</span>
              </a>
            </div>
          @endif
        </div>
      </div>
    @endforeach
  </div>
  <button class="slider-nav prev" id="sliderPrev" aria-label="Previous">&#x276E;</button>
  <button class="slider-nav next" id="sliderNext" aria-label="Next">&#x276F;</button>
  <div class="slider-dots" id="sliderDots"></div>
</section>

@php $about = $sections['home-about'] ?? null; @endphp
@if($about)
  @php $aboutTrans = $about->translations->first(); @endphp
  <section class="about-section">
    <div class="container">
      <div class="about-grid">
        @if($about->article_image)
        <div class="about-image">
          <img src="{{ Storage::url($about->article_image) }}" alt="{{ $aboutTrans->article_translation_title ?? 'About' }}">
        </div>
        @endif
        <div class="about-text">
          @if($aboutTrans)
            <h2><span class="green-text">{{ $aboutTrans->article_translation_title }}</span></h2>
            {!! $aboutTrans->article_translation_content !!}
          @endif
        </div>
      </div>
    </div>
  </section>
@endif

@php $objectives = $sections['home-objectives'] ?? null; @endphp
@if($objectives)
  @php $objTrans = $objectives->translations->first(); @endphp
  <section class="objectives-section">
    <div class="container">
      <div class="objectives-grid">
        @if($objectives->article_image)
        <div class="objectives-image">
          <img src="{{ Storage::url($objectives->article_image) }}" alt="{{ $objTrans->article_translation_title ?? 'Objectives' }}" class="desktop-img">
          <img src="{{ Storage::url($objectives->article_image) }}" alt="{{ $objTrans->article_translation_title ?? 'Objectives' }}" class="mobile-img">
        </div>
        @endif
        <div class="objectives-content">
          @if($objTrans)
            {!! $objTrans->article_translation_content !!}
          @endif
        </div>
      </div>
    </div>
  </section>
@endif
@endsection