---
import Header from './Header.astro';
import TopHeader from './TopHeader.astro';

const { session = null, status = 'unauthenticated' } = Astro.props;

// Логика для акции
const dayOfMonth = new Date().getDate();
const isActionActive = dayOfMonth <= 7 || dayOfMonth >= 24;
---

<div id="site-header" class="sticky top-0 z-50 bg-[#ECF2F5]">
    <TopHeader isActionActive={isActionActive} />
    <Header {isActionActive} {session} {status} />

    <div id="progress-bar" class="h-[3px] bg-blue-500 origin-left rounded-full scale-x-0"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const header = document.getElementById('site-header');
        const progressBar = document.getElementById('progress-bar');

        // Логика скролла
        const handleScroll = () => {
            const scrolled = window.scrollY > 10;
            header.classList.toggle('shadow-sm', scrolled);

            // Прогресс бар
            const winHeight = window.innerHeight;
            const docHeight = document.documentElement.scrollHeight;
            const scrollTop = window.scrollY;
            const scrollPercent = scrollTop / (docHeight - winHeight);

            progressBar.style.transform = `scaleX(${scrollPercent})`;
        };

        window.addEventListener('scroll', handleScroll);
        handleScroll(); // Инициализация
    });
</script>
