<?php 
require_once __DIR__ . '/config.php';
$page_meta_desc = "E Vision Infotech offers comprehensive services including school ERP software, web development, hosting, mobile apps, and 24/7 support for educational institutions.";
$current_page = 'services';
?>

<?php include __DIR__ . '/includes/header.php'; ?>

<!-- Page Header -->
<section class="section-reveal" style="background: linear-gradient(135deg, #1e3a8a, #3b82f6, #06b6d4); padding: 100px 0 80px;">
    <div class="container">
        <div class="text-center text-white">
            <h1 class="animate-on-scroll fade-in-up" style="font-size: 2.5rem; font-weight: 700; margin-bottom: 15px;">Our Services</h1>
            <p class="animate-on-scroll fade-in-up" data-delay="1" style="font-size: 1.2rem; opacity: 0.9;">Comprehensive digital solutions for educational institutions</p>
        </div>
    </div>
</section>

<!-- Main Services -->
<section class="section-reveal" style="padding: 60px 0;">
    <div class="container">
        <div class="row">
            <?php 
            $services = [
                ['icon' => 'fa-school', 'title' => 'School/College management ERP', 'desc' => 'Complete school management software for efficient administration. Manage students, staff, fees, attendance, exams, and more from a single platform.'],
                ['icon' => 'fa-laptop-code', 'title' => 'Web Development', 'desc' => 'Custom websites and web applications that enhance your institution\'s online presence with responsive, user-friendly interfaces.'],
                ['icon' => 'fa-server', 'title' => 'Hosting Services', 'desc' => 'Secure, reliable hosting services with optimal performance and uptime. Enterprise-grade infrastructure for your applications.'],
                ['icon' => 'fa-mobile-alt', 'title' => 'Android App Development', 'desc' => 'Custom mobile applications for iOS and Android. Provide easy access to services, updates, and communication.'],
                ['icon' => 'fa-comments', 'title' => 'WhatsApp Communication', 'desc' => 'Automated WhatsApp messaging to keep parents informed and engaged with instant notifications and updates.'],
                ['icon' => 'fa-headset', 'title' => '24/7 Support', 'desc' => 'Round-the-clock customer support to ensure smooth and uninterrupted service for your institution.']
            ];
            
            foreach($services as $index => $service): ?>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100 p-4 stagger-card" data-delay="<?php echo $index; ?>" style="border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: none;">
                    <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #2563eb, #4f46e5); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas <?php echo $service['icon']; ?>" style="font-size: 1.5rem; color: #fff;"></i>
                    </div>
                    <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 10px; text-align: center;"><?php echo $service['title']; ?></h5>
                    <p style="color: #6b7280; font-size: 0.9rem; line-height: 1.7; text-align: center;"><?php echo $service['desc']; ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Hardware Services -->
<section class="section-reveal" style="padding: 60px 0; background: #f8f9fa;">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title" style="font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 10px;">Hardware Solutions</h2>
            <p style="color: #6b7280; font-size: 1.1rem;">Integrated hardware for complete campus management</p>
        </div>
        
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="card h-100 text-center p-4 hover-lift" style="border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: none;">
                    <div style="width: 60px; height: 60px; background: #dbeafe; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas fa-fingerprint" style="font-size: 1.5rem; color: #2563eb;"></i>
                    </div>
                    <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 5px;">Biometric Devices</h5>
                    <p style="color: #6b7280; font-size: 0.875rem;">STL-080 & STL-040 models</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="card h-100 text-center p-4 hover-lift" style="border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: none;">
                    <div style="width: 60px; height: 60px; background: #dcfce7; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas fa-id-card" style="font-size: 1.5rem; color: #16a34a;"></i>
                    </div>
                    <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 5px;">Smart ID Cards</h5>
                    <p style="color: #6b7280; font-size: 0.875rem;">RFID & UHF enabled</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="card h-100 text-center p-4 hover-lift" style="border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: none;">
                    <div style="width: 60px; height: 60px; background: #f3e8ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas fa-bell" style="font-size: 1.5rem; color: #9333ea;"></i>
                    </div>
                    <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 5px;">School Automatic Bell</h5>
                    <p style="color: #6b7280; font-size: 0.875rem;">Automated scheduling system</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="card h-100 text-center p-4 hover-lift" style="border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: none;">
                    <div style="width: 60px; height: 60px; background: #ffedd5; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas fa-desktop" style="font-size: 1.5rem; color: #ea580c;"></i>
                    </div>
                    <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 5px;">Offline Solutions</h5>
                    <p style="color: #6b7280; font-size: 0.875rem;">Desktop biometric system</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Pricing -->
<section style="padding: 60px 0;">
    <div class="container">
        <div class="text-center mb-5">
            <h2 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 10px;">Flexible Pricing Plans</h2>
            <p style="color: #6b7280; font-size: 1.1rem;">Pay per student, per year</p>
        </div>
        
        <div class="row">
            <?php 
            foreach($pricing_plans as $index => $plan): ?>
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="card h-100 text-center p-4" style="border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: <?php echo $index === 2 ? '2px solid #2563eb' : 'none'; ?>;">
                    <?php if($index === 2): ?>
                    <span style="position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #2563eb; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600;">Most Popular</span>
                    <?php endif; ?>
                    <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 10px;"><?php echo $plan['name']; ?></h5>
                    <?php /*
                    <div style="margin-bottom: 20px;">
                        <span style="font-size: 2rem; font-weight: 700; color: #2563eb;">₹<?php echo $plan['price']; ?></span>
                        <span style="color: #6b7280; font-size: 0.875rem;">/student/year</span>
                    </div> */ ?>
                    <ul class="text-left" style="list-style: none; padding: 0; margin-bottom: 20px;">
                        <?php foreach($plan['features'] as $feature): ?>
                        <li style="padding: 5px 0; font-size: 0.8rem; color: #4b5563; display: flex; align-items: center;">
                            <i class="fas fa-check" style="color: #16a34a; margin-right: 8px;"></i>
                            <?php echo $feature; ?>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                    <a href="contact-us.php" class="btn btn-primary btn-block">Choose Plan</a>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- CTA -->
<section style="background: linear-gradient(135deg, #2563eb, #4f46e5); padding: 60px 0;">
    <div class="container text-center text-white">
        <h2 style="font-size: 1.75rem; font-weight: 700; margin-bottom: 15px;">Need a Custom Solution?</h2>
        <p style="margin-bottom: 25px; opacity: 0.9;">Contact us for a personalized quote tailored to your institution's needs</p>
        <a href="contact-us.php" class="btn btn-light btn-lg">Get in Touch</a>
    </div>
</section>

<?php include __DIR__ . '/includes/footer.php'; ?>