@extends('front.'.config('app.template', '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)
			<div class="bg-white rounded-[.5rem] shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
				<div class="p-[2rem]">
					<div class="text-center mb-[1.5rem]">
						<div class="w-[80px] h-[80px] bg-[#68359A] rounded-full flex items-center justify-center mx-auto mb-[1rem]">
							<i class="text-[2rem] text-white">📚</i>
						</div>
						<h3 class="text-[1.5rem] font-[600] mb-[.5rem]">{{ $category->name ?? __('Unknown Category') }}</h3>
						<p class="text-gray-600 text-[.9rem] mb-[1rem]">
							{{ $category->description ?? $category->safe_description ?? __('No description available') }}
						</p>
						<div class="text-[.9rem] text-[#68359A] font-semibold">
							{{ ($category->stories_count ?? 0) }} {{ __('Stories') }}
						</div>
					</div>
					
					<div class="text-center">
						<a href="{{ route('stories.index', ['category' => $category->slug ?? '']) }}" 
						   class="inline-block bg-[#68359A] text-white px-[2rem] py-[.75rem] rounded-[.5rem] hover:bg-[#5a2d85] transition-colors duration-300">
							{{ __('Browse Stories') }}
						</a>
					</div>
				</div>
			</div>
			@endforeach
		</div>

		@else
		<div class="text-center py-[3rem]">
			<div class="text-[3rem] mb-[1rem]">📚</div>
			<h3 class="text-[1.5rem] font-[600] mb-[.5rem]">{{ __('No categories found') }}</h3>
			<p class="text-gray-600 mb-[2rem]">{{ __('Story categories are not available at the moment') }}</p>
			<a href="{{ route('stories.index') }}" class="inline-block bg-[#68359A] text-white px-[2rem] py-[.75rem] rounded-[.5rem] hover:bg-[#5a2d85]">
				{{ __('Browse All Stories') }}
			</a>
		</div>
		@endif
	</div>
</div>

{{-- HELPFUL LINKS --}}
<div class="px-[1.5rem] mb-[3rem]">
	<div class="max-w-[1200px] w-full mx-auto">
		<div class="bg-gray-50 rounded-[.5rem] p-[2rem] text-center">
			<h4 class="text-[1.2rem] font-[600] mb-[1rem]">{{ __('Quick Links') }}</h4>
			<div class="flex flex-wrap gap-[1rem] justify-center">
				<a href="{{ route('stories.index', ['type' => 'free']) }}" class="px-[1.5rem] py-[.5rem] bg-green-500 text-white rounded-[.25rem] hover:bg-green-600">
					{{ __('Free Stories') }}
				</a>
				<a href="{{ route('stories.index', ['type' => 'premium']) }}" class="px-[1.5rem] py-[.5rem] bg-[#68359A] text-white rounded-[.25rem] hover:bg-[#5a2d85]">
					{{ __('Premium Stories') }}
				</a>
				<a href="{{ route('stories.index') }}" class="px-[1.5rem] py-[.5rem] bg-blue-500 text-white rounded-[.25rem] hover:bg-blue-600">
					{{ __('All Stories') }}
				</a>
			</div>
		</div>
	</div>
</div>

@endsection