components/security-badge.js

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

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: inline-block;
                }

                .security-badge {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    background: #059669;
                    color: white;
                    padding: 0.5rem 1rem;
                    border-radius: 0.5rem;
                    font-size: 0.75rem;
                    font-weight: 600;
                    cursor: help;
                    border: 1px solid #047857;
                    font-family: system-ui, -apple-system, sans-serif;
                    font-size: 0.75rem;
                    font-weight: 600;
                }

                .security-badge:hover {
                    background: #047857;
                }

                .badge-icon {
                    width: 1rem;
                    height: 1rem;
                }
            </style>
            <div class="security-badge" role="status" aria-live="polite">
                        <i data-feather="shield" class="badge-icon"></i>
                        <span>Security-First Compliant</span>
                    </div>
                `;
        
        // Add tooltip functionality
        const badge = this.shadowRoot.querySelector('.security-badge');
        badge.setAttribute('title', 'OWASP ASVS, UK GDPR, SLSA Compliant');
    }
}

customElements.define('security-badge', SecurityBadge);