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

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

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

    getContent(lang) {
        const content = {
            de: /* html */`
                <h1>Über dgray.io</h1>
                <p>dgray.io ist eine Privacy-First Kleinanzeigen-Plattform. Nutzer können Anzeigen erstellen und über Ende-zu-Ende verschlüsselte Nachrichten kommunizieren — ohne persönliche Daten preiszugeben.</p>
                <p>Die Bezahlung erfolgt ausschliesslich über Monero (XMR). Kein KYC, keine E-Mail, kein Tracking.</p>

                <h2>Prinzipien</h2>
                <ul>
                    <li>Keine persönlichen Daten erforderlich</li>
                    <li>Ende-zu-Ende verschlüsselte Kommunikation</li>
                    <li>Monero (XMR) als einziges Zahlungsmittel</li>
                    <li>Open Source & selbst gehostet</li>
                    <li>Betrieben aus der Schweiz</li>
                </ul>
            `,
            en: /* html */`
                <h1>About dgray.io</h1>
                <p>dgray.io is a privacy-first classifieds platform. Users can create listings and communicate via end-to-end encrypted messages — without revealing any personal data.</p>
                <p>Payments are made exclusively in Monero (XMR). No KYC, no email, no tracking.</p>

                <h2>Principles</h2>
                <ul>
                    <li>No personal data required</li>
                    <li>End-to-end encrypted communication</li>
                    <li>Monero (XMR) as sole payment method</li>
                    <li>Open source & self-hosted</li>
                    <li>Operated from Switzerland</li>
                </ul>
            `,
            fr: /* html */`
                <h1>À propos de dgray.io</h1>
                <p>dgray.io est une plateforme de petites annonces axée sur la confidentialité. Les utilisateurs peuvent créer des annonces et communiquer via des messages chiffrés de bout en bout — sans révéler de données personnelles.</p>
                <p>Les paiements s'effectuent exclusivement en Monero (XMR). Pas de KYC, pas d'e-mail, pas de tracking.</p>

                <h2>Principes</h2>
                <ul>
                    <li>Aucune donnée personnelle requise</li>
                    <li>Communication chiffrée de bout en bout</li>
                    <li>Monero (XMR) comme seul moyen de paiement</li>
                    <li>Open source & auto-hébergé</li>
                    <li>Exploité depuis la Suisse</li>
                </ul>
            `
        }
        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-about', PageAbout)

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

    page-about .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-about .back-link:hover {
        color: var(--color-text);
    }

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

    page-about .legal-content h2 {
        font-size: var(--font-size-lg);
        margin: var(--space-xl) 0 var(--space-sm);
        padding-top: var(--space-md);
        border-top: 1px solid var(--color-border);
    }

    page-about .legal-content h2:first-of-type {
        border-top: none;
    }

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

    page-about .legal-content ul {
        margin: 0 0 var(--space-sm);
        padding-left: var(--space-lg);
        color: var(--color-text-secondary);
    }

    page-about .legal-content ul li {
        line-height: 1.7;
        margin-bottom: var(--space-xs);
    }

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

        page-about .legal-content h1 {
            font-size: var(--font-size-xl);
        }

        page-about .legal-content h2 {
            font-size: var(--font-size-base);
        }
    }
`
document.head.appendChild(style)
