<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Templates use local variables supplied by the render context.
if (!defined('ABSPATH')) {
    exit;
}

// [PRESERVED DYNAMIC VARIABLES]
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$whats_new_description = sanitize_text_field((string) ($ui_labels['whats_new_description'] ?? __('Latest updates and newly published listings.', 'nexdirectory')));
$page_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());

if ($page_kicker === '') {
    $page_kicker = $this->get_white_label_brand_name();
}

$whats_new_page_id = absint((int) get_queried_object_id());
$whats_new_featured_hero = '';
if ($whats_new_page_id > 0 && has_post_thumbnail($whats_new_page_id)) {
    $whats_new_featured_candidate = get_the_post_thumbnail_url($whats_new_page_id, 'full');
    if (is_string($whats_new_featured_candidate) && $whats_new_featured_candidate !== '') {
        $whats_new_featured_hero = esc_url($whats_new_featured_candidate);
    }
}
$whats_new_fallback_hero = esc_url((string) get_option('nexdirectory_style_fallback_hero_url', ''));
$whats_new_corporate_images = method_exists($this, 'get_demo_corporate_photo_urls')
    ? array_values(array_filter(array_map('esc_url', (array) $this->get_demo_corporate_photo_urls())))
    : [];
if ($whats_new_fallback_hero === '' && !empty($whats_new_corporate_images)) {
    $whats_new_fallback_hero = (string) $whats_new_corporate_images[0];
}
$whats_new_hero = $whats_new_featured_hero !== '' ? $whats_new_featured_hero : $whats_new_fallback_hero;
$whats_new_has_image = $whats_new_hero !== '';

echo wp_kses_post($this->render_notice());
?>

<?php $this->enqueue_local_style_asset('templates-frontend-whats-new-php-style-1', 'assets/generated/templates-frontend-whats-new-php-style-1.css'); ?>

<?php
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Breadcrumb markup is sanitized by esc_nexdirectory_plugin_markup() against the plugin-owned allow-list.
echo esc_nexdirectory_plugin_markup((string) $this->render_platform_breadcrumbs(__('What\'s New', 'nexdirectory')));
?>

<div class="bg-gray-50 text-gray-800 font-sans antialiased selection:bg-brand-100 selection:text-brand-700 pb-20 md:pb-8 min-h-screen">
    
    <main class="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8">
        
        <div class="nexdirectory-animate-fade relative sm:rounded-2xl overflow-hidden mb-6 sm:mb-8 shadow-sm group bg-gray-900 flex flex-col justify-end min-h-[40vh] sm:min-h-[350px]">
            
            <?php if ($whats_new_has_image) : ?>
                <img src="<?php echo esc_url($whats_new_hero); ?>" alt="<?php esc_attr_e('What\'s New', 'nexdirectory'); ?>" class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 sm:group-hover:scale-105 opacity-80 sm:opacity-100" data-nexdirectory-hero-parallax="1">
            <?php else : ?>
                <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-brand-600 to-gray-900 transition-transform duration-1000 sm:group-hover:scale-105"></div>
            <?php endif; ?>
            
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 via-gray-900/70 to-transparent"></div>
            
            <div class="relative z-10 p-6 sm:p-8 lg:p-12 w-full mt-auto">
                <div class="flex flex-wrap items-center gap-2 mb-3">
                    <span class="inline-flex items-center px-3 py-1 rounded-full bg-brand-500/20 text-white text-[10px] sm:text-xs font-semibold uppercase tracking-wider backdrop-blur-sm border border-brand-500/30" style="color:#ffffff!important;">
                        <?php echo esc_html($page_kicker); ?>
                    </span>
                    <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-white/10 text-white text-[10px] sm:text-xs font-semibold uppercase tracking-wider backdrop-blur-sm border border-white/20 flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
                        <?php esc_html_e('Live Feed', 'nexdirectory'); ?>
                    </span>
                </div>
                
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-md">
                    <?php esc_html_e('What\'s New', 'nexdirectory'); ?>
                </h1>
                
                <?php if ($whats_new_description !== '') : ?>
                    <p class="text-gray-300 text-base sm:text-lg max-w-2xl leading-relaxed">
                        <?php echo esc_html($whats_new_description); ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <div class="nexdirectory-animate-fade" style="animation-delay: 0.15s;">
            <section class="bg-white sm:rounded-2xl shadow-sm border-y sm:border border-gray-100 overflow-hidden relative">
                <div class="h-1.5 w-full bg-gradient-to-r from-brand-400 to-brand-600"></div>
                
                <div class="p-4 sm:p-6 lg:p-8">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 sm:mb-8 pb-4 border-b border-gray-100">
                        <h2 class="text-lg sm:text-xl font-bold text-gray-900 flex items-center gap-2">
                            <svg class="w-5 h-5 text-brand-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                            <?php esc_html_e('Latest Arrivals', 'nexdirectory'); ?>
                        </h2>
                        
                        <div class="flex items-center text-sm text-gray-500 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-200">
                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path></svg>
                            <?php esc_html_e('Chronological', 'nexdirectory'); ?>
                        </div>
                    </div>

                    <div class="nexdirectory-archive-results w-full" id="nexdirectory-archive-results" data-posts-per-page="<?php echo esc_attr((string) $posts_per_page); ?>" data-organizer="0">
                        <?php echo wp_kses((string) $this->render_archive_results_markup($query, $paged, $filters, 0), NEXDIRECTORY_Escaping::allowed_html()); ?>
                    </div>
                </div>
            </section>
        </div>
    </main>
</div>
