<template>
    <div class="page-wrapper">

        <!-- Основной контент -->
        <main class="contacts-page">
            <!-- Hero секция -->
            <section class="contacts-hero">
                <div class="container">
                    <div class="hero-content">
                        <h1 class="hero-title">Контакты</h1>
                        <p class="hero-subtitle">
                            Свяжитесь с нами любым удобным способом. Мы всегда рады помочь!
                        </p>
                    </div>
                </div>
            </section>

            <!-- Основной контент контактов -->
            <section class="contacts-content">
                <div class="container">
                    <div class="contacts-grid">
                        <!-- Контактная информация -->
                        <div class="contact-info">
                            <div class="contact-card">
                                <div class="contact-header">
                                    <h2 class="contact-title">Свяжитесь с нами</h2>
                                    <p class="contact-description">
                                        Мы готовы ответить на все ваши вопросы и помочь с выбором
                                    </p>
                                </div>

                                <div class="contact-methods">
                                    <!-- Телефон -->
                                    <div class="contact-method">
                                        <div class="method-icon">📞</div>
                                        <div class="method-content">
                                            <h3 class="method-title">Телефон</h3>
                                            <a href="tel:+79625439343" class="method-value">8 (962) 543-93-43</a>
                                            <p class="method-description">Ежедневно с 9:00 до 18:00</p>
                                        </div>
                                    </div>

                                    <!-- Email -->
                                    <div class="contact-method">
                                        <div class="method-icon">✉️</div>
                                        <div class="method-content">
                                            <h3 class="method-title">Email</h3>
                                            <a href="mailto:valitovgaziz@yandex.ru"
                                                class="method-value">valitovgaziz@yandex.ru</a>
                                            <p class="method-description">Отвечаем в течение 24 часов</p>
                                        </div>
                                    </div>

                                    <!-- Адрес -->
                                    <div class="contact-method">
                                        <div class="method-icon">📍</div>
                                        <div class="method-content">
                                            <h3 class="method-title">Адрес</h3>
                                            <span class="method-value">г. Уфа</span>
                                            <p class="method-description">Республика Башкортостан</p>
                                        </div>
                                    </div>

                                    <!-- Социальные сети -->
                                    <div class="contact-method">
                                        <div class="method-icon">🌐</div>
                                        <div class="method-content">
                                            <h3 class="method-title">Социальные сети</h3>
                                            <div class="social-contacts">
                                                <a href="https://vk.com/club222248484" target="_blank"
                                                    class="social-contact">
                                                    <span class="social-icon">📘</span>
                                                    <span>ВКонтакте</span>
                                                </a>
                                                <a href="https://t.me/+oYymS0r6qG9lYWJi" target="_blank"
                                                    class="social-contact">
                                                    <span class="social-icon">📧</span>
                                                    <span>Telegram</span>
                                                </a>
                                                <a href="https://rutube.ru/channel/26509398/" target="_blank"
                                                    class="social-contact">
                                                    <span class="social-icon">📺</span>
                                                    <span>RuTube</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Форма обратной связи -->
                        <div class="contact-form-section">
                            <div class="contact-form-card">
                                <h2 class="form-title">Напишите нам</h2>
                                <p class="form-description">
                                    Заполните форму ниже, и мы свяжемся с вами в ближайшее время
                                </p>

                                <form @submit.prevent="submitForm" class="contact-form">
                                    <div class="form-group">
                                        <label for="name" class="form-label">Имя *</label>
                                        <input id="name" v-model="form.name" type="text" class="form-input"
                                            placeholder="Введите ваше имя" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="email" class="form-label">Email *</label>
                                        <input id="email" v-model="form.email" type="email" class="form-input"
                                            placeholder="your@email.com" required>
                                    </div>

                                    <div class="form-group">
                                        <label for="phone" class="form-label">Телефон</label>
                                        <input id="phone" v-model="form.phone" type="tel" class="form-input"
                                            placeholder="+7 (999) 999-99-99">
                                    </div>

                                    <div class="form-group">
                                        <label for="subject" class="form-label">Тема *</label>
                                        <select id="subject" v-model="form.subject" class="form-select" required>
                                            <option value="" disabled selected>Выберите тему</option>
                                            <option value="general">Общий вопрос</option>
                                            <option value="technical">Техническая поддержка</option>
                                            <option value="partnership">Сотрудничество</option>
                                            <option value="feedback">Отзыв и предложения</option>
                                            <option value="other">Другое</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="message" class="form-label">Сообщение *</label>
                                        <textarea id="message" v-model="form.message" class="form-input form-textarea"
                                            placeholder="Опишите ваш вопрос или предложение..." rows="5"
                                            required></textarea>
                                    </div>

                                    <button type="submit" class="btn btn-primary submit-button" :disabled="loading">
                                        <span v-if="loading">Отправка...</span>
                                        <span v-else>Отправить сообщение</span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- FAQ секция -->
            <section class="faq-section">
                <div class="container">
                    <div class="faq-header">
                        <h2 class="faq-title">Часто задаваемые вопросы</h2>
                        <p class="faq-subtitle">Ответы на самые популярные вопросы</p>
                    </div>

                    <div class="faq-grid">
                        <div class="faq-item">
                            <h3 class="faq-question">Как быстро вы отвечаете на сообщения?</h3>
                            <p class="faq-answer">
                                На письма по электронной почте мы отвечаем в течение 24 часов.
                                По телефону доступны ежедневно с 9:00 до 18:00.
                            </p>
                        </div>

                        <div class="faq-item">
                            <h3 class="faq-question">Можно ли встретиться лично?</h3>
                            <p class="faq-answer">
                                Да, мы организуем личные встречи по предварительной договоренности.
                                Свяжитесь с нами для согласования времени и места.
                            </p>
                        </div>

                        <div class="faq-item">
                            <h3 class="faq-question">Предоставляете ли вы техническую поддержку?</h3>
                            <p class="faq-answer">
                                Да, наша команда технической поддержки готова помочь с любыми вопросами
                                по работе платформы и созданию сайтов.
                            </p>
                        </div>

                        <div class="faq-item">
                            <h3 class="faq-question">Как стать партнером?</h3>
                            <p class="faq-answer">
                                Для обсуждения условий партнерства напишите нам на почту или
                                заполните форму обратной связи, выбрав тему "Сотрудничество".
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        </main>

    </div>
</template>

<script setup lang="ts">

definePageMeta({
    title: 'Контакты - EasySite'
})


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

// Используем композабл для Telegram
const { sendMessageToTelegram } = useTelegram()

// Состояние формы
const form = ref({
    name: '',
    email: '',
    phone: '',
    subject: '',
    message: ''
})

const loading = ref(false)

// Функция для получения текста темы
const getSubjectText = (subject: string) => {
    const subjects: { [key: string]: string } = {
        general: '📋 Общий вопрос',
        technical: '🔧 Техническая поддержка',
        partnership: '🤝 Сотрудничество',
        feedback: '💬 Отзыв и предложения',
        other: '❓ Другое'
    }
    return subjects[subject] || '❓ Неизвестная тема'
}

// Функция отправки формы
const submitForm = async () => {
    loading.value = true

    try {
        // Формируем сообщение для Telegram
        const telegramMessage = `
📨 <b>НОВОЕ СООБЩЕНИЕ С САЙТА</b>

👤 <b>Имя:</b> ${form.value.name}
📧 <b>Email:</b> ${form.value.email}
📞 <b>Телефон:</b> ${form.value.phone || 'Не указан'}
🏷️ <b>Тема:</b> ${getSubjectText(form.value.subject)}

💬 <b>Сообщение:</b>
${form.value.message}

⏰ <b>Время отправки:</b> ${new Date().toLocaleString('ru-RU')}
    `.trim()

        // Отправляем сообщение в Telegram
        const { success, error } = await sendMessageToTelegram(telegramMessage)

        if (success) {
            // Сброс формы после успешной отправки
            form.value = {
                name: '',
                email: '',
                phone: '',
                subject: '',
                message: ''
            }

            // Показываем уведомление об успехе
            showNotification('Сообщение успешно отправлено! Мы свяжемся с вами в ближайшее время.', 'success')
        } else {
            throw new Error(error || 'Неизвестная ошибка при отправке')
        }
    } catch (error) {
        console.error('Ошибка отправки формы:', error)
        showNotification('Произошла ошибка при отправке формы. Пожалуйста, попробуйте еще раз.', 'error')
    } finally {
        loading.value = false
    }
}

// Функция для показа уведомлений
const showNotification = (message: string, type: 'success' | 'error' = 'success') => {
    // Можно использовать любую систему уведомлений, здесь простой alert
    if (type === 'success') {
        alert(`✅ ${message}`)
    } else {
        alert(`❌ ${message}`)
    }

    // В будущем можно заменить на toast-уведомления
    // Например: useToast().add({ title: message, color: type === 'success' ? 'green' : 'red' })
}
</script>

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

.contacts-page {
    flex: 1;
}

/* Hero секция - ИСПРАВЛЕННЫЕ ЦВЕТА */
.contacts-hero {
    background: var(--hero-gradient);
    color: white;
    /* Фиксированный белый цвет текста */
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

.contacts-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;
    /* Фиксированный белый цвет */
}

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

.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

/* Карточка контактной информации */
.contact-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;
}

.contact-header {
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.contact-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.contact-description {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Методы связи */
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.contact-method {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.contact-method:hover {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    transform: translateY(-2px);
}

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

.method-content {
    flex: 1;
}

.method-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);
}

.method-value {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--primary-600);
    text-decoration: none;
    display: block;
    margin-bottom: var(--space-xs);
    transition: color 0.2s ease;
}

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

.method-description {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: var(--leading-relaxed);
}

/* Социальные контакты */
.social-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.social-contact {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    text-decoration: none;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.social-contact:hover {
    background: var(--bg-secondary);
    color: var(--primary-600);
    transform: translateX(4px);
}

.social-icon {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

/* Форма обратной связи */
.contact-form-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;
}

.form-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.form-description {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-2xl);
    line-height: var(--leading-relaxed);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

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

.form-label {
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.form-input,
.form-select {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    transition: all 0.2s ease;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-primary);
}

.submit-button {
    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;
    margin-top: var(--space-md);
}

.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.submit-button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* FAQ секция */
.faq-section {
    background: var(--bg-secondary);
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--border-light);
}

.faq-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.faq-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.faq-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-lg);
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.faq-question {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    line-height: var(--leading-tight);
}

.faq-answer {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

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

    .faq-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .contacts-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .contacts-hero {
        padding: 3rem 0;
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-subtitle {
        font-size: var(--text-lg);
    }

    .contact-card,
    .contact-form-card {
        padding: var(--space-xl);
    }

    .contact-method {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .method-icon {
        font-size: 1.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 480px) {
    .contacts-content {
        padding: var(--space-xl) 0;
    }

    .contacts-hero {
        padding: 2rem 0;
    }

    .hero-title {
        font-size: var(--text-2xl);
    }

    .contact-card,
    .contact-form-card {
        padding: var(--space-lg);
    }

    .faq-item {
        padding: var(--space-lg);
    }

    .contact-method {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .method-icon {
        align-self: center;
    }
}
</style>