<?php
/**
 * About Us Page
 * Digital Product Store
 */

require_once __DIR__ . '/config/database.php';

$page_title = 'About Us';

// Get testimonials
$testimonials = get_testimonials(3);

include __DIR__ . '/header.php';
?>

<!-- About Hero -->
<section class="py-5 bg-primary text-white">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-3">About Digital Store</h1>
        <p class="lead mb-0">Your trusted source for premium digital products</p>
    </div>
</section>

<!-- Our Story -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <img src="<?php echo BASE_URL; ?>/assets/images/about-story.jpg" 
                     onerror="this.src='https://via.placeholder.com/600x400?text=Our+Story'"
                     alt="Our Story" class="img-fluid rounded shadow">
            </div>
            <div class="col-lg-6">
                <h2 class="mb-4">Our Story</h2>
                <p class="lead">Founded with a passion for digital innovation, Digital Store has grown to become a leading marketplace for premium digital products.</p>
                <p>We believe that high-quality digital assets should be accessible to everyone. From software and templates to ebooks and courses, we curate the best products to help creators, entrepreneurs, and businesses succeed.</p>
                <p>Our mission is simple: connect talented creators with customers who value quality digital products.</p>
            </div>
        </div>
    </div>
</section>

<!-- Stats -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 col-6 mb-4 mb-md-0">
                <div class="display-4 fw-bold text-primary mb-2">10K+</div>
                <p class="text-muted mb-0">Happy Customers</p>
            </div>
            <div class="col-md-3 col-6 mb-4 mb-md-0">
                <div class="display-4 fw-bold text-primary mb-2">500+</div>
                <p class="text-muted mb-0">Digital Products</p>
            </div>
            <div class="col-md-3 col-6">
                <div class="display-4 fw-bold text-primary mb-2">50+</div>
                <p class="text-muted mb-0">Expert Creators</p>
            </div>
            <div class="col-md-3 col-6">
                <div class="display-4 fw-bold text-primary mb-2">24/7</div>
                <p class="text-muted mb-0">Support Available</p>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Why Choose Us</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-shield-alt fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">Secure Downloads</h5>
                        <p class="card-text text-muted">All files are scanned and hosted securely. Your downloads are always safe and virus-free.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-headset fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">24/7 Support</h5>
                        <p class="card-text text-muted">Our dedicated support team is always ready to help you with any questions or issues.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-undo fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">Money Back Guarantee</h5>
                        <p class="card-text text-muted">Not satisfied? We offer a 30-day money-back guarantee on all purchases.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-star fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">Premium Quality</h5>
                        <p class="card-text text-muted">Every product is carefully reviewed to ensure it meets our high-quality standards.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-bolt fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">Instant Delivery</h5>
                        <p class="card-text text-muted">Get immediate access to your purchases. No waiting, start using right away.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <div class="mb-3">
                            <i class="fas fa-sync fa-3x text-primary"></i>
                        </div>
                        <h5 class="card-title">Lifetime Updates</h5>
                        <p class="card-text text-muted">Many products include free lifetime updates. Always stay current.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<?php if (!empty($testimonials)): ?>
<section class="py-5 bg-light">
    <div class="container">
        <h2 class="text-center mb-5">What Our Customers Say</h2>
        <div class="row">
            <?php foreach ($testimonials as $testimonial): ?>
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center p-4">
                        <?php if ($testimonial['avatar']): ?>
                        <img src="<?php echo BASE_URL . '/' . $testimonial['avatar']; ?>" 
                             alt="" class="rounded-circle mb-3" style="width: 80px; height: 80px; object-fit: cover;">
                        <?php else: ?>
                        <div class="bg-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="fas fa-user fa-2x text-white"></i>
                        </div>
                        <?php endif; ?>
                        <div class="mb-3">
                            <?php for ($i = 0; $i < 5; $i++): ?>
                            <i class="fas fa-star <?php echo $i < $testimonial['rating'] ? 'text-warning' : 'text-muted'; ?>"></i>
                            <?php endfor; ?>
                        </div>
                        <p class="card-text">"<?php echo htmlspecialchars($testimonial['content']); ?>"</p>
                        <h6 class="card-title mb-0"><?php echo htmlspecialchars($testimonial['name']); ?></h6>
                        <?php if ($testimonial['company']): ?>
                        <small class="text-muted"><?php echo htmlspecialchars($testimonial['company']); ?></small>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- CTA -->
<section class="py-5 bg-primary text-white">
    <div class="container text-center">
        <h2 class="mb-3">Ready to Get Started?</h2>
        <p class="lead mb-4">Browse our collection of premium digital products today.</p>
        <a href="<?php echo BASE_URL; ?>/products.php" class="btn btn-light btn-lg">
            <i class="fas fa-shopping-bag me-2"></i>Shop Now
        </a>
    </div>
</section>

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