---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import Nav from '../components/Nav.astro';
import Hero from '../components/Hero.astro';
import Standards from '../components/Standards.astro';
import Projects from '../components/Projects.astro';
import Events from '../components/Events.astro';
import Biodiversity from '../components/Biodiversity.astro';
import PlantOfTheWeek from '../components/PlantOfTheWeek.astro';
import PlantQuiz from '../components/PlantQuiz.astro';
import FAQ from '../components/FAQ.astro';
import Footer from '../components/Footer.astro';
import SubpageMauer from '../components/SubpageMauer.astro';
import SubpageGewerbe from '../components/SubpageGewerbe.astro';
import SubpageContact from '../components/SubpageContact.astro';
import SubpageImpressum from '../components/SubpageImpressum.astro';
import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
import SubpageRain from '../components/SubpageRain.astro';
import SubpagePlantlix from '../components/SubpagePlantlix.astro';
import SubpageTeich from '../components/SubpageTeich.astro';
import SubpageWeinberg from '../components/SubpageWeinberg.astro';
import EasterEgg from '../components/EasterEgg.astro';
---

<Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
    <Nav />

    <!-- Main Page Content -->
    <div x-show="currentPage === 'main'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-0">
        <Hero />
        <Standards />
        <Projects />
        <Events />
        <Biodiversity />
        <PlantOfTheWeek />
        <PlantQuiz />
        <FAQ />
        <Footer />
    </div>

    <!-- Subpages -->
    <SubpageMauer />
    <SubpageGewerbe />
    <SubpageContact />
    <SubpageImpressum />
    <SubpageDatenschutz />
    <SubpageRain />
    <SubpagePlantlix />
    <SubpageTeich />
    <SubpageWeinberg />
    <EasterEgg />

    <!-- CHARTS INIT -->
    <script is:inline>
        document.addEventListener('DOMContentLoaded', () => {
            // Chart 1: Massen
            new Chart(document.getElementById('subChartMassen').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: ['Erdaushub (m³)', 'Muschelkalk (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
                    datasets: [{ 
                        data: [140, 65, 38, 25], 
                        backgroundColor: ['#d97706', '#065f46', '#292524', '#047857'], 
                        borderWidth: 1,
                        borderColor: '#0c0a09'
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    plugins: { 
                        legend: { 
                            position: 'bottom',
                            labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } } 
                        } 
                    } 
                }
            });

            // Chart 2: Boden
            new Chart(document.getElementById('subChartBoden').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['Bodenprofil'],
                    datasets: [
                        { label: 'Mutterboden (20cm)', data: [20], backgroundColor: '#047857', borderWidth: 0 },
                        { label: 'Drainage (40cm)', data: [40], backgroundColor: '#d97706', borderWidth: 0 },
                        { label: 'Baugrund (80cm)', data: [80], backgroundColor: '#292524', borderWidth: 0 }
                    ]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    scales: { 
                        x: { stacked: true, display: false }, 
                        y: { stacked: true, display: false } 
                    }, 
                    plugins: { 
                        legend: { 
                            position: 'bottom',
                            labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } } 
                        } 
                    } 
                }
            });

            // Chart 3: Gantt
            new Chart(document.getElementById('subChartGantt').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['1. Erdbau', '2. Tragschicht', '3. Pflaster', '4. Pflanzung'],
                    datasets: [{ 
                        data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]], 
                        backgroundColor: '#065f46', 
                        borderRadius: 4,
                        borderWidth: 0
                    }]
                },
                options: { 
                    indexAxis: 'y', 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    scales: { 
                        x: { min: 1, max: 9, ticks: { color: '#78716c', font: { size: 10 }, callback: v => 'W.' + v } }, 
                        y: { ticks: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 11 } } } 
                    }, 
                    plugins: { legend: { display: false } } 
                }
            });
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" is:inline></script>
</Layout>