<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * Top Bar Template Part
 *
 * @package Pawfect
 */

// Don't show if disabled
if (! get_theme_mod('pawfect_topbar_enabled', true)) {
    return;
}

// Get top bar settings
$topbar_bg_color = get_theme_mod('pawfect_topbar_bg_color', '#333333');
$topbar_text_color = get_theme_mod('pawfect_topbar_text_color', '#ffffff');
$phone = get_theme_mod('pawfect_topbar_phone', __( '+1 (555) 123-4567', 'pawfect' ));
$email = get_theme_mod('pawfect_topbar_email', 'example@example.com');

// Build inline styles
$topbar_styles = array();
$topbar_styles[] = 'background-color: ' . esc_attr( $topbar_bg_color );
$topbar_styles[] = 'color: ' . esc_attr( $topbar_text_color );
$topbar_style_attr = 'style="' . implode('; ', $topbar_styles) . '"';
?>

<div class="pawfect-topbar pawfect-py-2 pawfect-text-sm" <?php echo wp_kses_post( $topbar_style_attr ); ?>>
    <div class="pawfect-container">
        <div class="pawfect-flex pawfect-flex-row pawfect-justify-between pawfect-items-center pawfect-gap-2">
            
            <!-- Left Side - Contact Info -->
            <div class="pawfect-topbar-left pawfect-flex pawfect-flex-wrap pawfect-items-center pawfect-gap-4 md:pawfect-gap-6">

                <?php if ($phone): ?>
                    <div class="pawfect-topbar-item pawfect-flex pawfect-items-center pawfect-gap-2">
                        <svg class="pawfect-w-4 pawfect-h-4 pawfect-opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                        <a href="tel:<?php echo esc_attr(str_replace(array(' ', '(', ')', '-'), '', $phone)); ?>" class="pawfect-text-current hover:pawfect-opacity-80 pawfect-transition-opacity">
                            <?php echo esc_html($phone); ?>
                        </a>
                    </div>
                <?php endif; ?>

                <?php if ($email): ?>
                    <div class="pawfect-topbar-item pawfect-flex pawfect-items-center pawfect-gap-2">
                        <svg class="pawfect-w-4 pawfect-h-4 pawfect-opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                        <a href="mailto:<?php echo esc_attr($email); ?>" class="pawfect-text-current hover:pawfect-opacity-80 pawfect-transition-opacity">
                            <?php echo esc_html($email); ?>
                        </a>
                    </div>
                <?php endif; ?>

            </div>

            <!-- Right Side - Social Media Icons -->
            <div class="pawfect-topbar-right pawfect-text-sm pawfect-opacity-90">
                <?php
                // Add customizer edit shortcut for social media icons
                if (is_customize_preview()) {
                    echo '<div data-customize-partial-id="pawfect_social_media_icons" data-customize-partial-type="widget" data-customize-partial-placement-context="header">';
                }

                // Get social media icons from customizer
                $social_icons_html = pawfect_get_social_media_icons(array(
                    'container_class' => 'pawfect-flex pawfect-items-center pawfect-gap-3',
                    'icon_class' => 'pawfect-text-current hover:pawfect-opacity-70 pawfect-transition-opacity pawfect-duration-200',
                    'show_title' => false,
                    'icon_size' => 'pawfect-text-sm'
                ));

                // If no social icons, show welcome message as fallback
                if (!empty($social_icons_html)) {
                    echo wp_kses_post($social_icons_html);
                } else {
                    echo '<span>' . esc_html__( 'Welcome to Pawfect - Your Pet\'s Best Friend!', 'pawfect' ) . '</span>';
                }

                if (is_customize_preview()) {
                    echo '</div>';
                }
                ?>
            </div>

        </div>
    </div>
</div>
