{{--
    Вьюха: Страница контактов
    Создана: 2026-05-07
    Контроллер: PageController::contacts()
    Переменные:
      $page         — модель Page (slug=contacts, title, meta_title)
      $siteSettings — View Composer (phone, email, telegram, working_hours)
    Дизайн: по макету diz_tocha/contact.html
    Форма: Blade-компонент <x-web-form slug="contact" /> — подключает форму из конструктора
--}}
@extends('layouts.app')

@section('title', $page->meta_title ?: 'Контакты — Точка')

@section('content')

{{-- Заголовок страницы --}}
<section class="page-hdr">
    <div class="container">
        <div class="sh-label reveal-up">Мы на связи</div>
        <h1 class="reveal">КОНТАКТЫ</h1>
        <nav class="breadcrumb">
            <a href="{{ route('home') }}">Главная</a>
            <span>/</span>
            <span>Контакты</span>
        </nav>
    </div>
</section>

{{-- Основной блок --}}
<section class="section sec-alt">
    <div class="container">
        <div class="contact-layout">

            {{-- Левая колонка: форма --}}
            <div class="reveal">
                <div class="sh-label" style="margin-bottom:10px">Напишите нам</div>
                <h2 style="font-family:var(--fh);font-size:clamp(28px,3.5vw,44px);font-weight:900;letter-spacing:-.02em;margin-bottom:32px;line-height:1">
                    ОСТАВЬТЕ ЗАЯВКУ
                </h2>

                <x-web-form slug="contact" />

                @if(!\App\Models\WebForm::where('slug', 'contact')->where('is_active', true)->exists())
                    <div style="background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center;color:var(--muted)">
                        <p>Форма временно недоступна. Напишите нам напрямую:</p>
                        @if($siteSettings['telegram'] ?? '')
                            <a href="{{ $siteSettings['telegram'] }}" class="btn btn-red" target="_blank">Написать в Telegram</a>
                        @endif
                    </div>
                @endif
            </div>

            {{-- Правая колонка: контактная информация --}}
            <div class="ci-card reveal">
                <h3>КАК СВЯЗАТЬСЯ</h3>

                @if($siteSettings['telegram'] ?? '')
                    <div class="ci">
                        <div class="ci-icon">
                            <svg viewBox="0 0 24 24" fill="currentColor" style="width:16px;height:16px">
                                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.96 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                            </svg>
                        </div>
                        <div>
                            <div class="ci-l">Telegram (быстро)</div>
                            <div class="ci-v">
                                <a href="{{ $siteSettings['telegram'] }}" target="_blank" rel="noopener">
                                    {{ $siteSettings['telegram'] }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endif

                @if($siteSettings['phone'] ?? '')
                    <div class="ci">
                        <div class="ci-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.4 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.79a16 16 0 0 0 6.29 6.29l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
                            </svg>
                        </div>
                        <div>
                            <div class="ci-l">Телефон</div>
                            <div class="ci-v">
                                <a href="tel:{{ preg_replace('/\D/', '', $siteSettings['phone']) }}">
                                    {{ $siteSettings['phone'] }}
                                </a>
                            </div>
                        </div>
                    </div>
                @endif

                @if($siteSettings['email'] ?? '')
                    <div class="ci">
                        <div class="ci-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                            </svg>
                        </div>
                        <div>
                            <div class="ci-l">Email</div>
                            <div class="ci-v">
                                <a href="mailto:{{ $siteSettings['email'] }}">{{ $siteSettings['email'] }}</a>
                            </div>
                        </div>
                    </div>
                @endif

                @if($siteSettings['working_hours'] ?? '')
                    <div class="ci">
                        <div class="ci-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px">
                                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                            </svg>
                        </div>
                        <div>
                            <div class="ci-l">Режим работы</div>
                            <div class="ci-v" style="font-size:13px;font-weight:400;line-height:1.8">
                                @foreach(explode('|', $siteSettings['working_hours']) as $line)
                                    {{ trim($line) }}<br>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                @if($siteSettings['telegram'] ?? '')
                    <div style="margin-top:20px;padding:14px 16px;background:var(--red-lt);border:1px solid rgba(209,38,38,.15);border-radius:var(--r-sm)">
                        <p style="font-size:13px;color:var(--muted);line-height:1.7;margin:0">
                            💬 <strong style="color:var(--text)">Быстрее всего</strong> — написать в Telegram. Отвечаем за 5–15 минут.
                        </p>
                    </div>
                @endif
            </div>

        </div>
    </div>
</section>

@endsection