<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<!-- TOP BAR -->
<div class="site-topbar">
    <div class="container">
        <div class="topbar-contact">
            <?php $phone = ep_get('phone', '+1 234 567 890'); $email = ep_get('email', 'info@earthpure.net'); ?>
            <a href="tel:<?php echo esc_attr( preg_replace('/\s/', '', $phone) ); ?>">📞 <?php echo esc_html($phone); ?></a>
            <a href="mailto:<?php echo esc_attr($email); ?>">✉️ <?php echo esc_html($email); ?></a>
        </div>
        <div class="topbar-social">
            <a href="#" aria-label="Facebook">📘</a>
            <a href="#" aria-label="Instagram">📷</a>
            <a href="#" aria-label="Twitter">🐦</a>
            <a href="#" aria-label="LinkedIn">💼</a>
        </div>
    </div>
</div>

<!-- HEADER -->
<header class="site-header">
    <div class="container">
        <!-- Logo -->
        <div class="site-logo">
            <?php if ( has_custom_logo() ) :
                the_custom_logo();
            else : ?>
                <a href="<?php echo esc_url( home_url('/') ); ?>" class="site-logo-text">
                    <?php bloginfo('name'); ?>
                </a>
            <?php endif; ?>
        </div>

        <!-- Navigation -->
        <nav class="site-nav" id="primary-nav" aria-label="<?php esc_attr_e('Primaire navigatie','earthpure'); ?>">
            <?php wp_nav_menu([
                'theme_location' => 'primary',
                'menu_class'     => '',
                'container'      => false,
                'fallback_cb'    => function() { ?>
                    <ul>
                        <li><a href="<?php echo home_url('/'); ?>">Home</a></li>
                        <li><a href="<?php echo home_url('/shop/'); ?>">Shop</a></li>
                        <li><a href="<?php echo home_url('/about/'); ?>">About Us</a></li>
                    </ul>
                <?php }
            ]); ?>
        </nav>

        <!-- Actions -->
        <div class="header-actions">
            <?php if ( class_exists('WooCommerce') ) : ?>
                <div class="cart-icon" id="cart-toggle" title="Winkelwagen">
                    🛒
                    <span class="cart-count"><?php echo WC()->cart ? WC()->cart->get_cart_contents_count() : 0; ?></span>
                </div>
            <?php endif; ?>
            <button class="btn btn-outline" id="login-btn" style="padding:8px 18px;font-size:0.88rem;">
                <?php echo is_user_logged_in() ? '👤 ' . wp_get_current_user()->display_name : '🔑 Login'; ?>
            </button>
            <button class="hamburger" id="hamburger" aria-label="Menu">
                <span></span><span></span><span></span>
            </button>
        </div>
    </div>
</header>

<!-- CART SIDEBAR -->
<?php if ( class_exists('WooCommerce') ) : ?>
<div class="cart-overlay" id="cart-overlay"></div>
<div class="cart-sidebar" id="cart-sidebar">
    <div class="cart-header">
        <h3>🛒 Winkelwagen</h3>
        <button class="cart-close" id="cart-close">✕</button>
    </div>
    <div class="cart-items" id="cart-items">
        <?php
        $cart = WC()->cart->get_cart();
        if ( empty($cart) ) {
            echo '<div class="cart-empty"><p>Je winkelwagen is leeg.</p></div>';
        } else {
            foreach ( $cart as $cart_item_key => $cart_item ) {
                $product = $cart_item['data'];
                $qty     = $cart_item['quantity'];
                echo '<div class="cart-item">';
                echo '<img class="cart-item-img" src="' . get_the_post_thumbnail_url($product->get_id(), 'thumbnail') . '" alt="' . esc_attr($product->get_name()) . '">';
                echo '<div class="cart-item-info"><h4>' . esc_html($product->get_name()) . '</h4>';
                echo '<span class="cart-item-price">' . $qty . ' × ' . wc_price($product->get_price()) . '</span></div>';
                echo '<button class="cart-item-remove" data-key="' . esc_attr($cart_item_key) . '">✕</button>';
                echo '</div>';
            }
        }
        ?>
    </div>
    <div class="cart-footer">
        <div class="cart-total">
            <span>Totaal:</span>
            <span><?php echo class_exists('WooCommerce') ? WC()->cart->get_cart_total() : '$0.00'; ?></span>
        </div>
        <a href="<?php echo wc_get_checkout_url(); ?>" class="btn btn-primary">Bestelling plaatsen →</a>
    </div>
</div>
<?php endif; ?>

<!-- LOGIN MODAL -->
<div class="modal-overlay" id="login-modal">
    <div class="modal-box">
        <button class="modal-close" id="modal-close">✕</button>
        <div class="modal-tabs">
            <button class="modal-tab active" data-tab="login">Inloggen</button>
            <button class="modal-tab" data-tab="register">Registreren</button>
        </div>
        <div class="tab-content active" id="tab-login">
            <form class="modal-form" method="post" action="<?php echo esc_url( wp_login_url() ); ?>">
                <input type="text" name="log" placeholder="Gebruikersnaam of e-mail" required>
                <input type="password" name="pwd" placeholder="Wachtwoord" required>
                <?php wp_nonce_field('earthpure_login'); ?>
                <button type="submit" class="btn btn-primary">Inloggen</button>
            </form>
        </div>
        <div class="tab-content" id="tab-register">
            <form class="modal-form" method="post" action="<?php echo esc_url( wp_registration_url() ); ?>">
                <input type="text" name="first_name" placeholder="Voornaam" required>
                <input type="text" name="last_name" placeholder="Achternaam" required>
                <input type="text" name="user_login" placeholder="Gebruikersnaam" required>
                <input type="email" name="user_email" placeholder="E-mailadres" required>
                <input type="password" name="user_pass" placeholder="Wachtwoord (min. 6 tekens)" required>
                <?php wp_nonce_field('earthpure_register'); ?>
                <button type="submit" class="btn btn-primary">Account aanmaken</button>
            </form>
        </div>
    </div>
</div>

<!-- PAGE WRAPPER -->
<div id="page-content">
