<?php
/**
 * Template for displaying individual news posts
 *
 * @package Nihongo
 */

get_header(); ?>

<main id="main" class="site-main">
    <?php while (have_posts()) : the_post(); ?>

        <!-- News Hero Section -->
        <section class="news-hero">
            <div class="news-hero-background">
                <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail('hero-image', array('class' => 'news-hero-image')); ?>
                <?php else : ?>
                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n1.jpg" alt="<?php the_title(); ?>" class="news-hero-image">
                <?php endif; ?>
                <div class="news-hero-overlay"></div>
            </div>
            <div class="container">
                <div class="news-hero-content">
                    <h1 class="news-hero-title"><?php the_title(); ?></h1>
                    <div class="news-hero-meta">
                        <span class="news-date"><?php echo get_the_date(); ?></span>
                        <span class="news-category"><?php echo nihongo_translate('news'); ?></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- News Content Section -->
        <section class="section news-content">
            <div class="container">
                <div class="news-layout">
                    <div class="news-main-content">
                        <div class="news-text">
                            <?php the_content(); ?>
                        </div>

                        <div class="news-tags">
                            <?php
                            $tags = get_the_tags();
                            if ($tags) :
                            ?>
                                <div class="tags">
                                    <strong><?php echo nihongo_translate('tags'); ?>:</strong>
                                    <?php foreach ($tags as $tag) : ?>
                                        <span class="tag"><?php echo esc_html($tag->name); ?></span>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </div>

                        <div class="news-share">
                            <h3><?php echo nihongo_translate('share_this_article'); ?></h3>
                            <div class="share-buttons">
                                <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" class="share-button twitter">
                                    <span class="share-icon">🐦</span>
                                    <span class="share-text"><?php echo nihongo_translate('share_on_twitter'); ?></span>
                                </a>
                                <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" class="share-button facebook">
                                    <span class="share-icon">📘</span>
                                    <span class="share-text"><?php echo nihongo_translate('share_on_facebook'); ?></span>
                                </a>
                                <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" class="share-button linkedin">
                                    <span class="share-icon">💼</span>
                                    <span class="share-text"><?php echo nihongo_translate('share_on_linkedin'); ?></span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="news-sidebar">
                        <div class="news-info-card">
                            <h3><?php echo nihongo_translate('article_information'); ?></h3>
                            
                            <div class="info-item">
                                <strong><?php echo nihongo_translate('published_date'); ?>:</strong>
                                <span><?php echo get_the_date(); ?></span>
                            </div>

                            <div class="info-item">
                                <strong><?php echo nihongo_translate('author'); ?>:</strong>
                                <span><?php echo get_the_author(); ?></span>
                            </div>

                            <div class="info-item">
                                <strong><?php echo nihongo_translate('reading_time'); ?>:</strong>
                                <span><?php echo nihongo_translate('estimated_reading_time'); ?></span>
                            </div>
                        </div>

                        <div class="news-contact-card">
                            <h3><?php echo nihongo_translate('stay_updated'); ?></h3>
                            <p><?php echo nihongo_translate('subscribe_to_newsletter'); ?></p>
                            <a href="<?php echo get_permalink(get_page_by_path('contact')); ?>" class="btn-secondary">
                                <?php echo nihongo_translate('subscribe_now'); ?>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Related News Section -->
        <section class="section related-news">
            <div class="container">
                <h2 class="section-title"><?php echo nihongo_translate('related_articles'); ?></h2>
                
                <?php
                $related_news = get_posts(array(
                    'post_type' => 'news',
                    'posts_per_page' => 3,
                    'post__not_in' => array(get_the_ID()),
                    'orderby' => 'rand'
                ));
                ?>
                
                <?php if ($related_news) : ?>
                    <div class="news-grid">
                        <?php foreach ($related_news as $related_article) : ?>
                            <div class="news-card">
                                <div class="news-image">
                                    <?php if (has_post_thumbnail($related_article->ID)) : ?>
                                        <a href="<?php echo get_permalink($related_article->ID); ?>">
                                            <?php echo get_the_post_thumbnail($related_article->ID, 'news-thumbnail'); ?>
                                        </a>
                                    <?php else : ?>
                                        <a href="<?php echo get_permalink($related_article->ID); ?>">
                                            <img src="<?php echo get_template_directory_uri(); ?>/assets/img/n1.jpg" alt="<?php echo esc_attr($related_article->post_title); ?>">
                                        </a>
                                    <?php endif; ?>
                                </div>
                                <div class="news-content">
                                    <div class="news-date"><?php echo get_the_date('Y年n月j日', $related_article->ID); ?></div>
                                    <h3 class="news-title">
                                        <a href="<?php echo get_permalink($related_article->ID); ?>">
                                            <?php echo esc_html($related_article->post_title); ?>
                                        </a>
                                    </h3>
                                    <p class="news-excerpt"><?php echo esc_html($related_article->post_excerpt); ?></p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </section>

    <?php endwhile; ?>
</main>

<?php get_footer(); ?>
