<?php
// Include configuration and models using existing init.php
require_once __DIR__ . '/app/Core/init.php';

// Set page variables
$page_title = 'Home';
$body_class = '';


// Initialize models
$itemModel = new Item();
$categoryModel = new Category();
$faqModel = new Faq();
$pageContentModel = new PageContent();
$reviewModel = new Review();


// Get data from database
try {
    // Get featured items for homepage
    $featured_items = $itemModel->getFeatured(8);
    
    // Get popular items
    $popular_items = $itemModel->getPopular(6);
    
    // Get all active categories
    $categories = $categoryModel->getActive();
    
    // Get featured FAQs
    $featured_faqs = $faqModel->getFeatured(3);
    
} catch (Exception $e) {
    // Handle database errors gracefully
    $featured_items = [];
    $popular_items = [];
    $categories = [];
    $featured_faqs = [];
    error_log('Database error: ' . $e->getMessage());
}

// Include header template
include __DIR__ . '/templates/layouts/frontend/header.php';
?>

    <!-- start hero header (waves) -->
    <div class="hero-header-waves overflow-hidden dark-overlay position-relative">
        <!-- start background image -->
        <div class="js-bg-image bg-cover bottom-0 end-0 position-absolute start-0 top-0" data-image-src="assets/images/header/lg-09.jpg"></div>
        <!-- end /. background image -->
        <div class="inner-header position-relative z-2">
            <div class="container">
                <h1 class="display-1 fw-bold hero-header_title text-capitalize text-white text-center mb-5">Find Items <span class="font-caveat text-span">Near</span> You</h1>
                <div class="lead mb-4 mb-sm-5 text-center text-white">Rent anything you need or earn by listing your items for rent.</div>
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <!-- start search content -->
                        <div class="border-0 card d-flex flex-md-row position-relative search-wrapper">
                            <form action="items.php" method="GET" class="d-flex w-100">
                                <div class="align-items-center d-flex search-field w-100">
                                    <div class="svg-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                                        </svg>
                                    </div>
                                    <!-- start input -->
                                    <input type="text" name="search" class="form-control search-input" placeholder="Search for items, categories or locations">
                                    <!-- end /. input -->
                                </div>
                                <div class="vertical-divider"></div>
                                <div class="align-items-center d-flex search-field w-100">
                                    <div class="svg-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
                                            <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" />
                                            <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
                                        </svg>
                                    </div>
                                    <!-- start select -->
                                    <select name="location" class="form-select search-select-field">
                                        <option value="">All Locations</option>
                                        <?php
                                        // Get unique locations from database
                                        $locations_sql = "SELECT DISTINCT city, state FROM items WHERE status = 'approved' AND approval_status = 'approved' ORDER BY city, state LIMIT 50";
                                        $locations = $db->fetchAll($locations_sql);
                                        foreach ($locations as $location):
                                        ?>
                                            <option value="<?= htmlspecialchars($location['city'] . ', ' . $location['state']) ?>">
                                                <?= htmlspecialchars($location['city'] . ', ' . $location['state']) ?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                    <!-- end /. select -->
                                </div>
                                <button type="submit" class="btn btn-primary rounded-5 mt-3 mt-md-0">Search Items</button>
                            </form>
                        </div>
                        <!-- end /. search content -->
                    </div>
                </div>
            </div>
        </div>
        <!-- waves container -->
        <div class="position-relative z-2">
            <svg class="waves waves-light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <defs>
                    <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="48" y="0" />
                    <use xlink:href="#gentle-wave" x="48" y="3" />
                    <use xlink:href="#gentle-wave" x="48" y="5" />
                    <use xlink:href="#gentle-wave" x="48" y="7" />
                </g>
            </svg>
        </div>
        <!-- end /. waves container -->
    </div>
    <!-- end /. hero header (waves) -->

    <!-- start categories section -->
    <div class="py-5 position-relative overflow-hidden bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-sm-10 col-md-10 col-lg-8 col-xl-7">
                    <!-- start section header -->
                    <div class="section-header text-center mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">Categories</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-6 fw-semibold mb-0 section-header__title text-capitalize">Browse by Category</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16">Find the perfect item for your needs from our diverse categories.</div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
            </div>
            <div class="row g-4">
                <?php if (!empty($categories)): ?>
                    <?php foreach (array_slice($categories, 0, 8) as $category): ?>
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <!-- start category card -->
                            <div class="border-0 card card-hover h-100 rounded-4 text-center p-4" data-aos="fade-up">
                                <div class="card-body">
                                    <!-- start category icon -->
                                    <div class="category-icon mx-auto mb-3">
                                        <?php if (!empty($category['icon'])): ?>
                                            <i class="<?= htmlspecialchars($category['icon']) ?> fs-1 text-primary"></i>
                                        <?php else: ?>
                                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                                <i class="fas fa-cube fs-2 text-primary"></i>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    <!-- end /. category icon -->
                                    <!-- start category title -->
                                    <h5 class="fw-semibold mb-2"><?= htmlspecialchars($category['name']) ?></h5>
                                    <!-- end /. category title -->
                                    <!-- start category count -->
                                    <p class="text-muted small mb-0"><?= $category['total_items'] ?> items available</p>
                                    <!-- end /. category count -->
                                </div>
                                <div class="card-footer bg-transparent border-0 pt-0">
                                    <a href="items.php?category=<?= urlencode($category['slug']) ?>" class="btn btn-outline-primary w-100">View Items</a>
                                </div>
                            </div>
                            <!-- end /. category card -->
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <!-- Default categories when database is empty -->
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="border-0 card card-hover h-100 rounded-4 text-center p-4">
                            <div class="card-body">
                                <div class="category-icon mx-auto mb-3">
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                        <i class="fas fa-car fs-2 text-primary"></i>
                                    </div>
                                </div>
                                <h5 class="fw-semibold mb-2">Vehicles</h5>
                                <p class="text-muted small mb-0">Cars, bikes, and more</p>
                            </div>
                            <div class="card-footer bg-transparent border-0 pt-0">
                                <a href="items.php?category=vehicles" class="btn btn-outline-primary w-100">View Items</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="border-0 card card-hover h-100 rounded-4 text-center p-4">
                            <div class="card-body">
                                <div class="category-icon mx-auto mb-3">
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                        <i class="fas fa-tools fs-2 text-primary"></i>
                                    </div>
                                </div>
                                <h5 class="fw-semibold mb-2">Tools & Equipment</h5>
                                <p class="text-muted small mb-0">Power tools and machinery</p>
                            </div>
                            <div class="card-footer bg-transparent border-0 pt-0">
                                <a href="items.php?category=tools" class="btn btn-outline-primary w-100">View Items</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="border-0 card card-hover h-100 rounded-4 text-center p-4">
                            <div class="card-body">
                                <div class="category-icon mx-auto mb-3">
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                        <i class="fas fa-camera fs-2 text-primary"></i>
                                    </div>
                                </div>
                                <h5 class="fw-semibold mb-2">Electronics</h5>
                                <p class="text-muted small mb-0">Cameras, laptops, gadgets</p>
                            </div>
                            <div class="card-footer bg-transparent border-0 pt-0">
                                <a href="items.php?category=electronics" class="btn btn-outline-primary w-100">View Items</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="border-0 card card-hover h-100 rounded-4 text-center p-4">
                            <div class="card-body">
                                <div class="category-icon mx-auto mb-3">
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                                        <i class="fas fa-home fs-2 text-primary"></i>
                                    </div>
                                </div>
                                <h5 class="fw-semibold mb-2">Home & Garden</h5>
                                <p class="text-muted small mb-0">Furniture and appliances</p>
                            </div>
                            <div class="card-footer bg-transparent border-0 pt-0">
                                <a href="items.php?category=home-garden" class="btn btn-outline-primary w-100">View Items</a>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <!-- end /. categories section -->

    <!-- start featured items section -->
    <div class="py-5">
        <div class="container">
            <div class="align-items-end row g-4 mb-5" data-aos="fade-down">
                <div class="col">
                    <!-- start section header -->
                    <div class="section-header">
                        <!-- start subtitle -->
                        <div class="font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-center text-xl-start text-primary">Featured</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="fw-semibold mb-0 section-header__title text-capitalize text-center text-xl-start display-6">Featured Items</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16 text-center text-xl-start">Discover our handpicked selection of premium items available for rent.</div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
                <div class="col-12 col-xl-auto">
                    <!-- start button -->
                    <a href="items.php" class="align-items-center d-flex fs-14 fw-bold gap-2 justify-content-center justify-content-xl-end l-spacing-1 text-primary text-uppercase">
                        View All Items
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                        </svg>
                    </a>
                    <!-- end /. button -->
                </div>
            </div>
            <div class="row g-4">
                <?php if (!empty($featured_items)): ?>
                    <?php foreach ($featured_items as $item): ?>
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <!-- start item card -->
                            <div class="border-0 card card-hover h-100 rounded-4 overflow-hidden" data-aos="fade-up">
                                <a href="item-details.php?slug=<?= $item['slug'] ?>" class="stretched-link"></a>
                                <div class="position-relative">
                                    <!-- start item image -->
                                    <?php 
                                    $main_image = !empty($images) ? $images[0] : (!empty($item['main_image']) ? upload('items/' . $item['main_image']) : 'assets/images/default-item.jpg'); ?>
                                    <img src="<?= htmlspecialchars($main_image) ?>" alt="<?= htmlspecialchars($item['title']) ?>" class="card-img-top h-200 object-fit-cover">
                                    <!-- end /. item image -->
                                    <!-- start badges -->
                                    <?php if ($item['featured']): ?>
                                        <div class="position-absolute top-0 start-0 m-3">
                                            <span class="badge bg-primary">Featured</span>
                                        </div>
                                    <?php endif; ?>
                                    <!-- end /. badges -->
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <span class="badge bg-light text-dark"><?= htmlspecialchars($item['category_name']) ?></span>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-star text-warning me-1"></i>
                                            <span class="small"><?= number_format($item['average_rating'] ?? 0, 1) ?> (<?= $item['total_reviews'] ?? 0 ?>)</span>
                                        </div>
                                    </div>
                                    <!-- start item title -->
                                    <h5 class="fw-semibold mb-2"><?= htmlspecialchars($item['title']) ?></h5>
                                    <!-- end /. item title -->
                                    <!-- start location -->
                                    <p class="text-muted small mb-2">
                                        <i class="fas fa-map-marker-alt me-1"></i>
                                        <?= htmlspecialchars($item['location'] ?? $item['city'] . ', ' . $item['state']) ?>
                                    </p>
                                    <!-- end /. location -->
                                    <!-- start price -->
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="fs-5 fw-bold text-primary">&#8358;<?= number_format($item['price_per_day'], 2) ?></span>
                                            <span class="text-muted small">/day</span>
                                        </div>
                                        <span class="badge <?= $item['availability_status'] === 'available' ? 'bg-success' : 'bg-danger' ?>">
                                            <?= ucfirst($item['availability_status']) ?>
                                        </span>
                                    </div>
                                    <!-- end /. price -->
                                </div>
                            </div>
                            <!-- end /. item card -->
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <!-- Default items when database is empty -->
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="border-0 card card-hover h-100 rounded-4 overflow-hidden">
                            <div class="position-relative">
                                <img src="assets/images/items/default-1.jpg" alt="Sample Item" class="card-img-top h-200 object-fit-cover">
                                <div class="position-absolute top-0 start-0 m-3">
                                    <span class="badge bg-primary">Featured</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <span class="badge bg-light text-dark">Electronics</span>
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-star text-warning me-1"></i>
                                        <span class="small">4.5 (25)</span>
                                    </div>
                                </div>
                                <h5 class="fw-semibold mb-2">Professional Camera</h5>
                                <p class="text-muted small mb-2">
                                    <i class="fas fa-map-marker-alt me-1"></i>
                                    New York, NY
                                </p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="fs-5 fw-bold text-primary">&#8358;45.00</span>
                                        <span class="text-muted small">/day</span>
                                    </div>
                                    <span class="badge bg-success">Available</span>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <!-- end /. featured items section -->

    <!-- start popular items section -->
    <div class="py-5 bg-light rounded-4 mx-3 my-3 bg-size-contain js-bg-image js-bg-image-lines" data-image-src="assets/images/lines.svg">
        <div class="container">
            <div class="align-items-end row g-4 mb-5" data-aos="fade-down">
                <div class="col">
                    <!-- start section header -->
                    <div class="section-header">
                        <!-- start subtitle -->
                        <div class="font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-center text-xl-start text-primary">Popular</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="fw-semibold mb-0 section-header__title text-capitalize text-center text-xl-start display-6">Most Popular Items</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16 text-center text-xl-start">Discover the most booked items by our community.</div>
                        <!-- end /. description -->
                    </div>
                    <!-- end /. section header -->
                </div>
                <div class="col-12 col-xl-auto">
                    <!-- start button -->
                    <a href="items.php" class="align-items-center d-flex fs-14 fw-bold gap-2 justify-content-center justify-content-xl-end l-spacing-1 text-primary text-uppercase">
                        See All
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                        </svg>
                    </a>
                    <!-- end /. button -->
                </div>
            </div>
            <div class="row g-4">
                <?php if (!empty($popular_items)): ?>
                    <?php foreach (array_slice($popular_items, 0, 4) as $item): ?>
                        <div class="col-lg-6 d-flex">
                            <!-- start card list -->
                            <div class="border-0 card card-hover flex-fill overflow-hidden rounded-4 w-100">
                                <a href="item-details.php?slug=<?= $item['slug'] ?>" class="stretched-link"></a>
                                <div class="card-body p-0">
                                    <div class="g-0 h-100 row">
                                        <div class="bg-white col-lg-5 col-md-5 col-xxl-5 position-relative">
                                            <div class="card-image-hover dark-overlay h-100 overflow-hidden position-relative">
                                                <!-- start image -->
                                                <?php 
                                                $main_image = !empty($images) ? $images[0] : (!empty($item['main_image']) ? upload('items/' . $item['main_image']) : 'assets/images/default-item.jpg'); ?>
                                                <img src="<?= htmlspecialchars($main_image) ?>" alt="<?= htmlspecialchars($item['title']) ?>" class="card-img-top h-200 object-fit-cover">
                                                <!-- end /. image -->
                                                <div class="align-items-center bg-blur border-0 card-badge d-flex d-inline-block fw-semibold gap-1 position-absolute start-0 text-uppercase text-white z-2">
                                                    <i class="fa-solid fa-fire me-1"></i>Popular
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-7 col-md-7 col-xxl-7 p-3 p-lg-4 p-md-3 p-sm-4">
                                            <div class="d-flex flex-column h-100">
                                                <div class="d-flex end-0 gap-2 me-3 mt-3 position-absolute top-0 z-1">
                                                    <a href="#" class="align-items-center bg-light btn-icon d-flex justify-content-center rounded-circle text-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bookmark">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                                                            <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"></path>
                                                        </svg>
                                                    </a>
                                                </div>
                                                <div class="align-items-center d-flex flex-wrap gap-1 text-primary card-start mb-2">
                                                    <!-- start ratings -->
                                                    <i class="fa-solid fa-star"></i>
                                                    <!-- end /. ratings -->
                                                    <!-- start rating counter text -->
                                                    <span class="fw-medium text-primary"><span class="fs-6 fw-semibold me-1">(<?= number_format($item['average_rating'] ?? 0, 1) ?>)</span><?= $item['total_reviews'] ?? 0 ?> reviews</span>
                                                    <!-- end /. rating counter text -->
                                                </div>
                                                <!-- start card title -->
                                                <h4 class="fs-19 fw-semibold mb-0">
                                                    <span><?= htmlspecialchars($item['title']) ?></span>
                                                    <?php if ($item['total_bookings'] > 10): ?>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-patch-check-fill text-success" viewBox="0 0 16 16">
                                                            <path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"></path>
                                                        </svg>
                                                    <?php endif; ?>
                                                </h4>
                                                <!-- end /. card title -->
                                                <!-- start card description -->
                                                <p class="mt-1 fs-14 text-muted"><?= htmlspecialchars($item['location'] ?? $item['city'] . ', ' . $item['state']) ?></p>
                                                <!-- end /. card description -->
                                                <!-- start contact content -->
                                                <div class="d-flex flex-wrap gap-3 gap-lg-2 gap-xl-3 mt-auto z-1">
                                                    <div class="d-flex gap-2 align-items-center fs-13 fw-semibold">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="#9b9b9b" class="bi bi-currency-dollar" viewBox="0 0 16 16">
                                                            <path d="M4 10.781a.717.717 0 0 1 1.105-.448l1.702 1.702A3.951 3.951 0 0 0 8 12.25c1.104 0 2.128-.27 3.193-.758l1.702-1.702A.717.717 0 0 1 14 10.781V8.75a.25.25 0 0 1-.25-.25v-.25a.75.75 0 0 0-.75-.75H9.25a.75.75 0 0 0-.75.75v.25c0 .138.112.25.25.25h3.5c.138 0 .25-.112.25-.25v-.25a.25.25 0 0 1 .25-.25h1.75a.75.75 0 0 0 .75-.75V8.75a.25.25 0 0 1-.25-.25H9.25a.75.75 0 0 0-.75.75v.25c0 .414.336.75.75.75h1.75a.25.25 0 0 1 .25.25v.25c0 .414.336.75.75.75h1.75a.75.75 0 0 0 .75-.75V10.781Z"/>
                                                            <path d="M3 0h10a1 1 0 0 1 1 1v1H2V1a1 1 0 0 1 1-1Zm2 3h8v1H5V3Zm2 3h6v1H7V6Zm2 3h4v1H9V9Zm2 3h2v1h-2v-1Z"/>
                                                        </svg>
                                                        <span>&#8358;<?= number_format($item['price_per_day'], 2) ?>/day</span>
                                                    </div>
                                                    <span class="badge <?= $item['availability_status'] === 'available' ? 'bg-success' : 'bg-danger' ?>">
                                                        <?= ucfirst($item['availability_status']) ?>
                                                    </span>
                                                </div>
                                                <!-- end contact content -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end /. card list -->
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <!-- end /. popular items section -->

    <!-- start FAQ section -->
    <?php if (!empty($featured_faqs)): ?>
    <div class="py-5 bg-light overflow-hidden position-relative">
        <div class="decoration blur-2 z-1"></div>
        <div class="decoration blur-3 z-1"></div>
        <div class="container">
            <div class="row">
                <div class="col-xl-4 sidebar">
                    <!-- start section header -->
                    <div class="section-header mb-5" data-aos="fade-down">
                        <!-- start subtitle -->
                        <div class="d-inline-block font-caveat fs-1 fw-medium section-header__subtitle text-capitalize text-primary">FAQ</div>
                        <!-- end /. subtitle -->
                        <!-- start title -->
                        <h2 class="display-6 fw-semibold mb-3 section-header__title text-capitalize">Frequently Asked Questions</h2>
                        <!-- end /. title -->
                        <!-- start description -->
                        <div class="sub-title fs-16">Find answers to common questions about renting items on our platform.</div>
                        <!-- end /. description -->
                        <div>
                            <a href="faq.php" class="btn btn-primary mt-4">View All FAQs</a>
                        </div>
                    </div>
                    <!-- end /. section header -->
                </div>
                <div class="col-xl-8 content ps-xxl-5">
                    <!-- start FAQ accordion -->
                    <div class="accordion" id="faqAccordion">
                        <?php foreach ($featured_faqs as $index => $faq): ?>
                            <div class="accordion-item" data-aos="fade-up" data-aos-delay="<?= $index * 100 ?>">
                                <h2 class="accordion-header" id="faqHeading<?= $faq['id'] ?>">
                                    <button class="accordion-button <?= $index > 0 ? 'collapsed' : '' ?>" type="button" data-bs-toggle="collapse" data-bs-target="#faqCollapse<?= $faq['id'] ?>" aria-expanded="<?= $index === 0 ? 'true' : 'false' ?>" aria-controls="faqCollapse<?= $faq['id'] ?>">
                                        <?= htmlspecialchars($faq['question']) ?>
                                    </button>
                                </h2>
                                <div id="faqCollapse<?= $faq['id'] ?>" class="accordion-collapse collapse <?= $index === 0 ? 'show' : '' ?>" aria-labelledby="faqHeading<?= $faq['id'] ?>" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <?= nl2br(htmlspecialchars($faq['answer'])) ?>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <!-- end /. FAQ accordion -->
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>
    <!-- end /. FAQ section -->

<?php
// Include footer template
include __DIR__ . '/templates/layouts/frontend/footer.php';
?>