<template>
  <div class="page-wrapper">
    <!-- Хедер -->
    <Header />

    <!-- Основной контент -->
    <main class="requisites-page">
      <!-- Hero секция -->
      <section class="requisites-hero">
        <div class="container">
          <div class="hero-content">
            <h1 class="hero-title">Реквизиты компании</h1>
            <p class="hero-subtitle">
              ООО "ИКЦ ЯЛ АРБА" - официальные банковские и юридические реквизиты
            </p>
          </div>
        </div>
      </section>

      <!-- Основной контент -->
      <section class="requisites-content">
        <div class="container">
          <div class="requisites-grid">
            <!-- Основные реквизиты -->
            <div class="requisites-section">
              <div class="requisites-card">
                <div class="requisites-header">
                  <h2 class="requisites-title">Юридическая информация</h2>
                  <div class="company-badge">
                    <span class="badge badge-primary">ООО</span>
                  </div>
                </div>

                <div class="requisites-list">
                  <div class="requisites-item">
                    <div class="requisites-label">Полное наименование:</div>
                    <div class="requisites-value">
                      ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ "ИНФОРМАЦИОННО КОНСУЛЬТАЦИОННЫЙ ЦЕНТР ЯЛ АРБА"
                    </div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">Сокращенное наименование:</div>
                    <div class="requisites-value">ООО "ИКЦ ЯЛ АРБА"</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">Юридический адрес:</div>
                    <div class="requisites-value">Не указан</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">ИНН:</div>
                    <div class="requisites-value code-value">0234009584</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">КПП:</div>
                    <div class="requisites-value code-value">023401001</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">ОГРН:</div>
                    <div class="requisites-value code-value">1220200038112</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Банковские реквизиты -->
            <div class="requisites-section">
              <div class="requisites-card">
                <div class="requisites-header">
                  <h2 class="requisites-title">Банковские реквизиты</h2>
                  <div class="bank-logo">
                    <span class="bank-icon">🏦</span>
                  </div>
                </div>

                <div class="requisites-list">
                  <div class="requisites-item">
                    <div class="requisites-label">Расчётный счёт:</div>
                    <div class="requisites-value code-value">40702810106000055253</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">Наименование банка:</div>
                    <div class="requisites-value">ПАО Сбербанк</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">БИК банка:</div>
                    <div class="requisites-value code-value">048073601</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">Корреспондентский счёт:</div>
                    <div class="requisites-value code-value">30101810300000000601</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">ИНН банка:</div>
                    <div class="requisites-value code-value">7707083893</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">КПП банка:</div>
                    <div class="requisites-value code-value">027802001</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Контактная информация -->
            <div class="requisites-section">
              <div class="requisites-card">
                <div class="requisites-header">
                  <h2 class="requisites-title">Контактная информация</h2>
                  <div class="contact-icon">📱</div>
                </div>

                <div class="requisites-list">
                  <div class="requisites-item">
                    <div class="requisites-label">Электронная почта:</div>
                    <a href="mailto:yalarba@mail.ru" class="requisites-value link-value">
                      yalarba@mail.ru
                    </a>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">Телефон генерального директора:</div>
                    <a href="tel:+79625439343" class="requisites-value link-value">
                      +7 962 543-93-43
                    </a>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">Генеральный директор:</div>
                    <div class="requisites-value">Валитов Газиз Камилевич</div>
                  </div>

                  <div class="requisites-item">
                    <div class="requisites-label">Главный бухгалтер:</div>
                    <div class="requisites-value">Валитов Газиз Камилевич</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Дополнительная информация -->
            <div class="requisites-section full-width">
              <div class="requisites-card">
                <div class="requisites-header">
                  <h2 class="requisites-title">Дополнительная информация</h2>
                </div>

                <div class="additional-info">
                  <div class="info-grid">
                    <div class="info-item">
                      <div class="info-icon">📋</div>
                      <div class="info-content">
                        <h3 class="info-title">Юридический статус</h3>
                        <p class="info-description">
                          Общество с ограниченной ответственностью, зарегистрированное в соответствии с законодательством РФ
                        </p>
                      </div>
                    </div>

                    <div class="info-item">
                      <div class="info-icon">💼</div>
                      <div class="info-content">
                        <h3 class="info-title">Сфера деятельности</h3>
                        <p class="info-description">
                          Информационно-консультационные услуги, разработка программного обеспечения, веб-разработка
                        </p>
                      </div>
                    </div>

                    <div class="info-item">
                      <div class="info-icon">🕒</div>
                      <div class="info-content">
                        <h3 class="info-title">Режим работы</h3>
                        <p class="info-description">
                          Пн-Пт: 9:00-18:00<br>
                          Сб-Вс: выходные
                        </p>
                      </div>
                    </div>

                    <div class="info-item">
                      <div class="info-icon">📞</div>
                      <div class="info-content">
                        <h3 class="info-title">Поддержка</h3>
                        <p class="info-description">
                          По всем вопросам обращайтесь по указанным контактам или через форму обратной связи на сайте
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Кнопки действий -->
          <div class="action-buttons">
            <button @click="printRequisites" class="btn btn-outline print-button">
              <span class="button-icon">🖨️</span>
              Распечатать реквизиты
            </button>
            <button @click="copyAllRequisites" class="btn btn-primary copy-button">
              <span class="button-icon">📋</span>
              Скопировать все реквизиты
            </button>
          </div>
        </div>
      </section>
    </main>

    <!-- Футер -->
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from '~/components/layout/Header.vue'
import Footer from '~/components/layout/Footer.vue'

definePageMeta({
  title: 'Реквизиты - ООО "ИКЦ ЯЛ АРБА"'
})


useSeoMeta({
  title: 'Реквизиты Ял Арба',
  description: 'Страница реквизитов ООО "ИКЦ Ял Арба"'
})

// Функция для печати реквизитов
const printRequisites = () => {
  window.print()
}

// Функция для копирования всех реквизитов
const copyAllRequisites = async () => {
  const requisitesText = `
ООО "ИКЦ ЯЛ АРБА"
Юридические реквизиты:

Полное наименование: ОБЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ "ИНФОРМАЦИОННО КОНСУЛЬТАЦИОННЫЙ ЦЕНТР ЯЛ АРБА"
Сокращенное наименование: ООО "ИКЦ ЯЛ АРБА"
Юридический адрес: Не указан
ИНН: 0234009584
КПП: 023401001
ОГРН: 1220200038112

Банковские реквизиты:
Расчётный счёт: 40702810106000055253
Банк: ПАО Сбербанк
БИК: 048073601
Корреспондентский счёт: 30101810300000000601
ИНН банка: 7707083893
КПП банка: 027802001

Контактная информация:
Email: yalarba@mail.ru
Телефон: +7 962 543-93-43
Генеральный директор: Валитов Газиз Камилевич
Главный бухгалтер: Валитов Газиз Камилевич
  `.trim()

  try {
    await navigator.clipboard.writeText(requisitesText)
    alert('✅ Все реквизиты скопированы в буфер обмена!')
  } catch (err) {
    console.error('Ошибка копирования:', err)
    alert('❌ Не удалось скопировать реквизиты')
  }
}
</script>

<style scoped>
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.requisites-page {
  flex: 1;
}

/* Hero секция */
.requisites-hero {
  background: var(--hero-gradient);
  color: white;
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}

.requisites-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--hero-pattern);
  opacity: 0.1;
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-lg);
  color: white;
}

.hero-subtitle {
  font-family: var(--font-accent);
  font-size: var(--text-xl);
  font-weight: var(--font-light);
  line-height: var(--leading-relaxed);
  opacity: 0.9;
  color: white;
}

/* Основной контент */
.requisites-content {
  padding: var(--space-2xl) 0;
}

.requisites-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.requisites-section.full-width {
  grid-column: 1 / -1;
}

/* Карточки реквизитов */
.requisites-card {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  padding: var(--space-2xl);
  height: fit-content;
  transition: all 0.3s ease;
}

.requisites-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.requisites-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

.requisites-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.company-badge .badge {
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
}

.bank-logo,
.contact-icon {
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-50);
  border-radius: var(--radius-lg);
}

/* Список реквизитов */
.requisites-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.requisites-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.requisites-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  line-height: var(--leading-tight);
}

.requisites-value {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
  word-break: break-word;
}

.requisites-value.code-value {
  font-family: var(--font-accent);
  font-weight: var(--font-semibold);
  color: var(--primary-600);
  background: var(--primary-50);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary-100);
}

.requisites-value.link-value {
  color: var(--primary-600);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: var(--font-medium);
}

.requisites-value.link-value:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

/* Дополнительная информация */
.additional-info {
  margin-top: var(--space-lg);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  transition: all 0.3s ease;
}

.info-item:hover {
  background: var(--bg-tertiary);
  transform: translateY(-2px);
}

.info-icon {
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.info-content {
  flex: 1;
}

.info-title {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.info-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Кнопки действий */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border-light);
}

.print-button,
.copy-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
}

.button-icon {
  font-size: 1.25rem;
}

/* Адаптивность */
@media (max-width: 1024px) {
  .requisites-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .requisites-hero {
    padding: 3rem 0;
  }
  
  .hero-title {
    font-size: var(--text-3xl);
  }
  
  .hero-subtitle {
    font-size: var(--text-lg);
  }
  
  .requisites-card {
    padding: var(--space-xl);
  }
  
  .requisites-header {
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .print-button,
  .copy-button {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .requisites-content {
    padding: var(--space-xl) 0;
  }
  
  .requisites-hero {
    padding: 2rem 0;
  }
  
  .hero-title {
    font-size: var(--text-2xl);
  }
  
  .requisites-card {
    padding: var(--space-lg);
  }
  
  .info-item {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
  
  .info-icon {
    align-self: center;
  }
}

/* Стили для печати */
@media print {
  .header,
  .footer,
  .action-buttons {
    display: none !important;
  }
  
  .requisites-hero {
    background: white !important;
    color: black !important;
    padding: 1rem 0 !important;
  }
  
  .hero-title,
  .hero-subtitle {
    color: black !important;
  }
  
  .requisites-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
  
  .requisites-content {
    padding: 0 !important;
  }
}
</style>