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

// Initialize models
$itemModel = new Item();
$categoryModel = new Category();
$pageContentModel = new PageContent();

// Set page variables
$page_title = 'About Us';
$body_class = '';

// Get page content if available
try {
    $about_page = $pageContentModel->findBySlug('about-us');
    $stats = [
        'total_items' => $itemModel->getTotalCount(),
        'total_vendors' => $db->fetch("SELECT COUNT(*) as count FROM vendors")['count'] ?? 0,
        'total_customers' => $db->fetch("SELECT COUNT(*) as count FROM customers")['count'] ?? 0,
        'total_categories' => $db->fetch("SELECT COUNT(*) as count FROM categories WHERE status = 'active'")['count'] ?? 0
    ];
} catch (Exception $e) {
    $about_page = null;
    $stats = ['total_items' => 0, 'total_vendors' => 0, 'total_customers' => 0, 'total_categories' => 0];
    error_log('Database error: ' . $e->getMessage());
}

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

    <!-- start hero section -->
    <div class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <h1 class="display-4 fw-bold mb-4">About rentidium</h1>
                    <p class="lead text-muted">Your trusted marketplace for renting and sharing items. We connect people who need items with those who have them to share.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- end hero section -->

    <!-- start about content -->
    <div class="py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <h2 class="mb-4">Our Story</h2>
                    <p class="mb-4">rentidium was born from a simple idea: why buy when you can rent? In a world where we increasingly value access over ownership, we saw the need for a trusted platform where people could easily rent items they need for short periods.</p>
                    <p class="mb-4">Founded with the vision of creating a sharing economy that benefits everyone, rentidium has grown into a comprehensive marketplace connecting thousands of renters with item owners across the country.</p>
                    <p class="mb-4">Whether you need a power tool for a weekend project, a camera for a special event, or equipment for a business venture, rentidium makes it easy to find exactly what you need from trusted local providers.</p>
                    
                    <div class="row g-4 mt-4">
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-primary fw-bold"><?= number_format($stats['total_items']) ?></h3>
                                <p class="text-muted mb-0">Items Available</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-primary fw-bold"><?= number_format($stats['total_vendors']) ?></h3>
                                <p class="text-muted mb-0">Trusted Vendors</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-primary fw-bold"><?= number_format($stats['total_customers']) ?></h3>
                                <p class="text-muted mb-0">Happy Customers</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="text-primary fw-bold"><?= number_format($stats['total_categories']) ?></h3>
                                <p class="text-muted mb-0">Categories</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img src="assets/images/about-us.jpg" alt="About rentidium" class="img-fluid rounded-4 shadow">
                </div>
            </div>
        </div>
    </div>
    <!-- end about content -->

    <!-- start mission & vision -->
    <div class="py-5 bg-light">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-4">
                    <div class="text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="fas fa-bullseye fs-3 text-primary"></i>
                        </div>
                        <h4>Our Mission</h4>
                        <p class="text-muted">To create a sustainable sharing economy where everyone has access to the items they need, reducing waste and promoting community connections.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="fas fa-eye fs-3 text-primary"></i>
                        </div>
                        <h4>Our Vision</h4>
                        <p class="text-muted">To become the leading platform for item sharing, fostering a world where ownership is replaced by access and community collaboration thrives.</p>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-4" style="width: 80px; height: 80px;">
                            <i class="fas fa-heart fs-3 text-primary"></i>
                        </div>
                        <h4>Our Values</h4>
                        <p class="text-muted">Trust, sustainability, accessibility, and community. We believe in building lasting relationships based on mutual respect and shared benefits.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end mission & vision -->

    <!-- start how it works -->
    <div class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="mb-3">How It Works</h2>
                <p class="text-muted">Getting started with rentidium is simple and straightforward</p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <span class="fs-4 fw-bold">1</span>
                        </div>
                        <h5>Browse & Search</h5>
                        <p class="text-muted">Find the items you need using our powerful search and filtering tools.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <span class="fs-4 fw-bold">2</span>
                        </div>
                        <h5>Book & Pay</h5>
                        <p class="text-muted">Select your dates, pay securely, and get instant confirmation.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <span class="fs-4 fw-bold">3</span>
                        </div>
                        <h5>Pick Up & Use</h5>
                        <p class="text-muted">Meet the vendor, pick up your item, and use it for your specified period.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                            <span class="fs-4 fw-bold">4</span>
                        </div>
                        <h5>Return & Review</h5>
                        <p class="text-muted">Return the item in good condition and share your experience with others.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end how it works -->

    <!-- start why choose us -->
    <div class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="mb-3">Why Choose rentidium?</h2>
                <p class="text-muted">We're committed to providing the best rental experience possible</p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="border-0 card h-100 rounded-4 p-4">
                        <div class="card-body text-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-shield-alt fs-3 text-primary"></i>
                            </div>
                            <h5>Trust & Safety</h5>
                            <p class="text-muted">All items and vendors are verified. Secure payments and comprehensive insurance protect both parties.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="border-0 card h-100 rounded-4 p-4">
                        <div class="card-body text-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-dollar-sign fs-3 text-primary"></i>
                            </div>
                            <h5>Affordable Prices</h5>
                            <p class="text-muted">Save money by renting instead of buying. Competitive pricing with no hidden fees.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="border-0 card h-100 rounded-4 p-4">
                        <div class="card-body text-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-clock fs-3 text-primary"></i>
                            </div>
                            <h5>Flexible Timing</h5>
                            <p class="text-muted">Rent for as little as a day or as long as you need. Flexible scheduling to fit your requirements.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="border-0 card h-100 rounded-4 p-4">
                        <div class="card-body text-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-leaf fs-3 text-primary"></i>
                            </div>
                            <h5>Eco-Friendly</h5>
                            <p class="text-muted">Reduce waste and environmental impact by sharing resources instead of buying new ones.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="border-0 card h-100 rounded-4 p-4">
                        <div class="card-body text-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-headset fs-3 text-primary"></i>
                            </div>
                            <h5>24/7 Support</h5>
                            <p class="text-muted">Our dedicated support team is always ready to help you with any questions or concerns.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="border-0 card h-100 rounded-4 p-4">
                        <div class="card-body text-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 60px; height: 60px;">
                                <i class="fas fa-star fs-3 text-primary"></i>
                            </div>
                            <h5>Quality Assured</h5>
                            <p class="text-muted">All items are inspected and rated by our community. Only the best make it to our platform.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end why choose us -->

    <!-- start CTA section -->
    <div class="py-5 bg-primary text-white">
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8">
                    <h2 class="mb-3">Ready to Start Renting?</h2>
                    <p class="lead mb-4">Join thousands of satisfied customers who trust rentidium for their rental needs.</p>
                    <div class="d-flex gap-3 justify-content-center">
                        <a href="items.php" class="btn btn-light btn-lg">Browse Items</a>
                        <a href="contact-us.php" class="btn btn-outline-light btn-lg">Contact Us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end CTA section -->

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