<!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(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<a class="skip-link visually-hidden-focusable" href="#main"><?php esc_html_e('Skip to content', 'wpbs-theme'); ?></a>

<!-- Navbar -->
<nav class="<?php echo esc_attr(wpbs_navbar_classes()); ?>" style="background-color: var(--wpbs-navbar-bg);">
    <div class="container">
        <!-- Brand / Logo -->
        <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
            <?php if (has_custom_logo()) : ?>
                <?php
                $logo_id = get_theme_mod('custom_logo');
                $logo_url = wp_get_attachment_image_url($logo_id, 'full');
                $logo_alt = get_post_meta($logo_id, '_wp_attachment_image_alt', true) ?: get_bloginfo('name');
                ?>
                <img src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr($logo_alt); ?>" class="img-fluid">
            <?php else : ?>
                <span class="fw-bold"><?php bloginfo('name'); ?></span>
            <?php endif; ?>
        </a>

        <?php
        $phone = get_theme_mod('wpbs_navbar_phone', '');
        $cta_text = get_theme_mod('wpbs_navbar_cta_text', '');
        $cta_url = get_theme_mod('wpbs_navbar_cta_url', '');
        ?>

        <!-- Offcanvas Toggle -->
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#wpbs-offcanvas" aria-controls="wpbs-offcanvas" aria-label="<?php esc_attr_e('Toggle navigation', 'wpbs-theme'); ?>">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Desktop Menu (hidden on mobile, offcanvas takes over) -->
        <div class="collapse navbar-collapse" id="wpbs-navbar-collapse">
            <?php
            wp_nav_menu([
                'theme_location' => 'primary',
                'container'      => false,
                'menu_class'     => 'navbar-nav ms-auto',
                'walker'         => new WPBS_Nav_Walker(),
                'fallback_cb'    => ['WPBS_Nav_Walker', 'fallback'],
            ]);
            ?>

            <!-- Phone number (desktop) -->
            <?php if ($phone) : ?>
                <a href="tel:<?php echo esc_attr(preg_replace('/[^0-9+]/', '', $phone)); ?>" class="wpbs-navbar-phone d-none d-lg-inline-flex align-items-center text-decoration-none ms-3">
                    <i class="bi bi-telephone-fill me-1"></i>
                    <span><?php echo esc_html($phone); ?></span>
                </a>
            <?php endif; ?>

            <!-- CTA Button (desktop) -->
            <?php if ($cta_text && $cta_url) : ?>
                <a href="<?php echo esc_url($cta_url); ?>" class="btn btn-primary wpbs-cta-btn d-none d-lg-inline-block ms-3"><?php echo esc_html($cta_text); ?></a>
            <?php endif; ?>
        </div>
    </div>
</nav>

<!-- Offcanvas Menu (mobile) -->
<div class="<?php echo esc_attr(wpbs_offcanvas_classes()); ?>" tabindex="-1" id="wpbs-offcanvas" aria-labelledby="wpbs-offcanvas-label">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="wpbs-offcanvas-label">
            <?php if (has_custom_logo()) : ?>
                <img src="<?php echo esc_url($logo_url ?? ''); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" style="max-height: 40px; width: auto;">
            <?php else : ?>
                <?php bloginfo('name'); ?>
            <?php endif; ?>
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="<?php esc_attr_e('Close', 'wpbs-theme'); ?>"></button>
    </div>
    <div class="offcanvas-body">
        <?php
        wp_nav_menu([
            'theme_location' => 'primary',
            'container'      => false,
            'menu_class'     => 'navbar-nav',
            'walker'         => new WPBS_Nav_Walker(),
            'fallback_cb'    => ['WPBS_Nav_Walker', 'fallback'],
        ]);
        ?>

        <?php if ($phone) : ?>
            <hr>
            <a href="tel:<?php echo esc_attr(preg_replace('/[^0-9+]/', '', $phone)); ?>" class="d-flex align-items-center text-decoration-none mb-3">
                <i class="bi bi-telephone-fill me-2"></i> <?php echo esc_html($phone); ?>
            </a>
        <?php endif; ?>

        <?php if ($cta_text && $cta_url) : ?>
            <a href="<?php echo esc_url($cta_url); ?>" class="btn btn-primary wpbs-cta-btn w-100"><?php echo esc_html($cta_text); ?></a>
        <?php endif; ?>
    </div>
</div>

