{% extends 'base.html' %}
{% load static %}

{% block title %}تماس با ما | دکتر علی جعفری{% endblock %}

{% block content %}
<section class="page-header">
    <div class="container">
        <h1>تماس با ما</h1>
        <p>راه‌های ارتباط و نوبت‌دهی</p>
    </div>
</section>

<section class="contact-section">
    <div class="container">
        <div class="contact-grid">

            <!-- ستون چپ: نوبت‌دهی و تماس -->
            <div class="contact-info-card">
                <h2>نوبت‌دهی و تماس</h2>

                {% if quick_contact %}
                <div class="info-item">
                    <div class="info-icon"><i class="fas fa-phone-alt"></i></div>
                    <div>
                        <h4>شماره تماس نوبت‌دهی</h4>
                        <a href="tel:{{ quick_contact.phone }}" style="font-size:20px; font-weight:700;">{{ quick_contact.phone }}</a>
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-icon"><i class="fab fa-whatsapp"></i></div>
                    <div>
                        <h4>واتساپ نوبت‌دهی</h4>
                        <a href="https://wa.me/98{{ quick_contact.whatsapp|slice:'1:' }}" target="_blank" style="font-size:20px; font-weight:700;">{{ quick_contact.whatsapp }}</a>
                    </div>
                </div>
                {% else %}
                <div class="info-item">
                    <div class="info-icon"><i class="fas fa-phone-alt"></i></div>
                    <div>
                        <h4>شماره تماس نوبت‌دهی</h4>
                        <a href="tel:09351708842" style="font-size:20px; font-weight:700;">۰۹۳۵۱۷۰۸۸۴۲</a>
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-icon"><i class="fab fa-whatsapp"></i></div>
                    <div>
                        <h4>واتساپ نوبت‌دهی</h4>
                        <a href="https://wa.me/989201369919" target="_blank" style="font-size:20px; font-weight:700;">۰۹۲۰۱۳۶۹۹۱۹</a>
                    </div>
                </div>
                {% endif %}

                <div class="info-item">
                    <div class="info-icon"><i class="fas fa-clock"></i></div>
                    <div>
                        <h4>ساعات حضور</h4>
                        <p>دوشنبه‌ها: مطب (ساعت ۱۲)</p>
                        <p>چهارشنبه‌ها: کلینیک عرفان نیایش (ساعت ۱۰)</p>
                    </div>
                </div>

                {% if quick_contact and quick_contact.instagram %}
                <div class="social-links" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
                    <h4 style="font-size: 15px; margin-bottom: 14px;">اینستاگرام</h4>
                    <a href="https://instagram.com/{{ quick_contact.instagram }}" target="_blank" rel="noopener" style="display:inline-flex; align-items:center; gap:8px; color:#0ea5e9; font-weight:600;">
                        <i class="fab fa-instagram" style="font-size:20px;"></i>
                        @{{ quick_contact.instagram }}
                    </a>
                </div>
                {% endif %}
            </div>

            <!-- ستون راست: آدرس‌ها و مسیریابی -->
            <div class="addresses-card">
                <h2>آدرس‌ها و مسیریابی</h2>

                <div class="address-box">
                    <h3><i class="fas fa-user-md"></i> مطب شخصی (دوشنبه‌ها)</h3>
                    <p>الهیه، خیابان حسابی، بن‌بست نفیسی، بن‌بست پولاد پلاک ۲ – ساعت ۱۲</p>
                    <div class="nav-apps">
                        <a href="https://www.google.com/maps/search/?api=1&query=تهران+الهیه+خیابان+حسابی+بن+بست+نفیسی+بن+بست+پولاد+پلاک+۲" target="_blank" class="nav-btn google">
                            <i class="fab fa-google"></i> گوگل مپ
                        </a>
                        <a href="https://waze.com/ul?q=تهران+الهیه+خیابان+حسابی+بن+بست+نفیسی" target="_blank" class="nav-btn waze">
                            <i class="fas fa-location-arrow"></i> ویز
                        </a>
                        <a href="https://neshan.org/maps/" target="_blank" class="nav-btn neshan">
                            <i class="fas fa-map-marked-alt"></i> نشان
                        </a>
                    </div>
                </div>

                <div class="address-box">
                    <h3><i class="fas fa-hospital"></i> کلینیک بیمارستان عرفان نیایش (چهارشنبه‌ها)</h3>
                    <p>کلینیک بیمارستان عرفان نیایش – ساعت ۱۰</p>
                    <div class="nav-apps">
                        <a href="https://www.google.com/maps/search/?api=1&query=35.7957476, 51.4227171" target="_blank" class="nav-btn google">
                            <i class="fab fa-google"></i> گوگل مپ
                        </a>
                        <a href="https://waze.com/ul?q=35.7957476, 51.4227171&navigate=yes" target="_blank" class="nav-btn waze">
                            <i class="fas fa-location-arrow"></i> ویز
                        </a>
                        <a href="https://neshan.org/maps/#35.7957476, 51.4227171,15z" target="_blank" class="nav-btn neshan">
                            <i class="fas fa-map-marked-alt"></i> نشان
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{% endblock %}