<!DOCTYPE html>
<html lang="en">
@include('index.head')
<body>
@include('index.navigation')
<main>
    <section class="public-page-hero">
        <div class="container">
            <span class="kicker">Statistics</span>
            <h1 class="page-title">Incidents Involving Persons with Disabilities</h1>
            <p class="section-intro">Public summary view generated from approved NGBVD reporting data.</p>
        </div>
    </section>
    <section class="section">
        <div class="container">
            <div id="container" class="chart-shell"></div>
        </div>
    </section>
</main>
@include('index.footer')
<script type="text/javascript">
    if (window.Highcharts) {
        Highcharts.chart('container', {
            chart: { type: 'heatmap', marginTop: 40, marginBottom: 80, plotBorderWidth: 1 },
            title: { text: 'Incidents Involving Persons with Disabilities' },
            xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
            yAxis: { categories: ['Reported', 'Referred', 'Closed', 'Pending'], title: null, reversed: true },
            colorAxis: { min: 0, minColor: '#FFFFFF', maxColor: '#FDB209' },
            legend: { align: 'right', layout: 'vertical', margin: 0, verticalAlign: 'top', y: 25, symbolHeight: 220 },
            series: [{ name: 'Incidents Involving Persons with Disabilities', borderWidth: 1, data: [], dataLabels: { enabled: true, color: '#111827' } }],
            credits: { enabled: false }
        });
    } else {
        document.getElementById('container').innerHTML = '<p>Chart library could not load. Please check internet access or install Highcharts locally.</p>';
    }
</script>
</body>
</html>