@extends(‘layouts.app’)

@section(‘title’, $seoData[‘title’])
@section(‘meta_description’, $seoData[‘description’])
@section(‘meta_keywords’, $seoData[‘keywords’])

@section(‘structured_data’)
{!! $seoData[‘json_ld_script’] !!}
@endsection

@section(‘og_image’)
@php
$mainImage = $equipment->main_image;
$webpPath = preg_replace(‘/\.(jpg|jpeg|png)$/i’, ‘.webp’, $mainImage);
$finalImg = (file_exists(storage_path(‘app/public/’ . $webpPath)) && !empty($webpPath)) ? $webpPath : $mainImage;
@endphp

@endsection

@section(‘content’)

{{– Equipment Details Header –}}

{{ __(‘site.back_to_list’) }}

{{ $equipment->available ? ‘✓ ‘ . __(‘site.available’) : ‘✗ ‘ . __(‘site.unavailable’) }}

{{ $equipment->name }}

{!! $equipment->description ?: __(‘site.hero_subtitle’) !!}

{{ __(‘site.request_via_site’) }}

{{ __(‘site.call_us’) }}

{{– Image Showcase –}}

{{– Main Image Display –}}

name }}'”
class=”max-w-full max-h-full object-contain transition-all duration-700 group-hover:scale-105″>

{{– Gallery Thumbnails –}}
@if($equipment->images && count($equipment->images) > 0)

{{– Main Image Thumbnail –}}
main_image) }}’; activeWebp = ‘{{ $equipment->main_image_webp ? asset(‘storage/’ . $equipment->main_image_webp) : ” }}'”
class=”flex-shrink-0 w-20 h-20 lg:w-24 lg:h-24 rounded-2xl overflow-hidden border-2 transition-all duration-300 bg-white”
:class=”activeImage === ‘{{ asset(‘storage/’ . $equipment->main_image) }}’ ? ‘border-primary-500 ring-4 ring-primary-500/20’ : ‘border-white/10 hover:border-white/30′”>
@if($equipment->main_image_webp)

@endif

{{– Gallery Images –}}
@foreach($equipment->images as $index => $image)
@php
$webp = $equipment->gallery_images_webp[$index] ?? null;
// Fallback check if the model property is missing but file exists
if (!$webp) {
$potentialWebp = str_replace([‘.jpg’, ‘.jpeg’, ‘.png’], ‘.webp’, $image);
if (file_exists(storage_path(‘app/public/’ . $potentialWebp))) {
$webp = $potentialWebp;
}
}
@endphp

@if($webp)

@endif

@endforeach

@endif

{{– Equipment Info –}}

{{– SEO Keywords Section –}}
@if($equipment->keywords)

@endif

{{– Related Equipment –}}
@if($relatedEquipment->count() > 0)

@endif
{{– FAQ Section (SEO Authority) –}}

{{– SEO Authority Matrix: Equipment Coverage by City –}}

@endsection

@extends(‘layouts.app’)

@section(‘title’, $seoData[‘title’])
@section(‘meta_description’, $seoData[‘description’])
@section(‘meta_keywords’, $seoData[‘keywords’])

@section(‘structured_data’)
{!! $seoData[‘json_ld_script’] !!}
@endsection

@section(‘og_image’)
@php
$mainImage = $equipment->main_image;
$webpPath = preg_replace(‘/\.(jpg|jpeg|png)$/i’, ‘.webp’, $mainImage);
$finalImg = (file_exists(storage_path(‘app/public/’ . $webpPath)) && !empty($webpPath)) ? $webpPath : $mainImage;
@endphp
<meta property=”og:image” content=”{{ asset(‘storage/’ . $finalImg) }}”>
<meta name=”twitter:image” content=”{{ asset(‘storage/’ . $finalImg) }}”>
@endsection

@section(‘content’)

{{– Equipment Details Header –}}
<section class=”relative py-20 lg:py-32 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white overflow-hidden”>
<div class=”absolute inset-0 opacity-10″>
<div class=”absolute inset-0″ style=”background-image: url(‘data:image/svg+xml,%3Csvg width=\’60\’ height=\’60\’ viewBox=\’0 0 60 60\’ xmlns=\’http://www.w3.org/2000/svg\’%3E%3Cpath d=\’M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556 15.858 12.14 28 0zm12.142 0l13.128 13.13-1.414 1.414L44.727 0h-.586zM.83 0l13.13 13.13-1.415 1.413L0 1.414V.828z\’ fill=\’%23ffffff\’ fill-opacity=\’0.4\’ fill-rule=\’evenodd\’/%3E%3C/svg%3E’);”></div>
</div>

<div class=”container relative z-10″>
<div class=”mb-8″>
<a href=”{{ route(‘equipment.index’, [‘locale’ => app()->getLocale()]) }}” class=”inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors font-bold”>
<svg class=”w-5 h-5 rtl:rotate-180″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M15 19l-7-7 7-7″></path></svg>
{{ __(‘site.back_to_list’) }}
</a>
</div>

<div class=”grid lg:grid-cols-2 gap-12 items-start”>
<div class=”space-y-6 animate-slide-up”>
<div class=”inline-flex px-4 py-2 bg-{{ $equipment->available ? ‘green’ : ‘red’ }}-500/20 text-{{ $equipment->available ? ‘green’ : ‘red’ }}-400 border border-{{ $equipment->available ? ‘green’ : ‘red’ }}-500/30 rounded-full text-xs font-black uppercase”>
{{ $equipment->available ? ‘✓ ‘ . __(‘site.available’) : ‘✗ ‘ . __(‘site.unavailable’) }}
</div>

<h1 class=”text-5xl md:text-6xl font-black tracking-tighter”>{{ $equipment->name }}</h1>
<div class=”text-xl text-slate-300 leading-relaxed”>{!! $equipment->description ?: __(‘site.hero_subtitle’) !!}</div>

<div class=”flex flex-col sm:flex-row items-center gap-4 pt-4″>
<a href=”{{ route(‘contact’, [‘locale’ => app()->getLocale(), ‘equipment’ => $equipment->id, ‘category’ => $equipment->category_id]) }}#rental-form” class=”flex-1 px-8 py-5 bg-primary-500 text-slate-950 font-black rounded-2xl hover:bg-white transition-all duration-300 uppercase tracking-widest italic flex items-center justify-center gap-3 group shadow-xl shadow-primary-500/20″>
{{ __(‘site.request_via_site’) }}
<svg class=”w-5 h-5 group-hover:translate-x-1 transition-transform rtl:rotate-180″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M17 8l4 4m0 0l-4 4m4-4H3″></path></svg>
</a>
<a href=”tel:0556837784″ class=”flex-1 px-8 py-5 bg-white/10 text-white font-black rounded-2xl hover:bg-white hover:text-slate-950 transition-all duration-300 text-center uppercase tracking-widest italic flex items-center justify-center gap-3″>
<svg class=”w-5 h-5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z”/></svg>
{{ __(‘site.call_us’) }}
</a>
</div>
</div>

{{– Image Showcase –}}
<div class=”relative z-20 group order-first lg:order-none” x-data=”{
activeImage: ‘{{ asset(‘storage/’ . $equipment->main_image) }}’,
activeWebp: ‘{{ $equipment->main_image_webp ? asset(‘storage/’ . $equipment->main_image_webp) : ” }}’
}”>
{{– Main Image Display –}}
<div class=”aspect-[4/3] lg:aspect-video rounded-[2rem] lg:rounded-[2.5rem] overflow-hidden bg-white border-4 border-white/20 shadow-premium relative flex items-center justify-center p-6 lg:p-10″>
<picture class=”flex items-center justify-center w-full h-full”>
<source :srcset=”activeWebp” type=”image/webp”>
<img :src=”activeImage” :alt=”‘{{ $equipment->name }}'”
class=”max-w-full max-h-full object-contain transition-all duration-700 group-hover:scale-105″>
</picture>
</div>

{{– Gallery Thumbnails –}}
@if($equipment->images && count($equipment->images) > 0)
<div class=”mt-4 lg:mt-6 flex gap-3 lg:gap-4 overflow-x-auto pb-4 no-scrollbar scroll-smooth”>
{{– Main Image Thumbnail –}}
<button @click=”activeImage = ‘{{ asset(‘storage/’ . $equipment->main_image) }}’; activeWebp = ‘{{ $equipment->main_image_webp ? asset(‘storage/’ . $equipment->main_image_webp) : ” }}'”
class=”flex-shrink-0 w-20 h-20 lg:w-24 lg:h-24 rounded-2xl overflow-hidden border-2 transition-all duration-300 bg-white”
:class=”activeImage === ‘{{ asset(‘storage/’ . $equipment->main_image) }}’ ? ‘border-primary-500 ring-4 ring-primary-500/20’ : ‘border-white/10 hover:border-white/30′”>
<picture class=”flex items-center justify-center w-full h-full p-1″>
@if($equipment->main_image_webp)
<source srcset=”{{ asset(‘storage/’ . $equipment->main_image_webp) }}” type=”image/webp”>
@endif
<img src=”{{ asset(‘storage/’ . $equipment->main_image) }}” alt=”{{ $equipment->name }} – {{ __(‘site.main_image’) ?? ‘Main image’ }}” class=”max-w-full max-h-full object-contain” loading=”lazy”>
</picture>
</button>

{{– Gallery Images –}}
@foreach($equipment->images as $index => $image)
@php
$webp = $equipment->gallery_images_webp[$index] ?? null;
// Fallback check if the model property is missing but file exists
if (!$webp) {
$potentialWebp = str_replace([‘.jpg’, ‘.jpeg’, ‘.png’], ‘.webp’, $image);
if (file_exists(storage_path(‘app/public/’ . $potentialWebp))) {
$webp = $potentialWebp;
}
}
@endphp
<button @click=”activeImage = ‘{{ asset(‘storage/’ . $image) }}’; activeWebp = ‘{{ $webp ? asset(‘storage/’ . $webp) : ” }}'”
class=”flex-shrink-0 w-20 h-20 lg:w-24 lg:h-24 rounded-2xl overflow-hidden border-2 transition-all duration-300 bg-white”
:class=”activeImage === ‘{{ asset(‘storage/’ . $image) }}’ ? ‘border-primary-500 ring-4 ring-primary-500/20’ : ‘border-white/10 hover:border-white/30′”>
<picture class=”flex items-center justify-center w-full h-full p-1″>
@if($webp)
<source srcset=”{{ asset(‘storage/’ . $webp) }}” type=”image/webp”>
@endif
<img src=”{{ asset(‘storage/’ . $image) }}” alt=”{{ $equipment->name }} – {{ $index + 1 }}” class=”max-w-full max-h-full object-contain” loading=”lazy”>
</picture>
</button>
@endforeach
</div>
@endif
</div>
</div>
</div>
</section>

{{– Equipment Info –}}
<section class=”py-20 bg-white”>
<div class=”container”>
<div class=”grid lg:grid-cols-3 gap-12″>
{{– Main Content –}}
<div class=”lg:col-span-2 space-y-12″>
{{– Specifications –}}
@if($equipment->specifications || $equipment->capacity || $equipment->height)
<div class=”bg-slate-50 rounded-3xl p-8 space-y-6″>
<h2 class=”text-3xl font-black text-slate-900″>{{ __(‘site.technical_specs’) }}</h2>
<div class=”grid md:grid-cols-2 gap-6″>
@if($equipment->capacity)
<div class=”flex items-center gap-4″>
<div class=”w-12 h-12 rounded-2xl bg-primary-500/10 flex items-center justify-center text-primary-600″>
<svg class=”w-6 h-6″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3″></path></svg>
</div>
<div>
<div class=”text-xs font-bold text-slate-400 uppercase”>{{ __(‘site.capacity’) }}</div>
<div class=”text-lg font-black text-slate-900″>{{ $equipment->capacity }}</div>
</div>
</div>
@endif

@if($equipment->height)
<div class=”flex items-center gap-4″>
<div class=”w-12 h-12 rounded-2xl bg-primary-500/10 flex items-center justify-center text-primary-600″>
<svg class=”w-6 h-6″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M7 11l5-5m0 0l5 5m-5-5v12″></path></svg>
</div>
<div>
<div class=”text-xs font-bold text-slate-400 uppercase”>{{ __(‘site.height’) }}</div>
<div class=”text-lg font-black text-slate-900″>{{ $equipment->height }}</div>
</div>
</div>
@endif

@if($equipment->specifications)
@foreach($equipment->specifications as $key => $value)
@php
// Handle both flat associative array and key/value pair array formats
// Format 1: [‘key’ => ‘Power’, ‘value’ => ‘100HP’]
// Format 2: [‘Power’ => ‘100HP’]
$specKey = ”;
$specValue = ”;

if (is_array($value)) {
if (isset($value[‘key’]) && isset($value[‘value’])) {
$specKey = $value[‘key’];
$specValue = $value[‘value’];
} else {
// Handle cases where it might be an array but not in key/value format
$specKey = $key;
$specValue = implode(‘, ‘, $value);
}
} else {
$specKey = $key;
$specValue = $value;
}

// Skip if both key and value are empty
if (empty($specKey) && empty($specValue)) continue;
@endphp
<div class=”flex items-center gap-4″>
<div class=”w-12 h-12 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-500″>
<svg class=”w-6 h-6″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z”></path></svg>
</div>
<div>
<div class=”text-xs font-bold text-slate-400 uppercase”>{{ is_string($specKey) ? $specKey : ‘Spec’ }}</div>
<div class=”text-lg font-black text-slate-900″>{{ $specValue }}</div>
</div>
</div>
@endforeach
@endif
</div>
</div>
@endif

{{– Cities Available –}}
@if($equipment->cities->count() > 0)
<div>
<h2 class=”text-3xl font-black text-slate-900 mb-8″>{{ __(‘site.available_cities’) }}</h2>
<div class=”flex flex-wrap gap-4″>
@foreach($equipment->cities as $city)
<a href=”{{ route(‘city.show’, [‘locale’ => app()->getLocale(), ‘slug’ => $city->slug]) }}” class=”px-6 py-3 bg-slate-100 hover:bg-primary-500 hover:text-slate-950 text-slate-700 rounded-2xl font-bold transition-all”>
📍 {{ $city->{‘name_’ . app()->getLocale()} }}
</a>
@endforeach
</div>
</div>
@endif
</div>

{{– Sidebar –}}
<div class=”space-y-8″>
{{– Pricing Card –}}
<div class=”sticky top-24 bg-gradient-to-br from-slate-900 to-slate-800 text-white rounded-3xl p-8 space-y-6 shadow-premium”>
<h3 class=”text-2xl font-black”>{{ __(‘site.prices’) }}</h3>

<div class=”space-y-4″>
@if($equipment->price_daily)
<div class=”flex justify-between items-center pb-4 border-b border-white/10″>
<span class=”font-bold text-slate-300″>{{ __(‘site.daily’) }}</span>
<span class=”text-3xl font-black text-primary-400″>{{ number_format($equipment->price_daily) }} <span class=”text-sm”>{{ __(‘site.sar’) }}</span></span>
</div>
@endif

@if($equipment->price_monthly)
<div class=”flex justify-between items-center pb-4 border-b border-white/10″>
<span class=”font-bold text-slate-300″>{{ __(‘site.monthly’) }}</span>
<span class=”text-3xl font-black text-primary-400″>{{ number_format($equipment->price_monthly) }} <span class=”text-sm”>{{ __(‘site.sar’) }}</span></span>
</div>
@endif

@if($equipment->price_yearly)
<div class=”flex justify-between items-center”>
<span class=”font-bold text-slate-300″>{{ __(‘site.yearly’) }}</span>
<span class=”text-3xl font-black text-primary-400″>{{ number_format($equipment->price_yearly) }} <span class=”text-sm”>{{ __(‘site.sar’) }}</span></span>
</div>
@endif
</div>

<div class=”pt-6 space-y-4″>
<a href=”{{ route(‘contact’, [‘locale’ => app()->getLocale(), ‘equipment’ => $equipment->id, ‘category’ => $equipment->category_id]) }}#rental-form” class=”block w-full px-6 py-5 bg-primary-500 text-slate-950 font-black rounded-2xl hover:bg-white transition-all duration-300 text-center uppercase tracking-widest italic shadow-xl shadow-primary-500/10″>
{{ __(‘site.request_via_site’) }}
</a>
<div class=”grid grid-cols-2 gap-3″>
<a href=”tel:0556837784″ class=”px-4 py-4 bg-white/5 border border-white/10 text-white font-black rounded-2xl hover:bg-white hover:text-slate-950 transition-all text-center text-xs uppercase tracking-widest italic”>
{{ __(‘site.call_us’) }}
</a>
<a href=”https://wa.me/966556837784″ target=”_blank” class=”px-4 py-4 bg-emerald-500 text-white font-black rounded-2xl hover:bg-emerald-600 transition-all text-center text-xs uppercase tracking-widest italic”>
WhatsApp
</a>
</div>
</div>
</div>

{{– Category Link –}}
<a href=”{{ route(‘category.show’, [‘locale’ => app()->getLocale(), ‘slug’ => $equipment->category->slug]) }}” class=”block p-6 bg-slate-50 rounded-2xl hover:bg-slate-100 transition-all group”>
<div class=”text-xs font-bold text-slate-400 uppercase mb-2″>{{ __(‘site.categories’) }}</div>
<div class=”text-xl font-black text-slate-900 group-hover:text-primary-600 transition-colors”>{{ $equipment->category->{‘name_’ . app()->getLocale()} }}</div>
</a>
</div>
</div>
</div>
</section>

{{– SEO Keywords Section –}}
@if($equipment->keywords)
<section class=”py-12 bg-white border-t border-slate-100″>
<div class=”container”>
<h3 class=”text-lg font-bold text-slate-900 mb-6 flex items-center gap-2″>
<svg class=”w-5 h-5 text-primary-500″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z”></path></svg>
{{ __(‘site.keywords_tags’) }}
</h3>
<div class=”flex flex-wrap gap-3″>
@foreach(explode(‘,’, $equipment->keywords) as $keyword)
@if(trim($keyword))
<span class=”px-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm font-medium text-slate-600 hover:border-primary-500 hover:text-primary-600 hover:shadow-sm transition-all duration-300 cursor-default”>
# {{ trim($keyword) }}
</span>
@endif
@endforeach
</div>
</div>
</section>
@endif

{{– Related Equipment –}}
@if($relatedEquipment->count() > 0)
<section class=”py-20 bg-slate-50″>
<div class=”container”>
<h2 class=”text-4xl font-black text-slate-900 mb-12″>{{ __(‘site.related_equipment’) }}</h2>
<div class=”grid md:grid-cols-2 lg:grid-cols-4 gap-6″>
@foreach($relatedEquipment as $item)
<a href=”{{ route(‘equipment.show’, [‘locale’ => app()->getLocale(), ‘slug’ => $item->slug]) }}” class=”group block bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-premium transition-all hover:-translate-y-2″>
<div class=”aspect-video bg-slate-200″>
@if($item->main_image)
<picture>
@if($item->main_image_webp)
<source srcset=”{{ asset(‘storage/’ . $item->main_image_webp) }}” type=”image/webp”>
@endif
<img src=”{{ asset(‘storage/’ . $item->main_image) }}” alt=”{{ $item->{‘name_’ . app()->getLocale()} }}” class=”w-full h-full object-cover group-hover:scale-110 transition-transform duration-500″>
</picture>
@endif
</div>
<div class=”p-6″>
<h3 class=”font-black text-slate-900 group-hover:text-primary-600 transition-colors”>{{ $item->name }}</h3>
@if($item->price_daily)
<div class=”mt-3 text-xl font-black text-primary-600″>{{ number_format($item->price_daily) }} <span class=”text-sm text-slate-500″>{{ __(‘site.sar’) }}/{{ __(‘site.daily’) }}</span></div>
@endif
</div>
</a>
@endforeach
</div>
</div>
</section>
@endif
{{– FAQ Section (SEO Authority) –}}
<section class=”py-20 bg-white border-t border-slate-100″>
<div class=”container”>
<div class=”max-w-4xl mx-auto”>
<h2 class=”text-3xl font-black text-slate-900 mb-12 text-center italic”>{{ __(‘site.faq_title’) ?? ‘Frequently Asked Questions’ }}</h2>

<div class=”space-y-4″ x-data=”{ active: null }”>
@php
$cityName = (app()->getLocale() == ‘ar’ ? ‘المملكة العربية السعودية’ : ‘Saudi Arabia’);
$faqs = app()->getLocale() == ‘ar’ ? [
[‘q’ => “هل تتوفر صيانة لـ {$equipment->name}؟”, ‘a’ => “نعم، جميع معداتنا بما فيها {$equipment->name} تخضع لصيانة دورية صارمة لضمان أعلى مستويات الأداء في مواقعكم.”],
[‘q’ => “هل تتوفر {$equipment->name} في منطقتي؟”, ‘a’ => “شركة السامي تغطي كافة مناطق المملكة العربية السعودية بما فيها الرياض، الدمام، وجدة. نوفر خدمات التوصيل السريع لعدم تعطيل مشاريعكم.”],
[‘q’ => “كيف أحصل على أفضل سعر لطلب {$equipment->name}؟”, ‘a’ => “نقدم خصومات خاصة للطلبات ذات المدد الطويلة (شهري وسنوي) وللمشاريع الكبرى. تواصل معنا للحصول على عرض مخصص.”]
] : [
[‘q’ => “Is maintenance provided for {$equipment->name}?”, ‘a’ => “Yes, all our equipment, including {$equipment->name}, undergoes rigorous periodic maintenance to ensure peak performance at your site.”],
[‘q’ => “Is {$equipment->name} available in my area?”, ‘a’ => “Al-Sami covers all regions of Saudi Arabia including Riyadh, Dammam, and Jeddah. We provide fast delivery services to prevent project delays.”],
[‘q’ => “How can I get the best price for {$equipment->name}?”, ‘a’ => “We offer special discounts for long-term rentals (monthly and yearly) and for major projects. Contact us for a custom quote.”]
];
@endphp

@foreach($faqs as $i => $faq)
<div class=”border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300″ :class=”active === {{ $i }} ? ‘ring-2 ring-primary-500/20 border-primary-500/50’ : ””>
<button @click=”active = (active === {{ $i }} ? null : {{ $i }})” class=”w-full px-8 py-6 flex items-center justify-between text-right gap-4 bg-slate-50 hover:bg-slate-100 transition-colors”>
<span class=”text-lg font-bold text-slate-900 text-right”>{{ $faq[‘q’] }}</span>
<svg class=”w-5 h-5 text-primary-600 transition-transform duration-300″ :class=”active === {{ $i }} ? ‘rotate-180’ : ”” fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2.5″ d=”M19 9l-7 7-7-7″></path></svg>
</button>
<div x-show=”active === {{ $i }}” x-collapse>
<div class=”px-8 py-6 text-slate-600 font-medium leading-relaxed bg-white border-t border-slate-100″>
{{ $faq[‘a’] }}
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</section>

{{– SEO Authority Matrix: Equipment Coverage by City –}}
<section class=”py-20 bg-slate-950 text-white overflow-hidden relative”>
<div class=”absolute inset-0 opacity-10 pointer-events-none”>
<div class=”absolute inset-0″ style=”background-image: url(‘data:image/svg+xml,%3Csvg width=\’100\’ height=\’100\’ viewBox=\’0 0 100 100\’ xmlns=\’http://www.w3.org/2000/svg\’%3E%3Ccircle cx=\’50\’ cy=\’50\’ r=\’1\’ fill=\’%23ffffff\’/%3E%3C/svg%3E’);”></div>
</div>

<div class=”container relative z-10″>
<div class=”text-center mb-16″>
<h2 class=”text-3xl md:text-4xl font-black mb-4 italic tracking-tight uppercase”>
{{ app()->getLocale() == ‘ar’ ? “تأجير {$equipment->name} في مدن المملكة” : “{$equipment->name} Rental Across Saudi Cities” }}
</h2>
<div class=”w-24 h-1 bg-primary-500 mx-auto rounded-full”></div>
</div>

<div class=”grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3″>
@php $currentLocale = app()->getLocale(); @endphp
@foreach($allCities as $matrixCity)
<a href=”{{ route(‘equipment.index’, [‘locale’ => $currentLocale, ‘city’ => ($currentLocale === ‘ar’ ? $matrixCity->slug_ar : $matrixCity->slug_en)]) }}”
class=”group p-4 bg-white/5 border border-white/10 rounded-xl hover:bg-primary-500 hover:border-primary-500 transition-all duration-300 text-center”>
<span class=”block text-xs text-slate-400 group-hover:text-slate-950 uppercase tracking-widest font-black mb-1 transition-colors”>{{ __(‘site.rental_in’) ?? ‘Rental in’ }}</span>
<span class=”block text-sm font-bold text-white group-hover:text-slate-950 transition-colors”>{{ $matrixCity->name }}</span>
</a>
@endforeach
</div>
</div>
</section>
@endsection