<x-site-layout 
    :title="$topbarNotification->content"
    :meta-description="Str::limit($topbarNotification->content, 160)">

    {{-- Breadcrumbs --}}
    <x-breadcrumbs :items="[
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Notification', 'url' => '#', 'active' => true],
    ]" />

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">

        {{-- Back Button --}}
        <a href="{{ route('home') }}"
           class="inline-flex items-center gap-2 text-[#1a4731] hover:text-[#276749] text-sm font-medium transition mb-6">
            <i class="fas fa-arrow-left"></i> Back to Home
        </a>

        {{-- Main Notification Card --}}
        <article class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">

            {{-- Header with Status Badge --}}
            <div class="bg-gradient-to-r from-[#1a4731] to-[#276749] px-6 sm:px-8 py-8 sm:py-10">
                <div class="flex items-start justify-between gap-4 mb-4">
                    <div class="flex-1 min-w-0">
                        <h1 class="text-2xl sm:text-3xl font-bold text-white mb-2 break-words">
                            {{ $topbarNotification->content }}
                        </h1>
                    </div>
                    {{-- Status Badge --}}
                    @if($topbarNotification->is_active && (!$topbarNotification->end_date || $topbarNotification->end_date->isFuture()))
                        <div class="flex-shrink-0">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                                <i class="fas fa-circle text-green-500 mr-1.5" style="font-size:6px"></i> Active
                            </span>
                        </div>
                    @else
                        <div class="flex-shrink-0">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-200 text-gray-700">
                                <i class="fas fa-circle text-gray-500 mr-1.5" style="font-size:6px"></i> Inactive
                            </span>
                        </div>
                    @endif
                </div>

                {{-- Meta Information --}}
                <div class="flex flex-wrap items-center gap-4 text-white/80 text-sm">
                    @if($topbarNotification->start_date)
                        <div class="flex items-center gap-2">
                            <i class="fas fa-calendar-alt text-white/60"></i>
                            <span>
                                Available from {{ $topbarNotification->start_date->format('d M Y') }}
                            </span>
                        </div>
                    @endif
                    @if($topbarNotification->end_date)
                        <div class="flex items-center gap-2">
                            <i class="fas fa-times-circle text-white/60"></i>
                            <span>
                                Expires on {{ $topbarNotification->end_date->format('d M Y') }}
                            </span>
                        </div>
                    @endif
                    <div class="flex items-center gap-2">
                        <i class="fas fa-clock text-white/60"></i>
                        <span>
                            Published {{ $topbarNotification->created_at->diffForHumans() }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Content Body --}}
            <div class="px-6 sm:px-8 py-8 sm:py-10">

                {{-- Description Section --}}
                <section class="mb-8">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-bell text-[#1a4731]"></i>
                        Announcement Details
                    </h2>
                    <div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
                        <p class="text-gray-700 leading-relaxed text-base">
                            {{ $topbarNotification->content }}
                        </p>
                        @if($topbarNotification->start_date && $topbarNotification->start_date->isFuture())
                            <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                                <p class="text-sm text-blue-800">
                                    <i class="fas fa-info-circle text-blue-600 mr-2"></i>
                                    <strong>Notice:</strong> This announcement will be available from {{ $topbarNotification->start_date->format('d M Y') }}.
                                </p>
                            </div>
                        @endif
                    </div>
                </section>

                {{-- Call-to-Action Section --}}
                @if($topbarNotification->button_label && $topbarNotification->button_url)
                <section class="mb-8">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <i class="fas fa-hand-pointer text-[#1a4731]"></i>
                        Next Steps
                    </h2>
                    <div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
                        <p class="text-sm text-gray-600 mb-4">
                            Ready to take action on this announcement?
                        </p>
                        <a href="{{ $topbarNotification->button_url }}"
                           class="inline-flex items-center gap-2 px-6 py-3 bg-[#1a4731] text-white font-semibold rounded-lg hover:bg-[#276749] transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#1a4731] focus:ring-offset-2">
                            {{ $topbarNotification->button_label }}
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </section>
                @endif

                {{-- Key Information Section --}}
                <section class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    {{-- Published Date --}}
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">
                            <i class="fas fa-calendar text-gray-400 mr-1.5"></i> Published
                        </p>
                        <p class="text-sm font-medium text-gray-900">
                            {{ $topbarNotification->created_at->format('d M Y, H:i') }}
                        </p>
                    </div>

                    {{-- Display Order --}}
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">
                            <i class="fas fa-list text-gray-400 mr-1.5"></i> Position
                        </p>
                        <p class="text-sm font-medium text-gray-900">
                            #{{ $topbarNotification->order ?: 'Auto' }}
                        </p>
                    </div>

                    {{-- Status --}}
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1">
                            <i class="fas fa-info-circle text-gray-400 mr-1.5"></i> Status
                        </p>
                        @if($topbarNotification->is_active && (!$topbarNotification->end_date || $topbarNotification->end_date->isFuture()))
                            <p class="text-sm font-medium text-green-700">Active</p>
                        @else
                            <p class="text-sm font-medium text-gray-600">Inactive</p>
                        @endif
                    </div>
                </section>

            </div>

            {{-- Footer with Sharing --}}
            <div class="bg-gray-50 border-t border-gray-200 px-6 sm:px-8 py-6 sm:py-8">
                <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                    {{-- Share Message --}}
                    <p class="text-sm text-gray-600">
                        Found this helpful? Share it with others.
                    </p>

                    {{-- Share Buttons --}}
                    <div class="flex items-center gap-2">
                        {{-- Share via Facebook --}}
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
                           target="_blank" rel="noopener noreferrer"
                           class="w-10 h-10 rounded-full bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                           title="Share on Facebook"
                           aria-label="Share on Facebook">
                            <i class="fab fa-facebook-f text-sm"></i>
                        </a>

                        {{-- Share via Twitter --}}
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($topbarNotification->content) }}"
                           target="_blank" rel="noopener noreferrer"
                           class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2"
                           title="Share on Twitter"
                           aria-label="Share on Twitter">
                            <i class="fab fa-twitter text-sm"></i>
                        </a>

                        {{-- Share via WhatsApp --}}
                        <a href="https://wa.me/?text={{ urlencode($topbarNotification->content . ' ' . request()->url()) }}"
                           target="_blank" rel="noopener noreferrer"
                           class="w-10 h-10 rounded-full bg-green-500 hover:bg-green-600 text-white flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                           title="Share on WhatsApp"
                           aria-label="Share on WhatsApp">
                            <i class="fab fa-whatsapp text-sm"></i>
                        </a>

                        {{-- Copy Link --}}
                        <button type="button"
                                onclick="copyToClipboard('{{ request()->url() }}')"
                                class="w-10 h-10 rounded-full bg-gray-400 hover:bg-gray-500 text-white flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
                                title="Copy link"
                                aria-label="Copy link to clipboard">
                            <i class="fas fa-link text-sm"></i>
                        </button>
                    </div>
                </div>
            </div>

        </article>

        {{-- Related Notifications --}}
        @php
            $relatedNotifications = \App\Models\TopbarNotification::active()
                ->where('id', '!=', $topbarNotification->id)
                ->ordered()
                ->limit(3)
                ->get();
        @endphp

        @if($relatedNotifications->isNotEmpty())
        <section class="mt-12 sm:mt-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
                <i class="fas fa-star text-[#1a4731]"></i>
                Other Active Announcements
            </h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                @foreach($relatedNotifications as $related)
                    <a href="{{ route('topbar-notifications.show', $related) }}"
                       class="group bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md hover:border-[#1a4731] transition-all duration-200 overflow-hidden">
                        <div class="p-4 sm:p-6">
                            <h3 class="text-base font-semibold text-gray-900 group-hover:text-[#1a4731] line-clamp-2 mb-2 transition-colors">
                                {{ $related->content }}
                            </h3>
                            <p class="text-xs text-gray-500 mb-4">
                                <i class="fas fa-clock mr-1.5"></i> {{ $related->created_at->format('d M Y') }}
                            </p>
                            <button class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#1a4731]/10 text-[#1a4731] font-medium text-xs rounded group-hover:bg-[#1a4731] group-hover:text-white transition-colors">
                                {{ $related->button_label ?? 'Learn More' }}
                                <i class="fas fa-arrow-right text-xs"></i>
                            </button>
                        </div>
                    </a>
                @endforeach
            </div>
        </section>
        @endif

        {{-- Back to Home Button --}}
        <div class="mt-12 text-center">
            <a href="{{ route('home') }}"
               class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
                <i class="fas fa-home"></i> Return to Home
            </a>
        </div>

    </div>

    {{-- JavaScript for Copy to Clipboard --}}
    <script>
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                const btn = event.target.closest('button');
                const originalText = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-check text-sm"></i>';
                setTimeout(() => {
                    btn.innerHTML = originalText;
                }, 2000);
            }).catch(err => {
                alert('Failed to copy link');
            });
        }
    </script>

</x-site-layout>
