const nawigacjaLinki = [
    { nazwa: "Tabele", link: "/tabele.html" },
    { nazwa: "Grafika", link: "/grafika.html" },
    { nazwa: "JS. Funkcje", link: "/js-funkcje.html" },
    { nazwa: "JS. Zdarzenia", link: "/js-zdarzenia.html" },
];
const stopkaLinki = [
    [
        "Główne linki",
        { nazwa: "Strona główna", link: "/index.html" },
        { nazwa: "Moje hobby", link: "/hobby.html" },
        { nazwa: "Galeria", link: "/galeria.html" },
        { nazwa: "Kontakt", link: "https://nonamesoft.xyz/about" },
    ],
    [
        "#FreeJavaScript",
        { nazwa: "JS. Podstawowe Zad.", link: "/js-podstawy.html" },
        { nazwa: "JS. Zad. Warunkowe", link: "/js-warunkowe.html" },
        { nazwa: "JS. Funkcje", link: "/js-funkcje.html" },
        { nazwa: "JS. Zdarzenia", link: "/js-zdarzenia.html" },
    ],
    [
        "HTML",
        { nazwa: "Tabele", link: "/tabele.html" },
        { nazwa: "Grafika", link: "/grafika.html" },
    ],
    [
        "Wszystko",
        { nazwa: "Liczby", link: "/liczby.html" },
    ]
];

const stopkaObrazki = [
    { link: "/assets/images/960px-Neko_Wikipe-tan.png", autor: 'przez <a href="https://en.wikipedia.org/wiki/User:Kasuga~enwiki" title="Kasuga~enwiki">w:User:Kasuga~enwiki</a> <br> <span lang="pl">Praca własna</span>, <a href="http://creativecommons.org/licenses/by-sa/3.0/" title="Creative Commons Attribution-Share Alike 3.0">CC BY-SA 3.0</a>, <a href="https://commons.wikimedia.org/w/index.php?curid=2482629">Link</a>', alt: "Wikipe-tan, personifikacja Wikipedii, jako kotodziewczynka" },
    { link: "/assets/images/rurex.webp", alt: "Rurex. " },
    { link: "/assets/images/blahaj.png", alt: "Oficjalna grafika BLÅHAJa z Ikei ale w kiepskej rozdzielczości" },
];


class Header extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        const miesiac = new Date().getMonth();
        this.innerHTML = `
            <header>
                ${ miesiac < 2 || miesiac == 11 ? `<img src="/assets/images/snieg.png" id="snieg">` : "" }
                <img src="/favicon.ico" width="64" height="64">
                <h1>MaszToZadanieDomowe.com</h1>
                <nav>
                    <ul>
                        <li><a href="/index.html">Strona główna</a></li>
                        ${nawigacjaLinki.map(value => {
                            return `<li><a href="${value.link}">${value.nazwa}</a></li>`
                        }).join("")}
                    </ul>
                </nav>
            </header>
        `;
    }
};
customElements.define("header-comp", Header);

class Footer extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        const obrazek = stopkaObrazki[Math.floor(Math.random() * stopkaObrazki.length)];
        const miesiac = new Date().getMonth();
        this.innerHTML = `
            <footer>
                ${ miesiac < 2 || miesiac == 11 ? `<img src="/assets/images/snieg.png" id="snieg">` : "" }
                <div>
                    <div class="flex-row">
                        ${stopkaLinki.map(kategoria => {
                            return `<ul>
                                ${kategoria.map(value => {
                                    if (typeof value == "string") {
                                        return `<h5>${value}</h5>`;
                                    }
                                    return `<li><a href="${value.link}">${value.nazwa}</a></li>`
                                }).join("")}
                            </ul>`
                        }).join("")}
                    </div>
                    <strong>Strona &copy; Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
                </div>
                <div id="extra" style="flex-grow: 0; flex-direction: row;">
                    <iframe
                        src="https://youads.nonamesoft.xyz/ads/site"
                        title="YouAds Ads Site"
                        height="150"
                        style="border: medium; max-width: 600px; width: 600px; height: 150px;"
                        loading="lazy"
                    >
                    </iframe>
                    <div class="flex-col">
                        <div class="flex-row-reverse">
                            <img src="${obrazek.link}" title="${obrazek.alt}" alt="${obrazek.alt}">
                        </div>
                        <p>${obrazek.autor ?? ""}</p>
                    </div>
                </div>
            </footer>
        `;
    }
};
customElements.define("footer-comp", Footer);