site-panzai/pages/index.vue

<script setup lang="ts">
const { dishes, open, wait, settings } = useShop()
const best = computed(() => ['crousty', 'nouilles', 'pad'].map(id => dishes.value.find(d => d.id === id)).filter(Boolean) as typeof dishes.value)
</script>

<template>
  <main>
    <!-- HERO -->
    <section class="hero" aria-label="Bienvenue">
      <div class="leaf-l parallax" aria-hidden="true"><LeafMonstera class="sway" /></div>
      <div class="leaf-r parallax" aria-hidden="true"><LeafPalm class="sway" /></div>
      <div class="leaf-b" aria-hidden="true"><LeafMonstera color="#24561F" /></div>

      <div class="container hero-in">
        <div class="hero-txt rise">
          <p class="chip status">
            <template v-if="open"><span class="dot dot-green blink" /> Ouvert — prêt en ~{{ wait }} min</template>
            <template v-else><span class="dot dot-red" /> Commandes en pause pour le moment</template>
          </p>
          <h1 class="display h1">Le meilleur crousty de France est à Thonon</h1>
          <p class="sub">Wok feu du dragon · 100 % frais · 100 % halal</p>
          <div class="row wrap" style="gap: 12px">
            <NuxtLink to="/menu" class="btn btn-primary btn-lg">Commander maintenant <Icon name="arrow" :stroke="2.6" /></NuxtLink>
            <a href="tel:+33485478262" class="btn btn-ghost btn-lg"><Icon name="phone" /> Appeler</a>
          </div>
        </div>

        <div class="plank wood">
          <img src="/img/crousty.png" alt="Le Crousty dans son bol en bois" class="hero-bowl">
          <div class="toucan toucan-in"><Toucan :size="170" label="Toucan PANZAÏ" /></div>
          <p class="hash">#MeilleurCroustyDeFrance</p>
          <div class="rating"><strong>4,7</strong><span><span class="stars">★★★★★</span><br>300+ avis Google</span></div>
        </div>
      </div>
    </section>

    <!-- RÉASSURANCE -->
    <section class="reassure" aria-label="Nos engagements">
      <div class="container grid4">
        <p><Icon name="flame" :size="24" style="color: var(--orange-1)" /><span><strong>4,7 sur Google</strong><br><span class="muted small">300+ avis</span></span></p>
        <p><Icon name="shield" :size="24" style="color: var(--leaf)" /><span><strong>100 % Halal</strong><br><span class="muted small">certifié</span></span></p>
        <p><Icon name="flame" :size="24" style="color: var(--orange-2)" /><span><strong>Fait maison</strong><br><span class="muted small">au wok, minute</span></span></p>
        <p><Icon name="bike" :size="24" style="color: var(--orange-1)" /><span><strong>Livraison</strong><br><span class="muted small">Thonon &amp; alentours</span></span></p>
      </div>
    </section>

    <!-- BEST-SELLERS -->
    <section class="container sec" aria-labelledby="bs">
      <div class="sec-head">
        <div>
          <h2 id="bs" class="display section-title">Les best-sellers</h2>
          <p class="muted" style="margin-top: 8px">Taille L ou XL, viande au choix : bœuf, crevettes ou poulet.</p>
        </div>
        <NuxtLink to="/menu" style="font-weight: 700; text-decoration: none">Toute la carte →</NuxtLink>
      </div>
      <div class="grid3">
        <DishCard v-for="d in best" :key="d.id" :dish="d" />
      </div>
    </section>

    <!-- COMMANDE DIRECTE -->
    <section class="container sec" aria-label="Commande directe">
      <div class="direct">
        <LeafMonstera class="direct-leaf" color="#8CC63F" />
        <div class="grow" style="position: relative">
          <p class="eyebrow" style="opacity: 1">Commande en direct</p>
          <p class="direct-t">Zéro commission d'appli : ton argent va direct au resto.</p>
          <p style="margin-top: 10px">Mêmes plats, même wok, suivi en temps réel. Et un vrai merci de l'équipe 🌴</p>
        </div>
        <NuxtLink to="/menu" class="btn btn-cream btn-lg" style="position: relative">Je commande ici</NuxtLink>
      </div>
    </section>

    <!-- AVIS -->
    <section id="avis" class="container sec" aria-labelledby="avis-h">
      <div class="row wrap" style="gap: 20px">
        <h2 id="avis-h" class="display section-title">Ils en parlent</h2>
        <p class="row" style="gap: 10px"><strong style="font-size: 26px; color: #fff">4,7</strong><span class="stars">★★★★★</span><span class="muted">300+ avis Google</span></p>
      </div>
      <div class="reviews">
        <figure v-for="n in 3" :key="n" class="card review">
          <span class="stars">★★★★★</span>
          <blockquote>[Avis Google n°{{ n }} — texte réel importé automatiquement depuis la fiche du restaurant]</blockquote>
          <figcaption class="row" style="gap: 10px"><span class="avatar" />[Prénom N.] · Google</figcaption>
        </figure>
      </div>
    </section>

    <!-- INSTAGRAM -->
    <section class="container sec" aria-labelledby="insta">
      <div class="sec-head">
        <h2 id="insta" class="display section-title">@panzai.jsf</h2>
        <p class="row" style="gap: 18px; font-weight: 700"><a href="https://instagram.com/panzai.jsf" target="_blank" rel="noopener">Instagram</a><a href="https://tiktok.com/@panzai.jsf" target="_blank" rel="noopener">TikTok</a></p>
      </div>
      <div class="insta">
        <div v-for="(g, i) in ['#5A3A22,#2A1C12', '#2F6B2A,#14100D', '#E8622A,#5A3A22', '#3A2617,#14100D', '#FFB43A,#E8622A', '#5A3A22,#2F6B2A']" :key="i" class="post" :style="{ background: `linear-gradient(135deg,${g})` }">
          <img v-if="i === 1" src="/img/crousty.png" alt="">
          <img v-else-if="i === 3" src="/img/pad-thai.png" alt="">
          <span v-else>{{ i === 4 ? 'REEL' : 'POST' }}</span>
        </div>
      </div>
    </section>

    <!-- INFOS -->
    <section id="infos" class="container sec" aria-labelledby="inf">
      <h2 id="inf" class="display section-title" style="margin-bottom: 24px">Viens nous voir</h2>
      <div class="infos">
        <a class="map" href="https://maps.google.com/?q=2+avenue+de+Champagne+74200+Thonon-les-Bains" target="_blank" rel="noopener" aria-label="Ouvrir l'adresse dans Google Maps">
          <span class="road r1" /><span class="road r2" />
          <span class="pin" />
          <span class="placeholder-tag" style="right: 14px; top: 14px">GOOGLE MAPS · ouvrir l'itinéraire</span>
        </a>
        <div class="card info">
          <p style="font-size: 17px"><strong style="color: #fff">2 avenue de Champagne</strong><br>74200 Thonon-les-Bains</p>
          <p><a href="tel:+33485478262" style="font-weight: 800">04 85 47 82 62</a></p>
          <p class="muted small">À emporter · Livraison Thonon &amp; environs · 1 table sur place</p>
          <dl class="hours">
            <template v-for="h in settings?.hours || []" :key="h.day">
              <dt>{{ h.day }}</dt>
              <dd>{{ h.open ? `${h.midi} · ${h.soir}` : 'Fermé' }}</dd>
            </template>
          </dl>
          <p class="small muted">Horaires indicatifs — à confirmer avec le restaurant.</p>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
.hero { position: relative; overflow: hidden; padding: 28px 0 56px; }
.leaf-l { position: absolute; left: -70px; top: 40px; width: 180px; opacity: .95; }
.leaf-r { position: absolute; right: -70px; top: -10px; width: 230px; transform: scaleX(-1); }
.leaf-b { position: absolute; right: 2%; bottom: -60px; width: 180px; transform: rotate(150deg); opacity: .7; }
.hero-in { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.hero-txt { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.status { background: rgba(31,24,18,.92); border: 1px solid rgba(140,198,63,.3); font-size: 13px; }
.h1 { font-size: clamp(38px, 6vw, 68px); margin-top: 40px; }
.sub { font-size: clamp(15px, 2vw, 20px); font-weight: 600; opacity: .9; }
.plank { flex: 1 1 380px; position: relative; height: clamp(320px, 42vw, 520px); border-radius: 32px; overflow: hidden; box-shadow: inset 0 0 80px rgba(0,0,0,.55), 0 40px 80px rgba(0,0,0,.5); }
.hero-bowl { position: absolute; left: 50%; bottom: 8%; width: 82%; height: 72%; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 30px 34px rgba(0,0,0,.6)); }
.toucan { position: absolute; right: 4%; top: 4%; width: clamp(110px, 14vw, 170px); }
.toucan :deep(svg) { width: 100%; height: auto; }
.hash { position: absolute; left: 16px; top: 16px; padding: 7px 12px; border-radius: 10px; background: rgba(20,16,13,.9); color: var(--orange-1); font-size: 13px; font-weight: 800; }
.rating { position: absolute; right: 16px; bottom: 16px; padding: 10px 14px; border-radius: 16px; background: rgba(20,16,13,.92); display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.3; }
.rating strong { font-size: 24px; color: #fff; }
.stars { color: var(--orange-1); letter-spacing: 2px; }

.reassure { background: var(--surface); border-block: 1px solid rgba(243,227,195,.06); }
.grid4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-block: 22px; }
.grid4 p { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; }
.grid4 strong { color: #fff; }
@media (min-width: 900px) { .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sec { padding-top: clamp(56px, 8vw, 96px); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 28px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.direct { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: clamp(24px, 4vw, 48px); border-radius: 30px; background: linear-gradient(120deg, var(--green), var(--green-dark)); }
.direct-leaf { position: absolute; right: -50px; top: -70px; width: 300px; opacity: .3; }
.direct-t { margin-top: 10px; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; font-weight: 800; color: #fff; max-width: 620px; }

.reviews { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review { margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.review blockquote { margin: 0; opacity: .85; }
.review figcaption { font-size: 14px; font-weight: 700; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--wood-dark); }

.insta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .insta { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.post { aspect-ratio: 1; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .6px; overflow: hidden; }
.post img { width: 86%; height: 86%; object-fit: contain; }

.infos { display: flex; flex-wrap: wrap; gap: 20px; }
.map { flex: 3 1 360px; position: relative; min-height: 300px; border-radius: 26px; overflow: hidden; background: repeating-linear-gradient(0deg, #2A221B 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, #2A221B 0 1px, transparent 1px 32px), #1A1511; }
.road { position: absolute; background: #3A3028; }
.r1 { left: -10%; right: -10%; top: 55%; height: 14px; transform: rotate(-7deg); }
.r2 { left: 46%; top: 0; bottom: 0; width: 12px; }
.pin { position: absolute; left: calc(46% - 14px); top: 34%; width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--grad); box-shadow: 0 10px 24px rgba(232,98,42,.5); }
.info { flex: 2 1 300px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.hours { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; }
.hours dt { opacity: .7; }
.hours dd { margin: 0; font-weight: 600; }
</style>