<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <%- include('partials/landing-head', {
    pageTitle: 'الأسئلة الشائعة',
    description: 'إجابات على الأسئلة الأكثر تكراراً حول Artal CRM: التسجيل، الأسعار، الميزات، الأمان، والدعم'
  }) %>
  <style>
    .faq-item { background: white; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
    .faq-question { padding: 18px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #0f1a30; font-size: 16px; }
    .faq-question:hover { background: #f8fafc; }
    .faq-question .arrow { transition: transform 0.2s; color: #4f6bed; }
    .faq-item.open .arrow { transform: rotate(180deg); }
    .faq-answer { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height 0.3s, padding 0.3s; color: #475569; font-size: 15px; line-height: 1.8; }
    .faq-item.open .faq-answer { max-height: 600px; padding: 0 22px 18px; }
    .faq-category { margin-bottom: 36px; }
    .faq-category h2 { font-size: 22px; color: #1a3c6e; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; }
  </style>
</head>
<body>
  <%- include('partials/landing-nav') %>

  <main class="container">
    <div class="page-header">
      <h1>الأسئلة الشائعة</h1>
      <p>كل ما تريد معرفته قبل البدء</p>
    </div>

    <%
      const FAQ_CATEGORIES = [
        {
          title: '🚀 التسجيل والبدء',
          items: [
            { q: 'كم يستغرق إنشاء حساب جديد؟', a: 'أقل من 30 ثانية. تملأ نموذجاً قصيراً، ونُولّد لك رابطاً مخصصاً لشركتك، وحساب جاهز للعمل فوراً.' },
            { q: 'هل أحتاج بطاقة ائتمان للتسجيل؟', a: 'لا. تجربة 14 يوم مجانية كاملة دون الحاجة لأي وسيلة دفع. تختار الترقية فقط إذا أعجبتك التجربة.' },
            { q: 'هل يمكنني استيراد عملائي الحاليين؟', a: 'نعم. سنوفّر قريباً أداة استيراد جماعي من Excel/CSV لنقل بياناتك دفعة واحدة.' },
            { q: 'ماذا يحدث بعد انتهاء الفترة التجريبية؟', a: 'سنُذكّرك قبل الانتهاء بأسبوع. إذا لم ترغب في الترقية، يبقى الحساب موقوفاً ولكن بياناتك محفوظة لمدة 30 يوم قبل الحذف النهائي.' },
          ],
        },
        {
          title: '💰 الأسعار والاشتراكات',
          items: [
            { q: 'كم سعر الاشتراك؟', a: 'سنُعلن عن الخطط رسمياً قريباً. حالياً جميع المستخدمين الأوائل يحصلون على تجربة كاملة لمدة 14 يوم + تخفيضات خاصة عند الإطلاق.' },
            { q: 'هل يمكنني إلغاء الاشتراك في أي وقت؟', a: 'نعم. لا التزامات سنوية إجبارية. تستطيع إلغاء أو تخفيض خطتك في أي وقت من إعدادات الحساب.' },
            { q: 'هل تدعمون فواتير ضريبية؟', a: 'نعم. سنُصدر فواتير ضريبية متوافقة مع متطلبات ZATCA السعودية (تكامل قادم).' },
            { q: 'هل عندكم خصومات للجمعيات الخيرية أو ناشئة؟', a: 'نعم — تواصل معنا لاحقاً لمناقشة عرض مخصص.' },
          ],
        },
        {
          title: '🔒 الأمان والخصوصية',
          items: [
            { q: 'أين تُحفظ بياناتي؟', a: 'في خوادم آمنة في منطقة الشرق الأوسط، مع تشفير في النقل (TLS 1.3) وفي التخزين. كل عميل لديه قاعدة بيانات منفصلة تماماً.' },
            { q: 'هل يستطيع أحد رؤية بيانات عملائي؟', a: 'لا أحد إلا أنت والمستخدمين الذين تمنحهم صلاحيات. حتى فريقنا الفني لا يصل إلى بياناتك إلا بطلب صريح منك للدعم.' },
            { q: 'ماذا لو حذفت حسابي؟', a: 'تُحذف كل بياناتك بشكل دائم خلال 30 يوم. يمكنك أيضاً تصدير بياناتك قبل الحذف.' },
            { q: 'هل تأخذون نسخاً احتياطية؟', a: 'نعم. نسخ يومية تلقائية، محفوظة لمدة 30 يوم. يمكن استعادة بياناتك في أي وقت.' },
          ],
        },
        {
          title: '✨ الميزات',
          items: [
            { q: 'هل يعمل على الجوال؟', a: 'نعم — منصة web-first مُحسّنة للجوال بشكل كامل. المندوب في الميدان يستطيع تسجيل زياراته من الجوال مباشرة، مع تحديد موقعه على الخريطة.' },
            { q: 'هل يتكامل مع واتساب؟', a: 'نعم — يوجد زر "واتساب" بجانب كل عميل لفتح المحادثة مباشرة. تكامل WhatsApp Business API قادم قريباً.' },
            { q: 'هل يدعم تعدد المستخدمين؟', a: 'نعم. تستطيع إضافة عدد غير محدود من المندوبين والمدراء، مع تحديد صلاحيات كل واحد.' },
            { q: 'هل يوجد تقارير وإحصاءات؟', a: 'نعم. تقارير لحظية عن: أداء كل مندوب، حجم الصفقات، معدلات الإغلاق، أهداف شهرية، وغيرها.' },
            { q: 'هل يمكنني تخصيص الحقول؟', a: 'هذه الميزة قادمة قريباً. حالياً نوفّر حقولاً قياسية تغطي معظم القطاعات.' },
          ],
        },
        {
          title: '🛠 الدعم الفني',
          items: [
            { q: 'كيف أتواصل معكم؟', a: 'عبر صفحة <a href="/contact">اتصل بنا</a> أو واتساب أو إيميل الدعم. نرد عادة خلال 24 ساعة عمل.' },
            { q: 'هل يوجد دعم باللغة العربية؟', a: 'نعم — كل فريق الدعم يتحدث العربية والإنجليزية بطلاقة.' },
            { q: 'هل تقدمون تدريباً للفريق؟', a: 'نعم. للعملاء على خطة Pro و Enterprise، نقدم جلسة تدريب أونلاين مجانية لمدة ساعة.' },
          ],
        },
      ];
    %>

    <% FAQ_CATEGORIES.forEach(cat => { %>
    <div class="faq-category">
      <h2><%= cat.title %></h2>
      <% cat.items.forEach(item => { %>
      <div class="faq-item">
        <div class="faq-question" onclick="this.parentElement.classList.toggle('open')">
          <span><%= item.q %></span>
          <span class="material-symbols-rounded arrow">expand_more</span>
        </div>
        <div class="faq-answer"><%- item.a %></div>
      </div>
      <% }) %>
    </div>
    <% }) %>

    <div style="text-align:center;margin-top:30px;padding:30px;background:white;border-radius:16px">
      <h3 style="color:#0f1a30;font-size:18px;margin-bottom:8px">لم تجد إجابتك؟</h3>
      <p style="color:#64748b;margin-bottom:20px">فريقنا جاهز للإجابة على كل أسئلتك</p>
      <a href="/contact" class="btn btn-primary" style="display:inline-flex">تواصل معنا</a>
    </div>
  </main>

  <!-- Schema.org FAQPage -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      <% const allFaqs = FAQ_CATEGORIES.flatMap(c => c.items); %>
      <% allFaqs.forEach((item, i) => { %>
      {
        "@type": "Question",
        "name": "<%= item.q.replace(/"/g, '\\"') %>",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "<%= item.a.replace(/<[^>]*>/g, '').replace(/"/g, '\\"') %>"
        }
      }<%= i < allFaqs.length - 1 ? ',' : '' %>
      <% }) %>
    ]
  }
  </script>

  <%- include('partials/landing-footer') %>
</body>
</html>
