{% extends "base.html" %}

{% block content %}
<section class="container py-5" data-aos="fade-up">
    <div class="text-center mb-5">
        <span class="badge bg-danger mb-2" style="background:linear-gradient(135deg,#c41e3a,#8b0000);padding:8px 20px;border-radius:50px;">
            <i class="fas fa-info-circle"></i> درباره ما
        </span>
        <h2 class="fw-bold">نمایندگی تخصصی <span style="color:#c41e3a;">دوو</span> در تهران</h2>
        <p class="text-secondary">بیش از یک دهه تجربه در خدمت به شما</p>
    </div>

    <div class="row align-items-center g-5">
        <div class="col-lg-6" data-aos="fade-right">
            <div style="border-radius:20px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.12);">
                <img src="{{ url_for('static', filename='images/about-us.jpg') }}" 
                     alt="نمایندگی دوو تهران" 
                     class="img-fluid"
                     style="width:100%;height:400px;object-fit:cover;"
                     onerror="this.src='https://via.placeholder.com/800x400/c41e3a/ffffff?text=نمایندگی+دوو+تهران'">
            </div>
        </div>
        <div class="col-lg-6" data-aos="fade-left">
            <h3 class="fw-bold">چرا <span style="color:#c41e3a;">دوو تهران</span>؟</h3>
            <p class="text-secondary">{{ settings.about_text|default('ما با بیش از ۱۰ سال تجربه در زمینه تعمیرات تخصصی لوازم خانگی دوو، همواره در تلاشیم تا بهترین خدمات را به شما عزیزان ارائه دهیم.') }}</p>
            
            <div class="row g-3 mt-3">
                <div class="col-6">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fas fa-check-circle" style="color:#c41e3a;font-size:1.5rem;"></i>
                        <div>
                            <h6 class="mb-0 fw-bold">تخصص و تجربه</h6>
                            <small class="text-muted">۱۰+ سال تجربه</small>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fas fa-check-circle" style="color:#c41e3a;font-size:1.5rem;"></i>
                        <div>
                            <h6 class="mb-0 fw-bold">قطعات اورجینال</h6>
                            <small class="text-muted">ضمانت کیفیت</small>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fas fa-check-circle" style="color:#c41e3a;font-size:1.5rem;"></i>
                        <div>
                            <h6 class="mb-0 fw-bold">تکنسین‌های مجرب</h6>
                            <small class="text-muted">حضور در ۲ ساعت</small>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="d-flex align-items-center gap-2">
                        <i class="fas fa-check-circle" style="color:#c41e3a;font-size:1.5rem;"></i>
                        <div>
                            <h6 class="mb-0 fw-bold">پشتیبانی ۲۴/۷</h6>
                            <small class="text-muted">حتی در تعطیلات</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <a href="tel:{{ settings.phone1|default('02155551234')|replace(' ', '')|replace('-', '') }}" class="btn-hero">
                    <i class="fas fa-phone"></i> تماس با ما
                </a>
            </div>
        </div>
    </div>

    <!-- آمار -->
    <div class="row g-4 mt-5" data-aos="fade-up">
        <div class="col-6 col-md-3 text-center">
            <div class="p-4 bg-white rounded-4 shadow-sm">
                <h3 class="text-danger fw-bold">۱۰+</h3>
                <p class="text-secondary mb-0">سال تجربه</p>
            </div>
        </div>
        <div class="col-6 col-md-3 text-center">
            <div class="p-4 bg-white rounded-4 shadow-sm">
                <h3 class="text-danger fw-bold">۵۰۰۰+</h3>
                <p class="text-secondary mb-0">تعمیرات موفق</p>
            </div>
        </div>
        <div class="col-6 col-md-3 text-center">
            <div class="p-4 bg-white rounded-4 shadow-sm">
                <h3 class="text-danger fw-bold">۲۲</h3>
                <p class="text-secondary mb-0">منطقه تحت پوشش</p>
            </div>
        </div>
        <div class="col-6 col-md-3 text-center">
            <div class="p-4 bg-white rounded-4 shadow-sm">
                <h3 class="text-danger fw-bold">۹۸%</h3>
                <p class="text-secondary mb-0">رضایت مشتریان</p>
            </div>
        </div>
    </div>

    <!-- تیم ما -->
    <!-- تیم ما -->
<div class="mt-5" data-aos="fade-up">
    <h4 class="text-center fw-bold mb-4">تیم تخصصی <span style="color:#c41e3a;">دوو تهران</span></h4>
    <div class="row g-4">
        {% for tech in technicians[:4] %}
        <div class="col-lg-3 col-md-6">
            <div class="card border-0 shadow-sm text-center" style="border-radius:16px;overflow:hidden;">
                <div class="card-body p-4">
                    <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                         style="width:80px;height:80px;background:linear-gradient(135deg,#c41e3a,#8b0000);margin:0 auto;">
                        <span style="font-size:2.2rem;font-weight:700;color:#fff;">{{ tech.fullname[0] }}</span>
                    </div>
                    <h6 class="fw-bold mt-3">{{ tech.fullname }}</h6>
                    <p class="text-secondary small">
                        {% if tech.expertise_display %}
                            {{ tech.expertise_display|truncate(30) }}
                        {% else %}
                            تکنسین دوو
                        {% endif %}
                    </p>
                    <span class="badge bg-success"><i class="fas fa-circle"></i> آنلاین</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
</section>

<style>
    .btn-hero {
        background: linear-gradient(135deg, #f5c518, #f5a623);
        color: #1a1a2e;
        padding: 12px 35px;
        border-radius: 50px;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: 0.3s;
        border: none;
    }
    .btn-hero:hover {
        transform: scale(1.05);
        box-shadow: 0 12px 50px rgba(245, 197, 24, 0.4);
        color: #1a1a2e;
    }
</style>
{% endblock %}