<?php
/**
 * Template for displaying Courses page
 *
 * @package Nihongo
 */

get_header(); ?>

<main id="main" class="site-main">
    <?php
    // Get courses data
    $courses = nihongo_get_courses();
    ?>
    
    <!-- Hero Section -->
    <section class="hero" id="hero-slideshow">
        <div class="hero-background-slideshow">
            <div class="slide active" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/cc1.jpg');"></div>
            <div class="slide" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/cc2.jpg');"></div>
            <div class="slide" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/cc3.jpg');"></div>
            <div class="slide" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/ccc4.jpg');"></div>
            <div class="slide" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/cc5.jpg');"></div>
            <div class="slide" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/cc6.jpg');"></div>
        </div>
        <div class="hero-overlay"></div>
        <div class="container">
        </div>
    </section>

    <!-- Features Section -->
    <section class="section features">
        <div class="container">
            <h2 class="section-title"><?php echo nihongo_translate('features_title'); ?></h2>
            <p class="section-subtitle"><?php echo nihongo_translate('features_subtitle'); ?></p>
            
            <div class="features-grid">
                <div class="feature-card">
                    <h3 class="feature-title"><?php echo nihongo_translate('online_learning_focus_title'); ?></h3>
                    <p class="feature-subtitle"><?php echo nihongo_translate('online_learning_focus_subtitle'); ?></p>
                    <div class="feature-content-wrapper" style="display: flex; align-items: center; gap: 2rem; margin-top: 1rem;">
                        <div class="feature-image" style="flex: 0 0 300px;">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/cf1.jpg" alt="<?php echo nihongo_translate('online_learning_focus_title'); ?>" style="width: 100%; height: 250px; object-fit: cover; border-radius: 8px;">
                        </div>
                        <div class="feature-description" style="flex: 1;">
                            <p>
                                <?php echo nihongo_translate('online_learning_focus_description'); ?>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="feature-card">
                    <h3 class="feature-title"><?php echo nihongo_translate('level_based_support_title'); ?></h3>
                    <p class="feature-subtitle"><?php echo nihongo_translate('level_based_support_subtitle'); ?></p>
                    <div class="feature-content-wrapper" style="display: flex; align-items: center; gap: 2rem; margin-top: 1rem;">
                        <div class="feature-image" style="flex: 0 0 300px;">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/cf2.jpg" alt="<?php echo nihongo_translate('level_based_support_title'); ?>" style="width: 100%; height: 250px; object-fit: cover; border-radius: 8px;">
                        </div>
                        <div class="feature-description" style="flex: 1;">
                            <p>
                                <?php echo nihongo_translate('level_based_support_description'); ?>
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="feature-card">
                    <h3 class="feature-title"><?php echo nihongo_translate('hiragana_times_materials_title'); ?></h3>
                    <p class="feature-subtitle"><?php echo nihongo_translate('hiragana_times_materials_subtitle'); ?></p>
                    <div class="feature-content-wrapper" style="display: flex; align-items: center; gap: 2rem; margin-top: 1rem;">
                        <div class="feature-image" style="flex: 0 0 300px;">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/cf3.jpg" alt="<?php echo nihongo_translate('hiragana_times_materials_title'); ?>" style="width: 100%; height: 250px; object-fit: cover; border-radius: 8px;">
                        </div>
                        <div class="feature-description" style="flex: 1;">
                            <p>
                                <?php echo nihongo_translate('hiragana_times_materials_description'); ?>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Courses Section -->
    <section class="section">
        <div class="container">
            <h2 class="section-title"><?php echo nihongo_translate('course_list_title'); ?></h2>
            <p class="section-subtitle"><?php echo nihongo_translate('course_list_subtitle'); ?></p>
            
            <div class="courses-grid">
                <?php 
                $course_img = ['cc1.jpg', 'cc2.jpg', 'cc3.jpg', 'ccc4.jpg', 'cc5.jpg', 'cc6.jpg'];
                $image_index = 0;
                foreach ($courses as $course): 
                ?>
                    <a href="<?php echo esc_url($course['url']); ?>" class="course-card-link" style="text-decoration: none; color: inherit;">
                        <div class="course-card" id="<?php echo esc_attr($course['id']); ?>" data-level="<?php echo esc_attr($course['level']); ?>" style="animation: fadeInUp 0.8s ease-out <?php echo $image_index * 0.2; ?>s both; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.1)'">
                            <div class="course-image">
                                <img src="<?php echo $course['image'] ?: get_template_directory_uri() . '/assets/img/' . $course_img[$image_index]; ?>" alt="<?php echo esc_attr($course['title']); ?>" style="width: 100%; height: 200px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease;" onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 15px rgba(0,0,0,0.1)'">
                            </div>
                            <div class="course-content">
                                <h3 class="course-title"><?php echo esc_html($course['title']); ?></h3>
                                <p class="course-description"><?php echo esc_html($course['description']); ?></p>
                                <div class="course-meta">
                                    <span class="course-level"><?php echo esc_html($course['level']); ?></span>
                                    <span class="course-duration"><?php echo esc_html($course['duration']); ?></span>
                                </div>
                            </div>
                        </div>
                    </a>
                <?php 
                $image_index++;
                endforeach; 
                ?>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="section" style="background: linear-gradient(135deg, #f39c12, #e67e22); color: white;">
        <div class="container text-center">
            <h2 class="section-title" style="color: white;"><?php echo nihongo_translate('ready_start_title'); ?></h2>
            <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">
                <?php echo nihongo_translate('ready_start_subtitle'); ?>
            </p>
            <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                <a href="<?php echo get_permalink(get_page_by_path('contact')); ?>" class="hero-cta" style="background: white; color: #f39c12;"><?php echo nihongo_translate('free_counseling'); ?></a>
                <a href="<?php echo get_permalink(get_page_by_path('j-bridge')); ?>" class="hero-cta" style="background: transparent; border: 2px solid white;"><?php echo nihongo_translate('about_j_bridge'); ?></a>
            </div>
        </div>
    </section>
</main>

<?php
get_footer();
