<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: { extend: { colors: { primary: 'var(--color-primary)' } } }
        }
    </script>
    <style>
        :root { --bg-card: #ffffff; --text-main: #111111; --border-custom: #eaeaea; }
        .dark { --bg-card: #222222; --text-main: #f1f1f1; --border-custom: #333333; background-color: #1a1a1a !important; }
        body { color: var(--text-main); font-family: 'Inter', sans-serif; transition: background-color 0.3s; }
        .img-zoom-container { overflow: hidden; }
        .img-zoom { transition: transform 0.4s ease; }
        .img-zoom-container:hover .img-zoom { transform: scale(1.1); }
        .ticker-wrap { overflow: hidden; white-space: nowrap; }
        .ticker-move { display: inline-block; animation: ticker 25s linear infinite; }
        .ticker-move:hover { animation-play-state: paused; }
        @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
        
        .primary-menu-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
        .primary-menu-nav li a { padding: 0.5rem 0; display: block; }
        .mobile-menu-active ul { flex-direction: column; width: 100%; gap: 0; }
        .mobile-menu-active li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .mobile-menu-active li a { padding: 1rem; }
    </style>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<div class="bg-[#222] text-gray-300 text-xs py-2 hidden md:block border-b border-gray-800">
    <div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <?php
            $datetime_display = get_theme_mod('header_datetime_display', 'date');
            if ( $datetime_display !== 'none' ) :
            ?>
                <span><i class="far fa-calendar-alt mr-1 text-[var(--color-primary)]"></i>
                    <?php
                    if ( $datetime_display === 'date_time' ) {
                        echo date_i18n('l, j F Y, H:i');
                    } else {
                        echo date_i18n('l, j F Y');
                    }
                    ?>
                </span>
            <?php endif; ?>
            <?php wp_nav_menu(array('theme_location' => 'topbar', 'fallback_cb' => false, 'container' => false, 'menu_class' => 'flex space-x-3 text-[10px] uppercase font-bold tracking-wider')); ?>
        </div>
        <div class="flex space-x-4 text-sm">
            <?php if(get_theme_mod('social_facebook')): ?><a href="<?php echo esc_url(get_theme_mod('social_facebook')); ?>" class="hover:text-[var(--color-primary)]"><i class="fab fa-facebook-f"></i></a><?php endif; ?>
            <?php if(get_theme_mod('social_twitter')): ?><a href="<?php echo esc_url(get_theme_mod('social_twitter')); ?>" class="hover:text-[var(--color-primary)]"><i class="fab fa-twitter"></i></a><?php endif; ?>
            <?php if(get_theme_mod('social_youtube')): ?><a href="<?php echo esc_url(get_theme_mod('social_youtube')); ?>" class="hover:text-[var(--color-primary)]"><i class="fab fa-youtube"></i></a><?php endif; ?>
        </div>
    </div>
</div>

<?php
// Ustawienia pozycjonowania logo i nazwy
$header_alignment = get_theme_mod('header_logo_alignment', 'left');
$header_flex_class = 'md:flex-row justify-between items-center';
$brand_align_class = 'text-left items-start';

if ($header_alignment === 'center') {
    $header_flex_class = 'flex-col justify-center items-center text-center';
    $brand_align_class = 'text-center items-center';
} elseif ($header_alignment === 'right') {
    $header_flex_class = 'md:flex-row-reverse justify-between items-center';
    $brand_align_class = 'text-right items-end';
}
?>

<header class="kumibox-header-gradient py-6 border-b border-[var(--border-custom)]">
    <div class="max-w-7xl mx-auto px-4 flex flex-col <?php echo esc_attr($header_flex_class); ?> gap-4">
        
        <div class="site-branding flex flex-col <?php echo esc_attr($brand_align_class); ?>">
            <?php if (has_custom_logo()) : ?>
                <?php the_custom_logo(); ?>
            <?php else : ?>
                <a href="<?php echo esc_url(home_url('/')); ?>" class="text-5xl font-black uppercase tracking-tighter text-[var(--text-main)]">
                    <?php bloginfo('name'); ?>
                </a>
            <?php endif; ?>
            
            <?php
            $description = get_bloginfo('description', 'display');
            if ($description || is_customize_preview()) : ?>
                <p class="site-description text-sm text-[var(--text-main)] opacity-70 mt-1 font-medium">
                    <?php echo esc_html($description); ?>
                </p>
            <?php endif; ?>
        </div>

        <div class="w-full max-w-[728px]">
            <?php if (is_active_sidebar('header-ad')) : dynamic_sidebar('header-ad'); endif; ?>
        </div>
    </div>
</header>

<nav class="bg-[var(--color-primary)] text-white shadow-md sticky top-0 z-50 relative">
    <div class="max-w-7xl mx-auto px-4 flex justify-between items-center min-h-[3.5rem] py-2">
        <a href="<?php echo esc_url(home_url('/')); ?>" class="px-5 py-2 flex items-center bg-black/10 hover:bg-black/20 rounded md:mr-4"><i class="fas fa-home text-lg"></i></a>
        
        <div id="primary-menu-container" class="hidden md:flex flex-1 items-center font-bold uppercase text-sm tracking-wide primary-menu-nav">
            <?php wp_nav_menu(array('theme_location' => 'primary', 'container' => false)); ?>
        </div>
        
        <button id="mobile-menu-btn" class="md:hidden text-white text-xl ml-auto mr-4 p-2 focus:outline-none"><i class="fas fa-bars"></i></button>
        
        <div class="flex items-center space-x-4 border-l border-white/20 pl-4">
            <button id="theme-toggle" class="hover:text-gray-200 text-xl"><i class="fas fa-moon"></i></button>
        </div>
    </div>
</nav>

<div class="bg-[var(--bg-card)] border-b border-[var(--border-custom)] shadow-sm overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 flex items-center h-10 text-sm">
        <div class="bg-[var(--color-primary)] text-white font-bold uppercase px-3 py-1 text-xs mr-4 whitespace-nowrap flex items-center z-10">
            <i class="fas fa-bolt mr-2"></i> <?php echo esc_html(get_theme_mod('ticker_title', 'PILNE')); ?>
        </div>
        <div class="ticker-wrap flex-1">
            <div class="ticker-move text-[var(--text-main)] font-medium flex whitespace-nowrap">
                <?php
                $ticker_cat = get_theme_mod('ticker_cat', 0);
                $ticker_args = array('posts_per_page' => 8, 'ignore_sticky_posts' => 1);
                if($ticker_cat) $ticker_args['cat'] = (int)$ticker_cat;
                
                $ticker = new WP_Query($ticker_args);
                while($ticker->have_posts()) : $ticker->the_post(); ?>
                    <span class="mx-4"><i class="fas fa-angle-right text-[var(--color-primary)] mr-1"></i> <a href="<?php the_permalink(); ?>" class="hover:text-[var(--color-primary)]"><?php the_title(); ?></a></span>
                <?php endwhile; wp_reset_postdata(); ?>
            </div>
        </div>
    </div>
</div>
