class Header extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        const currentPage = window.location.pathname.split('/').pop() || 'index.html';
        
        this.innerHTML = `
            <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
                <div class="container">
                    <a class="navbar-brand d-flex align-items-center" href="index.html">
                        <div class="d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <img src="images/logo.png" alt="Netify Logo" height="40">
                                <span class="ms-2 fw-bold text-primary" style="font-size: 1.5rem;">Netify</span>
                            </div>
                            <small class="text-primary" style="font-size: 0.75rem; font-weight: 500;">Automating Networks, Accelerating Growth</small>
                        </div>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link ${currentPage === 'index.html' ? 'active' : ''}" href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link ${currentPage === 'about.html' ? 'active' : ''}" href="about.html">About Us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link ${currentPage === 'products.html' ? 'active' : ''}" href="products.html">Products & Services</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link ${currentPage === 'pricing.html' ? 'active' : ''}" href="pricing.html">Pricing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link ${currentPage === 'contact.html' ? 'active' : ''}" href="contact.html">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        `;
    }
}

customElements.define('header-component', Header);