"use strict";

const { images_url } = require("../../../../constants");

const VULGARISATION_THEMES = [
    {
        title: "Qu'est-ce qui se passe dans mon ordinateur ?",
        image: "learning_theme_pc.png",
        details: [
            "Répondre aux questions sur l'informatique de tous les jours",
            "L'organisation des fichiers",
            "Le navigateur web et les logiciels usuels",
            "Le système d'exploitation",
        ],
    },
    {
        title: "GNU/Linux, le monde du libre",
        image: "learning_theme_linux.png",
        details: [
            "Installer Linux, démystifier et faire tomber les barrières.",
            "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
        ],
    },
    {
        title: "Comment fonctionne le web ?",
        image: "learning_theme_web.png",
        details: [
            "De quoi est fait le réseau internet ?",
            "Comment fonctionnent les différents services que nous utilisons ?",
            "Qu'est-ce qu'un cloud ?",
        ],
    },
    {
        title: "Le langages des machines",
        image: "learning_theme_coding.png",
        details: [
            "Démystifier la programmation informatique",
            "Qu'est-ce qu'un langage de programmation",
            "À quoi ça sert ?",
            "Les métiers du développement informatique",
        ],
    },
];

class Popularization {
    render() {
        return {
            tag: "section",
            contents: [
                {
                    tag: "div",
                    class: "title-banner popu-banner",
                    id: "popularization", // anchor id
                    contents: [{ tag: "h2", contents: "Vulgarisation numérique" }],
                },
                {
                    tag: "div",
                    class: "section-contents page-contents-center",
                    contents: [
                        {
                            tag: "div",
                            class: "full-row",
                            contents: [
                                {
                                    tag: "h3",
                                    class: "big",
                                    contents: "<blue>Démystifier</blue> l'informatique",
                                },
                                {
                                    tag: "strong",
                                    contents:
                                        "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
                                },
                                {
                                    tag: "p",
                                    contents:
                                        "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "practical-infos",
                            contents: [
                                {
                                    tag: "div",
                                    class: "info-item",
                                    contents: [
                                        {
                                            tag: "span",
                                            contents:
                                                "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
                                        },
                                    ],
                                },
                                {
                                    tag: "div",
                                    class: "info-item",
                                    contents: [
                                        {
                                            tag: "strong",
                                            contents: "Contact",
                                        },
                                        {
                                            tag: "span",
                                            contents: "04 75 78 08 72",
                                        },
                                        {
                                            tag: "a",
                                            href: "mailto:contact@kuadrado-software.fr",
                                            contents: "contact@kuadrado-software.fr",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "list-wrapper",
                            contents: [
                                {
                                    tag: "ul",
                                    class: "learning-themes",
                                    contents: VULGARISATION_THEMES.map(li => {
                                        return {
                                            tag: "li",
                                            class: "learning-theme " + li.class,
                                            contents: [
                                                {
                                                    tag: "strong",
                                                    class: "title",
                                                    contents: li.title,
                                                },
                                                {
                                                    tag: "img",
                                                    alt: `learning theme image ${li.title}`,
                                                    src: `${images_url}/${li.image}`,
                                                },
                                                {
                                                    tag: "div",
                                                    class: "details",
                                                    contents: [
                                                        {
                                                            tag: "div",
                                                            class: "comment",
                                                            contents: li.comment,
                                                        },
                                                        {
                                                            tag: "ul",
                                                            contents: li.details.map(d => {
                                                                return {
                                                                    tag: "li",
                                                                    contents: d,
                                                                };
                                                            }),
                                                        },
                                                    ],
                                                },
                                            ],
                                        };
                                    }),
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = Popularization;