<?php
/**
 * Services Page — Engineering & Maintenance Services
 * Path: services.php
 */
include_once 'header.php';

$site_name  = get_site_setting('site_name');
$site_phone = get_site_setting('site_phone');

$service_offerings = [
    ['icon'=>'fa-elevator',       'title'=>'Elevator Maintenance & Repair',    'desc'=>'Certified preventative maintenance, safety checks and emergency repair for commercial and residential elevators.'],
    ['icon'=>'fa-bolt',           'title'=>'Generator Maintenance & Testing',  'desc'=>'Comprehensive standby generator servicing, annual load bank testing and diesel fuel polishing.'],
    ['icon'=>'fa-arrows-up-down', 'title'=>'Elevator Modernization',         'desc'=>'Upgrade outdated cab electronics, drive controllers and interiors to modern ISO standards.'],
    ['icon'=>'fa-triangle-exclamation','title'=>'Emergency Generator Repairs','desc'=>'24/7 urgent dispatch for generator failure repairs, cooling system fixes and backup power deploy.'],
    ['icon'=>'fa-plug',           'title'=>'ATS & Switchgear Controls',        'desc'=>'Expert inspection and repair of Automatic Transfer Switches for seamless power transition.'],
    ['icon'=>'fa-solar-panel',    'title'=>'Solar System Installation',        'desc'=>'On-grid, off-grid and hybrid solar solutions for residential and commercial properties.'],
    ['icon'=>'fa-wind',           'title'=>'VRF & Central AC Service',         'desc'=>'Installation, maintenance and repair of centralized VRF HVAC climate systems.'],
    ['icon'=>'fa-square-parking', 'title'=>'Car Parking Lift Service',         'desc'=>'Hydraulic car stacker and automated parking system installation and maintenance.'],
];
?>

<section class="relative bg-gradient-to-r from-slate-950 to-blue-900 text-white py-16 md:py-20">
    <div class="max-w-7xl mx-auto px-4 text-center">
        <nav class="text-xs text-sky-400 font-bold uppercase mb-3">
            <a href="index.php" class="hover:text-white">Home</a> <span class="mx-2 text-slate-500">/</span> Services
        </nav>
        <h1 class="text-3xl md:text-5xl font-black uppercase">Our Engineering Services</h1>
        <div class="w-16 h-1 bg-secondary mx-auto mt-4"></div>
        <p class="text-gray-300 text-sm md:text-base max-w-xl mx-auto mt-4">Complete installation, maintenance and emergency support for all heavy engineering systems.</p>
    </div>
</section>

<section class="py-16 md:py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
            <?php foreach ($service_offerings as $i => $svc): ?>
            <div class="bg-white rounded-2xl p-6 border border-gray-100 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex gap-5 group">
                <div class="w-14 h-14 flex-shrink-0 rounded-2xl bg-blue-50 group-hover:bg-primary text-primary group-hover:text-white flex items-center justify-center text-2xl transition-all">
                    <i class="fa-solid <?php echo $svc['icon']; ?>"></i>
                </div>
                <div class="space-y-2">
                    <h3 class="font-black text-primary uppercase text-sm group-hover:text-secondary transition-colors"><?php echo $svc['title']; ?></h3>
                    <p class="text-sm text-gray-500 leading-relaxed"><?php echo $svc['desc']; ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="space-y-5">
                <h2 class="text-3xl font-black text-primary uppercase">Complete System Reliability</h2>
                <p class="text-gray-600 leading-relaxed">When power outages strike, your elevators must home correctly, standby generators must start instantly, and VRF systems must run safely. Our multi-discipline engineering team ensures smooth system synchronization under critical stress.</p>
                <ul class="space-y-3">
                    <?php foreach (['ISO Certified Installation','Annual Safety Inspections','24/7 Emergency Dispatch','Nationwide Coverage'] as $item): ?>
                    <li class="flex items-center gap-3 text-sm text-gray-700">
                        <i class="fa-solid fa-circle-check text-secondary"></i><?php echo $item; ?>
                    </li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <div class="bg-gradient-to-br from-primary to-blue-900 rounded-2xl p-8 text-white space-y-6">
                <h3 class="text-xl font-black uppercase">Need Service Now?</h3>
                <p class="text-gray-300 text-sm">Our engineering dispatch team is available 24/7/365 for emergency breakdowns.</p>
                <a href="tel:<?php echo htmlspecialchars($site_phone); ?>" class="flex items-center gap-3 bg-white text-primary hover:bg-secondary hover:text-white px-6 py-4 rounded-xl font-bold transition-all">
                    <i class="fa-solid fa-phone text-xl"></i>
                    <span><?php echo htmlspecialchars($site_phone); ?></span>
                </a>
                <a href="contact.php" class="block text-center border border-white/30 hover:bg-white/10 px-6 py-3 rounded-xl font-bold text-sm transition-all">Request a Quote</a>
            </div>
        </div>
    </div>
</section>

<section class="py-12 bg-gray-50 text-center">
    <div class="max-w-2xl mx-auto px-4">
        <h3 class="text-xl font-black text-primary uppercase mb-3">Looking for Products?</h3>
        <p class="text-gray-500 text-sm mb-6">Browse our complete catalog of elevators, generators, transformers and solar systems.</p>
        <a href="products.php" class="inline-flex items-center bg-primary hover:bg-secondary text-white px-8 py-3 rounded-xl font-bold transition-all">
            View All Products <i class="fa-solid fa-arrow-right ml-2"></i>
        </a>
    </div>
</section>

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