import { t, i18n } from '../../i18n.js';

class PageNotFound extends HTMLElement {
    connectedCallback() {
        this.render();
        this.unsubscribe = i18n.subscribe(() => this.render());
    }

    disconnectedCallback() {
        if (this.unsubscribe) this.unsubscribe();
    }

    render() {
        this.innerHTML = /* html */ `
            <div class="not-found">
                <div class="not-found-icon">404</div>
                <h1 data-i18n="notFound.title">${t('notFound.title')}</h1>
                <p data-i18n="notFound.message">${t('notFound.message')}</p>
                <a href="#/" class="btn btn-primary btn-lg">
                    <span data-i18n="notFound.backHome">${t('notFound.backHome')}</span>
                </a>
            </div>
        `;
    }
}

customElements.define('page-not-found', PageNotFound);

const style = document.createElement('style');
style.textContent = /* css */ `
    page-not-found .not-found {
        text-align: center;
        padding: var(--space-3xl) 0;
    }
    
    page-not-found .not-found-icon {
        font-size: 6rem;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-muted);
        margin-bottom: var(--space-md);
    }
    
    page-not-found h1 {
        margin-bottom: var(--space-md);
    }
    
    page-not-found p {
        color: var(--color-text-secondary);
        margin-bottom: var(--space-xl);
    }
`;
document.head.appendChild(style);