@extends('layout.main')

@section('title', 'প্রার্থী প্রোফাইল')

@php
    $shareUrl = url()->current();
    $shareTitle = ($candidate->user->name ?? 'প্রার্থী') . ' | প্রার্থী প্রোফাইল';

    $manifestoText = trim((string) ($candidate->election_manifesto ?? ''));
    if ($manifestoText === '') $manifestoText = trim((string) ($candidate->bio ?? ''));
    if ($manifestoText === '') $manifestoText = 'প্রার্থীর প্রোফাইল দেখুন';

    $shareDescription = \Illuminate\Support\Str::limit(preg_replace('/\s+/', ' ', strip_tags($manifestoText)), 180);

    $shareImage = $candidate->photo
        ? asset('storage/' . $candidate->photo)
        : ($candidate->symbol_photo
            ? asset('storage/' . $candidate->symbol_photo)
            : asset('images/default-share.png'));
@endphp

@push('meta')
    <meta property="og:url" content="{{ $shareUrl }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ $shareTitle }}">
    <meta property="og:description" content="{{ $shareDescription }}">
    <meta property="og:image" content="{{ $shareImage }}">
    <meta property="og:image:secure_url" content="{{ $shareImage }}">
    <meta property="og:image:alt" content="{{ $candidate->user->name ?? 'প্রার্থী' }}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $shareTitle }}">
    <meta name="twitter:description" content="{{ $shareDescription }}">
    <meta name="twitter:image" content="{{ $shareImage }}">
@endpush

@section('content')
@php
    $age = $candidate->date_of_birth ? \Carbon\Carbon::parse($candidate->date_of_birth)->age : null;

    $bnDigits = $age !== null
        ? strtr((string) $age, ['0'=>'০','1'=>'১','2'=>'২','3'=>'৩','4'=>'৪','5'=>'৫','6'=>'৬','7'=>'৭','8'=>'৮','9'=>'৯'])
        : '—';

    $dobBn = $candidate->date_of_birth
        ? \Carbon\Carbon::parse($candidate->date_of_birth)->locale('bn')->translatedFormat('d F Y')
        : '—';

    $dobBn = strtr($dobBn, ['0'=>'০','1'=>'১','2'=>'২','3'=>'৩','4'=>'৪','5'=>'৫','6'=>'৬','7'=>'৭','8'=>'৮','9'=>'৯']);

    $ytId = $candidate->youtube_video_id ?? '6UCuWxWiMaQ';

    $nidEn = $candidate->nid_number_en ?? null;
    $nidBn = $candidate->nid_number_bn ?? null;

    $seatName = $candidate->seat?->name_bn ?? ($candidate->seat?->name_en ?? 'N/A');
    $seatCode = $candidate->seat?->seat_code ?? null;

    $seatDivision = $candidate->seat?->district?->division?->name_bn ?? null;
    $seatDistrict = $candidate->seat?->district?->name_bn ?? null;
    $seatUpazila  = $candidate->seat?->upazila?->name_bn ?? null;
    $seatCity     = $candidate->seat?->city?->name_bn ?? null;

    $statusLabel = $candidate->status == 'active' ? 'সক্রিয়' : ($candidate->status == 'inactive' ? 'নিষ্ক্রিয়' : 'অযোগ্য');
    $statusPill  = $candidate->status == 'active'
        ? 'bg-emerald-100 text-emerald-700 ring-emerald-200'
        : ($candidate->status == 'inactive' ? 'bg-gray-100 text-gray-700 ring-gray-200' : 'bg-red-100 text-red-700 ring-red-200');

    $statusDot = $candidate->status == 'active' ? 'bg-emerald-500' : ($candidate->status == 'inactive' ? 'bg-gray-400' : 'bg-red-500');

    $mask = function ($value) {
        if (!$value || mb_strlen($value) < 2) return '—';
        $len = mb_strlen($value);
        return mb_substr($value, 0, 1) . str_repeat('*', $len - 2) . mb_substr($value, -1);
    };
@endphp

<div class="min-h-screen bg-gray-50">
    <!-- MOBILE-FIRST HERO -->
    <header class="relative ">
        <!-- Video area (mobile: aspect video; desktop: taller) -->
        <div class="relative w-full aspect-video sm:aspect-[16/7] lg:aspect-[16/6] overflow-hidden">
            <iframe
                id="ytBannerFrame"
                class="absolute inset-0 w-full h-full pointer-events-none"
src="https://www.youtube.com/embed/{{ $ytId }}?autoplay=1&mute=1&loop=1&playlist={{ $ytId }}&rel=0&modestbranding=1&playsinline=1&controls=0"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen>
            </iframe>

            <!-- overlays -->
            {{-- <div class="absolute inset-0 bg-gradient-to-b from-black/65 via-black/40 to-black/75"></div>
            <div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-gray-50 to-transparent"></div> --}}

            <!-- top controls -->
            <div class="absolute top-3 left-3 right-3 z-10 flex items-center justify-between gap-2">
                <a href="{{ route('candidates.index') }}"
                   class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-xs font-bold text-white ring-1 ring-white/20 backdrop-blur hover:bg-white/15 transition">
                    <i class="fas fa-arrow-left"></i>
                    তালিকা
                </a>

                <div class="flex items-center gap-2">
                    <span class="inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-extrabold ring-1 bg-white/10 text-white ring-white/20 backdrop-blur">
                        <span class="h-2 w-2 rounded-full {{ $candidate->status == 'active' ? 'bg-emerald-400' : ($candidate->status == 'inactive' ? 'bg-gray-300' : 'bg-red-400') }}"></span>
                        {{ $statusLabel }}
                    </span>

                    <a href="{{ route('candidates.edit', $candidate) }}"
                       class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-xs font-bold text-white ring-1 ring-white/20 backdrop-blur hover:bg-white/15 transition">
                        <i class="fas fa-edit"></i>
                        এডিট
                    </a>
                </div>
            </div>

            <!-- play button -->
            {{-- <div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
                <button id="ytBannerPlayBtn" type="button"
                    class="inline-flex items-center gap-3 rounded-full bg-red-600 px-6 py-3 text-sm font-extrabold text-white shadow-lg hover:bg-red-700 transition focus:outline-none focus:ring-4 focus:ring-red-300">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
                        <path d="M8 5v14l11-7z" />
                    </svg>
                    ভিডিও চালু করুন
                </button>
            </div> --}}
        </div>

        <!-- Candidate card (overlapping) -->
        <div class="mx-auto max-w-7xl px-4">
            <div class="-mt-10 sm:-mt-12 relative z-10">
                <div class="rounded-3xl bg-white shadow-lg ring-1 ring-gray-200 overflow-hidden">
                    <div class="p-4 sm:p-6">
                        <div class="flex items-start gap-4">
                            <!-- Avatar -->
                            <div class="relative shrink-0">
                                <div class="h-20 w-20 sm:h-24 sm:w-24 rounded-2xl overflow-hidden ring-1 ring-gray-200">
                                    @if ($candidate->photo)
                                        <img src="{{ asset('storage/' . $candidate->photo) }}" alt="{{ $candidate->user->name }}" class="h-full w-full object-cover">
                                    @else
                                        <div class="h-full w-full grid place-items-center text-gray-400">
                                            <i class="fas fa-user text-3xl"></i>
                                        </div>
                                    @endif
                                </div>

                                @if ($candidate->symbol_photo)
                                    <div class="absolute -bottom-2 -right-2 h-10 w-10 sm:h-11 sm:w-11 rounded-2xl bg-white ring-1 ring-gray-200 shadow p-1">
                                        <img src="{{ asset('storage/' . $candidate->symbol_photo) }}"
                                             alt="{{ $candidate->symbol_name }}"
                                             class="h-full w-full object-contain">
                                    </div>
                                @endif
                            </div>

                            <!-- Main info -->
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <h1 class="text-xl sm:text-2xl font-extrabold text-gray-900 truncate">
                                            {{ $candidate->user->name ?? 'N/A' }}
                                        </h1>
                                        <p class="mt-1 text-sm text-gray-600">
                                            {{ $candidate->party_name ?? '—' }}
                                            <span class="mx-1 text-gray-300">•</span>
                                            {{ $seatName }}@if ($seatCode) <span class="text-gray-500 font-semibold">({{ $seatCode }})</span>@endif
                                        </p>

                                        @if ($seatDivision || $seatDistrict || $seatCity || $seatUpazila)
                                            <p class="mt-1 text-xs text-gray-500 font-semibold">
                                                {{ $seatDivision ?? '—' }}{{ $seatDistrict ? ', ' . $seatDistrict : '' }}
                                                @if ($seatCity)
                                                    , {{ $seatCity }}
                                                @elseif($seatUpazila)
                                                    , {{ $seatUpazila }}
                                                @endif
                                            </p>
                                        @endif
                                    </div>

                                    {{-- <span class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-extrabold ring-1 {{ $statusPill }}">
                                        <span class="h-2 w-2 rounded-full {{ $statusDot }}"></span>
                                        {{ $statusLabel }}
                                    </span> --}}
                                </div>

                                <!-- Quick chips -->
                                <div class="mt-3 flex flex-wrap gap-2">
                                    <span class="inline-flex items-center gap-2 rounded-full bg-gray-50 px-3 py-1.5 text-xs font-bold text-gray-700 ring-1 ring-gray-200">
                                        <i class="fas fa-flag text-gray-500"></i>
                                        {{ $candidate->symbol_name ?? '—' }} মার্কা
                                    </span>

                                    {{-- <span class="inline-flex items-center gap-2 rounded-full bg-gray-50 px-3 py-1.5 text-xs font-bold text-gray-700 ring-1 ring-gray-200">
                                        <i class="fas fa-calendar-day text-gray-500"></i>
                                        জন্ম: {{ $dobBn }}
                                    </span>

                                    <span class="inline-flex items-center gap-2 rounded-full bg-gray-50 px-3 py-1.5 text-xs font-bold text-gray-700 ring-1 ring-gray-200">
                                        <i class="fas fa-user-clock text-gray-500"></i>
                                        বয়স: {{ $bnDigits }}
                                    </span> --}}
                                </div>
                            </div>
                        </div>

                        <!-- Mobile-first action row (horizontal scroll) -->
                        <div class="mt-4 -mx-4 px-4 sm:mx-0 sm:px-0">
                            <div class="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
                                <button id="fbShareBtn" type="button"
                                    class="shrink-0 inline-flex items-center gap-2 rounded-full bg-blue-600 px-4 py-2 text-sm font-extrabold text-white hover:bg-blue-700 transition">
                                    <i class="fab fa-facebook-f"></i>
                                    Facebook
                                </button>

                                <button id="waShareBtn" type="button"
                                    class="shrink-0 inline-flex items-center gap-2 rounded-full bg-emerald-600 px-4 py-2 text-sm font-extrabold text-white hover:bg-emerald-700 transition">
                                    <i class="fab fa-whatsapp"></i>
                                    WhatsApp
                                </button>

                                <button id="copyLinkBtn" type="button"
                                    class="shrink-0 inline-flex items-center gap-2 rounded-full bg-gray-900 px-4 py-2 text-sm font-extrabold text-white hover:bg-black transition">
                                    <i class="fas fa-link"></i>
                                    কপি লিংক
                                </button>

                                <span id="shareCountBadge"
                                    class="hidden shrink-0 items-center gap-2 rounded-full bg-gray-100 px-4 py-2 text-sm font-extrabold text-gray-800 ring-1 ring-gray-200">
                                    <i class="fas fa-share-alt text-gray-500"></i>
                                    <span id="shareCountText">0</span> শেয়ার
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

               
            </div>
        </div>
    </header>

    <!-- MAIN CONTENT -->
    <main class="mx-auto max-w-7xl px-4 py-6 sm:py-8">
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8">
            <!-- Main (mobile first) -->
            <section class="lg:col-span-2 space-y-6">
                @if ($candidate->election_manifesto)
                    <div class="rounded-3xl bg-white shadow-sm ring-1 ring-gray-200 overflow-hidden">
                        <div class="px-5 py-4 border-b border-gray-100 bg-gradient-to-r from-rose-50 to-orange-50">
                            <div class="flex items-start justify-between gap-3">
                                <div>
                                    <h2 class="text-base sm:text-lg font-extrabold text-gray-900">
                                        <i class="fas fa-bullhorn mr-2 text-rose-600"></i>
                                        নির্বাচনী ইশতেহার
                                    </h2>
                                    <p class="mt-1 text-sm text-gray-600">প্রার্থীর মূল প্রতিশ্রুতি ও পরিকল্পনা</p>
                                </div>
                                <span class="shrink-0 text-[11px] font-extrabold text-rose-700 bg-white px-3 py-1.5 rounded-full ring-1 ring-rose-200">
                                    গুরুত্বপূর্ণ
                                </span>
                            </div>
                        </div>
                        <div class="p-5">
                            <div class="rounded-2xl bg-gray-50 p-4 sm:p-5 ring-1 ring-gray-100 border-l-4 border-rose-500">
                                <p class="text-gray-800 leading-relaxed whitespace-pre-line text-sm sm:text-[15px]">
                                    {{ $candidate->election_manifesto }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="rounded-3xl bg-white shadow-sm ring-1 ring-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-100 bg-gradient-to-r from-emerald-50 to-green-50">
                        <h2 class="text-base sm:text-lg font-extrabold text-gray-900">
                            <i class="fas fa-user-circle mr-2 text-emerald-600"></i>
                            ব্যক্তিগত তথ্য
                        </h2>
                        <p class="mt-1 text-sm text-gray-600">প্রার্থীর মৌলিক পরিচিতি ও তথ্য</p>
                    </div>

                    <div class="p-5">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div class="rounded-2xl bg-gray-50 p-4 ring-1 ring-gray-100">
                                <p class="text-xs font-extrabold text-gray-500 flex items-center gap-2">
                                    <i class="fas fa-fingerprint text-emerald-600"></i>
                                    এনআইডি নম্বর (EN/BN)
                                </p>

                                <div class="mt-2 min-w-0">
                                    <p class="font-mono text-base font-extrabold text-gray-900 break-all">
                                        {{ $mask($nidEn ?? null) }}
                                    </p>
                                    <p class="font-mono text-sm font-bold text-gray-500 break-all">
                                        {{ $mask($nidBn ?? null) }}
                                    </p>
                                </div>
                            </div>

                            <div class="rounded-2xl bg-gray-50 p-4 ring-1 ring-gray-100">
                                <p class="text-xs font-extrabold text-gray-500 flex items-center gap-2">
                                    <i class="fas fa-vote-yea text-emerald-600"></i>
                                    প্রার্থী অবস্থা
                                </p>
                                <div class="mt-2 flex items-center gap-2">
                                    <span class="inline-flex items-center rounded-full px-3 py-1.5 text-sm font-extrabold ring-1 {{ $statusPill }}">
                                        {{ $statusLabel }}
                                    </span>
                                    <span class="h-2.5 w-2.5 rounded-full {{ $statusDot }}"></span>
                                </div>

                                <div class="mt-3 grid grid-cols-2 gap-2">
                                    <div class="rounded-xl bg-white p-3 ring-1 ring-gray-200">
                                        <p class="text-[11px] font-extrabold text-gray-500">বয়স</p>
                                        <p class="mt-1 text-sm font-extrabold text-gray-900">{{ $bnDigits }}</p>
                                    </div>
                                    <div class="rounded-xl bg-white p-3 ring-1 ring-gray-200">
                                        <p class="text-[11px] font-extrabold text-gray-500">জন্মতারিখ</p>
                                        <p class="mt-1 text-sm font-extrabold text-gray-900">{{ $dobBn }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 rounded-2xl bg-gray-50 p-4 ring-1 ring-gray-100">
                            <p class="text-xs font-extrabold text-gray-500 flex items-center gap-2">
                                <i class="fas fa-chair text-emerald-600"></i>
                                সীট তথ্য
                            </p>
                            <p class="mt-2 text-sm font-extrabold text-gray-900">
                                {{ $seatName }}@if ($seatCode) <span class="text-gray-600 font-bold">({{ $seatCode }})</span>@endif
                            </p>

                            @if ($seatDivision || $seatDistrict || $seatCity || $seatUpazila)
                                <p class="mt-1 text-xs text-gray-600 font-bold">
                                    {{ $seatDivision ?? '—' }}{{ $seatDistrict ? ', ' . $seatDistrict : '' }}
                                    @if ($seatCity)
                                        , {{ $seatCity }}
                                    @elseif($seatUpazila)
                                        , {{ $seatUpazila }}
                                    @endif
                                </p>
                            @endif
                        </div>
                    </div>
                </div>

                @if ($candidate->bio)
                    <div class="rounded-3xl bg-white shadow-sm ring-1 ring-gray-200 overflow-hidden">
                        <div class="px-5 py-4 border-b border-gray-100">
                            <h2 class="text-base sm:text-lg font-extrabold text-gray-900">বিবরণ</h2>
                            <p class="mt-1 text-sm text-gray-500">প্রার্থীর সংক্ষিপ্ত পরিচিতি</p>
                        </div>
                        <div class="p-5">
                            <p class="text-gray-800 leading-relaxed whitespace-pre-line text-sm sm:text-[15px]">
                                {{ $candidate->bio }}
                            </p>
                        </div>
                    </div>
                @endif
            </section>

            <!-- Sidebar (desktop second, mobile last) -->
            <aside class="space-y-6">
                <div class="rounded-3xl bg-emerald-700 text-white shadow-lg shadow-emerald-700/15 overflow-hidden">
                    <div class="px-5 py-4 border-b border-white/15">
                        <h3 class="text-base font-extrabold">এক নজরে</h3>
                        <p class="mt-1 text-sm text-white/80">ভোটারের জন্য দ্রুত তথ্য</p>
                    </div>

                    <div class="p-5 space-y-4">
                        <div class="flex items-start gap-3">
                            <div class="h-11 w-11 rounded-2xl bg-white/15 grid place-items-center">
                                <i class="fas fa-landmark"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-xs font-extrabold text-white/80">রাজনৈতিক দল</p>
                                <p class="text-sm font-extrabold break-words">{{ $candidate->party_name ?? '—' }}</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3">
                            <div class="h-11 w-11 rounded-2xl bg-white/15 grid place-items-center">
                                <i class="fas fa-flag"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-xs font-extrabold text-white/80">প্রতীক</p>
                                <p class="text-sm font-extrabold break-words">{{ $candidate->symbol_name ?? '—' }}</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3">
                            <div class="h-11 w-11 rounded-2xl bg-white/15 grid place-items-center">
                                <i class="fas fa-chair"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-xs font-extrabold text-white/80">নির্বাচনী সীট</p>
                                <p class="text-sm font-extrabold break-words">
                                    {{ $seatName }}@if ($seatCode) <span class="text-white/85">({{ $seatCode }})</span>@endif
                                </p>

                                @if ($seatDivision || $seatDistrict || $seatCity || $seatUpazila)
                                    <p class="mt-1 text-xs text-white/80 font-bold break-words">
                                        {{ $seatDivision ?? '—' }}{{ $seatDistrict ? ', ' . $seatDistrict : '' }}
                                        @if ($seatCity)
                                            , {{ $seatCity }}
                                        @elseif($seatUpazila)
                                            , {{ $seatUpazila }}
                                        @endif
                                    </p>
                                @endif
                            </div>
                        </div>

                        <div class="rounded-2xl bg-white/10 ring-1 ring-white/15 p-4">
                            <p class="text-xs font-extrabold text-white/80">শেয়ার সংখ্যা</p>
                            <p class="mt-1 text-2xl font-extrabold" id="sidebarShareCount">0</p>
                            <p class="mt-1 text-[11px] text-white/75 font-semibold">এই ডিভাইসে লোকাল কাউন্ট</p>
                        </div>
                    </div>
                </div>

                <div class="rounded-3xl bg-white shadow-sm ring-1 ring-gray-200 overflow-hidden">
                    <div class="px-5 py-4 border-b border-gray-100">
                        <h3 class="text-base font-extrabold text-gray-900">টিপস</h3>
                        <p class="mt-1 text-sm text-gray-500">ভালো শেয়ার প্রিভিউ নিশ্চিত করুন</p>
                    </div>
                    <div class="p-5 text-sm text-gray-700 leading-relaxed">
                        Facebook/WhatsApp এ লিংক শেয়ার করলে যদি পুরনো ছবি/টেক্সট দেখায়, তাহলে “Sharing Debugger” দিয়ে রিফ্রেশ করতে হয়।
                    </div>
                </div>
            </aside>
        </div>
    </main>
</div>

<style>
    /* optional: hide scrollbar for action row */
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // =========================
        // YouTube banner play
        // =========================
        const playBtn = document.getElementById('ytBannerPlayBtn');
        const iframe = document.getElementById('ytBannerFrame');
        if (playBtn && iframe) {
            playBtn.addEventListener('click', function() {
                const videoId = @json($ytId);

                iframe.src =
                    `https://www.youtube.com/embed/${videoId}` +
                    `?rel=0&modestbranding=1&playsinline=1` +
                    `&autoplay=1&controls=1&mute=0`;

                iframe.classList.remove('pointer-events-none');
                playBtn.style.display = 'none';
            });
        }

        // =========================
        // Share helpers (local count)
        // =========================
        const shareUrl = @json($shareUrl);
        const shareTitle = @json(($candidate->user->name ?? 'প্রার্থী') . ' | প্রার্থী প্রোফাইল');

        const shareCountBadge = document.getElementById('shareCountBadge');
        const shareCountText  = document.getElementById('shareCountText');
        const sidebarShareCount = document.getElementById('sidebarShareCount');

        const getShareCounts = () => {
            try {
                const key = 'share_counts:' + shareUrl;
                const raw = localStorage.getItem(key);
                if (!raw) return { fb: 0, wa: 0, copy: 0, total: 0 };
                const parsed = JSON.parse(raw);
                const fb = Number(parsed.fb || 0);
                const wa = Number(parsed.wa || 0);
                const copy = Number(parsed.copy || 0);
                return { fb, wa, copy, total: fb + wa + copy };
            } catch (e) {
                return { fb: 0, wa: 0, copy: 0, total: 0 };
            }
        };

        const setShareCounts = (counts) => {
            const key = 'share_counts:' + shareUrl;
            localStorage.setItem(key, JSON.stringify({
                fb: counts.fb || 0,
                wa: counts.wa || 0,
                copy: counts.copy || 0
            }));
        };

        const renderShareCount = () => {
            const counts = getShareCounts();
            if (shareCountText && shareCountBadge) {
                shareCountText.textContent = String(counts.total || 0);
                shareCountBadge.classList.remove('hidden');
                shareCountBadge.classList.add('inline-flex');
            }
            if (sidebarShareCount) sidebarShareCount.textContent = String(counts.total || 0);
        };

        const bumpCount = (type) => {
            const counts = getShareCounts();
            counts[type] = (counts[type] || 0) + 1;
            setShareCounts(counts);
            renderShareCount();
        };

        renderShareCount();

        // =========================
        // Facebook Share
        // =========================
        const fbBtn = document.getElementById('fbShareBtn');
        if (fbBtn) {
            fbBtn.addEventListener('click', function() {
                const url = encodeURIComponent(shareUrl);
                const fbShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
                window.open(fbShareUrl, 'fb-share-dialog', 'width=626,height=436');
                bumpCount('fb');
            });
        }

        // =========================
        // WhatsApp Share
        // =========================
        const waBtn = document.getElementById('waShareBtn');
        if (waBtn) {
            waBtn.addEventListener('click', function() {
                const text = encodeURIComponent(`${shareTitle}\n${shareUrl}`);
                const waShareUrl = `https://wa.me/?text=${text}`;
                window.open(waShareUrl, '_blank');
                bumpCount('wa');
            });
        }

        // =========================
        // Copy link
        // =========================
        const copyBtn = document.getElementById('copyLinkBtn');

        const showToast = (msg) => {
            const toast = document.createElement('div');
            toast.className =
                'fixed bottom-6 left-1/2 -translate-x-1/2 z-[9999] ' +
                'rounded-full bg-gray-900 text-white text-sm font-extrabold px-5 py-3 shadow-lg ring-1 ring-white/10';
            toast.textContent = msg;
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 250ms ease';
            }, 1200);

            setTimeout(() => toast.remove(), 1600);
        };

        const doCopy = async () => {
            try {
                if (navigator.clipboard && window.isSecureContext) {
                    await navigator.clipboard.writeText(shareUrl);
                } else {
                    const temp = document.createElement('textarea');
                    temp.value = shareUrl;
                    temp.style.position = 'fixed';
                    temp.style.left = '-9999px';
                    temp.style.top = '-9999px';
                    document.body.appendChild(temp);
                    temp.focus();
                    temp.select();
                    document.execCommand('copy');
                    temp.remove();
                }
                showToast('লিংক কপি হয়েছে!');
                bumpCount('copy');
            } catch (e) {
                showToast('কপি করা যায়নি');
            }
        };

        if (copyBtn) {
            copyBtn.addEventListener('click', function() {
                doCopy();
            });
        }
    });
</script>
@endsection
