use super::components::*;
use leptos::*;

#[component]
pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
    view! { cx,
        <div class="max-w-[1600px] mx-auto">
            
        <div class="flex flex-col min-h-[700px] p-28 bg-cover bg-[url('/img/bg-page1.png')]">
            <h1 class="text-orange-400 text-7xl font-extrabold mb-14">
                "Micro centres de données"
            </h1>
            <Subtitle class="grow">
                <span class="max-w-lg inline-block">
                    "Pourquoi les centres de données grande échelle sont-ils voués à disparaître?"
                </span>
            </Subtitle>
            <img src="/img/NationTech-logo.png" class="mx-auto opacity-50 w-1/4"/>
        </div>
        
        <div class="flex-col p-8">
            <div class="w-fit mx-auto mb-4 border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=false>
                    "Énergie: le nerf de la guerre"
                </SectionTitle> 
            </div>
            <div class="mr-72 ml-72">     
                <p class="text-justify mb-10 mt-8">
                    "Tous les systèmes économiques sont basés sur deux variables fondamentales: le temps et l’énergie. Depuis des millénaires l’or est dispendieux. Parce qu’il requiert beaucoup de temps et d’énergie à trouver. Depuis toujours l’eau a une valeur différente à différents endroits de la planète et moments de l’année, en fonction du temps et de l’énergie requis pour la trouver. D’ailleurs, l’énergie est souvent représentée comme fonction du temps. L’unité d’énergie choisie par le Système International, le Joule, s’exprime en Kilogramme X Mètre2 X Seconde2. "
                </p>
                <p class="text-justify mb-10">
                    "Il convient donc de considérer l’énergie comme fondement principal des différents systèmes économiques. Ce livre blanc vise à étudier les caractéristiques économiques selon différentes métriques naturelles, dont l’énergie est la plus importante, des différentes technologies de déploiement de centres de données. Cette analyse vise plus particulièrement à comparer l’efficacité énergétique, et donc économique, des déploiements de centres de données à très petite et très grande échelle."
                </p>
                <p class="text-right font-bold">
                    "L’impact global sera calculé en fonction des 5 métriques présentées ci-dessous."                
                </p>
            </div>
        </div>

        <div class="flex bg-zinc-200 max-h-[450px] flex-row justify-center items-center"> 
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
                <img src="/img/electricity-icon.png" class="mx-auto"/>                  
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "1"
                    </h3>
                    <h4 class="font-Lato w-48 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">
                        "Consommation d'énergie"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
                <img src="/img/water-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "2"
                    </h3>
                    <h4 class="font-Lato p-4 w-48 text-blue-950 text-xl font-medium my-auto">
                        "Consommation d'eau"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
                <img src="/img/tree-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "3"
                    </h3>
                    <h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">                        
                        "Impact environnemental"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
                <img src="/img/coin-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "4"
                    </h3>
                    <h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">                    
                        "Impact économique"
                    </h4>
                </div>
            </div>
            <div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
                <img src="/img/group-icon.png" class="mx-auto"/>
                <div class="flex justify-center items-center">
                    <h3 class="p-4 text-blue-950 text-5xl font-semibold">
                        "5"
                    </h3>
                    <h4 class="font-Lato w-36 p-4 text-blue-950 text-xl font-medium my-auto">
                        "Impact social"
                    </h4>
                </div>
            </div>
        </div>

        <div class="justify-center items-center flex h-[250px] bg-cover bg-center opacity-75 bg-[url('/img/server-wires-page3.png')]">    
            <div class="h-fit border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=true>
                     "Qu'est-ce qu'un centre de données"
                 </SectionTitle>
            </div>
        </div>
        <div class="flex flex-col bg-indigo-950">
            <div class="p-8 w-fit h-fit mr-72 ml-72">
                <div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2"> 
                    <div class="flex-col">
                        <div class="flex justify-end pb-4">
                            <SubsectionTitle dark=true>
                                "Micro centres de données (MCD)"
                            </SubsectionTitle>
                        </div>
                        <p class="text-right mr-2 text-white">  
                            "Un MCD est une unité de serveurs de petite taille pouvant être installée dans n’importe quel immeuble, tant les maisons unifamiliales que les gratte-ciels ou les usines. Sa taille est adaptée aux besoins énergétiques de l’immeuble qui l’abrite. Les rejets énergétiques, le plus souvent sous forme de chaleur, sont réutilisés au maximum dans l’immeuble pour le chauffer. Ils peuvent également être utilisée pour chauffer l’eau, ou même regénérer de l’électricité dans certains cas. Ce type de déploiement réduit également les besoins de climatisation du centre de données puisque la chaleur est transférée à d’autres usages. L’énergie totale consommée par le centre de données est donc déjà réduite."
                       </p>
                       </div>
                </div>
            </div>
            <div class="p-8 w-fit h-fit pb-24 mr-72 ml-72">
                <div class="w-fit pt-4 pb-4 border-l-8 border-indigo-500 pl-2"> 
                    <div class="flex-col">
                    <h4 class="font-Lato w-48 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">
                        "Consommation d'énergie"
                    </h4>
                        <div class="flex justify-start pb-4">
                            "Un CDGE est une unité constituée de milliers, voire de millions de serveurs centralisés sous un même toît. De tels serveurs sont généralement contenus dans d’énormes bâtiments exclusivement dédiés à l’hébergement de serveurs, ce qui requiert des systèmes de refroidissement énergivores."
                        </div>
                     </div>
                </div>
            </div>
        </div>


        <div class="flex flex-col bg-zinc-200 justify-center p-8">
            <div class="mx-auto h-fit w-fit border-t-4 border-b-4 border-orange-400 p-4">
                <SectionTitle dark=false>
                     "Pourquoi des centres de données durables?"
                 </SectionTitle>
            </div>
            <p class="text-justify p-4 mb=32 ml-72 mr-72">
                "Une publication de l’Agence internationale de l’énergie (AIE) indiquait en septembre 2022 que la demande énergétique des centres de données et des réseaux de transmission des données représentait de 2% à 3% de la consommation mondiale d’électricité, soit près de 1% des émissions de gaz à effet de serre du secteur énergétique (Kamiya, 2022)."
            </p>
            <p class="text-justify p-4 ml-72 mr-72">
                "C’est pourquoi NationTech défend l’idée de remplacer les CDGE par les MCD, ces derniers étant plus durables. Ci-contre sont énumérés les Objectifs de développement durables (ODD) fixés par l’ONU dont les MCD favorisent l’atteinte."
            </p>
            <h5 class="pb-16 mx-auto text-center font-Lato w-[545px] p-4 text-blue-950 text-4xl font-bold">
                "Objectifs du développement durable (ODD)"
            </h5>
            <div class="justify-center flex flex-row">
                <img src="/img/ONU-1.png" class="p-2"/>
                <img src="/img/ONU-2.png" class="p-2"/>
                <img src="/img/ONU-3.png" class="p-2"/>
            </div>
            <div class="justify-center flex flex-row">
                <img src="/img/ONU-4.png" class="p-2"/>
                <img src="/img/ONU-5.png" class="p-2"/>
                <img src="/img/ONU-6.png" class="p-2"/>
            </div>
            <div class="justify-center flex flex-row">
                <img src="/img/ONU-7.png" class="p-2"/>
                <img src="/img/ONU-8.png" class="p-2"/>
                <img src="/img/ONU-9.png" class="p-2"/>
            </div>
            <p class="text-justify pb-12 p-4 ml-72 mr-72">
                "Le ministère de l’Environnement, de la Lutte contre les changements climatiques, de la Faune et des Parcs (MELCCFP) offre une perspective intéressante du DD. Il définit le concept comme suit."
            </p>
            <div class="flex flex-col justify-center pt-4 pb-4 pl-2 mr-72 ml-72 border-l-8 border-blue-400">
                <p class="w-fit text-left italic">
                    "Repenser les rapports qu’entretiennent les êtres humains entre eux et avec la nature est une aspiration que partage un nombre grandissant de femmes et d’hommes. Ils posent un regard critique sur un mode de développement qui, trop souvent, porte atteinte à l’environnement et relègue la majorité de l’humanité dans la pauvreté. Le développement durable est issu de cette idée que tout ne peut pas continuer comme avant, qu’il faut remédier aux insuffisances d’un modèle de développement axé sur la seule croissance économique en reconsidérant nos façons de faire compte tenu de nouvelles priorités. Il faut donc :"
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "Maintenir l'intégrité de l'environnement pour assurer la santé et la sécurité des communautés humaines et préserver les écosystèmes qui entretiennent la vie;"
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "Assurer l'équité sociale pour permettre le plein épanouissement de toutes les femmes et de tous les hommes, l’essor des communautés et le respect de la diversité;"
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "Viser l'efficience économique pour créer une économie innovante et prospère, écologiquement et socialement responsable."
                </p>
                <p class="pt-4 w-fit text-left italic">
                    "(Développement Durable : Définition et Objectifs, 2023)"
                </p>
            </div>
        </div>

        <div class="flex flex-col justify-center">
        </div>
    </div>
    }
}
