<?php $__env->startSection('title', $seo['title'] ?: 'درباره ما'); ?>

<?php $__env->startSection('seo'); ?>
<?php if($seo['description']): ?>
<meta name="description" content="<?php echo e($seo['description']); ?>">
<?php endif; ?>
<?php if($seo['keywords']): ?>
<meta name="keywords" content="<?php echo e($seo['keywords']); ?>">
<?php endif; ?>
<?php if($seo['schema']): ?>
<script type="application/ld+json"><?php echo $seo['schema']; ?></script>
<?php endif; ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('styles'); ?>
<style>
/* ── Hero ── */
.about-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 64px 0 110px;
    position: relative;
    overflow: hidden;
}
.about-hero::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--main-color-one) 0%, transparent 70%);
    opacity: .15;
    top: -150px; left: -100px;
    pointer-events: none;
}
.about-hero .deco-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.08);
}
.about-hero .ring-1 { width:300px; height:300px; bottom:-100px; right:5%; }
.about-hero .ring-2 { width:180px; height:180px; bottom:-20px; right:12%; }
.about-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }
.about-hero .wave {
    position: absolute;
    bottom: -2px; left: 0; right: 0;
}

/* ── Stats ── */
.about-stats { margin-top: -52px; position: relative; z-index: 10; margin-bottom: 56px; }
.stat-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    padding: 32px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.stat-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--main-color-one), var(--main-color-two));
}
.stat-card .stat-num {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--main-color-one), var(--main-color-two));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 8px;
}
.stat-card .stat-label { font-size: .88rem; color: #666; font-weight: 500; }

/* ── Body ── */
.about-body-section { padding: 56px 0; }
.about-body-section .section-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--main-color-one);
    margin-bottom: 8px;
}
.about-body-text {
    font-size: 15.5px;
    color: #444;
    line-height: 2;
}
.about-divider {
    width: 60px; height: 4px;
    background: linear-gradient(90deg, var(--main-color-one), var(--main-color-two));
    border-radius: 2px;
    margin: 0 0 24px;
}

/* ── Mission / Vision ── */
.about-mv-section { padding: 0 0 60px; }
.mv-card {
    border-radius: 20px;
    padding: 36px 32px;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.mv-card.mission {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe4e4 100%);
    border: 1.5px solid #fecaca;
}
.mv-card.vision {
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
    border: 1.5px solid #bfdbfe;
}
.mv-card .mv-icon {
    width: 64px; height: 64px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin-bottom: 20px;
}
.mission .mv-icon { background: rgba(227,31,38,.12); color: var(--main-color-one); }
.vision  .mv-icon { background: rgba(59,130,246,.12); color: #3b82f6; }
.mv-card h4 { font-weight: 700; margin-bottom: 12px; }
.mv-card p  { color: #555; line-height: 2; margin: 0; }
.mv-card .mv-deco {
    position: absolute;
    bottom: -24px; left: -24px;
    width: 120px; height: 120px;
    border-radius: 50%;
    opacity: .06;
}
.mission .mv-deco { background: var(--main-color-one); }
.vision  .mv-deco { background: #3b82f6; }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

    
    <div class="about-hero">
        <div class="deco-ring ring-1"></div>
        <div class="deco-ring ring-2"></div>
        <div class="container-fluid position-relative" style="z-index:2">
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="<?php echo e(route('home')); ?>" class="text-white-50 text-decoration-none font-14">خانه</a>
                    </li>
                    <li class="breadcrumb-item active text-white font-14">درباره ما</li>
                </ol>
            </nav>
            <h1 class="text-white mb-3"><?php echo e($pageTitle ?: 'درباره ما'); ?></h1>
            <?php if($intro): ?>
            <p class="mb-0 fs-6" style="color:rgba(255,255,255,.65);max-width:620px;line-height:1.9"><?php echo e($intro); ?></p>
            <?php endif; ?>
        </div>
        <svg class="wave" viewBox="0 0 1440 54" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 54L60 45C120 36 240 18 360 13.5C480 9 600 18 720 22.5C840 27 960 27 1080 22.5C1200 18 1320 9 1380 4.5L1440 0V54H1380C1320 54 1200 54 1080 54C960 54 840 54 720 54C600 54 480 54 360 54C240 54 120 54 60 54H0Z" fill="#f4f5f9"/>
        </svg>
    </div>

    
    <?php $statsVisible = array_filter($stats, fn($s) => $s['number'] || $s['label']); ?>
    <?php if($statsVisible): ?>
    <div class="about-stats">
        <div class="container-fluid">
            <div class="row gy-4 gx-4 justify-content-center">
                <?php $__currentLoopData = $stats; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php if($stat['number'] || $stat['label']): ?>
                    <div class="col-6 col-lg-3">
                        <div class="stat-card">
                            <div class="stat-num"><?php echo e($stat['number']); ?></div>
                            <div class="stat-label"><?php echo e($stat['label']); ?></div>
                        </div>
                    </div>
                    <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </div>
    <?php else: ?>
    <div style="padding-top:56px"></div>
    <?php endif; ?>

    
    <?php if($body): ?>
    <div class="about-body-section">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-9 col-xl-8">
                    <div class="section-label">داستان ما</div>
                    <div class="about-divider"></div>
                    <div class="about-body-text"><?php echo nl2br(e($body)); ?></div>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>

    
    <?php if($mission || $vision): ?>
    <div class="about-mv-section">
        <div class="container-fluid">
            <div class="row gy-4 justify-content-center">
                <?php if($mission): ?>
                <div class="<?php echo e($vision ? 'col-lg-6' : 'col-lg-8'); ?>">
                    <div class="mv-card mission">
                        <div class="mv-deco"></div>
                        <div class="mv-icon"><i class="bi bi-bullseye"></i></div>
                        <h4>ماموریت ما</h4>
                        <p><?php echo e($mission); ?></p>
                    </div>
                </div>
                <?php endif; ?>
                <?php if($vision): ?>
                <div class="<?php echo e($mission ? 'col-lg-6' : 'col-lg-8'); ?>">
                    <div class="mv-card vision">
                        <div class="mv-deco"></div>
                        <div class="mv-icon"><i class="bi bi-eye"></i></div>
                        <h4>چشم‌انداز ما</h4>
                        <p><?php echo e($vision); ?></p>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('site.layouts.site-layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/louishop/public_html/engine/resources/views/site/about.blade.php ENDPATH**/ ?>