<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>

<!-- 1. Page Header / Banner -->
<section style="padding: 180px 0 100px; background: linear-gradient(to right, rgba(10, 25, 47, 0.95) 40%, rgba(10, 25, 47, 0.6) 100%), url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-attachment: fixed;">
    <div class="container">
        <div style="max-width: 800px;">
            <span style="color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 20px;" class="animate-up">Our Portfolio</span>
            <h1 style="font-size: clamp(3rem, 8vw, 5rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 30px; letter-spacing: -2px;" class="animate-up">Shaping the <span style="color: var(--accent);">Future</span></h1>
            <p style="font-size: 1.3rem; color: rgba(255,255,255,0.7); line-height: 1.8;" class="animate-up">
                A showcase of our architectural and engineering excellence across diverse sectors.
            </p>
        </div>
    </div>
</section>

<section class="section" style="padding: 100px 0; background: #ffffff;">
    <div class="container">


        <div class="projects-grid">
            <?php foreach ($projects as $project): ?>
                <div class="project-card">
                    <img src="<?= $project['image'] ?? 'https://images.unsplash.com/photo-1541888946425-d81bb19480c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' ?>" alt="<?= $project['title'] ?>">

                    <div class="project-overlay">
                        <span style="color: var(--primary); font-weight: 600; font-size: 0.9rem;"><?= $project['status'] ?></span>
                        <h3 style="color: #fff; font-size: 1.8rem; margin-top: 5px;"><?= $project['title'] ?></h3>
                        <p style="color: #ccc; margin-bottom: 20px;"><?= $project['description'] ?></p>
                        <div style="display: flex; justify-content: flex-end; align-items: center;">
                            <a href="<?= base_url('project_details/' . $project['id']) ?>" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.8rem;">View Details</a>
                        </div>

                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<?= $this->endSection() ?>
