<?php
$settings = json_decode(file_get_contents('data/settings.json'), true);
$projects = json_decode(file_get_contents('data/projects.json'), true);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projects - <?php echo htmlspecialchars($settings['site_title']); ?></title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
    
    <style>
        .page-header { padding: 250px 0 120px; background: linear-gradient(rgba(17, 17, 17, 0.8), rgba(17, 17, 17, 0.9)), url('images/hero.png') center/cover; color: var(--text-white); text-align: center; }
        .page-title { font-size: 5rem; color: var(--accent); margin-bottom: 20px; }
        
        .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 60px; }
        .project-card { background: var(--bg-light); overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.05); transition: var(--transition); border-radius: 0; border: 1px solid var(--border); }
        .project-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-color: var(--accent); }
        .project-img-container { height: 350px; overflow: hidden; position: relative; }
        .project-img-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
        .project-card:hover .project-img-container img { transform: scale(1.05); }
        .project-info { padding: 40px; position: relative; }
        .project-status { position: absolute; top: -20px; left: 40px; padding: 8px 20px; background-color: var(--accent); color: var(--primary); font-size: 0.85rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; font-family: var(--font-heading); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .project-title { font-size: 2rem; margin-bottom: 15px; margin-top: 10px; }
        .project-location { color: var(--text-light); margin-bottom: 25px; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 500; }
        
        @media (max-width: 768px) { .projects-grid { grid-template-columns: 1fr; } .page-title { font-size: 3.5rem; } }
    </style>
</head>
<body>

<?php include 'header.php'; ?>

    <div class="page-header">
        <div class="container">
            <h1 class="page-title fade-up">Our Portfolio</h1>
            <p class="fade-up" style="transition-delay: 0.1s; max-width: 600px; margin: 0 auto; font-size: 1.2rem; font-weight: 300;">Discover our collection of exceptional developments.</p>
        </div>
    </div>

    <section class="section section-bg">
        <div class="container">
            <div class="projects-grid">
                <?php foreach($projects as $index => $project): 
                    $delay = $index * 0.15;
                    $statusBg = ($project['status'] === 'Completed') ? '#2ecc71' : 'var(--accent)';
                    $statusColor = ($project['status'] === 'Completed') ? 'white' : 'var(--primary)';
                ?>
                <div class="project-card fade-up" style="transition-delay: <?php echo $delay; ?>s;">
                    <div class="project-img-container">
                        <img src="<?php echo htmlspecialchars($project['image']); ?>" alt="<?php echo htmlspecialchars($project['title']); ?>">
                    </div>
                    <div class="project-info">
                        <span class="project-status" style="background-color: <?php echo $statusBg; ?>; color: <?php echo $statusColor; ?>;"><?php echo htmlspecialchars($project['status']); ?></span>
                        <h3 class="project-title"><?php echo htmlspecialchars($project['title']); ?></h3>
                        <div class="project-location">
                            <i class="fas fa-map-marker-alt" style="color: var(--accent);"></i>
                            <span><?php echo htmlspecialchars($project['location']); ?></span>
                        </div>
                        <p style="color: var(--text-light); margin-bottom: 30px; font-size: 1.05rem; line-height: 1.8;"><?php echo htmlspecialchars($project['shortDesc']); ?></p>
                        <a href="project-details.php?id=<?php echo $project['id']; ?>" class="btn btn-outline" style="width: 100%;">Explore Details</a>
                    </div>
                </div>
                <?php endforeach; ?>
                
                <?php if(empty($projects)): ?>
                    <p style="text-align:center; grid-column: 1 / -1; font-size: 1.2rem;">No projects found. Log in to the Admin Panel to add projects.</p>
                <?php endif; ?>
            </div>
        </div>
    </section>

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