---
import { site } from '../data/site';
import ContactForm from './ContactForm.astro';
const year = new Date().getFullYear();
---
<footer class="ftr">
  <div class="container ftr__grid">
    <div>
      <img src="/img/logo-light.png" alt="InsanityLab" width="140" loading="lazy" />
      <p class="ftr__tag">PERFORMANCE.&nbsp; BALANCE.&nbsp; LONGEVITY.</p>
      <p>Promuoviamo il movimento come cura di sé. Abitudini sostenibili per benessere fisico e mentale.</p>
      <p>{site.phone}<br />{site.address}, {site.cityLine}</p>
      {site.hours.map((h) => <p class="ftr__hours">{h}</p>)}
    </div>
    <nav aria-label="training">
      <h4>Training</h4>
      {site.footerTraining.map((l) => <a href={l.href}>{l.label}</a>)}
    </nav>
    <nav aria-label="programmi">
      <h4>Programmi</h4>
      {site.footerPrograms.map((l) => <a href={l.href}>{l.label}</a>)}
    </nav>
    <div>
      <h4>Contact</h4>
      <ContactForm variant="footer" />
    </div>
  </div>
  <div class="ftr__bar">
    <div class="container ftr__bar-in">
      <p>© {year} <strong>Insanitylab</strong>, All Rights Reserved</p>
      <p>Seguici {site.socials.map((s) => <a href={s.url} rel="noopener" target="_blank">{s.label}</a>)}</p>
    </div>
  </div>
</footer>

<style>
  .ftr { background: var(--c-dark); color: #b9aea4; font-size: .88rem; }
  .ftr a { color: #b9aea4; text-decoration: none; display: block; padding: 4px 0; }
  .ftr a:hover { color: #fff; }
  .ftr h4 { color: #fff; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; margin-bottom: 18px; }
  .ftr__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 70px; }
  .ftr__tag { font-family: var(--font-heading); font-size: .7rem; letter-spacing: .2em; color: #fff; }
  .ftr__hours { margin: 0; }
  .ftr__bar { border-top: 1px solid rgba(255,255,255,.08); padding-block: 18px; }
  .ftr__bar-in { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .ftr__bar-in a { display: inline; margin-left: 12px; }
  @media (max-width: 991px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .ftr__grid { grid-template-columns: 1fr; } }
</style>
