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

@section('content')
<div class="space-y-4 w-full pb-24 font-siliguri">
    
    @php
        $subPhotoFile = 'conv_photo_' . $currentSubcategory['slug'] . '_v1.webp';
        $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',
        ];
        $fallbackPhoto = $catPhotos[$currentCategory['slug']] ?? 'cat_salute_medicina.jpg';
    @endphp

    <!-- Top Hero Banner with Real Photo (Exact view_conversation_hub.xml) -->
    <div class="relative rounded-3xl overflow-hidden shadow-2xl border border-slate-700/60 bg-[#071426] text-white min-h-[140px] flex items-center p-4">
        
        <!-- Real Photograph Background -->
        <img src="{{ asset('assets/images/' . $subPhotoFile) }}" 
             onerror="this.src='{{ asset('assets/images/' . $fallbackPhoto) }}'" 
             class="absolute inset-0 w-full h-full object-cover opacity-35">
        <div class="absolute inset-0 bg-gradient-to-r from-[#071426] via-[#071426]/90 to-transparent"></div>

        <div class="relative z-10 flex items-center justify-between w-full gap-3">
            <div class="flex items-center gap-3 min-w-0">
                <a href="{{ route('conversations.category', $currentCategory['slug']) }}" 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">
                    <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 font-outfit uppercase">
                        {{ $currentCategory['italian'] }}
                    </span>
                    <h1 class="text-base sm:text-lg font-black text-white font-outfit truncate mt-1">
                        {{ $currentSubcategory['bangla'] }}
                    </h1>
                    <p class="text-xs font-semibold text-slate-300 truncate">
                        {{ $currentSubcategory['italian'] }}
                    </p>
                </div>
            </div>

            <button onclick="speakItalian('{{ addslashes($currentSubcategory['italian']) }}')" class="w-11 h-11 rounded-2xl bg-[#00A86B] hover:bg-[#008F5B] text-white flex items-center justify-center shadow-lg transition flex-shrink-0">
                <i data-lucide="volume-2" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    <!-- 4 Interactive Tabs (Exact App Match: শব্দার্থ, বাক্য, কথোপকথন, কুইজ) -->
    <div class="grid grid-cols-4 gap-2 bg-white/90 p-1.5 rounded-2xl border border-slate-200 shadow-md backdrop-blur-md">
        <button onclick="switchHubTab('tab-words')" id="btn-tab-words" class="hub-tab-btn py-2.5 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition bg-[#00A86B] text-white shadow">
            <span>📖</span>
            <span class="text-[11px]">শব্দার্থ</span>
        </button>
        <button onclick="switchHubTab('tab-sentences')" id="btn-tab-sentences" class="hub-tab-btn py-2.5 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition bg-transparent text-slate-700 hover:bg-slate-100">
            <span>✍️</span>
            <span class="text-[11px]">বাক্য</span>
        </button>
        <button onclick="switchHubTab('tab-dialogue')" id="btn-tab-dialogue" class="hub-tab-btn py-2.5 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition bg-transparent text-slate-700 hover:bg-slate-100">
            <span>💬</span>
            <span class="text-[11px]">কথোপকথন</span>
        </button>
        <button onclick="switchHubTab('tab-quiz')" id="btn-tab-quiz" class="hub-tab-btn py-2.5 rounded-xl font-bold text-xs flex flex-col items-center justify-center gap-1 transition bg-transparent text-slate-700 hover:bg-slate-100">
            <span>🎯</span>
            <span class="text-[11px]">কুইজ</span>
        </button>
    </div>

    <!-- TAB 1: WORDS / শব্দার্থ (Exact Native item_word_card.xml) -->
    <div id="tab-words" class="hub-content space-y-3">
        @php
            $words = [
                ['it' => $currentSubcategory['italian'], 'bn' => $currentSubcategory['bangla'], 'pron' => $currentSubcategory['italian']],
                ['it' => 'Informazione', 'bn' => 'তথ্য', 'pron' => 'ইনফরমাতসিওনে'],
                ['it' => 'Aiuto', 'bn' => 'সাহায্য', 'pron' => 'আইউতো'],
                ['it' => 'Per favore', 'bn' => 'দয়া করে', 'pron' => 'পের ফাভোরে'],
                ['it' => 'Grazie', 'bn' => 'ধন্যবাদ', 'pron' => 'গ্রাৎসিয়ে'],
                ['it' => 'Appuntamento', 'bn' => 'সিরিয়াল / অ্যাপয়েন্টমেন্ট', 'pron' => 'আপ্পুনতামেন্তো'],
                ['it' => 'Documento', 'bn' => 'কাগজপত্র', 'pron' => 'দকুমেন্তো'],
                ['it' => 'Ufficio', 'bn' => 'অফিস', 'pron' => 'উফফিচো'],
                ['it' => 'Urgente', 'bn' => 'জরুরি', 'pron' => 'উরজেন্তে'],
                ['it' => 'Controllo', 'bn' => 'চেকআপ / পরীক্ষা', 'pron' => 'কনত্রোল্লো']
            ];
        @endphp

        <div class="flex items-center justify-between px-1">
            <span class="text-xs font-bold text-slate-700">গুরুত্বপূর্ণ শব্দাবলি ({{ count($words) }}টি)</span>
            <span class="text-[11px] font-semibold text-emerald-800">অডিও শুনতে চাপ দিন 🔊</span>
        </div>

        <div class="grid grid-cols-1 gap-2.5">
            @foreach($words as $w)
            <div class="bg-white rounded-2xl p-3.5 shadow-sm border border-slate-200/80 flex items-center justify-between gap-3">
                <div class="flex-1">
                    <div class="flex items-center gap-2">
                        <h4 class="text-base font-black text-[#1A237E] font-outfit">{{ $w['it'] }}</h4>
                        <button onclick="speakItalian('{{ addslashes($w['it']) }}')" class="text-emerald-700 hover:text-emerald-900 p-1">
                            <i data-lucide="volume-2" class="w-4 h-4"></i>
                        </button>
                    </div>
                    <p class="text-xs font-bold text-[#8B0000] mt-0.5">
                        {{ $w['bn'] }} <span class="text-slate-500 font-normal">({{ $w['pron'] }})</span>
                    </p>
                </div>
                <button onclick="this.classList.toggle('text-rose-500')" class="text-slate-300 hover:text-rose-500 p-1.5">
                    <i data-lucide="heart" class="w-5 h-5"></i>
                </button>
            </div>
            @endforeach
        </div>
    </div>

    <!-- TAB 2: SENTENCES / বাক্য -->
    <div id="tab-sentences" class="hub-content hidden space-y-3">
        @php
            $sentences = [
                ['it' => "Ho bisogno di un'informazione per favore.", 'bn' => 'আমার একটি তথ্য প্রয়োজন দয়া করে।', 'pron' => 'ও বিজোনিয় দি উন ইনফরমাতসিওনে পের ফাভোরে'],
                ['it' => "Vorrei prenotare un appuntamento.", 'bn' => 'আমি একটি অ্যাপয়েন্টমেন্ট বুক করতে চাই।', 'pron' => 'ভোররেই প্রেনোতারে উন আপ্পুনতামেন্তো'],
                ['it' => "Quanto tempo ci vuole?", 'bn' => 'কতক্ষণ সময় লাগবে?', 'pron' => 'কুয়ান্তো তেম্পো চি ভুওলে?'],
                ['it' => "Dove si trova l'ufficio?", 'bn' => 'অফিসটি কোথায় অবস্থিত?', 'pron' => 'দোভেই সি ত্রোভা লুফফিচো?'],
                ['it' => "Posso pagare con la carta?", 'bn' => 'আমি কি কার্ড দিয়ে পেমেন্ট করতে পারি?', 'pron' => 'পসসো পাগারে কন লা কার্তা?']
            ];
        @endphp

        <div class="flex items-center justify-between px-1">
            <span class="text-xs font-bold text-slate-700">ব্যবহারিক বাক্য সমূহ ({{ count($sentences) }}টি)</span>
            <span class="text-[11px] font-semibold text-emerald-800">স্পিকার আইকনে চাপুন</span>
        </div>

        <div class="grid grid-cols-1 gap-2.5">
            @foreach($sentences as $s)
            <div class="bg-white rounded-2xl p-3.5 shadow-sm border border-slate-200/80 flex items-start justify-between gap-3">
                <div class="flex-1">
                    <div class="flex items-center gap-2">
                        <h4 class="text-sm sm:text-base font-black text-slate-900 font-outfit">{{ $s['it'] }}</h4>
                        <button onclick="speakItalian('{{ addslashes($s['it']) }}')" class="text-emerald-700 hover:text-emerald-900 p-1 flex-shrink-0">
                            <i data-lucide="volume-2" class="w-4 h-4"></i>
                        </button>
                    </div>
                    <p class="text-xs font-bold text-emerald-900 mt-1">{{ $s['bn'] }}</p>
                    <p class="text-[11px] text-slate-500 italic mt-0.5">({{ $s['pron'] }})</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- TAB 3: DIALOGUE / কথোপকথন -->
    <div id="tab-dialogue" class="hub-content hidden space-y-3">
        <div class="bg-white rounded-3xl p-4 shadow-md border border-slate-200/80 space-y-3">
            <div class="border-b border-slate-100 pb-2">
                <span class="text-[10px] font-bold text-emerald-800 uppercase tracking-wide">বাস্তব ডায়ালগ</span>
                <h3 class="text-base font-black text-slate-900 font-outfit">{{ $currentSubcategory['italian'] }}</h3>
            </div>

            <div class="space-y-3 pt-2">
                <!-- Person A -->
                <div class="flex items-start gap-2.5">
                    <div class="w-8 h-8 rounded-full bg-[#00A86B] text-white font-black text-xs flex items-center justify-center flex-shrink-0 shadow">
                        A
                    </div>
                    <div class="bg-emerald-50 border border-emerald-200 rounded-2xl rounded-tl-none p-3 max-w-[85%]">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-xs sm:text-sm font-bold text-slate-900 font-outfit">Buongiorno! Come posso aiutarla?</p>
                            <button onclick="speakItalian('Buongiorno! Come posso aiutarla?')" class="text-emerald-700 p-0.5">
                                <i data-lucide="volume-2" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                        <p class="text-xs text-slate-600 mt-0.5">শুভ সকাল! আপনাকে কিভাবে সাহায্য করতে পারি?</p>
                    </div>
                </div>

                <!-- Person B -->
                <div class="flex items-start justify-end gap-2.5">
                    <div class="bg-blue-50 border border-blue-200 rounded-2xl rounded-tr-none p-3 max-w-[85%] text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button onclick="speakItalian('Salve, vorrei avere informazioni su {{ addslashes($currentSubcategory['italian']) }}.')" class="text-blue-700 p-0.5">
                                <i data-lucide="volume-2" class="w-3.5 h-3.5"></i>
                            </button>
                            <p class="text-xs sm:text-sm font-bold text-slate-900 font-outfit">Salve, vorrei avere informazioni su {{ $currentSubcategory['italian'] }}.</p>
                        </div>
                        <p class="text-xs text-slate-600 mt-0.5">নমস্কার, আমি {{ $currentSubcategory['bangla'] }} সম্পর্কে তথ্য জানতে চাই।</p>
                    </div>
                    <div class="w-8 h-8 rounded-full bg-[#2563EB] text-white font-black text-xs flex items-center justify-center flex-shrink-0 shadow">
                        B
                    </div>
                </div>

                <!-- Person A -->
                <div class="flex items-start gap-2.5">
                    <div class="w-8 h-8 rounded-full bg-[#00A86B] text-white font-black text-xs flex items-center justify-center flex-shrink-0 shadow">
                        A
                    </div>
                    <div class="bg-emerald-50 border border-emerald-200 rounded-2xl rounded-tl-none p-3 max-w-[85%]">
                        <div class="flex items-center justify-between gap-2">
                            <p class="text-xs sm:text-sm font-bold text-slate-900 font-outfit">Certamente, ha portato i documenti necessari?</p>
                            <button onclick="speakItalian('Certamente, ha portato i documenti necessari?')" class="text-emerald-700 p-0.5">
                                <i data-lucide="volume-2" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                        <p class="text-xs text-slate-600 mt-0.5">অবশ্যই, আপনি কি প্রয়োজনীয় ডকুমেন্টস সাথে এনেছেন?</p>
                    </div>
                </div>

                <!-- Person B -->
                <div class="flex items-start justify-end gap-2.5">
                    <div class="bg-blue-50 border border-blue-200 rounded-2xl rounded-tr-none p-3 max-w-[85%] text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button onclick="speakItalian('Sì, ho tutto qui con me. Grazie mille!')" class="text-blue-700 p-0.5">
                                <i data-lucide="volume-2" class="w-3.5 h-3.5"></i>
                            </button>
                            <p class="text-xs sm:text-sm font-bold text-slate-900 font-outfit">Sì, ho tutto qui con me. Grazie mille!</p>
                        </div>
                        <p class="text-xs text-slate-600 mt-0.5">হ্যাঁ, আমার কাছে সব আছে। অনেক ধন্যবাদ!</p>
                    </div>
                    <div class="w-8 h-8 rounded-full bg-[#2563EB] text-white font-black text-xs flex items-center justify-center flex-shrink-0 shadow">
                        B
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- TAB 4: QUIZ / কুইজ -->
    <div id="tab-quiz" class="hub-content hidden space-y-3">
        <div class="bg-white rounded-3xl p-5 shadow-md border border-slate-200/80 text-center">
            <div class="w-14 h-14 rounded-2xl bg-amber-100 text-amber-600 flex items-center justify-center text-3xl mx-auto mb-2 shadow-inner">
                🎯
            </div>
            <h3 class="text-base font-black text-slate-900 font-outfit">
                {{ $currentSubcategory['bangla'] }} কুইজ
            </h3>
            <p class="text-xs text-slate-600 mt-1">
                এই অধ্যায়ের জ্ঞান যাচাই করুন এবং +২৫ XP অর্জন করুন!
            </p>

            <div class="mt-4 p-4 rounded-2xl bg-slate-50 border border-slate-200 text-left">
                <span class="text-[10px] font-bold text-slate-500 uppercase">প্রশ্ন ১ / ৩</span>
                <h4 class="text-sm font-black text-slate-900 mt-1">
                    "{{ $currentSubcategory['italian'] }}" এর সঠিক বাংলা অর্থ কোনটি?
                </h4>

                <div class="grid grid-cols-1 gap-2 mt-3" id="quiz-options">
                    <button onclick="answerQuiz(this, true)" class="w-full text-left p-2.5 rounded-xl border border-slate-200 bg-white hover:bg-emerald-50 text-xs font-bold text-slate-800 transition">
                        A) {{ $currentSubcategory['bangla'] }}
                    </button>
                    <button onclick="answerQuiz(this, false)" class="w-full text-left p-2.5 rounded-xl border border-slate-200 bg-white hover:bg-red-50 text-xs font-bold text-slate-800 transition">
                        B) বিপরীত অর্থ
                    </button>
                    <button onclick="answerQuiz(this, false)" class="w-full text-left p-2.5 rounded-xl border border-slate-200 bg-white hover:bg-red-50 text-xs font-bold text-slate-800 transition">
                        C) অন্য কোনো বিষয়
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    function switchHubTab(tabId) {
        document.querySelectorAll('.hub-content').forEach(el => el.classList.add('hidden'));
        document.getElementById(tabId).classList.remove('hidden');

        document.querySelectorAll('.hub-tab-btn').forEach(btn => {
            btn.classList.remove('bg-[#00A86B]', 'text-white', 'shadow');
            btn.classList.add('bg-transparent', 'text-slate-700');
        });

        const activeBtn = document.getElementById('btn-' + tabId);
        if (activeBtn) {
            activeBtn.classList.remove('bg-transparent', 'text-slate-700');
            activeBtn.classList.add('bg-[#00A86B]', 'text-white', 'shadow');
        }
    }

    function answerQuiz(btn, isCorrect) {
        if (isCorrect) {
            btn.classList.remove('bg-white');
            btn.classList.add('bg-emerald-600', 'text-white', 'border-emerald-600');
            alert('🎉 সঠিক উত্তর! আপনি +১০ XP পেয়েছেন!');
        } else {
            btn.classList.remove('bg-white');
            btn.classList.add('bg-rose-500', 'text-white', 'border-rose-500');
            alert('❌ ভুল উত্তর! আবার চেষ্টা করুন।');
        }
    }
</script>
@endsection