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

get_header(); ?>

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

    <!-- Hero Section with full-screen rotating image and caption -->
    <section id="news-hero" class="hero" style="position: relative; overflow: hidden; height: 100vh; min-height: 100svh;" data-titles='<?php echo json_encode([
        nihongo_translate('event_information'),
        nihongo_translate('class_cancellation_notice'),
        nihongo_translate('new_course_information'),
        nihongo_translate('course_application_deadline'),
        nihongo_translate('instructor_change_info'),
        nihongo_translate('special_event_guide'),
        nihongo_translate('online_seminar_info'),
        nihongo_translate('campaign_discount_info'),
        nihongo_translate('facility_maintenance_info'),
        nihongo_translate('emergency_contact_notices'),
        nihongo_translate('student_survey_recruitment'),
        nihongo_translate('media_coverage_info')
    ]); ?>'>
        <img id="news-hero-image" src="<?php echo get_template_directory_uri(); ?>/assets/img/n1.jpg" alt="<?php echo nihongo_translate('news_title'); ?>" style="position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; object-fit: cover; display: block;">
        <div aria-hidden="true" style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));"></div>
        <div class="container" style="position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center;">
            <div class="hero-content" style="color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.4);">
            </div>
            <div id="news-hero-caption" style="margin-top: auto; margin-bottom: 24px; background: rgba(0,0,0,0.65); color: #fff; padding: 1.1rem 1.4rem; border-radius: 10px; max-width: 900px; font-size: clamp(1.25rem, 2.8vw, 2rem); line-height: 1.35; font-weight: 600; font-family: 'Noto Sans JP','Hiragino Kaku Gothic ProN','Hiragino Sans','Meiryo','Segoe UI',system-ui,Roboto,Arial,sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,0.35); backdrop-filter: blur(2px);">
                <?php echo nihongo_translate('event_information'); ?>
            </div>
        </div>
    </section>

    <!-- News Section -->
    <section class="section">
        <div class="container">
            <div class="news-grid">
                <?php if (!empty($news)) : ?>
                    <?php foreach ($news as $index => $news_item) : ?>
                        <div class="news-card">
                            <div class="news-image">
                                <img src="<?php echo $news_item['image'] ?: get_template_directory_uri() . '/assets/img/n' . ($index % 12 + 1) . '.jpg'; ?>" alt="<?php echo esc_attr($news_item['title']); ?>" />
                            </div>
                            <div class="news-content">
                                <div class="news-date"><?php echo esc_html($news_item['date']); ?></div>
                                <h3 class="news-title"><?php echo esc_html($news_item['title']); ?></h3>
                                <p class="news-excerpt"><?php echo esc_html($news_item['excerpt']); ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else : ?>
                    <!-- Fallback news cards -->
                    <div class="news-card">
                        <div class="news-image"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/n1.jpg" alt="<?php echo nihongo_translate('event_information'); ?>" /></div>
                        <div class="news-content">
                            <div class="news-date"><?php echo nihongo_translate('news_date_1'); ?></div>
                            <h3 class="news-title"><?php echo nihongo_translate('event_information'); ?></h3>
                            <p class="news-excerpt"><?php echo nihongo_translate('event_information_text'); ?></p>
                        </div>
                    </div>

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

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

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

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

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

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

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

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

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

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

                    <div class="news-card">
                        <div class="news-image"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/n12.jpg" alt="<?php echo nihongo_translate('media_coverage_info'); ?>" /></div>
                        <div class="news-content">
                            <div class="news-date"><?php echo nihongo_translate('news_date_12'); ?></div>
                            <h3 class="news-title"><?php echo nihongo_translate('media_coverage_info'); ?></h3>
                            <p class="news-excerpt"><?php echo nihongo_translate('media_coverage_text'); ?></p>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- Newsletter Section -->
    <section class="section" style="background: linear-gradient(135deg, #9b59b6, #8e44ad); color: white;">
        <div class="container text-center">
            <h2 class="section-title" style="color: white;"><?php echo nihongo_translate('newsletter_title'); ?></h2>
            <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">
                <?php echo nihongo_translate('newsletter_subtitle'); ?>
            </p>
            
            <div style="max-width: 500px; margin: 0 auto;">
                <form style="display: flex; gap: 1rem; flex-wrap: wrap;">
                    <input type="email" placeholder="<?php echo nihongo_translate('enter_email'); ?>" 
                           style="flex: 1; min-width: 250px; padding: 1rem; border: none; border-radius: 8px; font-size: 1rem;">
                    <button type="submit" class="hero-cta"><?php echo nihongo_translate('register'); ?></button>
                </form>
            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>
