class CampusHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .header {
                    background-color: white;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                }
                .nav-link {
                    transition: color 0.2s;
                }
                .nav-link:hover {
                    color: #3b82f6;
                }
                .mobile-menu {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                }
                .mobile-menu.open {
                    max-height: 500px;
                }
                @media (min-width: 768px) {
                    .mobile-menu {
                        max-height: none !important;
                    }
                }
            </style>
            <header class="header py-4 sticky top-0 z-50">
                <div class="container mx-auto px-4">
                    <div class="flex justify-between items-center">
                        <a href="/" class="flex items-center">
                            <i data-feather="book-open" class="text-blue-600 w-8 h-8 mr-2"></i>
                            <span class="text-xl font-bold text-gray-800">CampusChronicles</span>
                        </a>
                        
                        <nav class="hidden md:flex space-x-8">
                            <a href="#" class="nav-link text-gray-700 font-medium">Home</a>
                            <a href="#" class="nav-link text-gray-700 font-medium">Academics</a>
                            <a href="#" class="nav-link text-gray-700 font-medium">Student Life</a>
                            <a href="#" class="nav-link text-gray-700 font-medium">Resources</a>
                            <a href="#" class="nav-link text-gray-700 font-medium">Events</a>
                        </nav>
                        
                        <div class="hidden md:flex items-center space-x-4">
                            <a href="#" class="text-gray-700 hover:text-blue-600">
                                <i data-feather="search" class="w-5 h-5"></i>
                            </a>
                            <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300">
                                Sign In
                            </a>
                        </div>
                        
                        <button class="md:hidden text-gray-700" id="mobile-menu-button">
                            <i data-feather="menu" class="w-6 h-6"></i>
                        </button>
                    </div>
                    
                    <div class="mobile-menu mt-4 md:hidden" id="mobile-menu">
                        <div class="flex flex-col space-y-3 pb-4">
                            <a href="#" class="nav-link text-gray-700 font-medium py-2 border-b border-gray-100">Home</a>
                            <a href="#" class="nav-link text-gray-700 font-medium py-2 border-b border-gray-100">Academics</a>
                            <a href="#" class="nav-link text-gray-700 font-medium py-2 border-b border-gray-100">Student Life</a>
                            <a href="#" class="nav-link text-gray-700 font-medium py-2 border-b border-gray-100">Resources</a>
                            <a href="#" class="nav-link text-gray-700 font-medium py-2 border-b border-gray-100">Events</a>
                            <div class="pt-2">
                                <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-300 inline-block">
                                    Sign In
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        `;

        // Mobile menu toggle functionality
        const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');

        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('open');
            const icon = mobileMenuButton.querySelector('i');
            if (mobileMenu.classList.contains('open')) {
                icon.setAttribute('data-feather', 'x');
            } else {
                icon.setAttribute('data-feather', 'menu');
            }
            feather.replace();
        });
    }
}

customElements.define('campus-header', CampusHeader);