<?php
declare(strict_types=1);
require __DIR__ . '/api/bootstrap.php';
require __DIR__ . '/api/functions-content.php';
$locale = current_locale();
$dbPage = page_content('About-Us', $locale);
$dbTitle = $dbPage['title'] ?? '';
$dbContent = $dbPage['content'] ?? '';
$settings = normalize_settings(settings($locale));
$siteName = $settings['site_name'] ?? 'Tanzelat';
?>
<!doctype html>
<html lang="<?= $locale ?>" dir="<?= $locale === 'en' ? 'ltr' : 'rtl' ?>">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><?= htmlspecialchars($siteName) ?> | <?= htmlspecialchars($dbTitle !== '' ? $dbTitle : ($locale === 'en' ? 'About' : 'عنّا')) ?></title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/base.css?v=20260524-cairo" />
    <link rel="stylesheet" href="/css/layout.css" />
    <link rel="stylesheet" href="/css/components.css" />
  </head>
  <body class="about-page">
    <div class="page-loader" aria-hidden="true">
      <img src="/assets/images/image.png" alt="" />
    </div>

    <header class="site-header">
      <nav class="navbar navbar-expand-lg">
        <div class="container">
          <a class="navbar-brand brand-mark" href="/">
            <img src="/assets/images/image.png" alt="Tanzelat" />
            <span>Tanzelat</span>
          </a>

          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNav"
            aria-controls="mainNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
              <li class="nav-item"><a class="nav-link" href="/" data-i18n="navHome">الرئيسية</a></li>
              <li class="nav-item"><a class="nav-link" href="apps.php" data-i18n="navApps">تطبيقات</a></li>
              <li class="nav-item"><a class="nav-link" href="/blog.php" data-i18n="navBlog">المدونات</a></li>
              <li class="nav-item"><a class="nav-link" href="/privacy.php" data-i18n="navPrivacy">سياسة الخصوصية</a></li>
              <li class="nav-item"><a class="nav-link" href="/terms.php" data-i18n="navTerms">شروط الاستخدام</a></li>
                <li class="nav-item"><a class="nav-link active" href="/about.php" data-i18n="navAbout">عنّا</a></li>
                <li class="nav-item"><a class="nav-link" href="/contact.php" data-i18n="navContact">تواصل معنا</a></li>
            </ul>

            <div class="header-actions">
              <button class="icon-button" id="langToggle" type="button" aria-label="Switch language">
                <i class="bi bi-globe2"></i>
                <span>EN</span>
              </button>
            </div>
          </div>
        </div>
      </nav>
    </header>

    <main>
      <section class="about-hero">
        <div class="container">
          <div class="about-hero-grid">
            <div class="about-hero-copy reveal">
              <h1 data-i18n="aboutHeroTitle"><?= htmlspecialchars($dbTitle !== '' ? $dbTitle : ($locale === 'en' ? 'About' : 'عنّا')) ?></h1>
              <p data-i18n="aboutHeroText">منصة رائدة وموثوقة تقدم أحدث التطبيقات والحلول التقنية للمستخدم العربي. نحن نسعى لتمكين المحتوى الرقمي العربي من خلال تقديم مراجعات دقيقة، شروحات تقنية، وأحدث إصدارات البرمجيات في بيئة آمنة وسهلة الاستخدام.</p>
            </div>
            <?php if ($dbContent !== ''): ?>
            <div class="about-hero-copy reveal" style="grid-column:1/-1;margin-top:1.5rem;">
              <div class="dynamic-page-content article-prose"><?= $dbContent ?></div>
            </div>
            <?php endif; ?>
            <div class="about-laptop reveal">
              <div class="laptop-screen"></div>
            </div>
          </div>
        </div>
      </section>

      <section class="about-offers section">
        <div class="container">
          <div class="about-heading reveal">
            <h2 data-i18n="aboutOfferTitle">ماذا نقدم في Tanzelat؟</h2>
            <span></span>
          </div>

          <div class="offer-grid">
            <article class="offer-card offer-primary reveal">
              <i class="bi bi-grid-3x3-gap"></i>
              <h3 data-i18n="aboutAndroidTitle">تطبيقات أندرويد</h3>
              <p data-i18n="aboutAndroidText">مكتبة ضخمة من التطبيقات المختارة بعناية والمفحوصة لضمان أفضل تجربة لمستخدمي الهواتف الذكية.</p>
            </article>

            <article class="offer-card offer-wide reveal">
              <i class="bi bi-calendar3"></i>
              <h3 data-i18n="aboutBlogsTitle">مدونات تقنية معمقة</h3>
              <p data-i18n="aboutBlogsText">نغطي آخر أخبار التكنولوجيا، مراجعات الأجهزة، واتجاهات الذكاء الاصطناعي بلغة عربية واضحة ومهنية.</p>
              <a href="/blog.php"><span data-i18n="exploreArticles">استكشف المقالات</span><i class="bi bi-arrow-left"></i></a>
            </article>

            <article class="offer-card offer-image reveal">
              <div class="tablet-art"></div>
            </article>

            <article class="offer-card offer-wide reveal">
              <i class="bi bi-mortarboard"></i>
              <h3 data-i18n="aboutGuidesTitle">شروحات تعليمية</h3>
              <p data-i18n="aboutGuidesText">خطوات عملية ومبسطة لحل المشاكل التقنية وتطوير المهارات الرقمية للمبتدئين والمحترفين.</p>
            </article>

            <article class="offer-card offer-dark reveal">
              <i class="bi bi-controller"></i>
              <h3 data-i18n="aboutGamesTitle">ألعاب الموبايل</h3>
              <p data-i18n="aboutGamesText">أحدث الألعاب والترندات العالمية مع روابط تحميل سريعة وموثوقة.</p>
            </article>
          </div>
        </div>
      </section>

      <section class="about-story section">
        <div class="container">
          <div class="story-grid">
            <div class="story-copy reveal">
              <h2 data-i18n="aboutStoryTitle">قصتنا وفريقنا</h2>
              <p data-i18n="aboutStoryTextOne">بدأت Tanzelat كفكرة بسيطة لسد الفجوة في المحتوى التقني العربي عالي الجودة. نحن فريق من المبرمجين، الكتاب التقنيين، وصناع التكنولوجيا الذين يسعون لتقديم أفضل الموارد الرقمية للمجتمع العربي.</p>
              <p data-i18n="aboutStoryTextTwo">نؤمن أن التكنولوجيا هي مفتاح التطور، وأن الوصول إليها يجب أن يكون سهلاً وآمناً للجميع. لهذا السبب، نقوم باختيار كل تطبيق ومراجعة كل سطر ومقالة لضمان لك الفائدة القصوى.</p>
              <div class="story-stats">
                <strong>+5000 <span data-i18n="aboutAppsStat">تطبيق ومقال</span></strong>
                <strong>+100K <span data-i18n="aboutUsersStat">مستخدم شهرياً</span></strong>
              </div>
            </div>
            <div class="story-visuals reveal">
              <div class="story-photo photo-board"></div>
              <div class="story-photo photo-team"></div>
            </div>
          </div>
        </div>
      </section>

      <section class="about-thanks reveal">
        <div class="container">
          <i class="bi bi-heart"></i>
          <h2 data-i18n="aboutThanksTitle">شكراً لثقتكم بنا</h2>
          <p data-i18n="aboutThanksText">نحن ممتنون لاختياركم Tanzelat كوجهتكم التقنية المفضلة. ثقتكم هي الدافع الأكبر لنا للاستمرار في التطوير وتقديم الأفضل دائماً.</p>
          <a href="/contact.php"><span data-i18n="contactUsNow">تواصل معنا الآن</span></a>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <div class="container footer-grid">
        <div>
          <h2>Tanzelat</h2>
          <p data-i18n="footerText">المنصة الرائدة لدعم المحتوى العربي الرقمي، نهتم بالجودة، الأمان، والابتكار.</p>
        </div>
        <div>
          <h3 data-i18n="aboutPlatform">عن المنصة</h3>
          <a href="/about.php" data-i18n="whoWeAre">من نحن</a>
          <a href="/privacy.php" data-i18n="privacy">سياسة الخصوصية</a>
          <a href="/terms.php" data-i18n="terms">شروط الاستخدام</a>
        </div>
        <div>
          <h3 data-i18n="support">الدعم</h3>
          <a href="/contact.php" data-i18n="contact">اتصل بنا</a>
          <a href="#" data-i18n="faq">الأسئلة الشائعة</a>
          <a href="#" data-i18n="archive">الأرشيف</a>
        </div>
        <div class="socials">
          <a href="#" aria-label="RSS"><i class="bi bi-rss"></i></a>
          <a href="#" aria-label="Share"><i class="bi bi-share"></i></a>
        </div>
      </div>
      <p class="copyright">© 2026 Tanzelat. <span data-i18n="rights">جميع الحقوق محفوظة لصناع المحتوى العربي.</span></p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/main.js"></script>
  </body>
</html>
