@extends('layouts.app', ['title' => 'ইতালিতে চলার কথা (বাস্তব জীবনের কথোপকথন)'])

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

    <!-- Header & Search Bar -->
    <div class="bg-[#071426] rounded-3xl p-4 shadow-xl border border-slate-700/60 text-white">
        <div class="flex items-center justify-between gap-3">
            <div>
                <span class="text-[10px] font-bold text-emerald-400 bg-emerald-950/80 border border-emerald-500/30 px-2 py-0.5 rounded-full uppercase tracking-wider font-outfit">
                    বাস্তব জীবনের কথোপকথন
                </span>
                <h1 class="text-xl sm:text-2xl font-black text-white font-outfit mt-1">
                    কথোপকথন
                </h1>
                <p class="text-xs text-slate-300 font-medium">
                    ২০টি প্রধান বিষয় · বাস্তব জীবনের কথোপকথন
                </p>
            </div>
            <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-amber-500 to-orange-400 text-white flex items-center justify-center text-2xl shadow-lg shadow-orange-500/30 flex-shrink-0">
                💬
            </div>
        </div>

        <!-- Search Input -->
        <form action="{{ route('conversations.index') }}" method="GET" class="mt-3.5 flex gap-2">
            <div class="relative flex-1">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="ইতালিয়ান বা বাংলায় কথোপকথন খুঁজুন..." 
                       class="w-full bg-[#12213A] border border-slate-600 rounded-2xl px-4 py-2.5 text-xs font-semibold text-white placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 shadow-inner">
            </div>
            <button type="submit" class="bg-[#00A86B] hover:bg-[#008F5B] text-white text-xs font-bold px-4 py-2.5 rounded-2xl shadow-md transition flex items-center gap-1.5">
                <i data-lucide="search" class="w-3.5 h-3.5"></i>
                <span>খুঁজুন</span>
            </button>
        </form>
    </div>

    <!-- 20 Main Categories Grid (Exact item_category_card_banner.xml with Real Photos) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
        @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',
            ];

            $catColors = [
                'salute_medicina' => '#D31027',
                'lavoro_professioni' => '#0066EB',
                'cibo_ristorazione' => '#E65100',
                'trasporti_mobilita' => '#00A86B',
                'auto_patente_guida' => '#C68A00',
                'shopping_negozi' => '#7B1FA2',
                'casa_abitazione' => '#1B8A5A',
                'documenti_immigrazione' => '#1565C0',
                'banca_finanze' => '#D48806',
                'posta_consegne' => '#E67E22',
                'sicurezza_emergenze' => '#C0392B',
                'scuola_formazione' => '#0097A7',
                'famiglia_relazioni' => '#D81B60',
                'telefono_tecnologia' => '#3949AB',
                'bollette_utenze' => '#F39C12',
                'legale_caf_inps' => '#673AB7',
                'viaggi_turismo' => '#00838F',
                'servizi_personali' => '#E91E63',
                'vita_quotidiana' => '#00897B',
                'italiano_essenziale' => '#546E7A',
            ];
        @endphp

        @foreach($categories as $index => $cat)
        @php
            $photoFile = $catPhotos[$cat['slug']] ?? 'cat_salute_medicina.jpg';
            $themeColor = $catColors[$cat['slug']] ?? '#00A86B';
            $subsCount = count($cat['sub_categories'] ?? []);
        @endphp
        <a href="{{ route('conversations.category', $cat['slug']) }}" 
           class="relative rounded-2xl overflow-hidden shadow-lg border border-white/20 h-28 sm:h-32 flex justify-between group active:scale-98 transition transform"
           style="background-color: {{ $themeColor }}15;">

            <!-- Real Photograph Background on Right 67% with Center Crop -->
            <div class="absolute right-0 top-0 bottom-0 w-[67%] overflow-hidden">
                <img src="{{ asset('assets/images/' . $photoFile) }}" 
                     alt="{{ $cat['italian'] }}" 
                     class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                
                <!-- Gradient Bleed overlay -->
                <div class="absolute inset-0 bg-gradient-to-r from-white via-white/70 to-transparent"></div>
            </div>

            <!-- Left 60% Content & Badges -->
            <div class="relative z-10 flex flex-col justify-between p-3 min-w-0 max-w-[65%]">
                
                <!-- Icon in white rounded circle -->
                <div class="w-9 h-9 rounded-full bg-white shadow-md flex items-center justify-center text-lg flex-shrink-0">
                    {{ $cat['icon'] ?? '💬' }}
                </div>

                <!-- Titles & Subcategory Count Badge -->
                <div class="min-w-0">
                    <h3 class="text-sm sm:text-base font-black text-slate-900 font-outfit truncate drop-shadow-xs">
                        {{ $cat['italian'] }}
                    </h3>
                    <p class="text-xs font-bold text-slate-700 truncate mt-0.5">
                        {{ $cat['bangla'] }}
                    </p>
                    <span class="inline-block mt-1 text-[9px] font-bold text-white px-2 py-0.5 rounded-full shadow-xs"
                          style="background-color: {{ $themeColor }};">
                        {{ $subsCount }}টি সাব-ক্যাটাগরি
                    </span>
                </div>
            </div>

            <!-- Bottom Right Arrow Button (Exact cv_cat_arrow) -->
            <div class="absolute bottom-2 right-2 w-7 h-7 rounded-full flex items-center justify-center text-white shadow-md z-10"
                 style="background-color: {{ $themeColor }};">
                <i data-lucide="chevron-right" class="w-4 h-4"></i>
            </div>
        </a>
        @endforeach
    </div>

</div>
@endsection