<?= $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('<?= base_url('assets/images/services/expertise_banner.png') ?>'); 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">What We Do</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">Our <span style="color: var(--accent);">Expertise</span></h1>
            <p style="font-size: 1.3rem; color: rgba(255,255,255,0.7); line-height: 1.8;" class="animate-up">
                Saanvi Infratech delivers world-class construction and engineering solutions across diverse sectors, blending technical precision with creative vision.
            </p>
        </div>
    </div>
</section>

<!-- 2. Core Services Grid -->
<section style="padding: 140px 0; background: #fff;">
    <div class="container">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px;">
            <?php foreach ($services as $service): ?>
                <div style="background: var(--bg-alt); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition);" class="animate-up">
                    <div style="height: 300px; overflow: hidden;">
                        <?php 
                            $serviceImg = $service['image'];
                            if (empty($serviceImg)) {
                                $title = strtolower($service['title']);
                                if (strpos($title, 'railway bridge') !== false) {
                                    $serviceImg = base_url('assets/images/services/railway_bridge.png');
                                } elseif (strpos($title, 'foot over') !== false || strpos($title, 'fob') !== false) {
                                    $serviceImg = base_url('assets/images/services/foot_over_bridge.png');
                                } elseif (strpos($title, 'track') !== false || strpos($title, 'mast') !== false) {
                                    $serviceImg = base_url('assets/images/services/track_works.png');
                                } elseif (strpos($title, 'gated') !== false || strpos($title, 'villas') !== false) {
                                    $serviceImg = base_url('assets/images/services/gated_community.png');
                                } elseif (strpos($title, 'high-rise') !== false || strpos($title, 'tower') !== false) {
                                    $serviceImg = base_url('assets/images/services/high_rise.png');
                                } else {
                                    $serviceImg = base_url('assets/images/services/general_construction.png');
                                }
                            }
                        ?>
                        <?php if ($serviceImg): ?>
                            <img src="<?= $serviceImg ?>" style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
                        <?php else: ?>
                            <div style="width: 100%; height: 300px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; color: var(--primary);">
                                <i class="bi bi-gear" style="font-size: 4rem;"></i>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div style="padding: 40px;">
                        <h3 style="font-size: 2rem; margin-bottom: 20px; color: var(--primary);"><?= $service['title'] ?></h3>
                        <p style="color: var(--text-muted); line-height: 1.8; margin-bottom: 30px;">
                            <?= $service['description'] ?>
                        </p>
                        <a href="<?= base_url('contact') ?>" class="btn" style="color: var(--primary); font-weight: 800; display: flex; align-items: center; gap: 10px; padding: 0;">Inquire Now <i class="bi bi-arrow-right"></i></a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- 3. Specialized Infrastructure Detail -->
<section style="padding: 140px 0; background: var(--bg-alt);">
    <div class="container">
        <div class="section-title">
            <div class="underline"></div>
            <h2 style="color: var(--primary);">Infrastructure <span style="color: var(--accent);">Specializations</span></h2>
            <p style="font-size: 1.1rem; color: var(--text-muted); max-width: 700px; margin: 20px auto 0;">In-depth technical capabilities across Government and Private sectors.</p>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
            <!-- Government Sector Card -->
            <div style="background: #fff; border-radius: 30px; padding: 50px; box-shadow: var(--shadow-md);">
                <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 40px;">
                    <div style="width: 60px; height: 60px; background: var(--primary-soft); color: var(--primary); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                        <i class="bi bi-bank"></i>
                    </div>
                    <h3 style="font-size: 2rem; margin: 0;">Government Projects</h3>
                </div>
                <div style="display: grid; gap: 25px;">
                    <div>
                        <h4 style="color: var(--text-main); margin-bottom: 8px;"><i class="bi bi-check2" style="color: var(--accent);"></i> Railway Bridges</h4>
                        <p style="font-size: 0.95rem; color: var(--text-muted); margin: 0;">Precision construction of major and minor bridges for national rail networks.</p>
                    </div>
                    <div>
                        <h4 style="color: var(--text-main); margin-bottom: 8px;"><i class="bi bi-check2" style="color: var(--accent);"></i> Foot Over Bridges</h4>
                        <p style="font-size: 0.95rem; color: var(--text-muted); margin: 0;">Safe, durable crossing solutions for high-traffic passenger terminals.</p>
                    </div>
                    <div>
                        <h4 style="color: var(--text-main); margin-bottom: 8px;"><i class="bi bi-check2" style="color: var(--accent);"></i> Track & Mast Works</h4>
                        <p style="font-size: 0.95rem; color: var(--text-muted); margin: 0;">End-to-end track laying and OHE mast installation for electrification.</p>
                    </div>
                </div>
            </div>

            <!-- Private Sector Card -->
            <div style="background: var(--primary); border-radius: 30px; padding: 50px; box-shadow: var(--shadow-md); color: #fff;">
                <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 40px;">
                    <div style="width: 60px; height: 60px; background: rgba(255,255,255,0.1); color: var(--accent); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
                        <i class="bi bi-building"></i>
                    </div>
                    <h3 style="font-size: 2rem; margin: 0; color: #fff;">Private Projects</h3>
                </div>
                <div style="display: grid; gap: 25px;">
                    <div>
                        <h4 style="color: #fff; margin-bottom: 8px;"><i class="bi bi-check2" style="color: var(--accent);"></i> Gated Communities</h4>
                        <p style="font-size: 0.95rem; color: rgba(255,255,255,0.7); margin: 0;">Premium residential villas and luxury community developments.</p>
                    </div>
                    <div>
                        <h4 style="color: #fff; margin-bottom: 8px;"><i class="bi bi-check2" style="color: var(--accent);"></i> High-Rise Towers</h4>
                        <p style="font-size: 0.95rem; color: rgba(255,255,255,0.7); margin: 0;">Modern residential and commercial towers with advanced infrastructure.</p>
                    </div>
                    <div>
                        <h4 style="color: #fff; margin-bottom: 8px;"><i class="bi bi-check2" style="color: var(--accent);"></i> Function & Utility Halls</h4>
                        <p style="font-size: 0.95rem; color: rgba(255,255,255,0.7); margin: 0;">Large-scale venues designed for corporate and social excellence.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 4. Call to Action -->
<section style="padding: 120px 0; text-align: center; position: relative; overflow: hidden; background: url('<?= base_url('construction_cta_bg_1778659277111_1778667392473.png') ?>'); background-size: cover; background-position: center; background-attachment: fixed;">
    <!-- Dark Gradient Overlay -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.8) 100%); z-index: 1;"></div>
    
    <div class="container" style="position: relative; z-index: 2;">
        <div style="max-width: 800px; margin: 0 auto;">
            <span style="color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 20px;">Take the Next Step</span>
            <h2 style="font-size: clamp(2.5rem, 5vw, 3.5rem); color: #fff; margin-bottom: 25px; font-weight: 900; line-height: 1.1;">Ready to Start Your <span style="color: var(--accent);">Project?</span></h2>
            <p style="font-size: 1.2rem; color: rgba(255,255,255,0.7); line-height: 1.8; margin-bottom: 45px;">
                Contact Saanvi Infratech today for a detailed consultation. Let's build your vision into a reality with precision and excellence.
            </p>
            <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
                <a href="<?= base_url('contact') ?>" class="btn btn-primary" style="padding: 18px 45px; font-size: 1.1rem; border-radius: 50px; box-shadow: 0 10px 30px rgba(249, 115, 22, 0.4);">Get a Free Quote <i class="bi bi-chat-dots"></i></a>
                <a href="tel:+911234567890" class="btn" style="padding: 18px 45px; font-size: 1.1rem; border-radius: 50px; border: 2px solid rgba(255,255,255,0.3); color: #fff; font-weight: 700; transition: all 0.3s ease; text-decoration: none;">Call Our Experts</a>
            </div>
        </div>
    </div>
</section>

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