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 über:</p>
                <p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Chat starten</a></p>
            `,
            en: /* html */`
                <h1>Contact</h1>
                <p>For questions or issues, reach us via:</p>
                <p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Start chat</a></p>
            `,
            fr: /* html */`
                <h1>Contact</h1>
                <p>Pour toute question ou problème, contactez-nous via :</p>
                <p><strong>SimpleX :</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Démarrer le chat</a></p>
            `,
            it: /* html */`
                <h1>Contatto</h1>
                <p>Per domande o problemi, contattaci tramite:</p>
                <p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Avvia chat</a></p>
            `,
            es: /* html */`
                <h1>Contacto</h1>
                <p>Para preguntas o problemas, contáctanos a través de:</p>
                <p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Iniciar chat</a></p>
            `,
            pt: /* html */`
                <h1>Contato</h1>
                <p>Para dúvidas ou problemas, entre em contato via:</p>
                <p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Iniciar chat</a></p>
            `,
            ru: /* html */`
                <h1>Контакт</h1>
                <p>По вопросам или проблемам свяжитесь с нами через:</p>
                <p><strong>SimpleX:</strong> <a href="https://simplex.chat/contact#/?v=2-7&smp=smp10.simplex.im&contact=VE3MWwSpmtCFNQncpK0yBCqV3Q5IMrETUlu4sZXAvhs" target="_blank" rel="noopener">Начать чат</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', it: 'Torna alla home', es: 'Volver al inicio', pt: 'Voltar ao Início', ru: 'На главную' }
        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)