<?php
declare(strict_types=1);
require_once __DIR__ . '/config.php';
require_once __DIR__ . '/includes/functions.php';
$faqs = faqs_all();
$pageTitle = 'FAQ — ' . setting('company_name', SITE_NAME);
$current = 'faq';
$breadcrumbTitle = 'FAQ';
require __DIR__ . '/includes/head.php';
require __DIR__ . '/includes/preloader.php';
require __DIR__ . '/includes/offcanvas.php';
require __DIR__ . '/includes/header.php';
require __DIR__ . '/includes/breadcrumb.php';
?>
  <main>
    <section class="ot-faq-area ot-space ot-faq-inner-style">
      <div class="container">
        <style>
          .faq-pro-intro {
            max-width: 780px;
            margin: 0 auto 48px;
            text-align: center;
          }

          .faq-pro-wrap {
            max-width: 920px;
            margin: 0 auto;
          }

          .faq-pro-wrap .accordion-card {
            border: 1px solid #e7edf5;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 8px 22px rgba(4, 34, 62, 0.05);
            margin-bottom: 14px;
          }

          .faq-pro-wrap .accordion-button {
            font-weight: 700;
            color: var(--ot-title-color);
            padding: 20px 22px;
          }

          .faq-pro-wrap .accordion-button:not(.collapsed) {
            background: rgba(232, 136, 46, 0.1);
            color: var(--ot-title-color);
          }

          .faq-pro-wrap .accordion-body {
            color: #5e6a7d;
            line-height: 1.75;
            padding: 0 22px 20px 22px;
          }

          .faq-pro-cta {
            max-width: 920px;
            margin: 24px auto 0;
            padding: 22px;
            border-radius: 12px;
            background: #fff5eb;
            border: 1px solid rgba(232, 136, 46, 0.28);
          }
        </style>

        <div class="faq-pro-intro">
          <span class="ot-sec-subtitle">FAQs</span>
          <h3 class="ot-sec-title ot-text-anime-3">Frequently Asked Questions</h3>
          <p class="ot-sec-text">
            Find answers to common questions about solar panel installation, maintenance,
            timelines, and support from Bhatt Enterprises.
          </p>
        </div>

        <div class="accordion ot-faq-style-2 faq-pro-wrap" id="faqAcc">
          <?php if ($faqs): ?>
            <?php foreach ($faqs as $idx => $f): $cid = 'faq' . $f['id']; $show = $idx === 0 ? 'show' : ''; $collapsed = $idx === 0 ? '' : 'collapsed'; ?>
              <div class="accordion-card">
                <h2 class="accordion-header">
                  <button class="accordion-button <?= $collapsed ?>" type="button" data-bs-toggle="collapse" data-bs-target="#<?= h($cid) ?>" aria-expanded="<?= $idx === 0 ? 'true' : 'false' ?>">
                    <?= h((string)$f['question']) ?>
                    <span class="accordion-icon"></span>
                  </button>
                </h2>
                <div id="<?= h($cid) ?>" class="accordion-collapse collapse <?= $show ?>" data-bs-parent="#faqAcc">
                  <div class="accordion-body"><?= nl2br(h((string)$f['answer'])) ?></div>
                </div>
              </div>
            <?php endforeach; ?>
          <?php else: ?>
            <div class="accordion-card">
              <div class="accordion-body pt-20 pb-20">
                FAQs will appear here once added from the admin panel.
              </div>
            </div>
          <?php endif; ?>
        </div>

        <div class="faq-pro-cta d-flex flex-wrap align-items-center justify-content-between gap-3">
          <p class="mb-0">Still have questions? Our team is ready to help with personalized guidance.</p>
          <a href="contact.php" class="ot-btn-primary">Contact Us</a>
        </div>
      </div>
    </section>
  </main>
<?php require __DIR__ . '/includes/footer.php'; ?>
