<?php include 'header.php'; ?>

<div class="hero-slider">
    <div uk-slideshow="animation: slide; autoplay: true; autoplay-interval: 5000; pause-on-hover: true; finite: false; velocity: 1; min-height: 640; max-height: 640">
        <div class="uk-position-relative uk-visible-toggle">

            <!-- Slides -->
            <div class="uk-slideshow-items">

                <!-- Slide 1 -->
                <div>
                    <div class="slide-content slide-1">
                        <div class="content-wrapper">
                            <div class="text-content">
                                <div class="trust-badge">
                                    <span class="star"> <span uk-icon="icon: star-bold; ratio: .8" class="uk-icon star-rate" aria-hidden="true"></span></span>
                                    <span>Trusted by 10,000+ Job Seekers</span>
                                </div>

                                <h1 class="main-heading">Master your Interview Skills with expert guidance.</h1>

                                <p class="subheading">
                                    Connect with professional HR specialists for realistic mock interview sessions.
                                </p>

                                <div class="cta-buttons">
                                    <a href="trainers.php" class="uk-button uk-button-primary">
                                        <span>Find Expert Trainers</span>
                                        <span uk-icon="icon: arrow-up-right; ratio: .7" class="uk-icon"></span>
                                    </a>
                                    <a href="#howWork" class="uk-button uk-button-default" uk-scroll>
                                        <span>How It Works</span>
                                        <span uk-icon="icon: arrow-right; ratio: .7" class="uk-icon"></span>
                                    </a>
                                </div>

                                <div class="stats-container">
                                    <div class="avatars">
                                        <div class="avatar"><img src="assets/images/avatar-small-1.webp" alt="name 1"></div>
                                        <div class="avatar"><img src="assets/images/avatar-small-2.webp" alt="name 2"></div>
                                        <div class="avatar"><img src="assets/images/avatar-small-3.webp" alt="name 3"></div>
                                    </div>
                                    <div class="stat-text"><strong>200K+</strong> Success Stories</div>
                                    <div class="rating">
                                        <span class="stars"> <span uk-icon="icon: star-bold; ratio: .8" class="uk-icon star-rate" aria-hidden="true"></span></span>
                                        <span class="stat-text"><strong>4.8</strong> Average rating</span>
                                    </div>
                                </div>
                            </div>

                            <div class="image-content uk-visible@l">
                                <img src="assets/images/hero.webp" alt="Professional on video call" class="main-image">
                                <div class="floating-elements">
                                    <div class="floating-card">Improve Communication</div>
                                    <div class="floating-card">Land the Job</div>
                                    <div class="floating-card">Boost Confidence</div>
                                </div>
                            </div>

                            <div class="image-content uk-hidden@l">
                                <img src="assets/images/slider-mob.webp" alt="Professional on video call" class="mob-image">
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Slide 2 -->
                <div>
                    <div class="slide-content slide-1">
                        <div class="content-wrapper">
                            <div class="text-content">
                                <div class="trust-badge">
                                    <span class="star"> <span uk-icon="icon: star-bold; ratio: .8" class="uk-icon star-rate" aria-hidden="true"></span></span>
                                    <span>Industry Experts Available 24/7</span>
                                </div>

                                <h1 class="main-heading">Practice with Real HR Professionals from Top Companies</h1>

                                <p class="subheading">
                                    Get personalized feedback from recruiters at Google, Amazon, Meta, and other leading organizations.
                                </p>

                                <div class="cta-buttons">
                                    <a href="categories.php" class="uk-button uk-button-primary">
                                        <span>Book Mock Interview</span>
                                        <span uk-icon="icon: arrow-up-right; ratio: .7" class="uk-icon"></span>
                                    </a>
                                    <a href="#howWork" class="uk-button uk-button-default" uk-scroll>
                                        <span>How It Works</span>
                                        <span uk-icon="icon: arrow-right; ratio: .7" class="uk-icon"></span>
                                    </a>
                                </div>

                                <div class="stats-container">
                                    <div class="avatars">
                                        <div class="avatar"><img src="assets/images/avatar-small-1.webp" alt="name 1"></div>
                                        <div class="avatar"><img src="assets/images/avatar-small-2.webp" alt="name 2"></div>
                                        <div class="avatar"><img src="assets/images/avatar-small-3.webp" alt="name 3"></div>
                                    </div>
                                    <div class="stat-text"><strong>500+</strong> HR Experts</div>
                                    <div class="rating">
                                        <span class="stars"> <span uk-icon="icon: star-bold; ratio: .8" class="uk-icon star-rate" aria-hidden="true"></span></span>
                                        <span class="stat-text"><strong>98%</strong> Success Rate</span>
                                    </div>
                                </div>
                            </div>

                            <div class="image-content uk-visible@l">
                                <img src="assets/images/hero-2.webp" alt="Professional on video call" class="main-image">
                                <div class="floating-elements">
                                    <div class="floating-card">Expert Feedback</div>
                                    <div class="floating-card">Skill Assessment</div>
                                    <div class="floating-card">Career Growth</div>
                                </div>
                            </div>

                            <div class="image-content uk-hidden@l">
                                <img src="assets/images/slider-mob-2.webp" alt="Professional on video call" class="mob-image">
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            <!-- Arrow Navigation -->
            <a class="uk-position-center-left uk-position-small slidenav uk-icon uk-icon-button uk-hidden-hover uk-visible@m" href="#" uk-icon="icon: chevron-left; ratio: .7" uk-slideshow-item="previous"></a>
            <a class="uk-position-center-right uk-position-small slidenav uk-icon uk-icon-button uk-hidden-hover uk-visible@m" href="#" uk-icon="icon: chevron-right; ratio: .7" uk-slideshow-item="next"></a>

        </div>

        <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin uk-hidden@m"></ul>

    </div>
</div>

<div class="uk-visible@l">
    <?php include 'search-form.php'; ?>
</div>

<!-- Choose Your Interview Category Section -->
<section class="categories-section uk-section">
    <div class="uk-container">

        <div class="section-heading uk-text-center">
            <h2 class="section-title">Pick a Category</h2>
            <p class="section-subtitle">Choose what suits your career path.</p>
        </div><!-- section-heading -->

        <div class="uk-grid uk-grid-medium uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@l" uk-height-match="target: > div > .category-card > .specializations-list" uk-grid>
            <?php
            for ($i = 0; $i < 6; $i++) {
                include 'template-parts/cards/card-category.php';
            }
            ?>

        </div><!-- uk-grid -->

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Get all category cards
                const categoryCards = document.querySelectorAll('.category-card');

                // Initialize each card independently
                categoryCards.forEach(card => {
                    const categorySpecializations = card.querySelector('.category-specializations');
                    const specializationsList = card.querySelector('.specializations-list');
                    const moreButton = card.querySelector('.more-button');
                    const hiddenItems = card.querySelectorAll('.specialization-item.hidden');

                    // Update more button text with correct count
                    if (moreButton && hiddenItems.length > 0) {
                        moreButton.textContent = `+ ${hiddenItems.length} more`;
                    }

                    // Toggle entire specializations section for this card only
                    categorySpecializations.addEventListener('click', function() {
                        specializationsList.classList.toggle('collapsed');
                        categorySpecializations.classList.toggle('expanded');
                    });

                    // Toggle more/less items when button is clicked for this card only
                    if (moreButton) {
                        moreButton.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();

                            // Check if items are currently hidden
                            const areItemsHidden = hiddenItems[0]?.classList.contains('hidden');

                            if (areItemsHidden) {
                                // Show all hidden items in this card only
                                hiddenItems.forEach(item => {
                                    item.classList.remove('hidden');
                                });
                                // Change button text to "show less"
                                moreButton.textContent = '- Show less';
                            } else {
                                // Hide items again in this card only
                                hiddenItems.forEach(item => {
                                    item.classList.add('hidden');
                                });
                                // Change button text back to "+ X more"
                                moreButton.textContent = `+ ${hiddenItems.length} more`;
                            }
                        });
                    }
                });
            });
        </script>

    </div><!-- uk-container -->
</section><!-- categories-section -->

<!-- Meet Our Expert Trainers Section -->
<section class="trainers-section uk-section">
    <div class="uk-container">

        <div uk-slider="sets: true; autoplay: true; autoplay-interval: 5000;pause-on-hover: true">

            <div class="section-heading uk-grid uk-flex-middle" uk-grid>
                <div class="uk-width-auto uk-visible@m">
                    <a class="slidenav uk-icon uk-icon-button" href uk-icon="icon: chevron-left; ratio: .7" uk-slider-item="previous"></a>
                </div>
                <div class="uk-width-expand">
                    <div class="uk-text-center">
                        <h2 class="section-title">Meet Our Expert Trainers</h2>
                        <p class="section-subtitle">Learn from seasoned professionals with a history of real-world success</p>
                    </div>
                </div>
                <div class="uk-width-auto uk-visible@m">
                    <a class="slidenav uk-icon uk-icon-button" href uk-icon="icon: chevron-right; ratio: .7" uk-slider-item="next"></a>
                </div>
            </div><!-- section-heading -->

            <div class="uk-position-relative uk-visible-toggle" tabindex="-1">

                <div class="uk-slider-items uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-grid-medium" uk-height-match="target: > div > .trainer-card-small > .trainer-specialty" uk-grid>
                    <?php for ($i = 0; $i < 8; $i++) : ?>
                        <?php include 'template-parts/cards/card-trainer-small.php'; ?>
                    <?php endfor; ?>
                </div>

            </div>

            <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top uk-hidden@m"></ul>

        </div><!-- uk-slider -->

        <div class="trainer-cta uk-margin-medium-top">
            <div class="uk-grid uk-grid-large uk-flex-bottom" uk-grid>
                <div class="uk-width-auto@m m-last">
                    <img src="assets/images/trainer-cta.webp" alt="trainer cta">
                </div>
                <div class="uk-width-expand@m">
                    <div class="trainer-cta-meta">
                        <h3 class="hls">Trained by <strong>the Best</strong>, Hired by <strong>the Best</strong></h3>
                        <p class="uk-margin-remove-bottom">Connect with HR directors, senior managers, and industry leaders who know exactly what employers are looking for in today's competitive market.</p>
                    </div>
                </div>
                <div class="uk-width-auto@m">
                    <div class="trainer-cta-btn">
                        <a href="trainers.php" class="uk-button uk-button-secondary uk-flex-inline uk-flex-middle gap-8">
                            <span>Browse All Trainers</span>
                            <span uk-icon="icon: arrow-right; ratio: .7" class="uk-icon" aria-hidden="true"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div><!-- uk-container -->
</section><!-- trainers-section -->

<!-- Step Section -->
<section id="howWork" class="step-section uk-section uk-text-center" uk-scrollspy="cls: uk-animation-slide-top-small; target: .an; delay: 400">
    <div class="uk-container">

        <div class="section-heading">
            <h2 class="section-title">How It Works</h2>
            <p class="section-subtitle">Four simple steps to interview mastery</p>
        </div>

        <div class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-2@m uk-child-width-1-4@l" uk-grid uk-height-match="target: > div > .step-box > .step-description">

            <div>
                <div class="step-box an">
                    <div class="step-num">01</div>
                    <h3 class="step-title uk-card-title">Expert Trainers</h3>
                    <div class="step-description">Browse expert trainers by specialization, rating, price, and availability</div>
                </div>
            </div>

            <div>
                <div class="step-box an">
                    <div class="step-num">02</div>
                    <h3 class="step-title uk-card-title">Book Your Session</h3>
                    <div class="step-description">Select date, time, duration (15-60 min), and upload your CV for personalized feedback</div>
                </div>
            </div>

            <div>
                <div class="step-box an">
                    <div class="step-num">03</div>
                    <h3 class="step-title uk-card-title">Attend Interview</h3>
                    <div class="step-description">Join live video session via Zoom for realistic mock interview experience</div>
                </div>
            </div>

            <div>
                <div class="step-box an">
                    <div class="step-num">04</div>
                    <h3 class="step-title uk-card-title">Get Feedback</h3>
                    <div class="step-description">Receive detailed evaluation with strengths, recommendations, and improvement tips</div>
                </div>
            </div>

        </div><!-- uk-grid -->

    </div><!-- uk-container -->
</section><!-- step-section -->

<!-- Counter Section -->
<section class="counter-section uk-section" id="counter-section">
    <div class="uk-container">
        <div class="uk-grid uk-flex-middle uk-child-width-1-2 uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
            <div>
                <div class="counter-box">
                    <div class="counter-num">
                        <span class="counter" data-target="500">0</span>+
                    </div>
                    <div class="counter-text">Expert Trainers</div>
                </div>
            </div>
            <div>
                <div class="counter-box">
                    <div class="counter-num">
                        <span class="counter" data-target="15000">0</span>+
                    </div>
                    <div class="counter-text">Successful Sessions</div>
                </div>
            </div>
            <div>
                <div class="counter-box">
                    <div class="counter-num">
                        <span class="counter" data-target="95">0</span>%
                    </div>
                    <div class="counter-text">Success Rate</div>
                </div>
            </div>
            <div>
                <div class="counter-box">
                    <div class="counter-num">
                        <span class="counter" data-target="4.9" data-decimal="1">0</span>
                    </div>
                    <div class="counter-text">Average Rating</div>
                </div>
            </div>
        </div>

        <script>
            // Counter Animation Function
            function animateCounter(element, target, duration = 2000, decimals = 0) {
                let start = 0;
                const startTime = performance.now();

                function updateCounter(currentTime) {
                    const elapsed = currentTime - startTime;
                    const progress = Math.min(elapsed / duration, 1);

                    // Easing function (ease-out)
                    const easeOut = 1 - Math.pow(1 - progress, 3);

                    const current = start + (target - start) * easeOut;

                    if (decimals > 0) {
                        element.textContent = current.toFixed(decimals);
                    } else {
                        element.textContent = Math.floor(current).toLocaleString();
                    }

                    if (progress < 1) {
                        requestAnimationFrame(updateCounter);
                    }
                }

                requestAnimationFrame(updateCounter);
            }

            // Intersection Observer for scroll detection
            const observerOptions = {
                threshold: 0.5, // Trigger when 50% of the section is visible
                rootMargin: '0px 0px -100px 0px' // Trigger a bit before the section is fully visible
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // Add animation class to counter boxes
                        const counterBoxes = entry.target.querySelectorAll('.counter-box');
                        counterBoxes.forEach((box, index) => {
                            setTimeout(() => {
                                box.classList.add('counter-animate');
                            }, index * 200); // Stagger the animations
                        });

                        // Start counter animations
                        const counters = entry.target.querySelectorAll('.counter');
                        counters.forEach((counter, index) => {
                            const target = parseFloat(counter.getAttribute('data-target'));
                            const decimals = parseInt(counter.getAttribute('data-decimal')) || 0;

                            // Delay each counter animation slightly
                            setTimeout(() => {
                                animateCounter(counter, target, 2000, decimals);
                            }, index * 300);
                        });

                        // Stop observing once animation has triggered
                        observer.unobserve(entry.target);
                    }
                });
            }, observerOptions);

            // Start observing the counter section
            const counterSection = document.getElementById('counter-section');
            observer.observe(counterSection);

            // Optional: Reset counters if you want to replay animation
            function resetCounters() {
                const counters = document.querySelectorAll('.counter');
                counters.forEach(counter => {
                    counter.textContent = '0';
                });

                const counterBoxes = document.querySelectorAll('.counter-box');
                counterBoxes.forEach(box => {
                    box.classList.remove('counter-animate');
                });

                // Re-observe the section
                observer.observe(counterSection);
            }

            // Add reset button functionality (optional)
            document.addEventListener('keydown', (e) => {
                if (e.key === 'r' || e.key === 'R') {
                    resetCounters();
                }
            });
        </script>
    </div><!-- uk-container -->
</section><!-- counter-section -->

<!-- Cta Section -->
<section class="cta-section uk-section">
    <div class="uk-container">
        <div class="uk-grid uk-flex-middle" uk-grid>

            <div class="uk-width-2-5@m">
                <img class="br32" src="assets/images/cta.webp" alt="Ready to Excel in Your Next Interview?">
            </div>

            <div class="uk-width-expand@m">

                <h2 class="f48 gradient-text">Ready to Excel in Your Next Interview?</h2>
                <p>Join thousands of successful candidates who have transformed their careers with expert interview coaching.</p>

                <div class="cta-section-btn uk-flex gap-12">
                    <a href="categories.php" class="uk-button uk-button-primary uk-flex-inline uk-flex-middle gap-8">
                        <span>Start Your Journey</span>
                        <span uk-icon="icon: arrow-right; ratio: .7" class="uk-icon" aria-hidden="true"></span>
                    </a>
                    <a href="trainers.php" class="uk-button uk-button-default uk-flex-inline uk-flex-middle gap-8">
                        <span>Browse Trainers</span>
                        <span uk-icon="icon: arrow-right; ratio: .7" class="uk-icon" aria-hidden="true"></span>
                    </a>
                </div>

            </div>

        </div><!-- uk-grid -->
    </div><!-- uk-container -->
</section><!-- cta-section -->
<?php include 'footer.php'; ?>