<?php
declare(strict_types=1);
require __DIR__ . '/api/bootstrap.php';
require __DIR__ . '/api/functions-content.php';
$locale = current_locale();
$dbPage = page_content('contact us', $locale);
$dbTitle = $dbPage['title'] ?? '';
$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' ? 'Contact' : 'تواصل معنا')) ?></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?v=20260518-contact" />
    <link rel="stylesheet" href="/css/components.css?v=20260518-contact" />
    <style>
      html[dir="rtl"] .contact-page .contact-content,
      html[dir="rtl"] .contact-page .contact-hero,
      html[dir="rtl"] .contact-page .contact-form,
      html[dir="rtl"] .contact-page .dynamic-page-content,
      html[dir="rtl"] .contact-page .article-prose {
        direction: rtl;
        text-align: right;
      }

      html[dir="ltr"] .contact-page .contact-content,
      html[dir="ltr"] .contact-page .contact-hero,
      html[dir="ltr"] .contact-page .contact-form,
      html[dir="ltr"] .contact-page .dynamic-page-content,
      html[dir="ltr"] .contact-page .article-prose {
        direction: ltr;
        text-align: left;
      }

      html[dir="rtl"] .contact-page .contact-form input,
      html[dir="rtl"] .contact-page .contact-form textarea {
        direction: rtl;
        text-align: right;
      }

      html[dir="ltr"] .contact-page .contact-form input,
      html[dir="ltr"] .contact-page .contact-form textarea {
        direction: ltr;
        text-align: left;
      }
    </style>
  </head>
  <body class="contact-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" href="/about.php" data-i18n="navAbout">عنّا</a></li>
              <li class="nav-item"><a class="nav-link active" href="/contact.php" data-i18n="navContact">تواصل معنا</a></li>
            </ul>

            <div class="header-actions">
              <form class="mini-search" role="search">
                <input type="search" data-i18n-placeholder="searchPlaceholder" placeholder="ابحث عن محتوى..." />
                <button type="submit" aria-label="Search"><i class="bi bi-search"></i></button>
              </form>
              <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 class="contact-main">
      <div class="container">
        <div class="contact-layout">
          <aside class="contact-sidebar reveal">
            <div class="contact-categories">
              <h2 data-i18n="filtersTitle">التصنيفات</h2>
              <p data-i18n="filtersText">استكشف حسب الاهتمام</p>
              <a href="apps.php"><span data-i18n="filterApps">تطبيقات</span><i class="bi bi-grid-3x3-gap"></i></a>
              <a href="apps.php"><span data-i18n="filterGames">ألعاب</span><i class="bi bi-controller"></i></a>
              <a href="apps.php"><span data-i18n="filterSites">مواقع</span><i class="bi bi-globe2"></i></a>
              <a href="/blog.php"><span data-i18n="catNews">أخبار</span><i class="bi bi-calendar3"></i></a>
            </div>

            <div class="follow-card">
              <h2 data-i18n="followUs">تابعنا</h2>
              <div class="follow-icons">
                <a href="#" aria-label="Chat"><i class="bi bi-chat-left-text"></i></a>
                <a href="#" aria-label="Email"><i class="bi bi-at"></i></a>
                <a href="#" aria-label="Video"><i class="bi bi-collection-play"></i></a>
                <a href="#" aria-label="Share"><i class="bi bi-share"></i></a>
              </div>
              <p data-i18n="followText">كن أول من يعرف عن التحديثات والبرامج الجديدة</p>
            </div>

            <div class="hosting-ad">
              <small data-i18n="sponsoredAd">إعلان مدفوع</small>
              <div>
                <span data-i18n="specialOffer">عرض خاص</span>
                <strong data-i18n="hostingOffer">استضافة فائقة السرعة لموقعك القادم</strong>
                <a href="#" data-i18n="subscribeNow">اشترك الآن</a>
              </div>
            </div>
          </aside>

          <section class="contact-content">
            <div class="contact-hero reveal">
              <div>
                <h1 data-i18n="contactHeroTitle"><?= htmlspecialchars($dbTitle !== '' ? $dbTitle : ($locale === 'en' ? 'Contact' : 'تواصل معنا')) ?></h1>
                <p data-i18n="contactHeroText">نحن هنا للإجابة على استفساراتكم ومساعدتكم في رحلتكم الإبداعية. لا تترددوا في مراسلتنا في أي وقت.</p>
              </div>
            </div>

            <div class="contact-info-grid">
              <article class="contact-info-card reveal">
                <i class="bi bi-envelope"></i>
                <h2 data-i18n="emailTitle">البريد الإلكتروني</h2>
                <p>contact@tanzelat.app<br />support@tanzelat.app</p>
              </article>
              <article class="contact-info-card reveal">
                <i class="bi bi-telephone"></i>
                <h2 data-i18n="phoneTitle">رقم الهاتف</h2>
                <p>+966 50 123 4567<br />+966 11 987 6543</p>
              </article>
              <article class="contact-info-card reveal">
                <i class="bi bi-geo-alt"></i>
                <h2 data-i18n="locationTitle">الموقع</h2>
                <p data-i18n="locationText">الرياض، حي الملعا
المملكة العربية السعودية</p>
              </article>
            </div>

            <form class="contact-form reveal">
              <h2><i class="bi bi-pencil-square"></i><span data-i18n="sendMessageTitle">أرسل لنا رسالة</span></h2>
              <div class="form-grid">
                <label>
                  <span data-i18n="fullName">الاسم الكامل</span>
                  <input type="text" data-i18n-placeholder="fullNamePlaceholder" placeholder="أدخل اسمك هنا" required />
                </label>
                <label>
                  <span data-i18n="emailField">البريد الإلكتروني</span>
                  <input type="email" data-i18n-placeholder="emailPlaceholder" placeholder="example@domain.com" required />
                </label>
              </div>
              <label>
                <span data-i18n="subjectField">الموضوع</span>
                <input type="text" data-i18n-placeholder="subjectPlaceholder" placeholder="بخصوص ماذا تود مراسلتنا؟" required />
              </label>
              <label>
                <span data-i18n="messageField">الرسالة</span>
                <textarea data-i18n-placeholder="messagePlaceholder" placeholder="اكتب استفسارك أو اقتراحك هنا بالتفصيل..." required></textarea>
              </label>
              <button type="submit" data-i18n="sendMessage">إرسال الرسالة</button>
            </form>
          </section>
        </div>
      </div>
    </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?v=20260607-ads4"></script>
  </body>
</html>
