---
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>Calcolo Media e Voto di 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()
        })
</script>

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

    h1 {
        text-align: center;
        margin-bottom: 1rem;
        color: var(--color-primary);
    }

    p {
        text-align: center;
        margin-bottom: 2rem;
        color: var(--color-text-secondary);
    }
</style>