<script setup>
defineProps({ posts: { type: Array, default: () => [] } });
</script>

<template>
    <section id="news" data-screen-label="04 News">
        <div class="wrap">
            <div class="section-head reveal">
                <span class="eyebrow">Хроники сервера</span>
                <div style="height: 20px"></div>
                <h2 class="h-display" style="font-size: clamp(36px, 5vw, 60px)">Новости и патчноуты</h2>
                <div class="divider-ornament">✦</div>
            </div>

            <div v-if="posts.length" class="news-grid">
                <article v-for="post in posts" :key="post.id || post.title" :class="['news-card', 'reveal', { featured: post.featured }]">
                    <div class="news-meta">
                        <span :class="['news-tag', post.tagType || 'patch']">{{ post.tag }}</span>
                        <span v-if="post.date">{{ post.date }}</span>
                    </div>
                    <div v-if="post.featured" class="news-placeholder" :style="post.image_url ? { backgroundImage: `url(${post.image_url})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'transparent' } : {}">
                        {{ post.image_url ? post.title : '[ placeholder ] · 1600x800' }}
                    </div>
                    <h3 class="news-title">{{ post.title }}</h3>
                    <p class="news-excerpt">{{ post.excerpt }}</p>
                </article>
            </div>

            <div v-else class="news-empty reveal" style="text-align: center; padding: 80px 24px; border: 1px dashed var(--panel-border-strong); border-radius: var(--radius); background: rgba(127, 184, 212, 0.02)">
                <div style="font-size: 28px; color: var(--moon); margin-bottom: 14px">✦</div>
                <h3 class="h-display" style="font-size: 24px; margin-bottom: 10px">Пока новостей нет</h3>
                <p class="lead" style="font-style: italic; max-width: 520px; margin: 0 auto">Хроники сервера еще не открыли первую страницу. Загляни позже - здесь появятся патчноуты, события и девблоги.</p>
            </div>
        </div>
    </section>
</template>
