<?php
session_start();
$page_title = 'Help Center';
$active_nav = 'profile';
include("includes/header.php");

$faqs = [
    [
        'q' => 'How do I fund my wallet?',
        'a' => 'Go to Wallet from the bottom navigation, then tap "Fund Wallet" and follow the steps to top up. Your new balance is available immediately once payment confirms.',
    ],
    [
        'q' => 'How do I order at a restaurant?',
        'a' => 'Tap the QR icon in the bottom navigation, then "Start Camera" and point it at the restaurant\'s QR code (on the table or at the counter). This opens their menu — add items with the + button and tap "View Cart" to check out.',
    ],
    [
        'q' => 'How do I track an order after I\'ve placed it?',
        'a' => 'Open Orders from the bottom navigation and tap any order to see live status — Confirmed, Preparing, Ready to serve, and Served — with the page updating automatically as the restaurant updates it.',
    ],
    [
        'q' => 'Can I get help from a waiter without leaving the app?',
        'a' => 'Yes — on the Order Status page for an active order, tap "Call Server" to alert the restaurant that you need assistance.',
    ],
    [
        'q' => 'What if my wallet balance is short at checkout?',
        'a' => 'The Cart screen will tell you exactly how much more you need and link you straight to Fund Wallet — your cart is preserved, so you can come back and finish checking out right after topping up.',
    ],
    [
        'q' => 'How do I change my password or update my details?',
        'a' => 'Go to Settings → Personal Info to update your name or phone number, or Settings → Change Password to update your password.',
    ],
];
?>

<style>
.app-topbar { display: none; }
.main-content { padding-top: calc(env(safe-area-inset-top) + 6px); }
.hc-wrap { max-width: 600px; margin: 0 auto; }

.sub-topbar { display: flex; align-items: center; gap: 12px; padding: 4px 2px 18px; }
.sub-topbar .sub-back { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); background: var(--primary-bg); flex-shrink: 0; }
.sub-topbar .sub-title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }

.hc-heading { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; margin: 0 2px 16px; }

.faq-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(15,23,42,.06); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; cursor: pointer; font-weight: 700; font-size: .92rem; line-height: 1.4; touch-action: manipulation; }
.faq-q .faq-chevron { color: var(--text-light); flex-shrink: 0; transition: transform .2s; }
.faq-card.open .faq-chevron { transform: rotate(90deg); }
.faq-a { padding: 0 18px; font-size: .86rem; color: var(--text-muted); line-height: 1.65; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; }
.faq-card.open .faq-a { padding: 0 18px 18px; max-height: 360px; }

.hc-contact { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius: 20px; padding: 24px; margin-top: 26px; color: #fff; box-shadow: 0 10px 26px rgba(34,90,227,.28); }
.hc-contact h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.hc-contact p { font-size: .85rem; opacity: .9; margin-bottom: 18px; line-height: 1.5; }
.hc-contact a { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--primary); padding: 13px 20px; border-radius: 12px; font-weight: 700; font-size: .9rem; text-decoration: none; }
</style>

<div class="hc-wrap">

  <div class="sub-topbar">
    <a href="profile.php" class="sub-back" aria-label="Back" onclick="return goBack(event)">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5m0 0l7 7M5 12l7-7"/></svg>
    </a>
    <span class="sub-title">Help Center</span>
  </div>

  <h1 class="hc-heading">Frequently Asked Questions</h1>

  <?php foreach ($faqs as $i => $faq): ?>
  <div class="faq-card" id="faq-<?php echo $i; ?>">
    <div class="faq-q" onclick="toggleFaq(<?php echo $i; ?>)">
      <span><?php echo htmlspecialchars($faq['q']); ?></span>
      <svg class="faq-chevron" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
    </div>
    <div class="faq-a"><?php echo htmlspecialchars($faq['a']); ?></div>
  </div>
  <?php endforeach; ?>

  <div class="hc-contact">
    <h3>Still need help?</h3>
    <p>Reach us by call, WhatsApp or message and we'll get back to you as soon as we can.</p>
    <a href="contact_admin.php">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
      Contact Admin
    </a>
  </div>

</div>

<script>
function toggleFaq(i) {
  const card = document.getElementById('faq-' + i);
  const wasOpen = card.classList.contains('open');
  document.querySelectorAll('.faq-card.open').forEach(c => c.classList.remove('open'));
  if (!wasOpen) card.classList.add('open');
}
</script>

<?php include("includes/footer.php"); ?>
