---
// On remonte de src/components vers la racine pour trouver le package.json
import packageInfo from "../../package.json" with { type: "json" };

const authorInfo = {
    pseudo: "G'Mas",
    role: "Artisan du Sable & Aventurier",
    repoName: "sweet",
    repoUrl: "https://git.liestral.io/chim1chim2/sweet",
};

const currentYear = new Date().getFullYear();
---

<footer>
    <div class="footer-content">
        <div class="metadata">
            <p>
                <strong>{authorInfo.pseudo}</strong><br /><br />{
                    authorInfo.role
                }
            </p>
            <div class="specs">
                <span>Version <code>v{packageInfo.version}</code></span>
                <span class="separator">|</span>
                <span
                    >Dépôt : <a
                        href={authorInfo.repoUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        ><em>{authorInfo.repoName}</em></a
                    ></span
                >
                <span class="separator">|</span>
                <span>{currentYear}</span>
            </div>
        </div>
    </div>
</footer>

<style>
    footer {
        margin-top: 5rem;
        padding: 3rem 1rem;
        /* On utilise l'encre de ton thème pour la bordure */
        border-top: 1px solid rgba(74, 65, 48, 0.1);
        font-family: "Courier New", Courier, monospace;
        color: var(--color-ink); /* Utilisation de ta variable globale */
        font-size: 0.85rem;
        opacity: 0.8;
    }

    .footer-content {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }

    .metadata p {
        margin-bottom: 0.5rem;
    }

    .specs {
        display: flex;
        justify-content: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        align-items: center;
    }

    code {
        /* Fond sombre pour le code sur papier clair */
        background: rgba(74, 65, 48, 0.05);
        padding: 2px 6px;
        border-radius: 4px;
        color: var(--color-ink);
    }

    a {
        color: var(--color-gold-dark);
        text-decoration: none;
        transition: all 0.2s;
        border-bottom: 1px dashed transparent;
    }

    a:hover {
        color: var(--color-gold);
        border-bottom-color: var(--color-gold);
    }

    .separator {
        opacity: 0.3;
    }

    @media (max-width: 600px) {
        .separator {
            display: none;
        }
        .specs {
            flex-direction: column;
            gap: 0.5rem;
        }
    }
</style>
