---
import { getCollection } from 'astro:content'

import PageLayout from '../layouts/PageLayout.astro'

const news = await getCollection('news')

// posts.push(...posts)
// posts.push(...posts)
// posts.push(...posts)

import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md'
---

<PageLayout pageName="homepage">
    <section class="principal">
        <div class="circuit-layer">
            <canvas id="circuits-art"></canvas>
            <script src="../scripts/circuits-art.ts"></script>
        </div>
        <div class="logo">
            <img src="/images/logo-circuit-board.svg" alt="phc logo" />
        </div>
        <div class="whats-phc card large">
            <div class="title">{whatsPhcFrontmatter.title}</div>
            <div class="text">
                <WhatPhcContent />
            </div>
        </div>
    </section>
    <section class="news">
        <div class="zig-zag">
            <svg
                width="100%"
                height="2rem"
                viewBox="0 0 1 1"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="xMinYMid meet"
            >
                <defs>
                    <pattern id="zig-zag-1" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
                        <path fill="#C2A8EB" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
                    </pattern>
                </defs>
                <rect fill="url(#zig-zag-1)" x="0" y="0" width="1000" height="1"></rect>
            </svg>
        </div>

        <div class="title">Ultime Notizie</div>

        <div class="card-list">
            {
                news.map(newsItem => (
                    <div class="card">
                        <a href={`/notizie/${newsItem.slug}`} class="title">
                            {newsItem.data.title}
                        </a>
                        <div class="text small dimmed">
                            {new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
                                year: 'numeric',
                                month: 'long',
                                day: 'numeric',
                            })}
                        </div>
                        <div class="text">{newsItem.data.description}</div>
                    </div>
                ))
            }
        </div>

        <a class="primary" href="/notizie" role="button">Vai all'Archivio</a>
    </section>
    <section class="projects">
        <div class="zig-zag">
            <svg
                width="100%"
                height="2rem"
                viewBox="0 0 1 1"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="xMinYMid meet"
            >
                <defs>
                    <pattern id="zig-zag-2" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
                        <path fill="#f5f2cc" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
                    </pattern>
                </defs>
                <rect fill="url(#zig-zag-2)" x="0" y="0" width="1000" height="1"></rect>
            </svg>
        </div>

        <div class="title">Progetti</div>

        <div class="project-list">
            <a target="_blank" href="https://git.phc.dm.unipi.it/" style="--masonry-height: 2;">
                <div class="project" style="--card-bg: rgb(150, 197, 150);">
                    <div class="image">
                        <img
                            src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Gitea_Logo.svg"
                            alt="logo Gitea"
                        />
                    </div>
                    <div class="title">Gitea</div>
                    <div class="description">
                        <p>
                            Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.
                        </p>
                        <p>
                            Qui troverai i progetti del PHC, ma non solo: può accedervi chiunque con un
                            account di Ateneo.
                        </p>
                    </div>
                </div>
            </a>
            <!-- <a href="#" style="--masonry-height: 2;">
                <div class="project">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">PHC-Bot</div>
                    <div class="description">
                        Un bot con cui chattare per chiedere informazioni o supporto tecnico.
                    </div>
                </div>
            </a> -->
            <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 1;">
                <div class="project" style="--card-bg: #75ca75;">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Orario</div>
                    <div class="description">
                        Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni
                        sui docenti e le aule.
                    </div>
                </div>
            </a>
            <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;">
                <div class="project" style="--card-bg: #aa88c0;">
                    <div class="image">
                        <img
                            src="https://lab.phc.dm.unipi.it/problemi/favicon/android-chrome-512x512.png"
                            alt="logo Problemi"
                        />
                    </div>
                    <div class="title">Problemi</div>
                    <div class="description">
                        <p>Bacheca con problemi di Matematica da risolvere inviando soluzioni in LaTeX.</p>

                        <p>La sera i problemi compaiono sullo schermo in atrio.</p>
                    </div>
                </div>
            </a>
            <a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;">
                <div class="project">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Cluster "Steffè"</div>
                    <div class="description">
                        Cluster progettato ed assemblato durante il progetto speciale per la didattica
                        "Calcolo Parallelo dall'Infrastruttura alla Matematica".
                    </div>
                </div>
            </a>
            <a target="_blank" href="https://seminarietti.phc.dm.unipi.it/" style="--masonry-height: 2;">
                <div class="project" style="--card-bg: #bd9fec;">
                    <div class="image">
                        <div class="box"></div>
                    </div>
                    <div class="title">Seminarietti</div>
                    <div class="description">
                        Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.
                    </div>
                </div>
            </a>
        </div>
    </section>
    <section class="wanna-be-macchinista">
        <div class="zig-zag">
            <svg
                width="100%"
                height="2rem"
                viewBox="0 0 1 1"
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="xMinYMid meet"
            >
                <defs>
                    <pattern id="zig-zag-3" x="0" y="0" width="2" height="1" patternUnits="userSpaceOnUse">
                        <path fill="#888" d="M 0,1 L 1,0 L 2,1 L 0,1"></path>
                    </pattern>
                </defs>
                <rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
            </svg>
        </div>

        <div class="title">Vuoi diventare macchinista?</div>

        <div class="content">
            <p>
                Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC,
                vieni a trovarci in Dipartimento o scrivici a <a href="mailto:macchinisti@lists.dm.unipi.it">
                </a>
            </p>
        </div>
    </section></PageLayout
>