<?php
/**
 * Template part for displaying home page content
 *
 * @package Nihongo
 */

// Get data for the page
$features = nihongo_get_courses(4); // Get first 4 courses as features
$news = nihongo_get_news(12); // Get latest 12 news items
$testimonials = nihongo_get_testimonials(12); // Get latest 12 testimonials
?>

<!-- ========================================
    HERO SECTION
    Main landing area with primary messaging
======================================== -->
<section class="hero" style="color: #fff;">
    <div class="hero-background">
        <div class="hero-slider">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/bg11.jpg" alt="<?php echo nihongo_translate('hero_image_alt'); ?>" class="hero-image active" data-index="1">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/bg12.jpg" alt="<?php echo nihongo_translate('hero_image_alt'); ?>" class="hero-image" data-index="2">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/bg13.jpg" alt="<?php echo nihongo_translate('hero_image_alt'); ?>" class="hero-image" data-index="3">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/bg14.jpg" alt="<?php echo nihongo_translate('hero_image_alt'); ?>" class="hero-image" data-index="4">
            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/bg15.jpg" alt="<?php echo nihongo_translate('hero_image_alt'); ?>" class="hero-image" data-index="5">
        </div>
        <div class="hero-overlay"></div>
        
        <!-- Pagination Info -->
        <div class="hero-pagination-info">
            <div class="hero-pagination-counter">
                1 / 5
            </div>
        </div>
        
        <!-- Image Indicators -->
        <div class="hero-indicators">
            <button class="hero-indicator active" data-index="0" aria-label="Go to image 1"></button>
            <button class="hero-indicator" data-index="1" aria-label="Go to image 2"></button>
            <button class="hero-indicator" data-index="2" aria-label="Go to image 3"></button>
            <button class="hero-indicator" data-index="3" aria-label="Go to image 4"></button>
            <button class="hero-indicator" data-index="4" aria-label="Go to image 5"></button>
        </div>
    </div>
    <div class="hero-content" style="color: #fff;">
        <h1 class="hero-title" style="color: #fff; font-size: clamp(2rem, 5vw + 1rem, 3.5rem); line-height: 1.2;"><?php echo nihongo_translate('hero_title'); ?></h1>
        <p class="hero-subtitle" style="color: #fff; font-size: clamp(1.05rem, 2.2vw + 0.6rem, 1.6rem); line-height: 1.5;"><?php echo nihongo_translate('hero_subtitle'); ?></p>
        <div class="hero-buttons" style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;">
            <a href="<?php echo nihongo_get_page_url('courses'); ?>" class="read-more-btn" style="background: #007bff; color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem;">
                
                <?php echo nihongo_translate('view_courses'); ?>
            </a>
            <a href="<?php echo nihongo_get_page_url('contact'); ?>" class="read-more-btn" style="background: transparent; color: white; border: 2px solid white; padding: 1rem 2rem; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem;">
                <span>📞</span>
                <?php echo nihongo_translate('apply_counseling'); ?>
            </a>
        </div>
    </div>
</section>

<!-- ========================================
    ABOUT SECTION
    Explains what nihongo.net is
======================================== -->
<section class="section about-section" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/h2bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;">
    <div class="container" style="position: relative; z-index: 2;">
        <h2 class="section-title " style="color: #000;"><?php echo nihongo_translate('about_title'); ?></h2>
        <p class="section-subtitle" style="color: #000;">
            <?php echo nihongo_translate('about_description'); ?>
        </p>
    </div>
</section>

<!-- ========================================
    QUICK NAVIGATION SECTION
    Easy access to main pages
======================================== -->


<!-- ========================================
    FEATURES SECTION
    Highlights key benefits and unique selling points
======================================== -->
<section class="section features" style="background: linear-gradient(135deg, #f8f4f0 0%, #e8f4f8 50%, #f0f8f4 100%);">
    <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-panels-container">
            <div class="features-panels">
                <!-- Feature Panel 1: 40 Years of Tradition -->
                <div class="feature-panel">
                    <h3 class="feature-panel-title"><?php echo nihongo_translate('feature_1_title'); ?></h3>
                    <div class="feature-panel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/f1.jpg" alt="<?php echo nihongo_translate('feature_1_alt'); ?>" />
                    </div>
                    <div class="feature-panel-text">
                        <p><?php echo nihongo_translate('feature_1_text'); ?></p>
                    </div>
                </div>
                
                <!-- Feature Panel 2: Custom-Made Classes -->
                <div class="feature-panel">
                    <h3 class="feature-panel-title"><?php echo nihongo_translate('feature_2_title'); ?></h3>
                    <div class="feature-panel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/f2.png" alt="<?php echo nihongo_translate('feature_2_alt'); ?>" />
                    </div>
                    <div class="feature-panel-text">
                        <p><?php echo nihongo_translate('feature_2_text'); ?></p>
                    </div>
                </div>
                
                <div class="feature-panel">
                    <h3 class="feature-panel-title"><?php echo nihongo_translate('feature_3_title'); ?></h3>
                    <div class="feature-panel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/f3.jpg" alt="<?php echo nihongo_translate('feature_3_alt'); ?>" />
                    </div>
                    <div class="feature-panel-text">
                        <p><?php echo nihongo_translate('feature_3_text'); ?></p>
                    </div>
                </div>

                <div class="feature-panel">
                    <h3 class="feature-panel-title"><?php echo nihongo_translate('feature_4_title'); ?></h3>
                    <div class="feature-panel-image">
                        <a href="<?php echo get_permalink(get_page_by_path('j-bridge')); ?>">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/f4.jpg" alt="<?php echo nihongo_translate('feature_4_alt'); ?>" />
                        </a>
                    </div>
                    <div class="feature-panel-text">
                        <p><?php echo nihongo_translate('feature_4_text'); ?></p>
                    </div>
                </div>       
            </div>
        </div>
    </div>
</section>

<!-- ========================================
    NEWS FLOW CARDS SECTION
    Dynamic scrolling news cards showing various announcements
======================================== -->
<section class="section">
    <?php /* Moved flow-cards CSS to style.css */ ?>
    <div class="flow-cards-container">
        <div class="flow-cards-track">
            
            <!-- News Card 1: Event Information -->
            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n1.jpg" alt="<?php echo nihongo_translate('event_information'); ?>" />
                </div>
                <div class="flow-card-content">
                    <h3 class="flow-card-title"><?php echo nihongo_translate('event_information'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('event_information_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n2.jpg" alt="<?php echo nihongo_translate('class_cancellation_notice'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('class_cancellation_notice'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('class_cancellation_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n3.jpg" alt="<?php echo nihongo_translate('new_course_information'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('new_course_information'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('new_course_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n4.jpg" alt="<?php echo nihongo_translate('course_application_deadline'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('course_application_deadline'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('course_application_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n5.jpg" alt="<?php echo nihongo_translate('instructor_change_info'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('instructor_change_info'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('instructor_change_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n6.jpg" alt="<?php echo nihongo_translate('special_event_guide'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('special_event_guide'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('special_event_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n7.jpg" alt="<?php echo nihongo_translate('online_seminar_info'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('online_seminar_info'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('online_seminar_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n8.jpg" alt="<?php echo nihongo_translate('campaign_discount_info'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('campaign_discount_info'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('campaign_discount_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n9.jpg" alt="<?php echo nihongo_translate('facility_maintenance_info'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('facility_maintenance_info'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('facility_maintenance_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n10.jpg" alt="<?php echo nihongo_translate('emergency_contact_notices'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('emergency_contact_notices'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('emergency_contact_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n11.jpg" alt="<?php echo nihongo_translate('student_survey_recruitment'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('student_survey_recruitment'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('student_survey_text'); ?></p>
                </div>
            </div>

            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n12.jpg" alt="<?php echo nihongo_translate('media_coverage_info'); ?>" />
                </div>
                <div class="flow-card-content">
                                    <h3 class="flow-card-title"><?php echo nihongo_translate('media_coverage_info'); ?></h3>
                <p class="flow-card-text"><?php echo nihongo_translate('media_coverage_text'); ?></p>
                </div>
            </div>
            
            <!-- Duplicate first card for seamless flow -->
            <div class="flow-card">
                <div class="flow-card-image">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n1.jpg" alt="<?php echo nihongo_translate('event_information'); ?>" />
                </div>
                <div class="flow-card-content">
                    <h3 class="flow-card-title"><?php echo nihongo_translate('event_information'); ?></h3>
                    <p class="flow-card-text"><?php echo nihongo_translate('event_information_text'); ?></p>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center mt-4">
         <a href="news.php" class="btn-dark"><?php echo nihongo_translate('view_lesson_details'); ?></a>
    </div>
    <?php /* Moved flow-cards JS to assets/js/main.js */ ?>
</section>
<!-- ========================================
    LEARNING COLUMNS SECTIONS
    Educational content blocks alternating layout
======================================== -->
<!-- Learning Column 1: Japanese Brain Development -->
<section class="section" style="background: #fafafa;">
    <div class="container">
        <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;">
            <div style="flex: 1 1 520px;">
                <h2 class="section-title" style="text-align: left; margin-bottom: 1rem;"><?php echo nihongo_translate('learning_column_1_title'); ?></h2>
                <p class="section-subtitle" style="text-align: left; max-width: 760px;">
                    <?php echo nihongo_translate('learning_column_1_text'); ?>
                </p>
            </div>
            <div style="flex: 1 1 420px;">
                <div style="border-radius: 12px; overflow: hidden;">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/i1.jpg" alt="<?php echo nihongo_translate('learning_column_1_alt'); ?>" style="width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block;"/>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Learning Column 2: Japanese Language Tips -->
<section class="section">
    <div class="container">
        <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;">
            <div style="flex: 1 1 420px;">
                <div style="border-radius: 12px; overflow: hidden;">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/i2.jpg" alt="<?php echo nihongo_translate('learning_column_2_alt'); ?>" style="width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block;"/>
                </div>
            </div>
            <div style="flex: 1 1 520px;">
                <h2 class="section-title" style="text-align: left; margin-bottom: 1rem;"><?php echo nihongo_translate('learning_column_2_title'); ?></h2>
                <p class="section-subtitle" style="text-align: left; max-width: 760px;">
                    <?php echo nihongo_translate('learning_column_2_text'); ?>
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Learning Column 3: Cultural Understanding -->
<section class="section" style="background: #fafafa;">
    <div class="container">
        <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;">
            <div style="flex: 1 1 520px;">
                <h2 class="section-title" style="text-align: left; margin-bottom: 1rem;"><?php echo nihongo_translate('learning_column_3_title'); ?></h2>
                <p class="section-subtitle" style="text-align: left; max-width: 760px;">
                    <?php echo nihongo_translate('learning_column_3_text'); ?>
                </p>
            </div>
            <div style="flex: 1 1 420px;">
                <div style="border-radius: 12px; overflow: hidden;">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/i3.jpg" alt="<?php echo nihongo_translate('learning_column_3_alt'); ?>" style="width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block;"/>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Learning Column 4: Hiragana Times Integration -->
<section class="section">
    <div class="container">
        <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;">
            <div style="flex: 1 1 420px;">
                <div style="border-radius: 12px; overflow: hidden;">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/i4.jpg" alt="<?php echo nihongo_translate('learning_column_4_alt'); ?>" style="width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block;"/>
                </div>
            </div>
            <div style="flex: 1 1 520px;">
                <h2 class="section-title" style="text-align: left; margin-bottom: 1rem; "><?php echo nihongo_translate('learning_column_4_title'); ?></h2>
                <p class="section-subtitle" style="text-align: left; max-width: 760px; ">
                    <?php echo nihongo_translate('learning_column_4_text'); ?>
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Learning Column 5: Daily Learning -->
<section class="section" style="background: #fafafa;">
    <div class="container">
        <div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;">
            <div style="flex: 1 1 520px;">
                <h2 class="section-title" style="text-align: left; margin-bottom: 1rem;"><?php echo nihongo_translate('learning_column_5_title'); ?></h2>
                <p class="section-subtitle" style="text-align: left; max-width: 760px;">
                    <?php echo nihongo_translate('learning_column_5_text'); ?>
                </p>
            </div>
            <div style="flex: 1 1 420px;">
                <div style="border-radius: 12px; overflow: hidden;">
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/i5.jpg" alt="<?php echo nihongo_translate('learning_column_5_alt'); ?>" style="width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block;"/>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ========================================
    TESTIMONIALS SECTION
    Student voices and experiences
======================================== -->
<section class="section testimonials">
    <div class="container">
        <h2 class="section-title" ><?php echo nihongo_translate('testimonials_title'); ?></h2>
        <p class="section-subtitle" ><?php echo nihongo_translate('testimonials_subtitle'); ?></p>
        
        <div class="testimonials-grid">
            <?php if (!empty($testimonials)) : ?>
                <?php foreach ($testimonials as $testimonial): ?>
                    <div class="testimonial-card">
                        <div class="testimonial-content">
                            <?php if (!empty($testimonial['image'])): ?>
                                <div class="testimonial-image">
                                    <img src="<?php echo esc_url($testimonial['image']); ?>" alt="<?php echo esc_attr($testimonial['name']); ?>" />
                                </div>
                            <?php endif; ?>
                            <div class="testimonial-header">
                                <h3 class="testimonial-title"><?php echo esc_html($testimonial['title']); ?></h3>
                                <div class="testimonial-rating">
                                    <?php for ($i = 0; $i < $testimonial['rating']; $i++): ?>
                                        <span class="star">★</span>
                                    <?php endfor; ?>
                                </div>
                            </div>
                            <p class="testimonial-comment"><?php echo esc_html($testimonial['comment']); ?></p>
                            <div class="testimonial-author">
                                <div class="testimonial-info">
                                    <h4><?php echo esc_html($testimonial['name']); ?></h4>
                                    <p><?php echo esc_html($testimonial['country']); ?> / <?php echo esc_html($testimonial['course']); ?></p>
                                    <?php if (!empty($testimonial['date'])): ?>
                                        <p class="testimonial-date"><?php echo esc_html($testimonial['date']); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else : ?>
                <!-- Fallback testimonials -->
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <div class="testimonial-image">
                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/r1.jpg" alt="Emily" />
                        </div>
                        <div class="testimonial-header">
                            <h3 class="testimonial-title"><?php echo nihongo_translate('carousel_title_1'); ?></h3>
                            <div class="testimonial-rating">
                                <span class="star">★</span>
                                <span class="star">★</span>
                                <span class="star">★</span>
                                <span class="star">★</span>
                                <span class="star">★</span>
                            </div>
                        </div>
                        <p class="testimonial-comment"><?php echo nihongo_translate('carousel_comment_1'); ?></p>
                        <div class="testimonial-author">
                            <div class="testimonial-info">
                                <h4><?php echo nihongo_translate('carousel_description_1'); ?></h4>
                                <p>アメリカ / ゲートウェイ・ファンデーション</p>
                                <p class="testimonial-date">2025年5月10日</p>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
        
        <div class="text-center mt-4">
            <a href="<?php echo get_permalink(get_page_by_path('voices')); ?>" class="hero-cta"><?php echo nihongo_translate('view_all_voices'); ?></a>
        </div>
    </div>
</section>

<!-- ========================================
    CALL TO ACTION SECTION
    Final conversion section with contact options
======================================== -->
<section class="section" style="background: linear-gradient(135deg, #667eea, #764ba2); 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: #667eea;"><?php echo nihongo_translate('free_counseling'); ?></a>
            <a href="<?php echo get_permalink(get_page_by_path('courses')); ?>" class="hero-cta" style="background: transparent; border: 2px solid white;"><?php echo nihongo_translate('view_courses'); ?></a>
        </div>
    </div>
</section>



<?php /* Moved floating action button styles to style.css */ ?>
