Promo agosto 2026: nuovi prezzi, validità 1-19 agosto e countdown

Prezzi aggiornati (One to One 200, Small Group 125, Reformer 115,
Holistic 75) con migrazione guardata sul vecchio valore, così le righe
già ritoccate dal pannello non vengono sovrascritte. I barrati restano
invariati. Nota di validità con la finestra 1-19 agosto e countdown alla
scadenza sopra le card: la deadline è un tag editabile, il blocco si
nasconde da solo quando la promo è finita.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/pages/promo-eventi.astro

@@ -21,6 +21,10 @@ const faqs = [1, 2, 3, 4, 5, 6];
 // Numero WhatsApp centralizzato: le risposte FAQ contengono il segnaposto {{whatsapp}}
 // che qui viene sostituito col valore del tag globale, così si aggiorna in un punto solo.
 const wa = t('global.whatsapp');
+// Scadenza della promo (tag editabile dal pannello, formato ISO con offset). Viene solo passata
+// al client: è il JS a decidere se mostrare il countdown, perché il confronto va fatto col tempo
+// del visitatore e non con quello del render (la pagina è SSR ma può essere servita da cache).
+const countdownDeadline = t('promo.countdown.deadline');
 ---
 <Base title="Promo ed eventi — InsanityLab" description="Edizione apertura: pacchetti a 5 incontri per One to One, Small Group, Reformer e Holistic Class. Acquisto online, pagamento sicuro via Stripe.">
   <div class="lp">
@@ -47,6 +51,15 @@ const wa = t('global.whatsapp');
       </section>
 
       <section class="cards-wrap" id="proposte">
+        <div class="countdown" data-deadline={countdownDeadline} hidden>
+          <T tag="promo.countdown.label" as="div" class="cd-label" />
+          <div class="cd-boxes">
+            <div class="cd-box"><span class="cd-num" data-cd="days">–</span><T tag="promo.countdown.unit.days" as="span" class="cd-unit" /></div>
+            <div class="cd-box"><span class="cd-num" data-cd="hours">–</span><T tag="promo.countdown.unit.hours" as="span" class="cd-unit" /></div>
+            <div class="cd-box"><span class="cd-num" data-cd="minutes">–</span><T tag="promo.countdown.unit.minutes" as="span" class="cd-unit" /></div>
+            <div class="cd-box"><span class="cd-num" data-cd="seconds">–</span><T tag="promo.countdown.unit.seconds" as="span" class="cd-unit" /></div>
+          </div>
+        </div>
         <div class="cards">
           {cards.map((c) => (
             <div class:list={['card', c.featured && 'featured']}>
@@ -88,6 +101,32 @@ const wa = t('global.whatsapp');
 </Base>
 
 <script>
+  // Countdown alla scadenza della promo. Parte nascosto (attributo `hidden` nel markup) e viene
+  // mostrato solo se la deadline è una data valida ancora futura: così, a promo finita, il blocco
+  // semplicemente non compare — nessun messaggio, nessun salto di layout.
+  const cd = document.querySelector<HTMLElement>('.lp .countdown');
+  if (cd) {
+    const end = Date.parse(cd.dataset.deadline || '');
+    const nums = new Map<string, HTMLElement>();
+    cd.querySelectorAll<HTMLElement>('.cd-num').forEach((n) => nums.set(n.dataset.cd!, n));
+    const pad = (n: number) => String(n).padStart(2, '0');
+    // Dichiarato prima di `tick` perché la prima chiamata è sincrona: se la promo è già scaduta
+    // il timer va fermato subito, e leggerlo dopo il `setInterval` darebbe un errore di TDZ.
+    let timer = 0;
+    const tick = () => {
+      const left = end - Date.now();
+      if (Number.isNaN(end) || left <= 0) { cd.hidden = true; clearInterval(timer); return; }
+      const s = Math.floor(left / 1000);
+      nums.get('days')!.textContent = String(Math.floor(s / 86400));
+      nums.get('hours')!.textContent = pad(Math.floor(s / 3600) % 24);
+      nums.get('minutes')!.textContent = pad(Math.floor(s / 60) % 60);
+      nums.get('seconds')!.textContent = pad(s % 60);
+      cd.hidden = false;
+    };
+    tick();
+    timer = setInterval(tick, 1000);
+  }
+
   // Accordion FAQ: click (o Invio/Spazio) sul quesito apre/chiude la risposta.
   document.querySelectorAll('.lp .faq-block .faq-q').forEach((q) => {
     const block = q.closest('.faq-block');
@@ -144,6 +183,25 @@ const wa = t('global.whatsapp');
   .lp .why5 { padding: 48px 64px 8px; }
   .lp .why5 p { margin: 0; font-size: 18px; line-height: 1.7; font-style: italic; color: #2D2D2D; font-family: Georgia, serif; max-width: 620px; }
 
+  /* COUNTDOWN */
+  /* `hidden` va forzato: i display flex qui sotto avrebbero comunque la meglio sul default UA. */
+  .lp .countdown[hidden] { display: none !important; }
+  .lp .countdown {
+    display: flex; flex-direction: column; align-items: center; gap: 14px;
+    background: #2D2D2D; border-radius: 14px; padding: 26px 24px; margin: 0 0 28px;
+  }
+  .lp .countdown .cd-label {
+    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #C4A882;
+  }
+  .lp .countdown .cd-boxes { display: flex; gap: 10px; }
+  .lp .countdown .cd-box {
+    display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 74px;
+    background: rgba(255,255,255,0.06); border: 0.5px solid rgba(196,168,130,0.35);
+    border-radius: 10px; padding: 12px 10px;
+  }
+  .lp .countdown .cd-num { font-size: 30px; font-weight: 700; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
+  .lp .countdown .cd-unit { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #B8B6AE; }
+
   /* CARDS */
   .lp .cards-wrap { padding: 32px 64px 72px; }
   .lp .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@@ -192,6 +250,10 @@ const wa = t('global.whatsapp');
   @media (max-width: 700px) {
     .lp .hero, .lp .launch, .lp .why5, .lp .cards-wrap, .lp .faq-wrap { padding-left: 28px; padding-right: 28px; }
     .lp .cards { grid-template-columns: 1fr; }
+    .lp .countdown .cd-boxes { gap: 6px; }
+    .lp .countdown .cd-box { min-width: 0; flex: 1; padding: 10px 4px; }
+    .lp .countdown .cd-num { font-size: 22px; }
+    .lp .countdown .cd-unit { font-size: 9.5px; }
     .lp .hero h1 { font-size: 32px; }
     .lp .launch h1 { font-size: 28px; }
   }