@extends('front.tendra.master')

@section('body')

{{-- HERO SECTION --}}
<div class="pb-[5rem] relative top-[-90px] pt-[130px] flex items-center flex-col justify-start bg-[radial-gradient(#3f4a54,#2a3137)] after:content-[''] after:h-full after:w-full after:absolute after:top-0 after:left-0 after:bg-[linear-gradient(180deg,#00000014_50%,transparent_70%)] [&>*:not(.absolute)]:relative [&>*]:z-[2] px-[1.5rem]">
	@if(config('app.top_cover'))
	<div class="top-0 left-0 w-full h-full absolute bg-bottom bg-cover opacity-[.3]" style="background-image:url('{{ function_exists('src') ? src('storage/images/'.config('app.top_cover')) : asset('storage/images/'.config('app.top_cover')) }}')"></div>
	@endif
	<div class="text-[2.5rem] font-[700] max-[650px]:font-[600] max-w-[800px] mx-auto text-center leading-[1.8] capitalize text-[#fff] max-[768px]:text-[1.8rem]">
		{{ __('Story Categories') }}
	</div>
	<div class="max-w-[600px] w-full mt-[1rem] text-center">
		<p class="text-[#cbd5e0] text-[1.1rem]">{{ __('Browse our collection of audio stories by category') }}</p>
	</div>
</div>

{{-- NAVIGATION --}}
<div class="mt-[-90px] mb-[3rem] px-[1.5rem]">
	<div class="max-w-[1200px] w-full mx-auto">
		<div class="flex flex-wrap gap-[1rem] justify-center items-center mb-[2rem]">
			<a href="{{ route('stories.index') }}" class="px-[1.5rem] py-[.5rem] rounded-[.5rem] bg-gray-200 text-gray-700 hover:bg-[#68359A] hover:text-white">
				{{ __('All Stories') }}
			</a>
			<a href="{{ route('stories.categories') }}" class="px-[1.5rem] py-[.5rem] rounded-[.5rem] bg-[#68359A] text-white">
				{{ __('Browse Categories') }}
			</a>
		</div>
	</div>
</div>

{{-- ERROR MESSAGE --}}
@if(session('error') || isset($error))
<div class="px-[1.5rem] mb-[2rem]">
	<div class="max-w-[1200px] w-full mx-auto">
		<div class="bg-red-100 border border-red-400 text-red-700 px-[1rem] py-[.75rem] rounded-[.5rem]">
			{{ session('error') ?? $error ?? __('An error occurred') }}
		</div>
	</div>
</div>
@endif

{{-- CATEGORIES GRID --}}
<div class="px-[1.5rem] mb-[5rem]">
	<div class="max-w-[1200px] w-full mx-auto">
		@if($categories && $categories->count() > 0)
		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[2rem]">
			@foreach($categories as $category)
			@if($category && isset($category->name) && isset($category->slug))
			<div class="bg-white rounded-[.5rem] shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
				<div class="p-[2rem]">
					<h3 class="text-[1.5rem] font-[600] mb-[1rem] text-gray-800">
						{{ $category->name ?? __('Unnamed Category') }}
					</h3>
					
					<p class="text-gray-600 mb-[1.5rem] line-clamp-3">
						{{ $category->description ?? $category->safe_description ?? __('No description available for this category.') }}
					</p>
					
					<div class="flex items-center justify-between">
						<span class="text-[.9rem] text-gray-500">
							{{ isset($category->stories_count) ? trans_choice(':count story|:count stories', $category->stories_count, ['count' => $category->stories_count]) : __('Stories available') }}
						</span>
						<a href="{{ route('stories.index', ['category' => $category->slug]) }}" class="bg-[#68359A] text-white px-[1.5rem] py-[.5rem] rounded-[.25rem] text-[.9rem] hover:bg-[#5a2d85] transition-colors duration-200">
							{{ __('View Stories') }}
						</a>
					</div>
				</div>
			</div>
			@endif
			@endforeach
		</div>
		@else
		<div class="text-center py-[4rem]">
			<div class="text-[4rem] mb-[1rem]">📚</div>
			<h3 class="text-[1.5rem] font-[600] mb-[1rem] text-gray-700">{{ __('No Categories Available') }}</h3>
			<p class="text-gray-600 mb-[2rem] max-w-[500px] mx-auto">
				{{ __('There are currently no story categories available. Please check back later or contact us if you believe this is an error.') }}
			</p>
			<a href="{{ route('stories.index') }}" class="bg-[#68359A] text-white px-[2rem] py-[.75rem] rounded-[.5rem] hover:bg-[#5a2d85] transition-colors duration-200">
				{{ __('View All Stories') }}
			</a>
		</div>
		@endif
	</div>
</div>

@endsection