@extends('layouts.app')
@php($heroData=data_get($hero,'data',[])) @php($listingData=data_get($listing,'data',[])) @php($ctaData=data_get($cta,'data',[]))
@section('content')
<main><section class="resources-hero relative overflow-hidden text-cream">@if($media)<img class="absolute inset-0 h-full w-full object-cover" src="{{ $media->url() }}" alt="{{ $media->translation($locale)?->alt_text ?? '' }}" loading="eager">@endif<div class="absolute inset-0 bg-gradient-to-r from-olive/95 via-olive/78 to-olive/50"></div><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.05]"></div><div class="container-page relative flex h-full flex-col justify-end pb-16 md:pb-20"><p class="eyebrow text-cream/68">{{ $heroData['eyebrow']??'' }}</p><h1 class="display-hero mt-4 max-w-3xl">{{ $heroData['title']??'' }}</h1><p class="mt-5 max-w-2xl text-base leading-relaxed text-cream/82 md:text-lg">{{ $heroData['summary']??'' }}</p></div></section>
@if($featured) @php($item=$featured->translation($locale))<section class="bg-cream py-20 md:py-28" aria-labelledby="featured-resource-heading"><div class="container-page"><div class="resources-section-label"><span></span><p class="eyebrow">{{ $locale==='ar'?'مورد مميز':'Featured Resource' }}</p></div><article class="resources-featured mt-9"><figure class="resources-featured-image">@if($featured->primaryMedia)<img src="{{ $featured->primaryMedia->url() }}" alt="{{ $featured->primaryMedia->translation($locale)?->alt_text??$item->title }}">@endif</figure><div class="resources-featured-content"><div class="resources-card-meta"><span class="resource-type">{{ $featured->resource_type->label() }}</span><span>{{ $featured->category->translation($locale)?->name }}</span><span>{{ app(\App\Services\Content\ReadingTime::class)->minutes($item->body) }} {{ $locale==='ar'?'دقائق قراءة تقريباً':'min read' }}</span></div><h2 id="featured-resource-heading">{{ $item->title }}</h2><p>{{ $item->excerpt }}</p><span class="resources-read-more" aria-disabled="true">{{ $locale==='ar'?'التفاصيل قريباً':'Resource details coming soon' }}</span></div></article></div></section>@endif
<section id="resource-library" class="relative overflow-hidden border-t border-border bg-card py-20 md:py-28" aria-labelledby="resource-library-heading"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.02]"></div><div class="container-page relative"><div class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,.62fr)] lg:items-end"><div><p class="eyebrow">{{ $listingData['eyebrow']??'' }}</p><h2 id="resource-library-heading" class="display-xl mt-4 max-w-2xl">{{ $listingData['title']??'' }}</h2><p class="mt-5 max-w-xl leading-relaxed text-foreground/68">{{ $listingData['summary']??'' }}</p></div><form class="resources-search" action="{{ route('resources',['locale'=>$locale]) }}#resource-library" method="get"><span class="sr-only">{{ $listingData['search_placeholder']??'' }}</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/></svg>@if($category)<input type="hidden" name="category" value="{{ $category->translation($locale)?->slug }}">@endif<input type="search" name="q" value="{{ $query }}" placeholder="{{ $listingData['search_placeholder']??'' }}"></form></div><div class="resources-controls mt-10"><div class="resources-filter-rail horizontal-filter-rail" data-horizontal-scroll-rail><div class="no-scrollbar resources-filter-row horizontal-filter-row" role="toolbar" data-horizontal-scroll-row><a class="resource-filter" data-active="{{ !$category?'true':'false' }}" href="{{ route('resources',['locale'=>$locale,'q'=>$query?:null]) }}#resource-library">{{ $listingData['all_label']??'' }}</a>@foreach($categories as $entry)@php($slug=$entry->translation($locale)?->slug)<a class="resource-filter" data-active="{{ $category?->is($entry)?'true':'false' }}" href="{{ route('resources',['locale'=>$locale,'category'=>$slug,'q'=>$query?:null]) }}#resource-library">{{ $entry->translation($locale)?->name }}</a>@endforeach</div></div></div><div class="resources-grid mt-10">@forelse($resources as $resource)@php($r=$resource->translation($locale))<article class="resource-card group"><figure class="resource-card-image">@if($resource->primaryMedia)<img src="{{ $resource->primaryMedia->url() }}" alt="{{ $resource->primaryMedia->translation($locale)?->alt_text??$r->title }}">@endif</figure><div class="resource-card-content"><div class="resources-card-meta"><span class="resource-type">{{ $resource->resource_type->label() }}</span><span>{{ $resource->category->translation($locale)?->name }}</span></div><h3>{{ $r->title }}</h3><p>{{ $r->excerpt }}</p><span class="resources-read-more" aria-disabled="true">{{ $locale==='ar'?'التفاصيل قريباً':'Resource details coming soon' }}</span></div></article>@empty</div><div class="resources-empty mt-10"><div><h3>{{ $listingData['empty_title']??'' }}</h3><p>{{ $listingData['empty_summary']??'' }}</p></div><a href="{{ route('resources',['locale'=>$locale]) }}#resource-library">{{ $listingData['reset_label']??'' }}</a></div>@endforelse @if($resources->isNotEmpty())</div>@endif</div></section>
<section class="relative overflow-hidden bg-cedar py-20 text-cream md:py-28"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.06]"></div><div class="container-page relative grid gap-9 md:grid-cols-[1fr_auto] md:items-center"><div><p class="eyebrow text-cream/65">{{ $ctaData['eyebrow']??'' }}</p><h2 class="display-xl mt-4 max-w-2xl">{{ $ctaData['title']??'' }}</h2><p class="mt-5 max-w-xl leading-relaxed text-cream/72">{{ $ctaData['summary']??'' }}</p></div><div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap"><a class="resources-cta resources-cta--light" href="{{ route('products',['locale'=>$locale]) }}">{{ $ctaData['products_label']??'' }}</a><a class="resources-cta resources-cta--outline" href="{{ route('contact',['locale'=>$locale]) }}">{{ $ctaData['contact_label']??'' }}</a></div></div></section></main>
@endsection