const svgs = Array.from(document.querySelectorAll("svg"));
const dialog = document.querySelector("dialog");
const p = document.getElementById("dialog-p");
const img = document.getElementById("dialog-img");
const x = document.getElementById("x");

const paragraphs = [
  `<p><b>Άγαλμα Ελευθερίας</b></p><p class="text-just">Βρίσκεται στη Νέα Υόρκη και είναι ένα συμβολικό δώρο της Γαλλίας προς τις Ηνωμένες Πολιτείες. Εικονίζει την Ελευθερία ως γυναίκα, η οποία στο ένα χέρι κρατάει έναν πυρσό και στο άλλο μια πλάκα, στην οποία αναγράφεται η "4η Ιουλίου".</p>`,
  `<p><b>Άγαλμα του Χριστού Λυτρωτή</b></p><p class="text-just">Άγαλμα του Ιησού Χριστού που βρίσκεται στο Ρίο Ντε Τζανέιρο στο Εθνικό πάρκο Τιζούκα.</p>`,
  `<p><b>Μπιγκ Μπεν</b></p><p class="text-just">Ο πύργος βρίσκεται στο κέντρο του Λονδίνου. Έχει ύψος 96,3 μέτρα και αποτελείται απο 16 ορόφους. Τέθηκε σε λειτουργία το 1859.</p>`,
  `<p><b>Όπερα του Σίδνεϊ</b></p><p class="text-just">Ένα επιβλητικό κτήριο, με μια ιδιαίτερη στέγη, που εντοπίζεται στο κέντρο του Σίδνεϊ (Αυστραλία) και αποτελεί έναν από τους σημαντικότερους χώρους τεχνών θεάματος παγκοσμίως. Η έκταση που καταλαμβάνει είναι ίση με 4,5 στρέμματα.</p>`,
  `<p><b>Ταζ Μαχάλ</b></p><p class="text-just">Είναι συγκρότημα κτιρίων στην Ινδία κοντά στην πόλη Άγκρα. Συνδυάζει την περσική και την ινδική αρχιτεκτονική και αποτελεί ένα απο τα ομορφότερα κτίρια του κόσμου.</p>`,
  `<p><b>Πυραμίδες Αιγύπτου</b></p><p class="text-just">Αρχαίες κατασκευές που βρίσκονται στην Αίγυπτο και οι περισσότερες από αυτές στην έρημο Σαχάρα. Έχουν πολύ μεγάλο μέγεθος και σχήμα πυραμίδας. Είχαν κατασκευαστεί ως τάφοι για τους φαραώ και τις συζύγους τους.</p>`,
  `<p><b>Ακρόπολη</b></p><p class="text-just">Η Ακρόπολη των Αθηνών είναι ένας από τους σημαντικότερους αρχαιολογικούς χώρους παγκοσμίως. Σε αυτήν περιλαμβάνεται ο Παρθενώνας, τα Προπύλαια, το Ερέχθειο και ο Ναός της Αθηνάς Νίκης, έργα που κατασκευάστηκαν τον 5ο αιώνα π.Χ., κατά τον Χρυσό Αιώνα του Περικλή. Η Ακρόπολη προστατεύεται ως Μνημείο Παγκόσμιας Κληρονομιάς από την UNESCO.</p>`,
  `<p><b>Μεγάλο Τζαμί της Τζενέ</b></p><p class="text-just">Το Μεγάλο Τζαμί της Τζενέ είναι το μεγαλύτερο κτίσμα από λάσπη στον κόσμο. Η Τζενέ είναι μια πόλη στην περιοχή του Δέλτα της ενδοχώρας του Νίγηρα στο κεντρικό Μάλι. Το τζαμί κατασκευάστηκε στις αρχές του 20ού αιώνα. Το 1988 ανακυρήχθηκε ως μνημείο Παγκόσμιας Κληρονομιάς της UNESCO, το οποίο μάλιστα βρίσκεται σε κίνδυνο.</p>`,
  `<p><b>Τσιτσέν Ιτζά</b></p><p class="text-just">Αποτελεί αρχαιολογικό χώρο που κατασκευάστηκε από τους Μάγια. Ήταν μία από τις μεγαλύτερες πόλεις τους και βρίσκεται στο Μεξικό. Έχει ανακυρηχθεί Μνημείο Παγκόσμιας Κληρονομιάς από την UNESCO.</p>`,
  `<p><b>Μάτσου Πίτσου</b></p><p class="text-just">Το Μάτσου Πίτσου είναι μια αρχαία πόλη των Ίνκας που βρίσκεται στις Άνδεις του Περού. Ανακαλύφθηκε από τον Αμερικανό αρχαιολόγο Χιράμ Μπίνγκαμ το 1911. Αποτελεί Μνημείο Παγκόσμιας Κληρονομιάς της UNESCO από το 1983.</p>`,
  `<p><b>Σινικό Τείχος</b></p><p class="text-just">Το Σινικό Τείχος βρίσκεται στην Κίνα και είναι ένα από τα πιο σημαντικά κατασκευαστικά έργα στην ανθρώπινη ιστορία. Χτίστηκε για αμυντικούς σκοπούς με τα εκάστοτε υλικά που ήταν διαθέσιμα σε κάθε περιοχή. Είναι Μνημείο Παγκόσμιας Κληρονομιάς της UNESCO από το 1987.</p>`,
  `<p><b>Πύργος του Άιφελ</b></p><p class="text-just">Ο Πύργος του Άιφελ βρίσκεται στο Παρίσι της Γαλλίας και αποτελεί εμβληματικό σύμβολο της πόλης, ενώ είναι ένα από τα πιο αναγνωρίσιμα μνημεία στον κόσμο. Κατασκευάστηκε το 1889 από τον μηχανικό Γουστάβο Άιφελ. Έχει ύψος 324 μ. και ήταν το ψηλότερο κτίριο στον κόσμο μέχρι το 1930.</p>`,
  `<p><b>Ουλουρού (Άγερς Ροκ)</b></p><p class="text-just">Ο Ουλουρού (ή Άγερς Ροκ) είναι ένας ιερός βράχος για τους Αβορίγινες της Αυστραλίας. Βρίσκεται στην Κεντρική Αυστραλία και έχει ύψος περίπου 348 μέτρα. Λόγω της φυσικής και πολιτισμικής του σημασίας έχει αναγνωριστεί ως Μνημείο Παγκόσμιας Κληρονομιάς της UNESCO.</p>`,
];

svgs.forEach((svg, index) => {
  svg.addEventListener("click", () => {
    p.innerHTML = paragraphs[index];
    img.setAttribute("src", `./resources/image${index}.jpg`);
    setTimeout(() => {
      dialog.showModal();
    }, 100);
  });
});

x.addEventListener("click", () => {
  dialog.close();
});
