<?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>Customer <span>Reviews</span></h1>
            <p>At <?php echo get_website_name(); ?>, our customers are at the heart of everything we do. We take pride
                in delivering exceptional chimney services and ensuring the safety and satisfaction of every homeowner
                we serve.</p>
        </div>
    </section>

    <!-- Breadcrumbs -->
    <div class="breadcrumb-container">
        <div class="container">
            <a href="/"><i class="fas fa-home"></i> Home</a> / <a href="/about-us/">About Us</a> / <span>Reviews</span>
        </div>
    </div>

    <!-- Reviews Section -->
    <section class="section-padding">
        <div class="container">
            <div class="row g-5">
                <!-- Reviews List -->
                <div class="col-lg-8">
                    <h2 class="section-title mb-5">What Our Clients Say</h2>

                    <div class="reviews-container">
                        <!-- This is where the Site Reviews shortcode/output would go -->
                        <!-- For now, we'll use a clean placeholder that matches the site style -->
                        <div class="pro-card mb-4 p-4 shadow-sm border-0">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="stars text-warning">
                                    <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i
                                        class="fas fa-star"></i><i class="fas fa-star"></i>
                                </div>
                                <span class="text-muted small">August 27, 2024</span>
                            </div>
                            <p class="review-text">"Wonderful, efficient and very professional service. I also learned
                                new practices to better keep my chimney in better condition, the best logs to use to
                                keep the chimney in maintained in good shape and the best time to have it serviced.
                                Thank you, Crest Chimney"</p>
                            <h5 class="mb-0 mt-3">Tommy Strickland</h5>
                        </div>

                        <div class="pro-card mb-4 p-4 shadow-sm border-0">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="stars text-warning">
                                    <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i
                                        class="fas fa-star"></i><i class="fas fa-star"></i>
                                </div>
                                <span class="text-muted small">August 27, 2024</span>
                            </div>
                            <p class="review-text">"I was very impressed with Daniel. He was organized and responsive.
                                He reviewed the scope of work and cost with us and followed up to see if we had any
                                questions. He showed up on time and was very careful with our brittle roof tiles. He did
                                great work, I would definitely hire him again!"</p>
                            <h5 class="mb-0 mt-3">Deja Arellano</h5>
                        </div>

                        <div class="pro-card mb-4 p-4 shadow-sm border-0">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="stars text-warning">
                                    <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i
                                        class="fas fa-star"></i><i class="fas fa-star"></i>
                                </div>
                                <span class="text-muted small">August 27, 2024</span>
                            </div>
                            <p class="review-text">"Was an incredible experience. I started the process on Yelp and
                                talked to Daniel on the phone. He was able to squeeze me in the same day and was super
                                informative. He installed two new match lit fireplace kits in my 2 pre-existing gas
                                fireplaces. Thank you!"</p>
                            <h5 class="mb-0 mt-3">Nathanial Rhodes</h5>
                        </div>
                    </div>

                    <div class="text-center mt-5">
                        <button class="btn-pro">Load More Reviews</button>
                    </div>
                </div>

                <!-- Review Summary & Form Sidebar -->
                <div class="col-lg-4">
                    <div class="sticky-top" style="top: 100px;">
                        <div class="pro-card p-4 shadow-sm border-0 mb-4 bg-light text-center">
                            <h3 class="h1 mb-0" style="color: var(--primary); font-weight: 800;">5.0</h3>
                            <div class="stars text-warning mb-2">
                                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i
                                    class="fas fa-star"></i><i class="fas fa-star"></i>
                            </div>
                            <p class="text-muted">Based on 3,190 reviews</p>
                            <hr>
                            <div class="rating-bars text-start">
                                <div class="d-flex align-items-center mb-2">
                                    <span class="me-2" style="width: 80px;">Excellent</span>
                                    <div class="progress flex-grow-1" style="height: 10px;">
                                        <div class="progress-bar bg-success" style="width: 98%;"></div>
                                    </div>
                                    <span class="ms-2">98%</span>
                                </div>
                                <div class="d-flex align-items-center mb-2">
                                    <span class="me-2" style="width: 80px;">Very Good</span>
                                    <div class="progress flex-grow-1" style="height: 10px;">
                                        <div class="progress-bar bg-primary" style="width: 2%;"></div>
                                    </div>
                                    <span class="ms-2">2%</span>
                                </div>
                            </div>
                        </div>

                        <div class="pro-card p-4 shadow-sm border-0">
                            <h4 class="mb-4">Leave a Review</h4>
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">Your Rating</label>
                                    <div class="stars text-warning fs-4 cursor-pointer">
                                        <i class="far fa-star"></i><i class="far fa-star"></i><i
                                            class="far fa-star"></i><i class="far fa-star"></i><i
                                            class="far fa-star"></i>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Your Name</label>
                                    <input type="text" class="form-control" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Your Review</label>
                                    <textarea class="form-control" rows="4" required></textarea>
                                </div>
                                <button type="submit" class="btn-pro w-100">Submit Review</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact CTA -->
    <section class="section-padding bg-dark text-white text-center">
        <div class="container">
            <h2 class="text-white mb-4">Experience Our <span>Award-Winning</span> Service</h2>
            <p class="lead mb-5 opacity-75">Join our list of satisfied customers today.</p>
            <a href="tel:<?php echo get_phone_number_tel(); ?>" class="btn-pro"><?php echo get_phone_number(); ?></a>
        </div>
    </section>
</main>

<style>
    .review-text {
        font-style: italic;
        line-height: 1.6;
        color: #4a5568;
    }

    .cursor-pointer {
        cursor: pointer;
    }
</style>

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