import { getCurrentLanguage, i18n } from '../../i18n.js'

class PageContact extends HTMLElement {
    connectedCallback() {
        this._unsubs = []
        this.render()
        this._unsubs.push(i18n.subscribe(() => this.render()))
    }

    disconnectedCallback() {
        this._unsubs.forEach(fn => fn())
        this._unsubs = []
    }

    getContent(lang) {
        const content = {
            de: /* html */`
                <h1>Kontakt</h1>
                <p>Bei Fragen oder Problemen erreichst du uns unter:</p>
                <p><strong>E-Mail:</strong> <a href="mailto:hello@kashilo.com">hello@kashilo.com</a></p>
            `,
            en: /* html */`
                <h1>Contact</h1>
                <p>For questions or issues, reach us at:</p>
                <p><strong>Email:</strong> <a href="mailto:hello@kashilo.com">hello@kashilo.com</a></p>
            `,
            fr: /* html */`
                <h1>Contact</h1>
                <p>Pour toute question ou problème, contactez-nous à :</p>
                <p><strong>E-mail :</strong> <a href="mailto:hello@kashilo.com">hello@kashilo.com</a></p>
            `
        }
        return content[lang] || content.de
    }

    render() {
        const lang = getCurrentLanguage()
        const backLabel = { de: 'Zurück zur Startseite', en: 'Back to Home', fr: 'Retour à l\'accueil' }
        this.innerHTML = /* html */`
            <div class="legal-page">
                <a href="#/" class="back-link">← ${backLabel[lang] || backLabel.en}</a>
                <div class="legal-content">
                    ${this.getContent(lang)}
                </div>
            </div>
        `
    }
}

customElements.define('page-contact', PageContact)

const style = document.createElement('style')
style.textContent = /* css */`
    page-contact .legal-page {
        padding: var(--space-lg) 0;
        max-width: 800px;
        margin: 0 auto;
    }

    page-contact .back-link {
        display: inline-block;
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-lg);
        transition: color 0.2s;
    }

    page-contact .back-link:hover {
        color: var(--color-text);
    }

    page-contact .legal-content h1 {
        font-size: var(--font-size-2xl);
        margin: 0 0 var(--space-xs);
    }

    page-contact .legal-content p {
        line-height: 1.7;
        margin: 0 0 var(--space-sm);
        color: var(--color-text-secondary);
    }

    page-contact .legal-content a {
        color: var(--color-text);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    page-contact .legal-content a:hover {
        color: var(--color-accent);
    }

    @media (max-width: 768px) {
        page-contact .legal-page {
            padding: var(--space-md) 0;
        }

        page-contact .legal-content h1 {
            font-size: var(--font-size-xl);
        }
    }
`
document.head.appendChild(style)