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

get_header(); ?>

<main id="main" class="site-main">
    <?php
    // Get testimonials data
    $testimonials = nihongo_get_testimonials(12);
    ?>

    <!-- Hero Section with Dynamic Image Carousel -->
    <section class="hero" style="background: linear-gradient(135deg, #3498db, #2980b9);">
        <div class="hero-carousel">
            <div class="carousel-container">
                <div class="carousel-slide active" data-index="0">
                    <div class="carousel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/r1.jpg" alt="<?php echo nihongo_translate('carousel_description_1'); ?>" />
                    </div>
                    <div class="carousel-content">
                        <div class="carousel-caption">
                            <h3 class="carousel-title"><?php echo nihongo_translate('carousel_title_1'); ?></h3>
                            <p class="carousel-description"><?php echo nihongo_translate('carousel_description_1'); ?></p>
                            <div class="carousel-comment">
                                <p><?php echo nihongo_translate('carousel_comment_1'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="carousel-slide" data-index="1">
                    <div class="carousel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/r2.jpg" alt="<?php echo nihongo_translate('carousel_description_2'); ?>" />
                    </div>
                    <div class="carousel-content">
                        <div class="carousel-caption">
                            <h3 class="carousel-title"><?php echo nihongo_translate('carousel_title_2'); ?></h3>
                            <p class="carousel-description"><?php echo nihongo_translate('carousel_description_2'); ?></p>
                            <div class="carousel-comment">
                                <p><?php echo nihongo_translate('carousel_comment_2'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="carousel-slide" data-index="2">
                    <div class="carousel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/r3.jpg" alt="<?php echo nihongo_translate('carousel_description_3'); ?>" />
                    </div>
                    <div class="carousel-content">
                        <div class="carousel-caption">
                            <h3 class="carousel-title"><?php echo nihongo_translate('carousel_title_3'); ?></h3>
                            <p class="carousel-description"><?php echo nihongo_translate('carousel_description_3'); ?></p>
                            <div class="carousel-comment">
                                <p><?php echo nihongo_translate('carousel_comment_3'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="carousel-slide" data-index="3">
                    <div class="carousel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/r4.jpg" alt="<?php echo nihongo_translate('carousel_description_4'); ?>" />
                    </div>
                    <div class="carousel-content">
                        <div class="carousel-caption">
                            <h3 class="carousel-title"><?php echo nihongo_translate('carousel_title_4'); ?></h3>
                            <p class="carousel-description"><?php echo nihongo_translate('carousel_description_4'); ?></p>
                            <div class="carousel-comment">
                                <p><?php echo nihongo_translate('carousel_comment_4'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="carousel-slide" data-index="4">
                    <div class="carousel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/r5.jpg" alt="<?php echo nihongo_translate('carousel_description_5'); ?>" />
                    </div>
                    <div class="carousel-content">
                        <div class="carousel-caption">
                            <h3 class="carousel-title"><?php echo nihongo_translate('carousel_title_5'); ?></h3>
                            <p class="carousel-description"><?php echo nihongo_translate('carousel_description_5'); ?></p>
                            <div class="carousel-comment">
                                <p><?php echo nihongo_translate('carousel_comment_5'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="carousel-slide" data-index="5">
                    <div class="carousel-image">
                        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/r6.jpg" alt="<?php echo nihongo_translate('carousel_description_6'); ?>" />
                    </div>
                    <div class="carousel-content">
                        <div class="carousel-caption">
                            <h3 class="carousel-title"><?php echo nihongo_translate('carousel_title_6'); ?></h3>
                            <p class="carousel-description"><?php echo nihongo_translate('carousel_description_6'); ?></p>
                            <div class="carousel-comment">
                                <p><?php echo nihongo_translate('carousel_comment_6'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Carousel Navigation Dots -->
            <div class="carousel-dots">
                <span class="dot active" data-index="0"></span>
                <span class="dot" data-index="1"></span>
                <span class="dot" data-index="2"></span>
                <span class="dot" data-index="3"></span>
                <span class="dot" data-index="4"></span>
                <span class="dot" data-index="5"></span>
            </div>
            
            <!-- Carousel Navigation Arrows -->
            <button class="carousel-arrow carousel-prev">‹</button>
            <button class="carousel-arrow carousel-next">›</button>
        </div>
    </section>

    <!-- Testimonials Section -->
    <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" id="testimonials-container">
                <?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>
    </section>

    <!-- Video Interview Section -->
    <section class="section video-interview">
        <div class="container">
            <div class="video-interview-grid">
                <div class="video-section">
                    <div class="video-wrapper">
                        <video id="interview-video" poster="<?php echo get_template_directory_uri(); ?>/assets/img/m1.png" controls>
                            <source src="<?php echo get_template_directory_uri(); ?>/assets/img/m1.mp4" type="video/mp4">
                            Your browser does not support video playback.
                        </video>
                        <div class="video-overlay">
                            <button class="play-button" id="play-button">
                                <span class="play-icon">▶</span>
                            </button>
                        </div>
                    </div>
                    <div class="video-info">
                        <h4><?php echo nihongo_translate('emily_from_america'); ?></h4>
                    </div>
                </div>
                
                <div class="qa-section">
                    <div class="interview-qa">
                        <div class="qa-item" data-answer="1">
                            <h4 class="question"><?php echo nihongo_translate('qa_challenge_before_enrolling'); ?></h4>
                            <div class="answer-content" style="display: none;">
                                <p class="answer"><?php echo nihongo_translate('qa_challenge_answer'); ?></p>
                                <p class="translation"><?php echo nihongo_translate('qa_challenge_answer'); ?></p>
                            </div>
                        </div>
                        
                        <div class="qa-item" data-answer="2">
                            <h4 class="question"><?php echo nihongo_translate('qa_good_about_course'); ?></h4>
                            <div class="answer-content" style="display: none;">
                                <p class="answer"><?php echo nihongo_translate('qa_good_answer'); ?></p>
                                <p class="translation"><?php echo nihongo_translate('qa_good_answer'); ?></p>
                            </div>
                        </div>
                        
                        <div class="qa-item" data-answer="3">
                            <h4 class="question"><?php echo nihongo_translate('qa_message_for_considering'); ?></h4>
                            <div class="answer-content" style="display: none;">
                                <p class="answer"><?php echo nihongo_translate('qa_message_answer'); ?></p>
                                <p class="translation"><?php echo nihongo_translate('qa_message_answer'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="section" style="background: linear-gradient(135deg, #3498db, #2980b9); 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: #3498db;"><?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>
</main>

<?php get_footer(); ?>
