---
import Link from '@components/base/Link.astro';
import { authService } from '@/lib/authService';

const pb = authService.createClientFromRequest(Astro.request);

const [site, banner] = await Promise.all([
    pb.collection('site_settings').getFirstListItem('').catch(() => null),
    pb.collection('t_top_header').getFirstListItem('is_active = true').catch(() => null)
]) as [any, any];
---

<div id="top-header" class="border-b border-gray-200 bg-white">
    <div class="max-w-7xl mx-auto px-6 py-1">
        <div class="hidden md:flex items-center justify-between py-1.5">

            <!-- Левая часть: Action Banner -->
            <!-- Добавлены знаки '?' (banner?.show_action) для безопасности -->
            <div class="flex items-center min-h-6">
                {banner?.show_action && (
                        <div class="flex items-center animate-fade-in">
                            <div class="flex items-center justify-center w-3 h-3 rounded-full bg-red-600 mr-2 blinking-dot"></div>
                            <Link href={banner?.action_href} variant="action" class="text-sm">
                                {banner?.action_text}
                            </Link>
                        </div>
                )}
            </div>

            <!-- Правая часть: Контакты -->
            <div class="ml-auto flex items-center space-x-6">
                {site?.contact_phone && (
                        <a
                                href={site?.contact_phone_href}
                                class="flex items-center space-x-2 text-sm text-gray-600 font-semibold hover:text-blue-700 transition-colors phone-link"
                        >
                            <span class="phone-icon">📞</span>
                            <span>{site?.contact_phone}</span>
                        </a>
                )}

                {site?.contact_email && (
                        <a
                                href={site?.contact_email_href}
                                class="flex items-center space-x-2 text-sm text-gray-600 font-semibold hover:text-blue-700 transition-colors email-link"
                        >
                            <span class="email-icon">✉️</span>
                            <span>{site?.contact_email}</span>
                        </a>
                )}
            </div>
        </div>
    </div>
</div>

<style>
    .phone-link:hover .phone-icon { animation: shake 0.4s ease-in-out; }
    .email-link:hover .email-icon { animation: bounce 0.4s ease-in-out; }
    .blinking-dot { animation: blink 2s ease-in-out infinite; }
    .animate-fade-in { animation: fadeIn 0.5s ease-in-out; }

    @keyframes shake {
        0%, 100% { transform: rotate(0); }
        25% { transform: rotate(-12deg); }
        75% { transform: rotate(12deg); }
    }

    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }

    @keyframes blink {
        0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
        50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
        70% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>