---
import '@/styles/pages/media-pesata.css'
import PageLayout from '../layouts/PageLayout.astro'
---

<PageLayout title="Voto Laurea" description="Calcola la tua media pesata e il voto di laurea seguendo le regole del dipartimento">
    <div class="media-pesata-container">
        <h1>Voto Laurea</h1>
        <p>Calcola la tua media pesata e il voto con cui ti siederai alla discussione di laurea, seguendo le regole del dipartimento di Matematica.</p>

        <div id="media-pesata-app"></div>
    </div>
</PageLayout>

<script>
    // Importiamo e inizializziamo l'applicazione
    import('../client/MediaPesataApp')
        .then(module => {
            const { initMediaPesataApp } = module
            initMediaPesataApp()
        })
        .catch(error => {
            console.error('Errore nel caricamento dell\'applicazione:', error)
        })
</script>

<style>
    .media-pesata-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .media-pesata-container h1 {
        text-align: center;
        color: var(--palette-black);
        margin-bottom: 1rem;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 2.5rem;
    }

    .media-pesata-container p {
        text-align: center;
        color: #666;
        margin-bottom: 2rem;
        font-size: 1.1rem;
    }
</style>