---
import Base from '../../layouts/Base.astro';
import PageHero from '../../components/PageHero.astro';
import T from '../../components/content/T.astro';
import { t } from '../../lib/content';
export const prerender = false;

// Gli eventi del centro. Oggi ce n'è uno solo — l'inaugurazione del 19 settembre — e il
// programma della giornata non c'è ancora: il testo lo dichiara invece di lasciare una
// pagina vuota, ed è editabile dal pannello, così il cliente lo completa senza un deploy.
const wa = t('global.whatsapp');
const waLink = `https://wa.me/39${wa.replace(/\D/g, '')}`;
---
<Base title={t('eventi.meta.title')} description={t('eventi.meta.description')}>
  <PageHero title={t('eventi.hero.title')} />

  <section class="section">
    <div class="container">
      <article class="evento" data-reveal>
        <T tag="eventi.inaugurazione.title" as="h2" />
        <T tag="eventi.inaugurazione.date" as="p" class="evento__data" />
        <T tag="eventi.inaugurazione.body" as="p" />
        <a class="btn" href={waLink} target="_blank" rel="noopener">{t('eventi.cta.label')}</a>
      </article>
      <p class="evento__torna"><a href="/promo-eventi">{t('eventi.torna.label')}</a></p>
    </div>
  </section>
</Base>

<style>
  .evento { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .evento :global(h2) { text-transform: uppercase; letter-spacing: .1em; margin: 0; }
  .evento :global(.evento__data) { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; color: var(--c-accent-dark); margin-top: -8px; }
  .evento :global(p) { margin: 0; }
  .evento__torna { text-align: center; margin-top: 46px; }
  .evento__torna a { font-family: var(--font-heading); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-heading); text-decoration: none; }
  .evento__torna a:hover { color: var(--c-accent-dark); }
</style>