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

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

<section class="section" style="padding-top: 150px; background: #121212;">
    <div class="container">
        <div style="display: grid; grid-row-gap: 50px;">
            <div class="animate-up">
                <a href="<?= base_url('projects') ?>" style="color: var(--primary); margin-bottom: 20px; display: inline-block;"><i class="bi bi-arrow-left"></i> Back to Projects</a>
                <h1 style="font-size: 3.5rem; margin-bottom: 10px;"><?= $project['title'] ?></h1>
                <div style="display: flex; gap: 20px; margin-bottom: 30px;">
                    <span style="background: rgba(255,215,0,0.1); color: var(--primary); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: 600;"><?= $project['status'] ?></span>
                    <span style="color: var(--text-muted);"><i class="bi bi-calendar"></i> Started: <?= $project['start_date'] ?></span>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 40px;">
                <div class="animate-up">
                    <div style="border-radius: 20px; overflow: hidden; height: 500px; margin-bottom: 40px; border: 1px solid var(--glass-border);">
                        <img src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="<?= $project['title'] ?>" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <h3 style="margin-bottom: 20px; font-size: 1.8rem;">Project Overview</h3>
                    <p style="color: var(--text-muted); font-size: 1.1rem; margin-bottom: 30px;"><?= $project['description'] ?></p>
                    
                    <h3 style="margin-bottom: 20px; font-size: 1.8rem;">Scope of Work</h3>
                    <p style="color: var(--text-muted);">This project involved comprehensive planning, structural engineering, and high-end finishing. Our team worked closely with the stakeholders to ensure every specification was met with precision and excellence.</p>
                </div>

                <div class="animate-up" style="display: grid; grid-row-gap: 30px;">
                    <div class="service-card" style="padding: 30px; background: var(--bg-card);">
                        <h4 style="margin-bottom: 20px; border-bottom: 1px solid var(--glass-border); padding-bottom: 10px;">Project Details</h4>
                        <ul style="display: grid; grid-row-gap: 15px;">
                            <li style="display: flex; justify-content: space-between;">
                                <span style="color: var(--text-muted);">Location</span>
                                <span style="color: #fff;">New York, NY</span>
                            </li>
                            <li style="display: flex; justify-content: space-between;">
                                <span style="color: var(--text-muted);">Category</span>
                                <span style="color: #fff;">Commercial</span>
                            </li>
                            <li style="display: flex; justify-content: space-between;">
                                <span style="color: var(--text-muted);">Duration</span>
                                <span style="color: #fff;">24 Months</span>
                            </li>
                        </ul>
                    </div>

                    <div class="service-card" style="padding: 30px; background: var(--primary); color: #000;">
                        <h4 style="margin-bottom: 15px;">Need a similar project?</h4>
                        <p style="margin-bottom: 25px; font-weight: 500;">Contact our experts today for a free consultation and quote.</p>
                        <a href="<?= base_url('contact') ?>" class="btn" style="background: #000; color: #fff; width: 100%; text-align: center;">Get in Touch</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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