<template>
  <div class="contacts">
    <section class="page-hero">
      <div class="container">
        <h1>Контакты</h1>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div class="contacts__grid">
          <div class="contacts__card">
            <h4>Email</h4>
            <a href="mailto:info@yalarba.ru" class="contacts__link">info@yalarba.ru</a>
          </div>
          <div class="contacts__card">
            <h4>Телефон</h4>
            <a href="tel:+73472999999" class="contacts__link">+7 (347) 299-99-99</a>
          </div>
          <div class="contacts__card">
            <h4>Адрес</h4>
            <p class="body-text--gray">г. Уфа, Республика Башкортостан</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: 'Контакты',
})
</script>

<style scoped>
.page-hero {
  background: var(--color-primary);
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-white);
}

.page-hero h1 {
  color: var(--color-text-white);
}

.contacts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.contacts__card {
  background: var(--color-white);
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}

.contacts__card h4 {
  margin-bottom: 8px;
}

.contacts__link {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-primary);
}

.contacts__link:hover {
  text-decoration: underline;
}

@media (max-width: 744px) {
  .contacts__grid {
    grid-template-columns: 1fr;
  }
}
</style>
