<?php 
require_once __DIR__ . '/config.php';
$page_meta_desc = "Explore the comprehensive features of E Vision Infotech's School/College management ERP - attendance tracking, fee management, exam modules, biometric integration, and more.";
$current_page = 'features';
?>

<?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;">Powerful Features</h1>
            <p class="animate-on-scroll fade-in-up" data-delay="1" style="font-size: 1.2rem; opacity: 0.9;">Everything you need to manage your educational institution efficiently</p>
        </div>
    </div>
</section>

<!-- Feature Highlights -->
<section class="section-reveal" style="padding: 60px 0;">
    <div class="container">
        <div class="row">
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #dbeafe; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-laptop" style="color: #2563eb; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Responsive Interface</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Access from any device</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #dcfce7; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-users" style="color: #16a34a; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Multi-User System</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Admins, teachers, students, parents</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #f3e8ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-globe" style="color: #9333ea; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Multi-Language</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Multiple language support</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #ffedd5; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-fingerprint" style="color: #ea580c; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Biometric Integration</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">STL Biometric devices</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #fef3c7; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-sitemap" style="color: #d97706; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Multiple Branches</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Manage all branches from one panel</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #dbeafe; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-credit-card" style="color: #2563eb; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Online & Offline Payments</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Multiple payment gateway support</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #fee2e2; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-cogs" style="color: #dc2626; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Customization</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Tailor to your needs</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6 mb-4">
                <div class="d-flex align-items-center p-4" style="background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);">
                    <div style="width: 50px; height: 50px; background: #cffafe; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
                        <i class="fas fa-cloud" style="color: #0891b2; font-size: 1.25rem;"></i>
                    </div>
                    <div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 3px;">Cloud-Based</h5>
                        <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Access anywhere, anytime</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Software Modules -->
<section class="section-padding" style="background: #f8f9fa;">
    <div class="container">
        <div class="text-center mb-5">
            <h2 style="font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 10px;">Complete Module Suite</h2>
            <p style="color: #6b7280; font-size: 1.1rem;">All tools to manage every aspect of your institution</p>
        </div>
        
        <div class="row">
            <?php 
            $modules = [
                ['icon' => 'fa-wallet', 'title' => 'Finance', 'desc' => 'School/College finance manages budgets, fees, expenses, and financial reporting efficiently.', 'features' => ['Budget Management', 'Fees Collection', 'Income & Expenses', 'Inventory', 'Reports']],
                ['icon' => 'fa-user-graduate', 'title' => 'Student', 'desc' => "Students' data, attendance, performance, and activities are efficiently managed, ensuring smooth operations.", 'features' => ['Admission Management', 'Attendance Tracking', 'Performance Records', 'Activity Management', 'Parent Communication']],
                ['icon' => 'fa-file-alt', 'title' => 'Exam', 'desc' => 'School ERP tracks student exams, schedules, performance, and result analysis.', 'features' => ['Exam Scheduling', 'Marks Entry', 'Result Analysis', 'Report Cards', 'Online Exams']],
                ['icon' => 'fa-users', 'title' => 'Staff', 'desc' => 'Staff management handles payroll, attendance, roles, and performance tracking efficiently.', 'features' => ['Payroll Management', 'Attendance', 'Leave Management', 'Performance Tracking', 'Role Management']],
                ['icon' => 'fa-book-open', 'title' => 'Library', 'desc' => 'Library management organizes book inventory, checkouts, returns, and availability tracking.', 'features' => ['Book Inventory', 'Member Management', 'Issue/Return', 'Late Fee Calculation', 'Digital Catalog']],
                ['icon' => 'fa-mobile-alt', 'title' => 'Student App', 'desc' => 'Student app provides access to attendance, grades, schedules, and communication.', 'features' => ['View Attendance', 'Exam Results', 'Fee Status', 'Notifications', 'Communication']],
                ['icon' => 'fa-bus', 'title' => 'Transport', 'desc' => 'Supporting apps manage transportation management.', 'features' => ['Route Management', 'Bus Tracking', 'Driver Details', 'Student Pickup', 'Live Location']],
                ['icon' => 'fa-home', 'title' => 'Hostel', 'desc' => 'Supporting apps manage hostel facilities.', 'features' => ['Room Allocation', 'Mess Management', 'Visitor Log', 'Complaint Box', 'Attendance']],
                ['icon' => 'fa-certificate', 'title' => 'Certificate', 'desc' => 'Supporting apps manage certificates and CMS.', 'features' => ['TC Generation', 'Bonafide Certificate', 'Character Certificate', 'Custom Templates', 'Bulk Generation']]
            ];
            ?>
<?php foreach($modules as $module): ?>
            <div class="col-lg-4 col-md-6 mb-4">
                <div class="card h-100" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: none;">
                    <div class="p-4" style="background: #fff;">
                        <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #2563eb, #4f46e5); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                            <i class="fas <?php echo $module['icon']; ?>" style="font-size: 1.25rem; color: #fff;"></i>
                        </div>
                        <h5 style="font-weight: 600; color: #1f2937; margin-bottom: 8px;"><?php echo $module['title']; ?></h5>
                        <p style="color: #6b7280; font-size: 0.8rem; margin-bottom: 10px; line-height: 1.5;"><?php echo $module['desc']; ?></p>
                        <ul style="list-style: none; padding: 0; margin: 0;">
                            <?php foreach($module['features'] as $feature): ?>
                            <li style="padding: 4px 0; font-size: 0.8rem; color: #4b5563; display: flex; align-items: center;">
                                <i class="fas fa-check-circle" style="color: #16a34a; margin-right: 8px; font-size: 0.9rem;"></i>
                                <?php echo $feature; ?>
                            </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Integration Features -->
<section class="section-reveal" style="padding: 60px 0;">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 animate-on-scroll fade-in-left">
                <h2 style="font-size: 1.75rem; font-weight: 700; color: #1f2937; margin-bottom: 15px;">Seamless Integrations</h2>
                <p style="color: #6b7280; margin-bottom: 20px;">Our software integrates with popular platforms for complete solutions</p>
                
                <div class="row">
                    <div class="col-6 mb-3">
                        <div class="p-3" style="background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <i class="fab fa-whatsapp" style="color: #16a34a; font-size: 1.5rem; margin-bottom: 8px;"></i>
                            <h6 style="font-weight: 600; margin: 0;">WhatsApp</h6>
                            <p style="font-size: 0.8rem; color: #6b7280; margin: 0;">SMS & Alerts</p>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div class="p-3" style="background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <i class="fas fa-fingerprint" style="color: #2563eb; font-size: 1.5rem; margin-bottom: 8px;"></i>
                            <h6 style="font-weight: 600; margin: 0;">Biometric</h6>
                            <p style="font-size: 0.8rem; color: #6b7280; margin: 0;">Attendance</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-3" style="background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <i class="fas fa-id-card" style="color: #9333ea; font-size: 1.5rem; margin-bottom: 8px;"></i>
                            <h6 style="font-weight: 600; margin: 0;">Smart ID Cards</h6>
                            <p style="font-size: 0.8rem; color: #6b7280; margin: 0;">RFID & UHF</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-3" style="background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
                            <i class="fas fa-mobile-alt" style="color: #ea580c; font-size: 1.5rem; margin-bottom: 8px;"></i>
                            <h6 style="font-weight: 600; margin: 0;">Mobile Apps</h6>
                            <p style="font-size: 0.8rem; color: #6b7280; margin: 0;">iOS & Android</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="row">
                    <div class="col-6 mb-3">
                        <div style="background: linear-gradient(135deg, #2563eb, #1d4ed8); border-radius: 15px; padding: 25px; text-align: center; color: #fff;">
                            <i class="fab fa-android" style="font-size: 2rem; margin-bottom: 10px;"></i>
                            <h5 style="font-weight: 600; margin-bottom: 5px;">Android App</h5>
                            <p style="font-size: 0.8rem; opacity: 0.8; margin: 0;">Custom Branding</p>
                        </div>
                    </div>
                    <div class="col-6 mb-3">
                        <div style="background: linear-gradient(135deg, #16a34a, #15803d); border-radius: 15px; padding: 25px; text-align: center; color: #fff;">
                            <i class="fab fa-apple" style="font-size: 2rem; margin-bottom: 10px;"></i>
                            <h5 style="font-weight: 600; margin-bottom: 5px;">iOS App</h5>
                            <p style="font-size: 0.8rem; opacity: 0.8; margin: 0;">App Store (Coming Soon)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="section-reveal" style="background: linear-gradient(135deg, #2563eb, #4f46e5); padding: 60px 0;">
    <div class="container text-center text-white">
        <h2 class="animate-on-scroll fade-in-up" style="font-size: 1.75rem; font-weight: 700; margin-bottom: 15px;">Ready to Explore Our Features?</h2>
        <p style="margin-bottom: 25px; opacity: 0.9;">Schedule a demo to see our software in action</p>
        <a href="contact-us.php" class="btn btn-light btn-lg">Book a Demo</a>
    </div>
</section>

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