@extends('layouts.app')

@section('title', 'من نحن')

@section('content')
<style>
    .section-title {
        color: #2c3e50;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 2rem;
        position: relative;
        padding-bottom: 0.5rem;
        display: inline-block;
    }
    .section-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60%;
        height: 3px;
        border-radius: 2px;
    }
    .trending .section-title:after {
        background: linear-gradient(to left, #dc3545, #f8b4bc);
    }
    .new-items .section-title:after {
        background: linear-gradient(to left, #f27523, #20c997);
    }
    .item {
        transition: all 0.3s ease;
    }
    .item:hover {
        transform: translateY(-5px);
    }
    .item-card {
        border: none;
        transition: all 0.3s ease;
    }
    .item-card:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    .item-title {
        color: #2c3e50;
        font-size: 1.1rem;
        margin: 1rem 0;
        height: 2.4em;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .price-new {
        color: #f27523;
        font-weight: 700;
        font-size: 1.2rem;
    }
    .price-old {
        color: #dc3545;
        text-decoration: line-through;
        opacity: 0.8;
        font-size: 1rem;
    }
    .img-container {
        overflow: hidden;
        background: white;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img-item {
        transition: transform 0.3s ease;
    }
    .img-item:hover {
        transform: scale(1.05);
    }
</style>



<div class="container new-items my-5">
    <h2 class="section-title">خدمات التوزيع</h2>
    <div class="row">
<div class="col-12">
    <div class="about-section p-5 bg-white rounded-4 shadow-lg position-relative overflow-hidden" style="border-top: 4px solid #f27523;">
        <!-- Decorative background element -->
        <div class="position-absolute" style="width: 300px; height: 300px; background: linear-gradient(45deg, #f27523, #ffa766); border-radius: 50%; opacity: 0.1; top: -100px; right: -100px;"></div>

        <div class="row align-items-center position-relative">
            <div class="col-lg-6">
                <h3 class="display-5 fw-bold mb-4" style="color: #f27523; text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">نحن نقدم أفضل</h3>
                <p class="lead mb-4 text-muted" style="font-size: 1.2rem;">خدمات توزيع الموبايل , الاكسسوارات والاجهزة الالكترونية</p>

                <div class="service-card mb-4 p-4 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                    <h4 class="fw-bold d-flex align-items-center" style="color: #f27523;">
                        <i class="fas fa-truck-fast me-3" style="font-size: 1.5rem;"></i>
                        <span>خدمات التوزيع</span>

                    </h4>
                    <p class="text-muted mb-2 me-4" style="font-size: 1.2rem; text-align:justify">شركة اوتاد الخيمة تقدم أفضل خدمات التوزيع منذ عام 2017.</p>
                    <p class="text-muted me-4" style="font-size: 1.2rem; text-align:justify">اليوم نحن مجموعة من الشركات الرائدة التي تولد عمل ضخم سنويًا. تشمل توزيع العلامات التجارية الرئيسية لدينا شياومي، تكنو، هواوي وإميكي.</p>
                </div>

                <div class="team-card p-4 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                    <h4 class="fw-bold d-flex align-items-center" style="color: #f27523;">
                        <i class="fas fa-users me-3" style="font-size: 1.5rem;"></i>
                        <span>فريقنا</span>
                    </h4>
                    <p class="text-muted me-4" style="font-size: 1.2rem; text-align:justify">لدينا ثلاث مكاتب رئيسية في بغداد وأربيل، و 7 صالات عرض و 14 مركز خدمة في جميع أنحاء العراق. أيضًا، فريق المبيعات لدينا يغطي جميع أنحاء العراق.</p>
                </div>
            </div>
            <div class="col-lg-6 mt-4 mt-lg-0">
                <div class="stats-container d-flex flex-wrap justify-content-center gap-4">
                    <div class="stat-card text-center p-4 rounded-4 bg-light hover-lift" style="transition: all 0.3s ease; min-width: 160px;">
                        <div class="stat-icon mb-3">
                            <i class="fas fa-building text-primary" style="font-size: 2rem; color: #f27523 !important;"></i>
                        </div>
                        <h3 class="fw-bold mb-2" style="color: #f27523; font-size: 2.5rem;">24</h3>
                        <p class="text-muted mb-0 fw-medium">مركز خدمة</p>
                    </div>
                    <div class="stat-card text-center p-4 rounded-4 bg-light hover-lift" style="transition: all 0.3s ease; min-width: 160px;">
                        <div class="stat-icon mb-3">
                            <i class="fas fa-city text-primary" style="font-size: 2rem; color: #f27523 !important;"></i>
                        </div>
                        <h3 class="fw-bold mb-2" style="color: #f27523; font-size: 2.5rem;">3</h3>
                        <p class="text-muted mb-0 fw-medium">مكاتب رئيسية</p>
                    </div>
                    <div class="stat-card text-center p-4 rounded-4 bg-light hover-lift" style="transition: all 0.3s ease; min-width: 160px;">
                        <div class="stat-icon mb-3">
                            <i class="fas fa-store text-primary" style="font-size: 2rem; color: #f27523 !important;"></i>
                        </div>
                        <h3 class="fw-bold mb-2" style="color: #f27523; font-size: 2.5rem;">7</h3>
                        <p class="text-muted mb-0 fw-medium">صالات عرض</p>
                    </div>
                    <div class="stat-card text-center p-4 rounded-4 bg-light hover-lift" style="transition: all 0.3s ease; min-width: 160px;">
                        <div class="stat-icon mb-3">
                            <i class="fas fa-calendar-alt text-primary" style="font-size: 2rem; color: #f27523 !important;"></i>
                        </div>
                        <h3 class="fw-bold mb-2" style="color: #f27523; font-size: 2.5rem;">2017</h3>
                        <p class="text-muted mb-0 fw-medium">تأسست عام</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
</div>{{-- container  من نحن--}}




<div class="container new-items my-5">
<h2 class="section-title">رؤيتنا</h2>
<div class="row g-4">
    <div class="col-md-4">
        <div class="card h-100 border-0 shadow-lg hover-lift position-relative overflow-hidden" style="border-radius: 15px;">
            <div class="position-absolute" style="width: 150px; height: 150px; background: linear-gradient(45deg, #f27523, #ffa766); border-radius: 50%; opacity: 0.1; top: -50px; right: -50px;"></div>
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <div class="icon-circle mb-3 mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                        <i class="fas fa-eye" style="font-size: 2.5rem; color: #f27523;"></i>
                    </div>
                    <h4 class="card-title fw-bold" style="color: #2c3e50;">رؤيتنا</h4>
                </div>
                <p class="card-text text-muted lh-lg" style="font-size: 1.2rem; text-align:justify">
                    بدأت شركتي للاتصالات برؤية تقديم أفضل الخدمات وأن تصبح أفضل موزع في المنطقة. نحن متمسكون برؤيتنا حتى بعد مرور وقت طويل من العمل ونواصل بذل الجهد لتقديم أفضل خدمات عالية الجودة لعملائنا.
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card h-100 border-0 shadow-lg hover-lift position-relative overflow-hidden" style="border-radius: 15px;">
            <div class="position-absolute" style="width: 150px; height: 150px; background: linear-gradient(45deg, #f27523, #ffa766); border-radius: 50%; opacity: 0.1; top: -50px; right: -50px;"></div>
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <div class="icon-circle mb-3 mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                        <i class="fas fa-bullseye" style="font-size: 2.5rem; color: #f27523;"></i>
                    </div>
                    <h4 class="card-title fw-bold" style="color: #2c3e50;">مهمتنا</h4>
                </div>
                <p class="card-text text-muted lh-lg" style="font-size: 1.2rem; text-align:justify" >
                    لقد اكتسبنا الكثير من الخبرت كل ما تعلق بتوزيع الهواتف المحمولة. لقد منظومة قوية لمراقب العمل ونحن على دراية جيدة بكل ما يجري في السوق. مهمتنا هي تحقيق التميز في كل جانب من جوانب السوق المتغير وأن نكون دائمًا على علم.
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card h-100 border-0 shadow-lg hover-lift position-relative overflow-hidden" style="border-radius: 15px;">
            <div class="position-absolute" style="width: 150px; height: 150px; background: linear-gradient(45deg, #f27523, #ffa766); border-radius: 50%; opacity: 0.1; top: -50px; right: -50px;"></div>
            <div class="card-body p-4">
                <div class="text-center mb-4">
                    <div class="icon-circle mb-3 mx-auto d-flex align-items-center justify-content-center" style="width: 80px; height: 80px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                        <i class="fas fa-star" style="font-size: 2.5rem; color: #f27523;"></i>
                    </div>
                    <h4 class="card-title fw-bold" style="color: #2c3e50;">قيمنا</h4>
                </div>
                <p class="card-text text-muted lh-lg" style="font-size: 1.2rem; text-align:justify">
                    نضمن لكم أنه عندما تعملون معنا ستجدونا صادقين ومحترفين. نحاول أن نجد ما هو أفضل لعملائنا. فريقنا ذو الخبرة الوافية وشركاؤنا هم أصولنا الرئيسية.
                </p>
            </div>
        </div>
    </div>
</div>


</div>{{-- container  رؤيتنا--}}




<div class="container new-items my-5">
    <h2 class="section-title">معلومات الاتصال</h2>
    <div class="row">
        <div class="col-12">
            <div class="contact-section p-5 bg-white rounded-4 shadow-lg position-relative overflow-hidden" style="border-top: 4px solid #f27523;">
                <!-- Decorative elements -->
                <div class="position-absolute" style="width: 300px; height: 300px; background: linear-gradient(45deg, #f27523, #ffa766); border-radius: 50%; opacity: 0.1; top: -100px; right: -100px;"></div>

                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="contact-info">
                            <h3 class="mb-4" style="color: #f27523;">العنوان</h3>
                            <p class="text-muted mb-4" style="font-size: 1.2rem;">
                                <i class="fas fa-map-marker-alt me-2" style="color: #f27523;"></i>
                                Baghdad: Aldawly Bldg, Rubayie St., Zayoona
                            </p>

                            <h3 class="mb-4" style="color: #f27523;">أرقام الهواتف</h3>
                            <div class="phone-numbers mb-4">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="contact-card p-3 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                                                    <i class="fas fa-phone" style="color: #f27523;"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold" style="color: #2c3e50;">المكتب الرئيسي</div>
                                                    <a href="tel:07726174860" class="text-decoration-none" style="color: #f27523; font-size: 1.1rem;">07726174860</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="contact-card p-3 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                                                    <i class="fas fa-phone" style="color: #f27523;"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold" style="color: #2c3e50;">أربيل</div>
                                                    <a href="tel:07716073866" class="text-decoration-none" style="color: #f27523; font-size: 1.1rem;">07716073866</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="contact-card p-3 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                                                    <i class="fas fa-phone" style="color: #f27523;"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold" style="color: #2c3e50;">النجف</div>
                                                    <a href="tel:07726174855" class="text-decoration-none" style="color: #f27523; font-size: 1.1rem;">07726174855</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="contact-card p-3 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                                                    <i class="fas fa-phone" style="color: #f27523;"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold" style="color: #2c3e50;">الموصل</div>
                                                    <a href="tel:07726174849" class="text-decoration-none" style="color: #f27523; font-size: 1.1rem;">07726174849</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="contact-card p-3 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                                                    <i class="fas fa-phone" style="color: #f27523;"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold" style="color: #2c3e50;">البصرة</div>
                                                    <a href="tel:07726174858" class="text-decoration-none" style="color: #f27523; font-size: 1.1rem;">07726174858</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="contact-card p-3 rounded-3 bg-light hover-shadow" style="transition: all 0.3s ease;">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: rgba(242, 117, 35, 0.1); border-radius: 50%;">
                                                    <i class="fas fa-phone" style="color: #f27523;"></i>
                                                </div>
                                                <div>
                                                    <div class="fw-bold" style="color: #2c3e50;">الفلوجة</div>
                                                    <a href="tel:07729789733" class="text-decoration-none" style="color: #f27523; font-size: 1.1rem;">07729789733</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="mb-4" style="color: #f27523;">البريد الإلكتروني</h3>
                            <p class="text-muted" style="font-size: 1.2rem;">
                                <i class="fas fa-envelope me-2" style="color: #f27523;"></i>
                                <a href="mailto:info@etisalaty.com" class="text-decoration-none text-muted">info@etisalaty.com</a>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="map-container mt-4 mt-lg-0">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3334.3705008322367!2d44.4584!3d33.3152!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDE4JzU0LjciTiA0NMKwMjcnMzAuMiJF!5e0!3m2!1sen!2siq!4v1234567890"
                                width="100%"
                                height="400"
                                style="border:0; border-radius: 10px;"
                                allowfullscreen=""
                                loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade">
                            </iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>{{-- container --}}







@endsection