frontend/app/pages/index.vue

<script setup lang="ts">
import BIIcon from "~/components/BIIcon.vue";

const { getOpenDataReports } = usePublic()

const stats = {
  total_reports: 14523,
  resolved_reports: 13890,
  avg_resolution_time: 24
}

const { data: openDataResponse } = await useAsyncData('recent-fixes', () =>
    getOpenDataReports({ page: 1, per_page: 3 })
)
</script>

<template>
  <div>
    <div class="it-hero-wrapper bg-light">
      <div class="container">
        <div class="row">
          <div class="col-12 col-lg-8 offset-lg-2 text-center">
            <div class="it-hero-text-wrapper p-4">
              <h1 class="no_toc font-weight-bold text-dark">Miglioriamo insieme la città</h1>
              <p class="d-none d-lg-block mt-3 mb-4 text-secondary">
                Il portale ufficiale nazionale per segnalare disservizi urbani. Scatta una foto, invia la segnalazione
                e monitora l'intervento in totale trasparenza.
              </p>
              <div class="it-btn-container d-flex justify-content-center gap-3">
                <NuxtLink class="btn btn-primary" to="/auth/login">
                  Fai una segnalazione
                </NuxtLink>
                <NuxtLink class="btn btn-outline-primary" to="/open-data">
                  Esplora i dati
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container my-5 py-5">
      <h2 class="text-center mb-5 font-weight-bold">Come funziona</h2>
      <div class="row text-center">
        <div class="col-12 col-md-4 mb-4">
          <div class="mb-3">
            <BIIcon name="it-camera" size="xl" color="primary" />
          </div>
          <h3 class="h5 font-weight-semibold">1. Segnala</h3>
          <p class="text-muted">Usa lo smartphone per fotografare il problema stradale e inviare la posizione
            esatta.</p>
        </div>
        <div class="col-12 col-md-4 mb-4">
          <div class="mb-3">
            <BIIcon name="it-tool" size="xl" color="primary" />
          </div>
          <h3 class="h5 font-weight-semibold">2. Intervento</h3>
          <p class="text-muted">Le squadre comunali prendono in carico la tua segnalazione e avviano i lavori.</p>
        </div>
        <div class="col-12 col-md-4 mb-4">
          <div class="mb-3">
            <BIIcon name="it-star-outline" size="xl" color="primary" />
          </div>
          <h3 class="h5 font-weight-semibold">3. Punti e Feedback</h3>
          <p class="text-muted">Problema risolto! Ottieni Punti Cittadino e lascia un feedback sull'intervento.</p>
        </div>
      </div>
    </div>

    <div class="bg-light py-5 border-top border-bottom">
      <div class="container my-4">
        <h2 class="text-center mb-5 font-weight-bold">I numeri del nostro Comune</h2>
        <div class="row text-center">
          <div class="col-12 col-md-4 mb-4 mb-md-0">
            <div class="display-1 font-weight-bold text-primary">{{ stats.total_reports.toLocaleString('it-IT') }}</div>
            <p class="text-muted text-uppercase fw-bold mt-2">Segnalazioni Ricevute</p>
          </div>
          <div class="col-12 col-md-4 mb-4 mb-md-0">
            <div class="display-1 font-weight-bold text-success">{{
                stats.resolved_reports.toLocaleString('it-IT')
              }}
            </div>
            <p class="text-muted text-uppercase fw-bold mt-2">Interventi Risolti</p>
          </div>
          <div class="col-12 col-md-4">
            <div class="display-1 font-weight-bold text-info">{{ stats.avg_resolution_time }}h</div>
            <p class="text-muted text-uppercase fw-bold mt-2">Tempo medio di risoluzione</p>
          </div>
        </div>
      </div>
    </div>

    <div class="container my-5 py-5">
      <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="font-weight-bold">Ultimi interventi risolti</h2>
        <NuxtLink to="/open-data" class="read-more">
          <span class="text">Vedi tutti</span>
          <BIIcon name="it-arrow-right" />
        </NuxtLink>
      </div>

      <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
        <div class="col-12 col-md-4 mb-4" v-for="report in openDataResponse.reports" :key="report.id">
          <div class="card-wrapper card-space">
            <div class="card card-bg card-big">
              <div class="card-body">
                <div class="category-top">
                  <BIIcon name="it-check-circle" size="sm" color="success" />
                  <span class="category text-success font-weight-semibold">Risolto</span>
                </div>
                <h3 class="card-title h5 mt-2">{{ report.category_name }}</h3>

                <p class="card-text text-muted">
                  <span class="me-1"><BIIcon name="it-map-marker-circle" size="xs" /></span>
                  {{ report.area_name || 'Area comunale' }}
                </p>

                <div class="it-card-footer mt-4">
                  <span class="card-signature">
                    Aggiornato il {{ new Date(report.updated_at).toLocaleDateString('it-IT') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="alert alert-info text-center" role="alert">
        I dati sugli ultimi interventi sono in fase di elaborazione.
      </div>
    </div>
    
    <div class="container my-5 pb-5">
      <div class="callout callout-highlight callout-primary">
        <div class="callout-title">
          <BIIcon name="it-info-circle" />
          Partecipa alla cura della tua città
        </div>
        <p>
          La piattaforma è aperta a tutti i cittadini residenti. Registrandoti, non solo potrai segnalare i problemi del
          tuo quartiere, ma accumulerai <strong>Punti Cittadino</strong> per ogni intervento risolto, sbloccando
          riconoscimenti speciali.
        </p>
        <NuxtLink to="/auth/register" class="btn btn-primary mt-3">
          Crea il tuo profilo
        </NuxtLink>
      </div>
    </div>
  </div>
</template>