<?php
/* Le recensioni arrivano dal database: si gestiscono da recensioni.php */
require_once __DIR__ . '/db.php';
$recensioni = [];
try { $recensioni = recensioni_pubblicate(); } catch (Throwable $e) { /* sito visibile comunque */ }
?>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRS Garage | Meccanica auto a Meana di Susa (TO)</title>
<meta name="description" content="CRS Garage di Attanasio Christian, Meana di Susa (TO). Tagliandi, revisioni, diagnostica, elettrauto, gomme ed elaborazioni. Richiedi il preventivo online.">
<link rel="icon" href="logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- ============ TESTATA ============ -->
<header class="testata" id="home">
    <div class="testata-sx">
        <img src="logo.png" alt="CRS Garage" class="logo">

        <h2 class="mestiere">Meccanica auto</h2>

        <ul class="dati">
            <li><a href="mailto:preventivi@crsgarage.it">preventivi@crsgarage.it</a></li>
            <li>Via Fornaci 5/A, Meana di Susa (TO)</li>
        </ul>

        <p class="solo-online"><i class="fa-solid fa-comment-dots" aria-hidden="true"></i>
           Preventivi solo online — ti richiamiamo noi</p>

        <ul class="dati dati-fiscali">
            <li>P.IVA 13328170017</li>
            <li>C.F. TTNCRS92P03L013E</li>
        </ul>
    </div>

    <!-- QUANDO AVRAI LA FOTO DELL'OFFICINA:
         mettila qui accanto agli altri file col nome officina.jpg,
         poi togli le due barre davanti alla riga "background-image"
         dentro style.css, nel blocco .testata-dx. -->
    <div class="testata-dx"></div>
</header>

<!-- ============ MENU ============ -->
<nav class="menu" aria-label="Navigazione principale">
    <button class="menu-tasto" id="menuTasto" aria-expanded="false" aria-controls="menuVoci">
        <i class="fa-solid fa-bars" aria-hidden="true"></i> Menu
    </button>
    <div class="menu-voci" id="menuVoci">
        <a href="#home" class="corrente">Home</a>
        <a href="#servizi">Servizi</a>
        <?php if ($recensioni): ?><a href="#recensioni">Recensioni</a><?php endif; ?>
        <a href="#preventivi">Preventivi</a>
        <a href="#contatti">Contatti</a>
    </div>
</nav>

<!-- ============ LISTA DEI LAVORI ============ -->
<section class="lavori" id="servizi">
    <div class="lavori-dentro">
        <h2 class="titolo">Lista dei lavori</h2>

        <div class="griglia">
            <article class="riquadro">
                <i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i>
                <h3>Tagliandi e manutenzione</h3>
            </article>
            <article class="riquadro">
                <i class="fa-solid fa-gears" aria-hidden="true"></i>
                <h3>Meccanica generale</h3>
            </article>
            <article class="riquadro">
                <i class="fa-solid fa-microchip" aria-hidden="true"></i>
                <h3>Diagnostica avanzata</h3>
            </article>
            <article class="riquadro">
                <i class="fa-solid fa-flag-checkered" aria-hidden="true"></i>
                <h3>Preparazioni sportive</h3>
            </article>
            <article class="riquadro in-luce">
                <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
                <h3>Assetti e tuning</h3>
            </article>
                </div>
    </div>
</section>

<!-- ============ RECENSIONI ============ -->
<?php if ($recensioni): ?>
<section class="recensioni" id="recensioni">
    <h2 class="titolo titolo-centro">Recensioni clienti</h2>

    <div class="giostra">
        <button class="freccia freccia-sx" id="frecciaSx" aria-label="Recensioni precedenti">
            <i class="fa-solid fa-chevron-left" aria-hidden="true"></i></button>

        <div class="binario" id="binario">
            <?php foreach ($recensioni as $r): ?>
                <figure class="parere">
                    <div class="stelle" aria-label="<?= (int)$r['voto'] ?> stelle su 5">
                        <?= str_repeat('★', (int)$r['voto']) ?></div>
                    <blockquote><?= htmlspecialchars($r['testo'], ENT_QUOTES, 'UTF-8') ?></blockquote>
                    <figcaption>
                        <?= htmlspecialchars($r['nome'], ENT_QUOTES, 'UTF-8') ?>
                        <?php if ($r['citta']): ?>
                            <span><?= htmlspecialchars($r['citta'], ENT_QUOTES, 'UTF-8') ?></span>
                        <?php endif; ?>
                    </figcaption>
                </figure>
            <?php endforeach; ?>
        </div>

        <button class="freccia freccia-dx" id="frecciaDx" aria-label="Recensioni successive">
            <i class="fa-solid fa-chevron-right" aria-hidden="true"></i></button>
    </div>

    <div class="pallini" id="pallini"></div>
</section>
<?php endif; ?>

<!-- ============ PREVENTIVI ============ -->
<section class="preventivi" id="preventivi">
    <h2 class="titolo titolo-centro">Preventivo online</h2>
    <p class="sottotitolo">Raccontaci cosa serve alla tua auto: ti richiamiamo noi
       con il prezzo e con la data.</p>

    <ul class="promesse">
        <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i> Gratuito e senza impegno</li>
        <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i> Risposta entro 24 ore</li>
        <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i> All'appuntamento pensiamo noi</li>
    </ul>

    <button type="button" class="btn-grande apri-modulo">
        <i class="fa-solid fa-file-invoice" aria-hidden="true"></i> Richiedi il preventivo
    </button>
</section>

<!-- ============ CONTATTI ============ -->
<section class="contatti" id="contatti">
    <h2 class="titolo titolo-centro">Dove siamo</h2>

    <div class="contatti-dentro">
        <div class="contatti-dati">
            <h3>CRS Garage</h3>
            <ul>
                <li><i class="fa-solid fa-location-dot" aria-hidden="true"></i>
                    <span>Via Fornaci 5/A<br>10050 Meana di Susa (TO)</span></li>
                <li><i class="fa-solid fa-envelope" aria-hidden="true"></i>
                    <a href="mailto:preventivi@crsgarage.it">preventivi@crsgarage.it</a></li>
                <li><i class="fa-regular fa-clock" aria-hidden="true"></i>
                    <!-- MODIFICA QUI CON I TUOI ORARI REALI -->
                    <span>Lun – Ven: 08:00 – 12:00 / 13:00 – 19:00<br>Sabato e domenica: chiuso</span></li>
            </ul>
            <a class="btn-mappa" target="_blank" rel="noopener"
               href="https://www.google.com/maps/search/?api=1&query=Via+Fornaci+5%2FA+Meana+di+Susa+TO">
               <i class="fa-solid fa-diamond-turn-right" aria-hidden="true"></i> Apri in Google Maps</a>
        </div>

        <div class="contatti-mappa">
            <iframe title="Mappa: Via Fornaci 5/A, Meana di Susa (TO)" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
                src="https://maps.google.com/maps?q=Via%20Fornaci%205%2FA%2C%20Meana%20di%20Susa%20TO&z=15&output=embed"></iframe>
        </div>
    </div>
</section>

<footer class="piede">
    <p><strong>CRS Garage</strong> di Attanasio Christian — Via Fornaci 5/A, Meana di Susa (TO)</p>
    <p class="piede-piccolo">P.IVA 13328170017 · C.F. TTNCRS92P03L013E ·
       <a href="pannello.php" rel="nofollow">Area riservata</a></p>
</footer>

<!-- ============ MODULO A PASSI ============ -->
<div class="modale" id="modale" role="dialog" aria-modal="true" aria-labelledby="modaleTitolo" hidden>
    <div class="velo" data-chiudi></div>

    <div class="foglio">
        <button type="button" class="chiudi" data-chiudi aria-label="Chiudi">&times;</button>
        <h2 id="modaleTitolo" class="foglio-titolo">Richiesta di preventivo</h2>

        <ol class="tacche" aria-hidden="true">
            <li class="tacca attiva" data-passo="1"><span>1</span> Lavoro</li>
            <li class="tacca" data-passo="2"><span>2</span> Veicolo</li>
            <li class="tacca" data-passo="3"><span>3</span> Contatti</li>
        </ol>

        <form id="modulo" novalidate>

            <fieldset class="quadro" data-quadro="1">
                <legend>Che lavoro ti serve?</legend>
                <div class="scelte">
                    <button type="button" class="scelta" data-valore="Tagliandi e manutenzione">
                        <i class="fa-solid fa-screwdriver-wrench" aria-hidden="true"></i> Tagliandi e manutenzione</button>
                    <button type="button" class="scelta" data-valore="Meccanica generale">
                        <i class="fa-solid fa-gears" aria-hidden="true"></i> Meccanica generale</button>
                    <button type="button" class="scelta" data-valore="Diagnostica avanzata">
                        <i class="fa-solid fa-microchip" aria-hidden="true"></i> Diagnostica avanzata</button>
                    <button type="button" class="scelta" data-valore="Preparazioni sportive">
                        <i class="fa-solid fa-flag-checkered" aria-hidden="true"></i> Preparazioni sportive</button>
                    <button type="button" class="scelta" data-valore="Assetti e tuning">
                        <i class="fa-solid fa-gauge-high" aria-hidden="true"></i> Assetti e tuning</button>
                    <button type="button" class="scelta" data-valore="Non lo so, da capire">
                        <i class="fa-solid fa-circle-question" aria-hidden="true"></i> Non lo so, da capire</button>
                                </div>
                <input type="hidden" name="servizio" id="servizio">
                <small class="errore" id="err-servizio"></small>
            </fieldset>

            <fieldset class="quadro" data-quadro="2" hidden>
                <legend>La tua auto</legend>

                <p class="campo">
                    <label for="veicolo">Tipo di veicolo</label>
                    <select id="veicolo" name="veicolo">
                        <option value="">Seleziona</option>
                        <option>Utilitaria</option>
                        <option>Berlina / Station wagon</option>
                        <option>SUV / 4x4</option>
                        <option>Sportiva</option>
                        <option>Furgone / Commerciale</option>
                    </select>
                    <small class="errore" id="err-veicolo"></small>
                </p>

                <p class="campo">
                    <label for="modello">Marca e modello</label>
                    <input type="text" id="modello" name="modello" placeholder="Fiat Panda 1.2 del 2015">
                </p>

                <p class="campo">
                    <label for="note">Cosa succede?</label>
                    <textarea id="note" name="note" rows="4"
                        placeholder="Rumore in frenata, spia accesa, tagliando in scadenza…"></textarea>
                    <small class="aiuto">Più dettagli dai, più il preventivo sarà preciso.</small>
                </p>

                <p class="campo">
                    <label for="preferenza">Quando ti è più comodo</label>
                    <select id="preferenza" name="preferenza">
                        <option value="Indifferente">Indifferente</option>
                        <option value="Mattina">Mattina (8:00 – 12:00)</option>
                        <option value="Pomeriggio">Pomeriggio (13:00 – 19:00)</option>
                    </select>
                    <small class="aiuto">È una preferenza: l'orario esatto lo confermiamo noi.</small>
                </p>
            </fieldset>

            <fieldset class="quadro" data-quadro="3" hidden>
                <legend>Come ti richiamiamo</legend>

                <p class="campo">
                    <label for="nome">Nome e cognome</label>
                    <input type="text" id="nome" name="nome" autocomplete="name" placeholder="Mario Rossi">
                    <small class="errore" id="err-nome"></small>
                </p>

                <p class="campo">
                    <label for="telefono">Telefono</label>
                    <input type="tel" id="telefono" name="telefono" autocomplete="tel" placeholder="333 1234567">
                    <small class="errore" id="err-telefono"></small>
                </p>

                <p class="campo">
                    <label for="email">Email (facoltativa)</label>
                    <input type="email" id="email" name="email" autocomplete="email" placeholder="mario.rossi@email.it">
                    <small class="errore" id="err-email"></small>
                </p>

                <div class="riepilogo" id="riepilogo"></div>

                <!-- Campo invisibile agli utenti: intercetta i bot. Non rimuoverlo. -->
                <div class="trappola" aria-hidden="true">
                    <label for="azienda">Azienda</label>
                    <input type="text" id="azienda" name="azienda" tabindex="-1" autocomplete="off">
                </div>
            </fieldset>

            <p class="esito" id="esito" role="status" aria-live="polite"></p>

            <div class="comandi">
                <button type="button" class="btn-vuoto" id="indietro" hidden>Indietro</button>
                <button type="button" class="btn-rosso" id="avanti">Avanti</button>
                <button type="submit" class="btn-rosso" id="invia" hidden>Invia la richiesta</button>
            </div>
        </form>

        <div class="fatto" id="fatto" hidden>
            <i class="fa-solid fa-circle-check" aria-hidden="true"></i>
            <h3>Richiesta inviata</h3>
            <p id="fattoTesto"></p>
            <button type="button" class="btn-rosso" data-chiudi>Chiudi</button>
        </div>
    </div>
</div>

<script src="script.js"></script>
</body>
</html>
