@extends('user.layouts.app')

@section('body_class', 'heritage')

@section('content')
    <section class="banner-slider">
        @if($bannerImages->isNotEmpty())
            @foreach($bannerImages as $image)
                <div class="slider-item">
                    <img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}" alt="Slide {{ $loop->iteration }}">
                </div>
            @endforeach
        @elseif($banners && $banners->video)
            <div class="slider-item">
                <video class="slide-video slide-media" loop muted autoplay preload="metadata">
                    <source src="{{ asset('/storage/distribution/video/banner_video/' . $banners->video) }}" type="video/mp4" />
                </video>
            </div>
        @endif
    </section>
    
    <div class="banner-inner-content">
      <div class="container">
        <ul class="bread-come">
          <li>
            <a href="/">Home</a>
          </li>
          <li>Heritage</li>
        </ul>
      </div>
    </div>
    <section class="cms-page">
      <div class="container">
        @if(!empty($heritage))
            @if($heritage->heading)
                <h1 data-aos="fade-up" class="green">{{ $heritage->heading }}</h1>
            @endif

            @if($heritage->paragraph_1)
                <div data-aos="fade-up">
                    {!! $heritage->paragraph_1 !!}
                </div>
            @endif

            @if($heritage->first_image)
                <div class="heritage-img" data-aos="fade-up">
                    <img src="{{ asset($heritage->first_image) }}" alt="Heritage Image" />
                </div>
            @endif

            @if($heritage->paragraph_2)
                <div data-aos="fade-up">
                    {!! $heritage->paragraph_2 !!}
                </div>
            @endif

            @if($heritage->paragraph_3)
                <div data-aos="fade-up">
                    {!! $heritage->paragraph_3 !!}
                </div>
            @endif

            @if($heritage->second_image)
                <div class="full-img">
                    <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300" src="{{ asset($heritage->second_image) }}" alt="Heritage Full Image" />
                </div>
            @endif

            @if($heritage->paragraph_4)
                <div data-aos="fade-up">
                    {!! $heritage->paragraph_4 !!}
                </div>
            @endif
        @else
            <div class="alert alert-info">Heritage content coming soon.</div>
        @endif
      </div>
    </section>
@endsection

@section('footer')
    <!-- footer bottom appears here -->
@endsection