@extends('layouts.customer')

@section('title', $title)
@section('meta_description', $metaDescription)

@section('content')
<section class="py-5">
    <div class="container-fluid container-wide">
        <h1 class="solusi-page-title mb-3">{{ $headerLang->judul ?? 'Solusi Kami' }}</h1>
        <div class="solusi-page-desc text-secondary mb-5">{!! $headerLang->deskripsi ?? '' !!}</div>

        <div class="row g-5">
            @forelse ($kategoriList as $kat)
            <div class="col-md-4">
                <a href="{{ url('/solusi/artikel/' . $kat->slug) }}" class="text-decoration-none">
                    <div class="solusi-kategori-card rounded-4 overflow-hidden position-relative"
                         style="background-image: url('{{ $kat->gambar ? img_src($kat->gambar) : '' }}');">
                        <div class="solusi-kategori-overlay p-4 d-flex flex-column h-100">
                            <div class="mt-auto">
                                <h4 class="text-white fw-bold mb-1 solusi-kategori-title">{{ $kat->judul }}</h4>
                                <p class="text-white small mb-0 solusi-kategori-desc">{{ strip_tags($kat->deskripsi ?? '') }}</p>
                            </div>
                            <span class="text-white fw-semibold small mt-2">
                                {{ __('nav.lihat_artikel') }} <i class="fas fa-arrow-right ms-1"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>
            @empty
            <p class="text-muted">Belum ada kategori solusi.</p>
            @endforelse
        </div>

        @if ($kategoriList->hasPages())
        <div class="d-flex justify-content-between mt-5 custom-pagination">
            @if (!$kategoriList->onFirstPage())
                <a href="{{ $kategoriList->previousPageUrl() }}" class="text-decoration-none">
                    <i class="fas fa-arrow-left me-1"></i> Sebelumnya
                </a>
            @else
                <span></span>
            @endif

            @if ($kategoriList->hasMorePages())
                <a href="{{ $kategoriList->nextPageUrl() }}" class="text-decoration-none">
                    Selanjutnya <i class="fas fa-arrow-right ms-1"></i>
                </a>
            @endif
        </div>
        @endif
    </div>
</section>
@endsection