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

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

<section class="section" style="padding-top: 150px; background: #121212;">
    <div class="container">
        <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 60px;">
            <div class="animate-up">
                <div class="service-card" style="padding: 0; background: transparent; border: none; overflow: hidden; border-radius: 20px; margin-bottom: 30px; height: 300px; border: 1px solid var(--glass-border);">
                    <img src="<?= $service['image'] ?>" alt="<?= $service['title'] ?>" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                <div style="padding: 20px 0;">
                    <h1 style="font-size: 3rem; line-height: 1.1; margin-bottom: 25px;"><?= $service['title'] ?></h1>
                    <p style="color: var(--text-muted); font-size: 1.1rem; margin-bottom: 40px;"><?= $service['description'] ?></p>
                    <a href="<?= base_url('contact') ?>" class="btn btn-primary" style="padding: 15px 40px;">Request Service</a>
                </div>
                
                <div style="margin-top: 60px;">
                    <h4 style="margin-bottom: 20px;">Other Services</h4>
                    <ul class="footer-links">
                        <li><a href="#"><i class="bi bi-chevron-right"></i> General Contracting</a></li>
                        <li><a href="#"><i class="bi bi-chevron-right"></i> Design-Build</a></li>
                        <li><a href="#"><i class="bi bi-chevron-right"></i> Project Management</a></li>
                    </ul>
                </div>
            </div>

            <div class="animate-up">
                <div style="border-radius: 20px; overflow: hidden; height: 400px; margin-bottom: 50px; border: 1px solid var(--glass-border);">
                    <img src="https://images.unsplash.com/photo-1541913057814-fa018b493543?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="<?= $service['title'] ?>" style="width: 100%; height: 100%; object-fit: cover;">
                </div>

                <div class="service-card" style="padding: 40px; background: var(--bg-card);">
                    <h3 style="margin-bottom: 25px; font-size: 2rem;">Service In-Depth</h3>
                    <p style="color: var(--text-muted); line-height: 1.8; margin-bottom: 30px;"><?= $service['long_description'] ?></p>
                    
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;">
                        <div>
                            <h5 style="color: var(--primary); margin-bottom: 10px;"><i class="bi bi-check-circle-fill"></i> Expert Planning</h5>
                            <p style="font-size: 0.9rem; color: var(--text-muted);">Meticulous attention to detail in every phase of the project.</p>
                        </div>
                        <div>
                            <h5 style="color: var(--primary); margin-bottom: 10px;"><i class="bi bi-check-circle-fill"></i> Quality Assurance</h5>
                            <p style="font-size: 0.9rem; color: var(--text-muted);">Strict adherence to international construction standards.</p>
                        </div>
                        <div>
                            <h5 style="color: var(--primary); margin-bottom: 10px;"><i class="bi bi-check-circle-fill"></i> Timely Delivery</h5>
                            <p style="font-size: 0.9rem; color: var(--text-muted);">Efficient workflows to meet your project deadlines.</p>
                        </div>
                        <div>
                            <h5 style="color: var(--primary); margin-bottom: 10px;"><i class="bi bi-check-circle-fill"></i> Sustainable Practices</h5>
                            <p style="font-size: 0.9rem; color: var(--text-muted);">Environmentally conscious construction methods.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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