<?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('recruitment', 'meta_title', 'Recruitment 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/page-styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&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" href="training.php">Training</a></li>
                                <li><a class="dropdown-item" href="consulting.php">Consulting</a></li>
                                <li><a class="dropdown-item active" 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>

    <!-- Recruitment 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('recruitment', 'hero_badge', 'Tech &amp; Security Talent', $region); ?></span>
                        </div>
                        <h1 class="hero-title-modern"><?php sc_text('recruitment', 'hero_title', 'Recruitment for Modern IT &amp; Cyber Teams', $region); ?></h1>
                        <p class="hero-subtitle-modern"><?php sc_html('recruitment', 'hero_subtitle', 'Connect with vetted SOC analysts, cloud engineers, network specialists and security leaders across USA, Europe and Africa.', $region); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Recruitment Services Section -->
    <section class="our-story-section">
        <div class="container">
            <div class="section-header-modern text-left mb-5">
                <h2 class="section-title-modern"><?php sc_text('recruitment', 'services_title', 'Specialised Recruitment Services', $region); ?></h2>
                <p class="section-subtitle-modern"><?php sc_html('recruitment', 'services_subtitle', 'We understand the skills, certifications and mindset required for critical IT and security roles.', $region); ?></p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="contact-info-card">
                        <div class="info-icon">
                            <i class="fas fa-user-shield"></i>
                        </div>
                        <h3>Security Operations Roles</h3>
                        <p>SOC analysts, incident responders, threat hunters and security engineers to protect your environment 24/7.</p>
                        <a href="contact.php" class="btn btn-outline">Hire Security Talent</a>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact-info-card">
                        <div class="info-icon">
                            <i class="fas fa-server"></i>
                        </div>
                        <h3>Infrastructure &amp; Cloud</h3>
                        <p>Network engineers, cloud architects and DevOps specialists with strong security and automation experience.</p>
                        <a href="contact.php" class="btn btn-outline">Request Profiles</a>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="contact-info-card">
                        <div class="info-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <h3>Leadership &amp; Advisory</h3>
                        <p>CISOs, Heads of IT, security managers and consultants to drive your technology and risk strategy.</p>
                        <a href="contact.php" class="btn btn-outline">Discuss Leadership Needs</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Candidate & Employer Section -->
    <section class="mission-vision-section">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="mission-card">
                        <div class="card-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <h3>For Employers</h3>
                        <p>Access a curated pool of candidates screened for technical depth, communication skills and cultural fit. We handle shortlisting so your team can focus on delivery.</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="vision-card">
                        <div class="card-icon">
                            <i class="fas fa-user-graduate"></i>
                        </div>
                        <h3>For Candidates</h3>
                        <p>Gain visibility with hiring managers, receive interview coaching, and match into roles aligned with your skills and region.</p>
                    </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('recruitment', 'cta_title', 'Let\'s Build Your Next Security or IT Team', $region); ?></h2>
                <p><?php sc_html('recruitment', 'cta_text', 'Share your hiring needs or upload your CV and join our security talent network.', $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">
                    Want to discuss recruitment or share your CV? Chat with us here.
                </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', 'Connecting organisations with the right technology and security talent.', $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="#">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>Stay updated on new roles, hiring trends and career tips in IT and cybersecurity.</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>
