{% extends "base.html" %}

{% block title %}{{ service.title }} - {{ settings.site_name }}{% endblock %}

{% block content %}

<section style="padding:60px 0;">
    <div class="container">
        <div style="display:grid;grid-template-columns:2fr 1fr;gap:40px;">
            <!-- محتوای اصلی -->
            <div>
                <div style="background:white;padding:40px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);">
                    <div style="display:flex;align-items:center;gap:15px;margin-bottom:20px;">
                        <i class="{{ service.icon }}" style="font-size:48px;color:#0d1b6b;"></i>
                        <h1 style="font-size:28px;color:#0d1b6b;">{{ service.title }}</h1>
                    </div>
                    <p style="font-size:16px;color:#555;line-height:2;">{{ service.description }}</p>
                    
                    {% if service.details %}
                    <hr style="margin:30px 0;">
                    <h3 style="margin-bottom:20px;">مشکلات رایج و راه‌حل‌ها</h3>
                    {% for detail in service.details %}
                    <div style="background:#f8f9fa;padding:20px;border-radius:10px;margin-bottom:15px;">
                        <h4 style="color:#0d1b6b;">{{ detail.problem_title }}</h4>
                        <p style="color:#555;font-size:14px;">{{ detail.problem_description }}</p>
                        <p style="color:#e53935;font-weight:500;margin-top:5px;">{{ detail.solution }}</p>
                        {% if detail.price %}
                        <div style="margin-top:10px;background:#0d1b6b;color:white;padding:5px 15px;border-radius:20px;display:inline-block;font-size:14px;">
                            قیمت: {{ detail.price }}
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                    {% endif %}
                </div>
            </div>
            
            <!-- سایدبار -->
            <div>
                <div style="background:white;padding:30px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.06);position:sticky;top:100px;">
                    <h3 style="color:#0d1b6b;margin-bottom:15px;">تماس سریع</h3>
                    <p style="color:#666;font-size:14px;">برای تعمیر {{ service.title }} همین حالا تماس بگیرید</p>
                    <a href="tel:{{ settings.phone1 }}" style="display:block;background:#e53935;color:white;padding:15px;border-radius:10px;text-align:center;font-size:20px;font-weight:700;margin:20px 0;">
                        <i class="fas fa-phone-alt"></i> {{ settings.phone1 }}
                    </a>
                    <hr>
                    <p style="font-size:14px;color:#666;margin-top:15px;">
                        <i class="fas fa-check-circle" style="color:#25d366;"></i> ضمانت ۳ ماهه
                    </p>
                    <p style="font-size:14px;color:#666;">
                        <i class="fas fa-check-circle" style="color:#25d366;"></i> اعزام سریع به محل
                    </p>
                    <p style="font-size:14px;color:#666;">
                        <i class="fas fa-check-circle" style="color:#25d366;"></i> قطعات اورجینال
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}