const 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" },
    ],
    [
        { nazwa: "JS. Podstawowe Zad.", link: "/js-podstawy.html" },
        { nazwa: "JS. Warunkowe Zad.", link: "/js-warunkowe.html" },
    ]
];


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

    connectedCallback() {
        this.innerHTML = `
            <header>
                <img src="/favicon.ico" width="64" height="64">
                <h1>MaszToZadanieDomowe.com</h1>
                <nav>
                    <ul>
                        <li><a href="/index.html">Strona główna</a></li>
                        ${linki[linki.length - 1].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() {
        this.innerHTML = `
            <footer>
                <div>
                    <div>
                        ${linki.map(kategoria => {
                            return `<ul>
                                ${kategoria.map(value => {
                                    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>
                <img src="assets/images/blahaj.png" height="128">
            </footer>
        `;
    }
};
customElements.define("footer-comp", Footer);