<?php include 'header.php'; ?>

<div style="direction: <?php echo ($lang == 'ar' ? 'rtl' : 'ltr'); ?>; 
            text-align: <?php echo ($lang == 'ar' ? 'right' : 'left'); ?>;
            background: url('your-texture-image.jpg'); 
            background-attachment: fixed; 
            background-size: cover;
            min-height: 100vh;">

    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5 bg-white bg-opacity-75 p-4 rounded-4 shadow-sm" style="backdrop-filter: blur(5px); border-bottom: 3px solid #d9b34d;">
                <h2 class="fw-bold" style="color: #1a1a1a;"><?php echo $words[$lang]['about']; ?></h2>
                <p style="color: #d9b34d; font-weight: 600; font-size: 1.1rem;">
                    <?php echo ($lang == 'ar' ? 'تعرف على رحلتنا في خدمة لغة الضاد' : ($lang == 'tr' ? 'Arapça diline hizmet yolculuğumuz hakkında bilgi edinin' : 'Learn about our journey in serving the Arabic language')); ?>
                </p>
            </div>

            <div class="row align-items-center bg-white bg-opacity-75 p-4 p-md-5 rounded-4 shadow-lg" style="backdrop-filter: blur(8px); border: 1px solid rgba(217, 179, 77, 0.2);">
                
                <div class="col-lg-5 mb-4 mb-lg-0 text-center">
                    <img src="logo.png" class="img-fluid" style="max-height: 280px;" alt="Lughat Al Arab Logo">
                </div>

                <div class="col-lg-7">
                    <h2 class="mb-4" style="color: #d9b34d; font-weight: 800; font-size: 2rem;">
                        <?php echo ($lang == 'ar' ? 'رحلتنا مع لغة الضاد' : (($lang == 'tr') ? 'Arapça Yolculuğumuz' : 'Our Journey with Arabic')); ?>
                    </h2>
                    <p class="lead fw-bold" style="color: #2d2d2d; line-height: 1.8;">
                        <?php echo $words[$lang]['top_bar_text']; ?>
                    </p>
                    <div style="height: 2px; width: 50px; background: #d9b34d; margin-bottom: 20px;"></div>
                    <p style="color: #444; font-size: 0.9rem; line-height: 1.9; margin-bottom: 35px;">
                        <?php echo ($lang == 'ar' ? 'نحن في معهد لغة العرب نؤمن أن تعلم العربية ليس مجرد دراسة قواعد، بل هو تذوق لجماليات اللغة وهويتها.' : (($lang == 'tr') ? 'Lughat Al Arab Institute olarak, Arapça öğrenmenin sadece dilbilgisi değil, dilin estetiğini ve kimliğini tatmak olduğuna inanıyoruz.' : 'At Lughat Al Arab, we believe learning Arabic is more than just grammar; it is about tasting the beauty and identity of the language.')); ?>
                    </p>

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="p-3 rounded-4 shadow-sm h-100" style="background: rgba(255, 255, 255, 0.8); border-<?php echo ($lang == 'ar' ? 'right' : 'left'); ?>: 5px solid #d9b34d;">
                                <h5 style="color: #d9b34d; font-weight: 800;"><i class="fas fa-eye me-2 ms-2"></i> <?php echo ($lang == 'ar' ? 'رؤيتنا' : ($lang == 'tr' ? 'Vizyonumuz' : 'Our Vision')); ?></h5>
                                <p class="small m-0" style="color: #555;">
                                    <?php echo ($lang == 'ar' ? 'أن نكون المرجع الأول عالمياً في تعليم العربية بأسلوب يجمع بين الأصالة والحداثة.' : ($lang == 'tr' ? 'Arapça eğitiminde modern ve gelenekseli birleştiren küresel bir referans olmak.' : 'To be the global reference in teaching Arabic by combining authenticity and modernity.')); ?>
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 rounded-4 shadow-sm h-100" style="background: rgba(255, 255, 255, 0.8); border-<?php echo ($lang == 'ar' ? 'right' : 'left'); ?>: 5px solid #1a1a1a;">
                                <h5 style="color: #1a1a1a; font-weight: 800;"><i class="fas fa-bullhorn me-2 ms-2"></i> <?php echo ($lang == 'ar' ? 'رسالتنا' : ($lang == 'tr' ? 'Misyonumuz' : 'Our Mission')); ?></h5>
                                <p class="small m-0" style="color: #555;">
                                    <?php echo ($lang == 'ar' ? 'تمكين المتعلمين من إتقان اللغة العربية وتذوق جمالها عبر بيئة تعليمية محفزة.' : ($lang == 'tr' ? 'Öğrencilerin Arapça becerilerini teşvik edici bir ortamda geliştirmelerini sağlamak.' : 'Empowering learners to master Arabic and taste its beauty in a stimulating environment.')); ?>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="p-4 rounded-4 shadow-sm" style="background: rgba(26, 26, 26, 0.95); color: #fff;">
                        <h5 class="mb-3" style="color: #d9b34d; font-weight: 800; border-bottom: 1px solid rgba(217,179,77,0.3); padding-bottom: 10px;">
                            <?php echo ($lang == 'ar' ? 'أهدافنا وقيمنا' : ($lang == 'tr' ? 'Hedeflerimiz ve Değerlerimiz' : 'Our Goals & Values')); ?>
                        </h5>
                      <div class="row g-2">
    <div class="col-6 col-md-3 small">
        <i class="fas fa-check text-warning me-1 ms-1"></i> 
        <?php 
            if($lang == 'ar') echo 'الإتقان';
            elseif($lang == 'tr') echo 'Mükemmellik';
            else echo 'Mastery'; 
        ?>
    </div>

    <div class="col-6 col-md-3 small">
        <i class="fas fa-check text-warning me-1 ms-1"></i> 
        <?php 
            if($lang == 'ar') echo 'الأمانة';
            elseif($lang == 'tr') echo 'Dürüstlük';
            else echo 'Integrity'; 
        ?>
    </div>

    <div class="col-6 col-md-3 small">
        <i class="fas fa-check text-warning me-1 ms-1"></i> 
        <?php 
            if($lang == 'ar') echo 'الإبداع';
            elseif($lang == 'tr') echo 'Yaratıcılık';
            else echo 'Creativity'; 
        ?>
    </div>

    <div class="col-6 col-md-3 small">
        <i class="fas fa-check text-warning me-1 ms-1"></i> 
        <?php 
            if($lang == 'ar') echo 'التواصل';
            elseif($lang == 'tr') echo 'İletişim';
            else echo 'Communication'; 
        ?>
    </div>
</div>
                    </div>
                </div> </div>
        </div>
    </section>

</div>

<?php include 'footer.php'; ?>