"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: [
            "Apprendre à installer Linux",
            "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: [
            "Qu'est-ce qu'un langage de programmation",
            "À quoi ça sert ?",
            "Les métiers du développement informatique",
        ],
    },
    {
        title: "Les coulisses du jeu vidéo",
        image: "learning_theme_2d.png",
        details: [
            "De quoi sont fait les jeux vidéos ?",
            "Quels sont les outils ?",
            "Les métiers du jeu vidéo",
            "Du pixelart à l'industrie lourde",
            "Qu'est-ce qu'un moteur de jeu ?",
        ],
    },
];

class Popularization {
    render() {
        return {
            tag: "section",
            typeof: "EducationalOrganization",
            contents: [
                {
                    tag: "div",
                    class: "title-banner popu-banner",
                    id: "popularization", // anchor id
                    contents: [
                        { tag: "h2", contents: "Vulgarisation numérique", property: "name" },
                    ],
                },
                {
                    tag: "div",
                    class: "section-contents page-contents-center",
                    contents: [
                        {
                            tag: "div",
                            class: "full-row",
                            contents: [
                                {
                                    tag: "h3",
                                    class: "big",
                                    contents: "<blue>S'approprier</blue> l'informatique",
                                    property: "headline",
                                },
                                {
                                    tag: "strong",
                                    contents:
                                        "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
                                    property: "alternativeHeadline",
                                },
                                {
                                    tag: "p",
                                    contents:
                                        "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
                                    property: "description",
                                },
                            ],
                        },
                        {
                            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: "a",
                                            href: "tel:+33475780872",
                                            contents: "04 75 78 08 72",
                                            property: "telephone",
                                        },
                                        {
                                            tag: "a",
                                            href: "mailto:contact@kuadrado-software.fr",
                                            contents: "contact@kuadrado-software.fr",
                                            property: "email",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "list-wrapper",
                            contents: [
                                {
                                    tag: "ul",
                                    class: "learning-themes",
                                    property: "hasPart",
                                    contents: VULGARISATION_THEMES.map(li => {
                                        return {
                                            tag: "li",
                                            typeof: "ListItem",
                                            class: "learning-theme " + li.class,
                                            contents: [
                                                {
                                                    tag: "strong",
                                                    class: "title",
                                                    contents: li.title,
                                                    property: "name",
                                                },
                                                {
                                                    tag: "img",
                                                    alt: `learning theme image ${li.title}`,
                                                    src: `${images_url}${li.image}`,
                                                    property: "image",
                                                },
                                                {
                                                    tag: "div",
                                                    class: "details",
                                                    property: "description",
                                                    contents: [
                                                        {
                                                            tag: "div",
                                                            class: "comment",
                                                            contents: li.comment,
                                                        },
                                                        {
                                                            tag: "ul",
                                                            contents: li.details.map(d => {
                                                                return {
                                                                    tag: "li",
                                                                    contents: d,
                                                                };
                                                            }),
                                                        },
                                                    ],
                                                },
                                            ],
                                        };
                                    }),
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = Popularization;