<?php
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/functions.php';
$pageTitle = 'Frequently Asked Questions';
$currentPage = 'faq';
$faqs = Database::fetchAll("SELECT * FROM faqs WHERE is_active=1 ORDER BY sort_order, id");
$categories = [];
foreach ($faqs as $f) { $categories[$f['category']][] = $f; }
include __DIR__ . '/includes/header.php';
?>

<section class="pt-28 pb-8 bg-navy-900">
  <div class="max-w-4xl mx-auto px-4">
    <div class="text-center mb-12">
      <div class="inline-flex items-center gap-2 bg-orange-600/10 border border-orange-600/30 rounded-full px-4 py-1.5 text-xs font-medium text-orange-400 uppercase tracking-wider mb-4">
        Got Questions?
      </div>
      <h1 class="text-4xl md:text-5xl font-black font-display mb-4">Frequently <span class="text-orange-500">Asked Questions</span></h1>
      <p class="text-gray-400 max-w-xl mx-auto">Everything you need to know about sourcing industrial equipment, our process, documentation, and technical standards.</p>
    </div>

    <?php if ($categories): ?>
      <?php foreach ($categories as $cat => $items): ?>
      <div class="mb-10">
        <div class="flex items-center gap-3 mb-4">
          <div class="h-px flex-1 bg-navy-500"></div>
          <span class="text-xs font-bold uppercase tracking-widest text-orange-400 px-2"><?= e($cat) ?></span>
          <div class="h-px flex-1 bg-navy-500"></div>
        </div>
        <div class="space-y-3">
          <?php foreach ($items as $i => $faq): ?>
          <div class="card-dark overflow-hidden">
            <button onclick="toggleFaq(<?= $faq['id'] ?>)"
              class="w-full text-left px-6 py-4 flex items-start justify-between gap-4 hover:bg-navy-700 transition-colors">
              <span class="font-medium text-sm leading-relaxed text-white"><?= e($faq['question']) ?></span>
              <span id="faq-icon-<?= $faq['id'] ?>" class="text-orange-500 text-xl flex-shrink-0 mt-0.5 transition-transform duration-200">+</span>
            </button>
            <div id="faq-body-<?= $faq['id'] ?>" class="hidden px-6 pb-5 border-t border-navy-500">
              <p class="text-sm text-gray-400 leading-relaxed pt-4"><?= nl2br(e($faq['answer'])) ?></p>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <?php endforeach; ?>
    <?php else: ?>
    <p class="text-center text-gray-400">No FAQs yet. Check back soon.</p>
    <?php endif; ?>

    <!-- Still have questions CTA -->
    <div class="mt-12 card-dark p-8 text-center border-orange-600/30">
      <div class="text-3xl mb-3">💬</div>
      <h3 class="text-xl font-bold mb-2">Still have questions?</h3>
      <p class="text-gray-400 text-sm mb-6">Our technical team is available Mon–Sat, 9am–6pm PKT. For urgent inquiries, WhatsApp is fastest.</p>
      <div class="flex flex-col sm:flex-row gap-3 justify-center">
        <a href="/contact.php" class="btn-primary px-6 py-2.5">Send Us a Message</a>
        <?php $wa = setting('whatsapp'); if ($wa): ?>
        <a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $wa) ?>" target="_blank" class="flex items-center justify-center gap-2 px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-medium transition-colors">
          <svg class="w-4 h-4" viewBox="0 0 32 32" fill="currentColor"><path d="M16 0C7.164 0 0 7.164 0 16c0 2.82.738 5.469 2.031 7.766L.062 31.078a.5.5 0 00.617.617l7.297-1.969A15.9 15.9 0 0016 32c8.836 0 16-7.164 16-16S24.836 0 16 0zm8.078 22.195c-.336.945-1.953 1.875-2.68 1.953-.688.074-1.328.324-4.336-.906-3.625-1.5-5.953-5.195-6.133-5.438-.18-.242-1.477-1.965-1.477-3.75s.934-2.664 1.266-3.023c.332-.359.723-.449.965-.449h.695c.223 0 .527-.086.824.629.309.742 1.047 2.559 1.14 2.742.094.184.156.398.031.637-.125.238-.188.387-.375.594-.188.207-.395.46-.562.617-.188.176-.383.367-.164.719.219.352.973 1.605 2.09 2.602 1.438 1.281 2.648 1.676 3 1.863.352.188.559.156.766-.094.207-.25.883-1.031 1.121-1.383.238-.352.477-.293.805-.176.328.117 2.082.984 2.441 1.164.359.18.598.27.688.418.09.148.09.852-.246 1.801z"/></svg>
          WhatsApp Us
        </a>
        <?php endif; ?>
      </div>
    </div>
  </div>
</section>

<script>
function toggleFaq(id) {
  const body = document.getElementById('faq-body-' + id);
  const icon = document.getElementById('faq-icon-' + id);
  const isOpen = !body.classList.contains('hidden');
  // Close all
  document.querySelectorAll('[id^="faq-body-"]').forEach(el => el.classList.add('hidden'));
  document.querySelectorAll('[id^="faq-icon-"]').forEach(el => { el.textContent = '+'; el.style.transform = ''; });
  if (!isOpen) {
    body.classList.remove('hidden');
    icon.textContent = '−';
  }
}
</script>

<?php include __DIR__ . '/includes/footer.php'; ?>
