<?php require_once __DIR__ . '/_site_content.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php sc_text('training', 'meta_title', 'Training Services - SmartThink', $region); ?></title>
    <!-- Core CSS frameworks -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Project styles -->
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="../assets/css/modern-ux.css">
    <link rel="stylesheet" href="../assets/css/capgemini-theme.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Scroll Progress Bar -->
    <div class="scroll-progress" id="scrollProgress"></div>

    <!-- Regional Selector Banner -->
    <div class="regional-banner">
        <div class="container">
            <div class="region-selector">
                <span class="region-label">Select Your Region:</span>
                <div class="region-options">
                    <button class="region-btn active" data-region="usa">🇺🇸 USA</button>
                    <button class="region-btn" data-region="europe">🇪🇺 Europe</button>
                    <button class="region-btn" data-region="africa">🌍 Africa</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modern Navigation Header -->
    <header class="modern-header">
        <nav class="navbar navbar-expand-lg">
            <div class="container">
                <a class="navbar-brand" href="index.php">
                    <div class="brand-logo">
                     <img src="../assets/images/logo.jpeg" alt="SmartThink" class="logo-img">
                        <span class="brand-text">SmartThink</span>
                    </div>
                </a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item"><a class="nav-link" href="index.php">Home</a></li>
                        <li class="nav-item"><a class="nav-link" href="about.php">About Us</a></li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle active" href="services.php" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
                            <ul class="dropdown-menu" aria-labelledby="servicesDropdown">
                                <li><a class="dropdown-item active" href="training.php">Training</a></li>
                                <li><a class="dropdown-item" href="consulting.php">Consulting</a></li>
                                <li><a class="dropdown-item" href="recruitment.php">Recruitment</a></li>
                            </ul>
                        </li>
                        <li class="nav-item"><a class="nav-link" href="courses.php">Courses</a></li>
                       
                        <li class="nav-item"><a class="nav-link" href="contact.php">Contact Us</a></li>
                    </ul>
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link login-btn" href="../lms/login.php">
                                <i class="fas fa-sign-in-alt"></i> Login
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link register-btn" href="../lms/register.php">
                                <i class="fas fa-user-plus"></i> Register
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- Training Hero Section -->
    <section class="page-hero">
        <div class="hero-background"></div>
        <div class="hero-overlay"></div>
        <div class="container">
            <div class="row align-items-center min-vh-60">
                <div class="col-lg-8 mx-auto text-center">
                    <div class="hero-content-modern">
                        <div class="hero-badge">
                            <span class="badge-text"><?php sc_text('training', 'hero_badge', 'Cybersecurity &amp; IT Training', $region); ?></span>
                        </div>
                        <h1 class="hero-title-modern"><?php sc_text('training', 'hero_title', 'Practical, Job-Ready Security &amp; IT Skills', $region); ?></h1>
                        <p class="hero-subtitle-modern"><?php sc_html('training', 'hero_subtitle', 'Upskill your team with hands-on labs, blue team scenarios, and real-world projects designed by practising security engineers and architects.', $region); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Training Tracks Section -->
    <section class="learning-paths">
        <div class="container">
            <div class="section-header-modern">
                <h2 class="section-title-modern"><?php sc_text('training', 'tracks_title', 'Specialised Training Tracks', $region); ?></h2>
                <p class="section-subtitle-modern"><?php sc_html('training', 'tracks_subtitle', 'Structured paths aligned to security and IT roles', $region); ?></p>
            </div>

            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="path-card">
                        <div class="path-icon">
                            <i class="fas fa-lock"></i>
                        </div>
                        <h3>Blue Team &amp; SOC Analyst</h3>
                        <p>Threat detection, SIEM operations, incident response and security monitoring using modern tools.</p>
                        <div class="path-stats">
                            <span>8 Courses</span>
                            <span>30+ Labs</span>
                        </div>
                        <button class="btn btn-outline">View Curriculum</button>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="path-card">
                        <div class="path-icon">
                            <i class="fas fa-user-ninja"></i>
                        </div>
                        <h3>Ethical Hacking &amp; Red Team</h3>
                        <p>Learn reconnaissance, exploitation, post‑exploitation and reporting using ethical hacking best practices.</p>
                        <div class="path-stats">
                            <span>10 Courses</span>
                            <span>40+ Labs</span>
                        </div>
                        <button class="btn btn-outline">View Curriculum</button>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="path-card">
                        <div class="path-icon">
                            <i class="fas fa-cloud-shield"></i>
                        </div>
                        <h3>Cloud &amp; DevSecOps</h3>
                        <p>Secure AWS/Azure deployments, CI/CD pipelines, container security and zero‑trust architectures.</p>
                        <div class="path-stats">
                            <span>12 Courses</span>
                            <span>50+ Labs</span>
                        </div>
                        <button class="btn btn-outline">View Curriculum</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Delivery Modes Section -->
    <section class="our-story-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="story-content">
                        <div class="section-header-modern text-left">
                            <h2 class="section-title-modern"><?php sc_text('training', 'delivery_title', 'Flexible Delivery For Modern Teams', $region); ?></h2>
                            <p class="section-subtitle-modern"><?php sc_html('training', 'delivery_subtitle', 'Choose the format that fits your security programme.', $region); ?></p>
                        </div>
                        <p class="story-text"><?php sc_html('training', 'delivery_text_1', 'Combine self-paced labs, instructor-led virtual sessions and on-site bootcamps to create a blended learning experience for your security and IT teams.', $region); ?></p>
                        <p class="story-text"><?php sc_html('training', 'delivery_text_2', 'Learners gain access to sandbox environments, capture‑the‑flag challenges, downloadable playbooks and region‑specific content for USA, Europe and Africa.', $region); ?></p>
                        <div class="story-stats">
                            <div class="stat-item">
                                <div class="stat-number">50K+</div>
                                <div class="stat-label">Learners Trained</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">98%</div>
                                <div class="stat-label">Satisfaction Rate</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number">500+</div>
                                <div class="stat-label">Courses &amp; Labs</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="story-image">
                        <img src="../assets/images/hero-professional.jpg" alt="Cybersecurity Training" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Connect With Us Section -->
    <section class="cta-section">
        <div class="container">
            <div class="cta-content text-center">
                <h2><?php sc_text('training', 'cta_title', 'Talk To Our Training Advisors', $region); ?></h2>
                <p><?php sc_html('training', 'cta_text', 'Plan a security upskilling roadmap for your organisation or your own tech career.', $region); ?></p>
                <div class="cta-actions justify-content-center flex-wrap">
                    <div class="social-links-large">
                        <a href="#" class="social-link">
                            <i class="fab fa-linkedin"></i>
                            <span>LinkedIn</span>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-twitter"></i>
                            <span>Twitter / X</span>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-facebook"></i>
                            <span>Facebook</span>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-instagram"></i>
                            <span>Instagram</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- WhatsApp Widget -->
    <div class="whatsapp-widget" id="whatsappWidget">
        <div class="whatsapp-button">
            <i class="fab fa-whatsapp"></i>
        </div>
        <div class="whatsapp-chat">
            <div class="chat-header">
                <h4>SmartThink Support</h4>
                <span class="status">Online</span>
            </div>
            <div class="chat-messages" id="chatMessages">
                <div class="message bot">
                    Need help choosing the right training path? Send us a message.
                </div>
            </div>
            <div class="chat-input">
                <input type="text" id="chatInput" placeholder="Type your message...">
                <button id="sendMessage"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="main-footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="footer-brand">
                        <img src="../assets/images/smartthinklogos.jpeg" alt="SmartThink" class="footer-logo">
                        <p><?php sc_html('home', 'footer_about', 'Empowering learners globally with cutting-edge cybersecurity and IT training.', $region); ?></p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-facebook"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-2">
                    <div class="footer-links">
                        <h4>Quick Links</h4>
                        <ul>
                            <li><a href="index.php">Home</a></li>
                            <li><a href="about.php">About Us</a></li>
                            <li><a href="courses.php">Courses</a></li>
                            <li><a href="services.php">Services</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-2">
                    <div class="footer-links">
                        <h4>Resources</h4>
                        <ul>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="#">FAQs</a></li>
                            <li><a href="#">Support</a></li>
                            <li><a href="#">Careers</a></li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="footer-newsletter">
                        <h4>Subscribe to Our Newsletter</h4>
                        <p>Get alerts on new cyber labs, bootcamps and certifications.</p>
                        <form class="newsletter-form">
                            <input type="email" placeholder="Your email address">
                            <button type="submit">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="row">
                    <div class="col-md-6">
                        <p><?php sc_html('home', 'footer_copyright', '&copy; 2026 SmartThink. All rights reserved.', $region); ?></p>
                    </div>
                    <div class="col-md-6">
                        <div class="footer-bottom-links">
                            <a href="#">Privacy Policy</a>
                            <a href="#">Terms of Service</a>
                            <a href="#">Cookie Policy</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <script src="../assets/js/main.js"></script>
    <script src="../assets/js/modern-interactions.js"></script>
</body>
</html>
