{% extends "base.html" %}

{% block content %}

<!-- ===== HERO ===== -->
<section style="background:linear-gradient(135deg,#0d1b6b,#1a237e);color:white;padding:80px 0;">
    <div class="container">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;">
            <div>
                <h1 style="font-size:42px;margin-bottom:20px;">تعمیرات تخصصی دوو در تهران</h1>
                <p style="font-size:18px;opacity:0.9;margin-bottom:30px;">
                    با بیش از ۱۰ سال تجربه، تعمیرات یخچال، لباسشویی، ظرفشویی و پکیج دوو با ضمانت کیفیت
                </p>
                <div style="display:flex;gap:15px;flex-wrap:wrap;">
                    <a href="tel:{{ settings.phone1 }}" style="background:#e53935;color:white;padding:15px 40px;border-radius:50px;font-size:20px;font-weight:700;display:inline-flex;align-items:center;gap:10px;">
                        <i class="fas fa-phone-alt"></i> {{ settings.phone1 }}
                    </a>
                    <a href="{{ url_for('services') }}" style="background:rgba(255,255,255,0.15);color:white;padding:15px 40px;border-radius:50px;font-size:18px;font-weight:500;">
                        مشاهده خدمات
                    </a>
                </div>
                <div style="display:flex;gap:40px;margin-top:40px;">
                    <div><span style="font-size:32px;font-weight:900;">۱۰+</span><br>سال تجربه</div>
                    <div><span style="font-size:32px;font-weight:900;">۱۰۰۰+</span><br>مشتری راضی</div>
                    <div><span style="font-size:32px;font-weight:900;">۹۸%</span><br>رضایت</div>
                </div>
            </div>
            <div style="text-align:center;">
                <i class="fas fa-tools" style="font-size:200px;opacity:0.3;"></i>
            </div>
        </div>
    </div>
</section>

<!-- ===== SERVICES ===== -->
<section style="padding:70px 0;">
    <div class="container">
        <div style="text-align:center;margin-bottom:50px;">
            <h2 style="font-size:32px;color:#0d1b6b;">خدمات تعمیرات دوو</h2>
            <p style="color:#666;font-size:18px;">تعمیرات تخصصی تمام محصولات دوو با ضمانت کیفیت</p>
        </div>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,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;">
                <i class="{{ service.icon }}" style="font-size:48px;color:#0d1b6b;margin-bottom:15px;"></i>
                <h3 style="font-size:18px;margin-bottom:10px;">{{ service.title }}</h3>
                <p style="color:#666;font-size:14px;">{{ service.description|truncate(60) }}</p>
                <a href="{{ url_for('service_detail', service_id=service.id) }}" style="display:inline-block;margin-top:15px;color:#0d1b6b;font-weight:500;">
                    بیشتر بدانید <i class="fas fa-arrow-left"></i>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- ===== TESTIMONIALS ===== -->
<section style="background:white;padding:70px 0;">
    <div class="container">
        <div style="text-align:center;margin-bottom:50px;">
            <h2 style="font-size:32px;color:#0d1b6b;">نظرات مشتریان</h2>
            <p style="color:#666;font-size:18px;">آنچه مشتریان ما درباره خدماتمان می‌گویند</p>
        </div>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;">
            {% for t in testimonials %}
            <div style="background:#f8f9fa;padding:25px;border-radius:15px;">
                <div style="color:#f5b342;margin-bottom:10px;">
                    {% for i in range(t.rating) %}★{% endfor %}
                    {% for i in range(5 - t.rating) %}☆{% endfor %}
                </div>
                <p style="font-style:italic;">"{{ t.text }}"</p>
                <div style="margin-top:15px;font-weight:500;">{{ t.customer_name }}</div>
                <div style="font-size:14px;color:#888;">{{ t.customer_location|default('تهران') }}</div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- ===== ARTICLES ===== -->
<section style="padding:70px 0;">
    <div class="container">
        <div style="text-align:center;margin-bottom:50px;">
            <h2 style="font-size:32px;color:#0d1b6b;">مقالات آموزشی</h2>
            <p style="color:#666;font-size:18px;">مطالب مفید برای نگهداری بهتر از لوازم خانگی دوو</p>
        </div>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;">
            {% for article in articles %}
            <div style="background:white;border-radius:15px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,0.06);">
                <div style="padding:20px;">
                    <span style="font-size:12px;color:#888;">{{ article.category }}</span>
                    <h3 style="font-size:18px;margin:10px 0;"><a href="{{ url_for('article_detail', slug=article.slug) }}">{{ article.title }}</a></h3>
                    <p style="color:#666;font-size:14px;">{{ article.summary|truncate(80) }}</p>
                    <a href="{{ url_for('article_detail', slug=article.slug) }}" style="display:inline-block;margin-top:15px;color:#e53935;font-weight:500;">
                        ادامه مطلب <i class="fas fa-arrow-left"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- ===== FAQ ===== -->
<section style="background:#f8f9fa;padding:70px 0;">
    <div class="container">
        <div style="text-align:center;margin-bottom:50px;">
            <h2 style="font-size:32px;color:#0d1b6b;">سوالات متداول</h2>
            <p style="color:#666;font-size:18px;">پاسخ به سوالات رایج شما</p>
        </div>
        <div style="max-width:800px;margin:0 auto;">
            {% for faq in faqs %}
            <div style="background:white;padding:18px 22px;border-radius:10px;margin-bottom:12px;cursor:pointer;" onclick="this.classList.toggle('open')">
                <div style="display:flex;justify-content:space-between;align-items:center;font-weight:500;">
                    {{ faq.question }}
                    <i class="fas fa-chevron-down" style="transition:0.3s;"></i>
                </div>
                <div style="display:none;padding-top:12px;color:#666;border-top:1px solid #eee;margin-top:10px;">
                    {{ faq.answer }}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- ===== CTA ===== -->
<section style="background:#e53935;color:white;padding:60px 0;text-align:center;">
    <div class="container">
        <h2 style="font-size:32px;margin-bottom:10px;">همین حالا با ما تماس بگیرید</h2>
        <p style="font-size:18px;opacity:0.9;margin-bottom:20px;">تکنسین‌های مجرب ما در سریع‌ترین زمان به محل شما اعزام می‌شوند</p>
        <a href="tel:{{ settings.phone1 }}" style="background:white;color:#e53935;padding:15px 50px;border-radius:50px;font-size:24px;font-weight:700;display:inline-block;">
            {{ settings.phone1 }}
        </a>
    </div>
</section>

<style>
    .faq-item.open .fa-chevron-down { transform: rotate(180deg); }
    .faq-item.open div:last-child { display: block !important; }
</style>

{% endblock %}