<?php
require_once 'includes/db.php';
require_once 'includes/functions.php';

$pageTitle = 'Job Categories';
$pageDescription = 'Browse jobs by category. Explore opportunities in Technology, Healthcare, Finance, Marketing, Education, Engineering, and more industries.';

// Get all categories with job counts
$stmt = $pdo->query("SELECT c.*, COUNT(j.id) as job_count 
                     FROM categories c 
                     LEFT JOIN jobs j ON c.id = j.category_id AND j.status = 'active' 
                     GROUP BY c.id 
                     ORDER BY c.name ASC");
$categories = $stmt->fetchAll();

include 'includes/header.php';
?>

<section class="hero hero-small">
    <div class="hero-content">
        <h1>📂 Job Categories</h1>
        <p>Explore job opportunities across different industries and sectors</p>
    </div>
</section>

<section class="categories-page">
    <div class="container">
        <div class="categories-stats">
            <div class="stat-item">
                <span class="stat-number"><?php echo count($categories); ?></span>
                <span class="stat-label">Categories</span>
            </div>
            <div class="stat-item">
                <span class="stat-number"><?php echo array_sum(array_column($categories, 'job_count')); ?></span>
                <span class="stat-label">Total Jobs</span>
            </div>
        </div>
        
        <div class="categories-grid-page">
            <?php foreach ($categories as $cat): ?>
                <a href="jobs.php?category=<?php echo $cat['id']; ?>" class="category-card-large">
                    <div class="category-icon">
                        <i class="fas fa-<?php echo $cat['icon'] ?: 'briefcase'; ?>"></i>
                    </div>
                    <div class="category-info">
                        <h3><?php echo sanitize($cat['name']); ?></h3>
                        <span class="job-count"><?php echo $cat['job_count']; ?> job<?php echo $cat['job_count'] != 1 ? 's' : ''; ?> available</span>
                    </div>
                    <div class="category-arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<style>
.categories-page {
    padding: 50px 0;
    background: #f8fafc;
}

.categories-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #4f46e5;
}

.stat-label {
    color: #64748b;
    font-size: 1rem;
}

.categories-grid-page {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.category-card-large {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid #e2e8f0;
}

.category-card-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #4f46e5;
}

.category-card-large .category-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.category-card-large .category-info {
    flex: 1;
}

.category-card-large .category-info h3 {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.category-card-large .job-count {
    color: #64748b;
    font-size: 0.9rem;
}

.category-card-large .category-arrow {
    color: #94a3b8;
    font-size: 1rem;
    transition: transform 0.3s;
}

.category-card-large:hover .category-arrow {
    transform: translateX(5px);
    color: #4f46e5;
}

@media (max-width: 768px) {
    .categories-stats {
        gap: 40px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .categories-grid-page {
        grid-template-columns: 1fr;
    }
}
</style>

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