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

$faqs = [
    [
        'q' => 'How do I add money to my wallet?',
        'a' => 'Tap Wallet in the bottom navigation, then "Fund Wallet", enter an amount and pay securely with your card via Paystack. Your balance updates immediately once payment confirms.',
    ],
    [
        'q' => 'How do I order at a restaurant?',
        'a' => 'Tap the scan (QR) button, then "Start Camera" and point it at the restaurant\'s QR code on the table or counter. Their menu opens — add items with the + button and tap the cart to check out and pay from your wallet.',
    ],
    [
        'q' => 'The camera won\'t scan the QR code. What do I do?',
        'a' => 'On the scan screen tap "Enter ID Manually" and type the restaurant code shown next to their QR (for example #104). That opens the same menu without needing the camera. Good lighting and holding steady also helps the scanner.',
    ],
    [
        'q' => 'How do I track my order?',
        'a' => 'Open Orders and tap the order. You\'ll see live status — Accepted, Preparing, Ready and Served — updating on its own as the restaurant progresses it. You\'ll also get a notification at each step if notifications are on.',
    ],
    [
        'q' => 'Can I call a waiter from the app?',
        'a' => 'Yes. While an order is active, open it in Orders and tap "Call Server" to let the restaurant know you need help at your table.',
    ],
    [
        'q' => 'My wallet balance is short at checkout — what happens?',
        'a' => 'The cart tells you exactly how much more you need and takes you straight to Fund Wallet. Your cart is saved, so once you top up you can come back and finish paying.',
    ],
    [
        'q' => 'How do I reorder something I had before?',
        'a' => 'Open Orders → Order History, choose a past order and tap "Reorder Items". Pick the items you want again (or add new ones from that restaurant) and continue to checkout.',
    ],
    [
        'q' => 'What is a meal ticket and how do I use it?',
        'a' => 'If your employer or organisation funds you on Dabil, that money lands in your meal-ticket balance and is included in your total wallet balance. It is simply spent first automatically when you pay for an order.',
    ],
    [
        'q' => 'Can I get a refund if my order is wrong or cancelled?',
        'a' => 'If a restaurant cancels an order or an item is unavailable, the amount is returned to your Dabil wallet. For any other refund request, use Settings → Contact Admin and our team will help.',
    ],
    [
        'q' => 'What is two-step verification and should I turn it on?',
        'a' => 'It adds a second check at login — a 6-digit code sent to your email (or from an authenticator app) — so no one can sign in with just your password. Turn it on under Settings → Security & Privacy → Two-Factor Authentication, and keep your backup codes somewhere safe.',
    ],
    [
        'q' => 'I forgot my password. How do I reset it?',
        'a' => 'On the sign-in screen tap "Forgot password?" (or "I forgot my password" on the Change Password screen), enter your email, and we\'ll send a code to reset it.',
    ],
    [
        'q' => 'Is my money and information safe?',
        'a' => 'Payments are processed by Paystack and we never store your full card details. Your password is encrypted, connections are secured, and you can add two-step verification for extra protection. See our Privacy Policy for more.',
    ],
    [
        'q' => 'How do I update my details or change my password?',
        'a' => 'Go to Settings → Personal Info to update your name or phone, or Settings → Security & Privacy → Change Password to change 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: 500px; }

.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"); ?>
