{% extends "base.html" %}

{% block title %}خدمات تعمیرات دوو - {{ settings.site_name }}{% endblock %}

{% block content %}

<section style="padding:60px 0;">
    <div class="container">
        <div style="text-align:center;margin-bottom:50px;">
            <h1 style="font-size:34px;color:#0d1b6b;">🔧 خدمات تعمیرات دوو</h1>
            <p style="color:#666;font-size:18px;">تعمیرات تخصصی تمام محصولات دوو با ضمانت کیفیت</p>
        </div>
        
        <!-- فیلتر دسته‌بندی -->
        <div style="display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;">
            <a href="{{ url_for('services') }}" style="padding:8px 22px;border-radius:30px;background:{% if not category %}#0d1b6b;color:white;{% else %}#eee;color:#333;{% endif %};font-weight:500;">
                همه
            </a>
            <a href="{{ url_for('services') }}?category=refrigerator" style="padding:8px 22px;border-radius:30px;background:{% if category == 'refrigerator' %}#0d1b6b;color:white;{% else %}#eee;color:#333;{% endif %};font-weight:500;">
                <i class="fas fa-snowflake"></i> یخچال
            </a>
            <a href="{{ url_for('services') }}?category=washing_machine" style="padding:8px 22px;border-radius:30px;background:{% if category == 'washing_machine' %}#0d1b6b;color:white;{% else %}#eee;color:#333;{% endif %};font-weight:500;">
                <i class="fas fa-tshirt"></i> لباسشویی
            </a>
            <a href="{{ url_for('services') }}?category=dishwasher" style="padding:8px 22px;border-radius:30px;background:{% if category == 'dishwasher' %}#0d1b6b;color:white;{% else %}#eee;color:#333;{% endif %};font-weight:500;">
                <i class="fas fa-utensils"></i> ظرفشویی
            </a>
            <a href="{{ url_for('services') }}?category=package" style="padding:8px 22px;border-radius:30px;background:{% if category == 'package' %}#0d1b6b;color:white;{% else %}#eee;color:#333;{% endif %};font-weight:500;">
                <i class="fas fa-fire"></i> پکیج
            </a>
            <a href="{{ url_for('services') }}?category=vacuum" style="padding:8px 22px;border-radius:30px;background:{% if category == 'vacuum' %}#0d1b6b;color:white;{% else %}#eee;color:#333;{% endif %};font-weight:500;">
                <i class="fas fa-broom"></i> جاروبرقی
            </a>
        </div>
        
        <!-- لیست خدمات -->
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;">
            {% for service in services %}
            <div style="background:white;padding:30px;border-radius:15px;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,0.06);transition:0.3s;border:1px solid transparent;">
                <div style="width:70px;height:70px;background:#f0f4f8;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;">
                    <i class="{{ service.icon }}" style="font-size:32px;color:#0d1b6b;"></i>
                </div>
                <h3 style="font-size:18px;margin-bottom:10px;color:#0d1b6b;">{{ service.title }}</h3>
                <p style="color:#666;font-size:14px;line-height:1.8;">{{ service.description }}</p>
                {% if service.price_range %}
                <div style="margin:12px 0;color:#e53935;font-weight:500;font-size:15px;">{{ service.price_range }}</div>
                {% endif %}
                <a href="{{ url_for('service_detail', service_id=service.id) }}" style="display:inline-block;margin-top:10px;background:#0d1b6b;color:white;padding:10px 30px;border-radius:30px;font-size:14px;transition:0.3s;">
                    اطلاعات بیشتر
                </a>
            </div>
            {% else %}
            <div style="text-align:center;grid-column:1/-1;padding:50px;color:#888;">
                <i class="fas fa-search" style="font-size:48px;display:block;margin-bottom:15px;"></i>
                هیچ خدماتی یافت نشد.
            </div>
            {% endfor %}
        </div>
        
        <!-- CTA -->
        <div style="text-align:center;margin-top:50px;background:#f8f9fa;padding:40px;border-radius:15px;">
            <h3 style="color:#0d1b6b;font-size:22px;">برای تعمیرات دوو همین حالا تماس بگیرید</h3>
            <a href="tel:{{ settings.phone1 }}" style="display:inline-block;margin-top:15px;background:#e53935;color:white;padding:14px 45px;border-radius:50px;font-size:20px;font-weight:700;">
                <i class="fas fa-phone-alt"></i> {{ settings.phone1 }}
            </a>
        </div>
    </div>
</section>

{% endblock %}