---
import { getCollection } from 'astro:content'
import PageLayout from '../layouts/PageLayout.astro'
import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md'

const news = await getCollection('news')

const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ default: { src } }) => src)
---

<PageLayout pageTags="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">
            <input type="checkbox" class="hide" id="mobile-whats-phc-read-more" checked />
            <div class="title">{whatsPhcFrontmatter.title}</div>
            <div class="text">
                <WhatPhcContent />
            </div>
            <div class="mobile-only">
                <label for="mobile-whats-phc-read-more">
                    <div class="button">
                        <span>Mostra di più</span>
                        <span>Mostra meno</span>
                    </div>
                </label>
            </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" id="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 puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai
                            crearne di nuovi.
                        </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 auto">
                        <img src="https://lab.phc.dm.unipi.it/orario/icon.png" alt="Logo Orario" />
                    </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 di problemi di Matematica da risolvere, inviandone le soluzioni in LaTeX.
                        </p>

                        <p>Di sera, puoi leggere i problemi sullo schermo del Dipartimento in atrio.</p>
                    </div>
                </div>
            </a>
            <a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;">
                <div class="project">
                    <div class="image cover">
                        <img src="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png" alt="Logo Cluster" />
                    </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">
                        <img src="https://seminarietti.phc.dm.unipi.it/favicon.png" alt="Logo Seminarietti" />
                    </div>
                    <div class="title">Seminarietti</div>
                    <div class="description">
                        Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.
                    </div>
                </div>
            </a>
            <a target="_blank" href="https://tutorato.phc.dm.unipi.it/" style="--masonry-height: 2;">
                <div class="project" style="--card-bg: #c55;">
                    <div class="image">
                        <img src="https://tutorato.phc.dm.unipi.it/favicon.svg" alt="Logo Tutorato" />
                    </div>
                    <div class="title">Tutorato</div>
                    <div class="description">
                        Un sito con tutte le informazioni sui tutorati di Matematica, con tanto di archivio
                        degli anni passati.
                    </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>
        <span></span>
        <span></span>
        <div class="card large" style="--card-base: #ddd;">
            <div class="title">E cosa si fa in PHC?</div>
            <div class="text">
                <p>Nessuno lo sa di preciso, ma facciamo molte cose:</p>
                <ul>
                    <li>amministrazione di sistemi Linux/Unix e macchine virtuali</li>
                    <li>supporto tecnico per installare e usare Linux sul proprio portatile</li>
                    <li>costruiamo, smontiamo ed aggiustamo computer (antichi e moderni)</li>
                    <li>sviluppo di software per backend e web development</li>
                    <li>
                        organizzazione di seminari di divulgazione (vedi <a href="#projects">sopra</a>)
                    </li>
                </ul>
                <p>
                    Inoltre, il PHC è prima di tutto un luogo dove imparare, trasmettere le proprie conoscenze
                    e condividere la passione per la tecnologia.
                </p>
            </div>
        </div>
        <div class="gallery-collage">
            {
                galleryCollage.map((src, i) => (
                    <div class="card">
                        <img src={src} alt={`gallery image ${i}`} />
                    </div>
                ))
            }
        </div>
        <div class="card large" style="--card-base: #ddd;">
            <div class="title">Vuoi diventare macchinista?</div>
            <div class="text">
                <p>
                    <strong>Macchinista non si nasce, si diventa:</strong> se sei uno studente di Matematica e
                    vuoi diventare un macchinista, vienici a trovare!
                </p>
                <p>
                    L'unico prerequisito è la voglia di imparare! Di solito, c'è un periodo di "apprendistato"
                    nel quale si apprendono le basi; una volta superato potrai diventare un macchinista a
                    tutti gli effetti.
                </p>
            </div>
        </div>
    </section>
</PageLayout>