class ShifaHeader extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin-bottom: 2rem;
                }
                
                .header {
                    background: linear-gradient(135deg, #059669 0%, #0f766e 100%);
                    color: white;
                    padding: 1.5rem;
                    border-radius: 1rem;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                    position: relative;
                    overflow: hidden;
                }
                
                .header::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="70" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
                    animation: float 20s infinite linear;
                }
                
                @keyframes float {
                    0% { transform: translateX(0); }
                    100% { transform: translateX(-100px); }
                }
                
                .content {
                    position: relative;
                    z-index: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 1rem;
                }
                
                .brand {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    font-size: 1.5rem;
                    font-weight: bold;
                }
                
                .tagline {
                    font-size: 0.875rem;
                    opacity: 0.9;
                }
                
                .nav-links {
                    display: flex;
                    gap: 1.5rem;
                    align-items: center;
                }
                
                .nav-links a {
                    color: rgba(255, 255, 255, 0.9);
                    text-decoration: none;
                    font-weight: 500;
                    transition: all 0.2s;
                    display: flex;
                    align-items: center;
                    gap: 0.25rem;
                }
                
                .nav-links a:hover {
                    color: white;
                    transform: translateY(-1px);
                }
                
                @media (max-width: 640px) {
                    .content {
                        flex-direction: column;
                        text-align: center;
                    }
                    
                    .nav-links {
                        gap: 1rem;
                    }
                }
            </style>
            
            <div class="header">
                <div class="content">
                    <div>
                        <div class="brand">
                            <i data-feather="heart" class="w-7 h-7"></i>
                            <span>Şifa Bahçesi</span>
                        </div>
                        <div class="tagline">Doğal Yaşam, Dengeli Beslenme, Güçlü Omurga</div>
                    </div>
                    <nav class="nav-links">
                        <a href="#nutrition">
                            <i data-feather="coffee" class="w-4 h-4"></i>
                            Beslenme
                        </a>
                        <a href="#exercise">
                            <i data-feather="zap" class="w-4 h-4"></i>
                            Egzersiz
                        </a>
                        <a href="#contact">
                            <i data-feather="message-circle" class="w-4 h-4"></i>
                            İletişim
                        </a>
                    </nav>
                </div>
            </div>
        `;
    }
}

customElements.define('shifa-header', ShifaHeader);