---
import Base from '../layouts/Base.astro';
import PageHero from '../components/PageHero.astro';
import ContactForm from '../components/ContactForm.astro';
import { site } from '../data/site';
import contactHero from '../assets/img/contact-hero.jpg';
export const prerender = true;
const mapsQuery = encodeURIComponent(`${site.address}, ${site.cityLine}`);
---
<Base title="Contatti" description="Contatta InsanityLab: Via Leandro Alberti 76, Bologna. Compila il form o chiamaci per una consulenza iniziale.">
  <PageHero title="Contattaci" bgImage={contactHero} />
  <section class="section">
    <div class="container cgrid">
      <div class="cmap" id="map-box">
        <button class="btn btn--dark" id="map-load">Carica la mappa (Google Maps)</button>
        <p class="cmap__note">La mappa viene caricata da Google solo dopo il tuo consenso.</p>
      </div>
      <ContactForm variant="full" />
    </div>
    <div class="container cinfo">
      <div>
        <h3>Indirizzo</h3>
        <p>{site.address} {site.cityLine}</p>
      </div>
      <div>
        <h3>Telefono</h3>
        <p>{site.phone}</p>
      </div>
      <div>
        <h3>E-mail</h3>
        <p><a href={`mailto:${site.email}`}>{site.email}</a></p>
      </div>
    </div>
    <div class="container">
      <p class="cinvite">Per informazioni o per richiedere una consulenza iniziale, compila il form. Un team specializzato ti accoglierà e ti ricontatterà al più presto, oppure lasciaci il tuo contatto.</p>
    </div>
  </section>
</Base>

<style>
  .cgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; margin-bottom: 50px; }
  .cmap { background: var(--c-bg-alt); min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
  .cmap iframe { width: 100%; height: 100%; border: 0; min-height: 420px; }
  .cmap__note { font-size: .8rem; color: var(--c-text-light); }
  .cinfo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 30px; }
  .cinfo h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .16em; }
  .cinvite { max-width: 640px; }
  @media (max-width: 991px) { .cgrid, .cinfo { grid-template-columns: 1fr; } }
</style>

<script define:vars={{ mapsQuery }}>
  document.getElementById('map-load')?.addEventListener('click', () => {
    const box = document.getElementById('map-box');
    box.innerHTML = `<iframe src="https://www.google.com/maps?q=${mapsQuery}&output=embed" loading="lazy" title="Mappa InsanityLab" referrerpolicy="no-referrer-when-downgrade"></iframe>`;
  });
</script>
