<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/config.php';
include BASE_PATH . '/include/header.php';
?>

<main id="content">
    <!-- Hero Section -->
    <section class="subpage-hero">
        <div class="container">
            <h1>Frequently <span>Asked</span> Questions</h1>
            <p>Find answers to common questions about our chimney services, maintenance, and safety standards.</p>
        </div>
    </section>

    <!-- Breadcrumbs -->
    <div class="breadcrumb-container">
        <div class="container">
            <a href="/"><i class="fas fa-home"></i> Home</a> / <span>FAQ</span>
        </div>
    </div>

    <!-- FAQ Content Section -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="row g-5">
                <!-- Main Content -->
                <div class="col-lg-8">
                    <!-- Wrapped in pro-card for the "Good" style background/shadow -->
                    <div class="pro-card">
                        <div class="accordion accordion-flush" id="faqAccordion">
                            <?php
                            $faqs = get_faqs();
                            if (!empty($faqs)):
                                foreach ($faqs as $index => $faq):
                                    $question = htmlspecialchars($faq['question']);
                                    $answer = $faq['answer'];
                                    $collapseId = "collapse-" . $index;
                                    $headingId = "heading-" . $index;
                                    ?>
                                    <div class="accordion-item border-0 border-bottom">
                                        <h2 class="accordion-header" id="<?php echo $headingId; ?>">
                                            <button
                                                class="accordion-button <?php echo $index !== 0 ? 'collapsed' : ''; ?> fw-bold py-4"
                                                type="button" data-bs-toggle="collapse"
                                                data-bs-target="#<?php echo $collapseId; ?>"
                                                aria-expanded="<?php echo $index === 0 ? 'true' : 'false'; ?>"
                                                aria-controls="<?php echo $collapseId; ?>"
                                                style="font-family: var(--font-heading); font-size: 1.1rem; color: var(--secondary-color);">
                                                <?php echo $question; ?>
                                            </button>
                                        </h2>
                                        <div id="<?php echo $collapseId; ?>"
                                            class="accordion-collapse collapse <?php echo $index === 0 ? 'show' : ''; ?>"
                                            aria-labelledby="<?php echo $headingId; ?>" data-bs-parent="#faqAccordion">
                                            <div class="accordion-body text-muted pb-4"
                                                style="line-height: 1.7; font-size: 1rem;">
                                                <?php echo $answer; ?>
                                            </div>
                                        </div>
                                    </div>
                                    <?php
                                endforeach;
                            endif;
                            ?>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <div class="pro-card">
                        <h3 class="h4 fw-bold mb-4" style="color: var(--secondary-color);">Still have questions?</h3>
                        <p class="text-muted mb-4">Our team is ready to help you with any specific concerns or to book
                            your next service.</p>
                        <div class="d-grid gap-3">
                            <a href="tel:<?php echo get_phone_number_tel(); ?>"
                                class="btn-pro text-center text-white text-decoration-none">
                                <i class="fas fa-phone-alt me-2"></i> Call Us Now
                            </a>
                            <a href="/contact-us/"
                                class="btn btn-outline-dark rounded-3 py-3 fw-bold text-decoration-none">
                                <i class="fas fa-envelope me-2"></i> Contact Us
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<style>
    /* Essential overrides for text wrapping and mobile alignment */
    .accordion-button {
        white-space: normal;
        /* Force wrap */
        word-wrap: break-word;
        /* Break long words */
        text-align: left;
        /* Align left */
        padding-right: 3rem !important;
        /* Space for arrow */
        box-shadow: none !important;
        /* Remove blue glow */
        background: transparent !important;
    }

    .accordion-button:not(.collapsed) {
        color: var(--primary-color) !important;
        background: rgba(<?php echo str_replace('#', '', get_site_color()); ?>, 0.05) !important;
    }

    .accordion-button::after {
        position: absolute;
        right: 1.25rem;
        top: 2rem;
        /* Align with top line of text roughly */
        background-size: 1.25rem;
    }

    /* Adjust arrow color */
    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23<?php echo str_replace('#', '', get_site_color()); ?>'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    /* Sidebar heading typography - refined for better breaks */
    .pro-card h3,
    .pro-card .h4 {
        overflow-wrap: break-word;
        max-width: 100%;
        line-height: 1.3;
    }

    /* Sidebar sticky adjustment */
    @media (max-width: 991px) {
        .pro-card.sticky-top {
            position: static !important;
            margin-top: 30px;
        }
    }

    /* Desktop responsiveness improvements for sidebar */
    @media (min-width: 992px) and (max-width: 1300px) {

        /* Reduce padding on medium desktops to give content more room */
        .col-lg-4 .pro-card {
            padding: 25px !important;
        }

        /* Adjust font size to fit narrower column */
        .col-lg-4 .pro-card h3 {
            font-size: 1.3rem !important;
        }
    }

    /* Ensure sticky doesn't overlap header if header is sticky */
    .sticky-top {
        z-index: 1020;
        /* Default bootstrap, ensuring visibility */
    }

    /* Mobile specific adjustments */
    @media (max-width: 576px) {

        .pro-card h3,
        .pro-card .h4 {
            font-size: 1.25rem;
            line-height: 1.4;
        }
    }
</style>


<?php include BASE_PATH . '/include/footer.php'; ?>