@extends($activeTemplate.'layouts.frontend')
@section('content')
  @php
    $banner = getContent('banner.content', true);
    $highlightedText = $banner->data_values->highlighted_heading_text;
    $tags = App\Models\Tag::latest('id')->take(12)->get();
@endphp

<section class="hero">
  <div class="hero-content--wrap">
    <div class="container position-relative">
      <div class="row gy-5 justify-content-start">
        <div class="col-md-7 d-flex align-items-center justify-content-start">
          <div class="hero--content position-relative d-flex flex-column justify-content-start align-items-start">

            {{-- Heading with highlighted text --}}
            <h1 class="title text-start fw--600 wow animate__animated animate__fadeInUp splite-text" data-splitting data-wow-delay="0.2s"> 
              {!! str_replace(__($highlightedText ?? ''), "<span class='text--base'>" . e($highlightedText ?? '') . "</span>", __($banner->data_values->heading ?? '')) !!}
            </h1>

            {{-- Short details --}}
            <p class="subtitle text-start fs--18 w--80 wow animate__animated animate__fadeInUp splite-text" data-splitting data-wow-delay="0.3s">
              {{ Str::limit(__($banner->data_values->short_details ?? ''), 200) }}
            </p>

            {{-- Tags --}}
            <ul class="tag--wrap w--80 d-flex flex-wrap gap--8 wow animate__animated animate__fadeInUp" data-wow-delay="0.4s">
              @foreach ($tags ?? [] as $tag)
                <li><a href="{{ route('tag.product', ['slug' => slug($tag->name), 'id' => $tag->id]) }}" class="text--black7">#{{ ucwords(__($tag->name) ?? '') }}</a></li>
              @endforeach
            </ul>

            {{-- Button --}}
            <div class="hero-btn--wrap d-flex justify-content-start w--100 flex-wrap gap--20 wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
              @if(!empty($banner?->data_values?->button_link) && !empty($banner?->data_values?->button_title))
                <a href="{{ $banner->data_values->button_link }}" class="btn btn--base btn--lg">{{ __($banner->data_values->button_title) }} <i class="fa-solid fa-arrow-right"></i></a>
              @endif
            </div>

          </div>
        </div>

        {{-- Banner Image --}}
        <div class="col-md-5 d-flex justify-content-center justify-content-md-end align-items-center">
          <div class="thumb--wrap d-flex justify-content-end">
            @if(!empty($banner?->data_values?->banner_image))
              <img src="{{ getImage(getFilePath('frontend') . '/banner/' . $banner->data_values->banner_image) }}" alt="@lang('Banner Image')">
            @else
              <img src="{{ asset('assets/images/general/default.png') }}" alt="@lang('Default Banner')">
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@if($sections->secs != null)
@foreach(json_decode($sections->secs) as $sec)
@include($activeTemplate.'sections.'.$sec)
@endforeach
@endif
@endsection