@extends('layouts.app', ['title' => $currentCategory['bangla'] . ' (' . $currentCategory['italian'] . ')'])

@section('content')
<div class="space-y-4 w-full pb-20 font-siliguri">

    <!-- Top Hero Header (Exact view_conversation_subcategories.xml) -->
    <div class="relative rounded-3xl overflow-hidden shadow-xl border border-slate-700/60 bg-[#071426] text-white p-4">
        @php
            $catPhotos = [
                'salute_medicina' => 'cat_salute_medicina.jpg',
                'lavoro_professioni' => 'cat_lavoro_professioni.webp',
                'cibo_ristorazione' => 'cat_cibo_ristorazione.webp',
                'trasporti_mobilita' => 'cat_trasporti_mobilita.webp',
                'auto_patente_guida' => 'cat_auto_patente_guida.jpg',
                'shopping_negozi' => 'cat_shopping_negozi.jpg',
                'casa_abitazione' => 'cat_casa_abitazione.jpg',
                'documenti_immigrazione' => 'cat_documenti_immigrazione.jpg',
                'banca_finanze' => 'cat_banca_finanze.webp',
                'posta_consegne' => 'cat_posta_consegne.webp',
                'sicurezza_emergenze' => 'cat_sicurezza_emergenze.webp',
                'scuola_formazione' => 'cat_scuola_formazione.jpg',
                'famiglia_relazioni' => 'cat_famiglia_relazioni.jpg',
                'telefono_tecnologia' => 'cat_telefono_tecnologia.jpg',
                'bollette_utenze' => 'cat_bollette_utenze.jpg',
                'legale_caf_inps' => 'cat_legale_caf_inps.jpg',
                'viaggi_turismo' => 'cat_viaggi_turismo.jpg',
                'servizi_personali' => 'cat_servizi_personali.jpg',
                'vita_quotidiana' => 'cat_vita_quotidiana.jpg',
                'italiano_essenziale' => 'cat_italiano_essenziale.jpg',
            ];
            $heroPhoto = $catPhotos[$currentCategory['slug']] ?? 'cat_salute_medicina.jpg';
        @endphp

        <!-- Background photo with overlay -->
        <div class="absolute right-0 top-0 bottom-0 w-[55%] overflow-hidden opacity-40">
            <img src="{{ asset('assets/images/' . $heroPhoto) }}" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-r from-[#071426] to-transparent"></div>
        </div>

        <div class="relative z-10 flex items-center gap-3">
            <a href="{{ route('conversations.index') }}" class="w-10 h-10 rounded-2xl bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition flex-shrink-0 shadow-xs">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div class="min-w-0">
                <div class="flex items-center gap-2">
                    <span class="text-xl">{{ $currentCategory['icon'] ?? '📌' }}</span>
                    <span class="text-[10px] font-black text-emerald-300 bg-emerald-900/60 px-2 py-0.5 rounded-full font-outfit uppercase border border-emerald-500/30">
                        মূল বিষয়
                    </span>
                </div>
                <h1 class="text-lg sm:text-xl font-black text-white font-outfit truncate mt-0.5">
                    {{ $currentCategory['italian'] }}
                </h1>
                <p class="text-xs font-semibold text-slate-300 truncate">
                    {{ $currentCategory['bangla'] }} · ২০টি সাব-ক্যাটাগরি
                </p>
            </div>
        </div>
    </div>

    <!-- 20 Subcategories Grid (Exact item_conversation_subcategory.xml with Real Photographs) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
        @foreach($currentCategory['sub_categories'] as $subIndex => $sub)
        @php
            $subPhotoFile = 'conv_photo_' . $sub['slug'] . '_v1.webp';
        @endphp
        <a href="{{ route('conversations.subcategory', [$currentCategory['slug'], $sub['slug']]) }}" 
           class="relative rounded-2xl overflow-hidden shadow-lg border border-slate-200/80 bg-white h-32 flex justify-between group active:scale-98 transition transform">
            
            <!-- Real Photograph Background on Right 66% with Center Crop (Exact iv_subcat_photo) -->
            <div class="absolute right-0 top-0 bottom-0 w-[66%] overflow-hidden">
                <img src="{{ asset('assets/images/' . $subPhotoFile) }}" 
                     onerror="this.src='{{ asset('assets/images/' . $heroPhoto) }}'"
                     alt="{{ $sub['italian'] }}" 
                     class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                
                <!-- Gradient Bleed overlay (Exact v_subcat_photo_gradient) -->
                <div class="absolute inset-0 bg-gradient-to-r from-white via-white/80 to-transparent"></div>
            </div>

            <!-- Left Content: Bengali Title, Italian Title & Learning Steps Badge -->
            <div class="relative z-10 flex flex-col justify-between p-3 min-w-0 max-w-[62%]">
                <div>
                    <h3 class="text-sm sm:text-base font-black text-[#071426] font-outfit truncate leading-tight">
                        {{ $sub['bangla'] }}
                    </h3>
                    <p class="text-xs font-bold text-[#17253A] truncate mt-1">
                        {{ $sub['italian'] }}
                    </p>
                </div>

                <!-- Learning Steps Badge (Exact tv_subcat_badge) -->
                <span class="inline-block text-[9.5px] font-bold text-[#27364A] bg-slate-100/90 border border-slate-200 px-2 py-0.5 rounded-md self-start">
                    শব্দার্থ · বাক্য · কুইজ
                </span>
            </div>

            <!-- Top Right: Subcategory Number Badge (Exact tv_subcat_number) -->
            <div class="absolute top-2 right-2 z-10 bg-black/40 backdrop-blur-md text-white text-[9px] font-black px-1.5 py-0.5 rounded-md font-outfit">
                {{ sprintf('%02d', $subIndex + 1) }}
            </div>

            <!-- Bottom Right: Blue Arrow Circle Button (Exact cv_subcat_arrow) -->
            <div class="absolute bottom-2.5 right-2.5 z-10 w-8 h-8 rounded-full bg-[#2563EB] text-white flex items-center justify-center shadow-lg group-hover:scale-110 transition">
                <i data-lucide="chevron-right" class="w-4 h-4 stroke-[2.5]"></i>
            </div>
        </a>
        @endforeach
    </div>

</div>
@endsection