<?php
if (!defined('ABSPATH')) {
    exit;
}
$ui_labels = isset($ui_labels) && is_array($ui_labels) ? $ui_labels : [];
$organizers_title = sanitize_text_field((string) ($ui_labels['organizers_title'] ?? __('Organizers', 'nexdirectory')));
$organizers_description = sanitize_text_field((string) ($ui_labels['organizers_description'] ?? __('Meet active organizers and browse their public event history.', 'nexdirectory')));
$organizer_items_cta = sanitize_text_field((string) ($ui_labels['organizer_items_cta'] ?? __('View Organizer Events', 'nexdirectory')));
$singular_label = sanitize_text_field((string) ($ui_labels['singular'] ?? __('Event', 'nexdirectory')));
$plural_label = sanitize_text_field((string) ($ui_labels['plural'] ?? __('Events', 'nexdirectory')));
$page_kicker = sanitize_text_field((string) $this->get_event_hero_kicker_text());

echo $this->render_notice();
echo $this->render_platform_breadcrumbs($organizers_title); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
?>

<div x-data="{ pageLoaded: false }" x-init="setTimeout(() => pageLoaded = true, 50)" class="bg-gray-50 min-h-screen pb-16">
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">
        
        <section class="mb-10 sm:mb-14 text-center sm:text-left transition-all duration-700 ease-out transform"
                 :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'">
            <?php if (!empty($page_kicker)) : ?>
                <span class="inline-flex items-center px-3 py-1 rounded-full bg-brand-50 text-brand-600 text-xs font-bold uppercase tracking-wider border border-brand-100 mb-4 shadow-sm">
                    <?php echo esc_html($page_kicker); ?>
                </span>
            <?php endif; ?>
            
            <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">
                <?php echo esc_html($organizers_title); ?>
            </h1>
            
            <p class="text-gray-500 text-base sm:text-lg max-w-2xl mx-auto sm:mx-0 leading-relaxed">
                <?php echo esc_html($organizers_description); ?>
            </p>
        </section>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            <?php 
            $delay_step = 50;
            $current_delay = 100;

            foreach ($users as $user) : 
                $count = count_user_posts($user->ID, $this::POST_TYPE);
                if ($count < 1) {
                    continue;
                }
                
                $verified = get_user_meta($user->ID, 'eep_verified_organizer', true) === '1';
                if ($verified_only && !$verified) {
                    continue;
                }
                
                $events_base = $this->get_platform_page_url(
                    'eep_page_events_url',
                    $this->get_profile_route_slugs('events'),
                    $this->get_profile_route_default_url('events')
                );
                $events_link = eep_add_query_arg(['organizer' => $user->ID], $events_base);

                // Avatar Initials Logic
                $display_name = $user->display_name ?: $user->user_login;
                $initials = '';
                $name_parts = explode(' ', trim($display_name));
                foreach ($name_parts as $part) {
                    if (!empty($part)) $initials .= strtoupper(substr($part, 0, 1));
                    if (strlen($initials) >= 2) break;
                }
                if (empty($initials)) $initials = 'O';
            ?>
                
                <article x-data="{ shown: false }" x-intersect.once="shown = true"
                         :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'"
                         class="transition-all duration-700 ease-out flex flex-col bg-white rounded-2xl shadow-sm border border-gray-100 p-5 sm:p-6 hover:border-brand-200 hover:-translate-y-1 hover:shadow-md group"
                         style="transition-delay: <?php echo esc_attr((string)$current_delay); ?>ms;">
                    
                    <div class="flex items-start justify-between mb-5">
                        <div class="flex items-center gap-4 min-w-0">
                            <div class="w-14 h-14 rounded-full border-2 border-brand-100 bg-brand-500 flex items-center justify-center text-white font-bold text-xl group-hover:scale-105 transition-transform duration-300 shadow-sm shrink-0">
                                <?php echo esc_html($initials); ?>
                            </div>
                            <div class="min-w-0">
                                <h4 class="text-lg font-bold text-gray-900 leading-tight group-hover:text-brand-600 transition-colors truncate">
                                    <?php echo esc_html($display_name); ?>
                                </h4>
                                <?php if ($verified) : ?>
                                    <span class="inline-flex items-center mt-1.5 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-blue-50 text-blue-600 border border-blue-100">
                                        <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                                        <?php esc_html_e('Verified', 'nexdirectory'); ?>
                                    </span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6 space-y-3 flex-1">
                        <?php if (!empty($user->user_email)) : ?>
                            <a href="mailto:<?php echo esc_attr(sanitize_email((string) $user->user_email)); ?>" class="flex items-center gap-2.5 text-sm text-gray-500 hover:text-brand-600 transition-colors">
                                <div class="p-1.5 bg-gray-50 rounded-md text-gray-400 group-hover:bg-brand-50 group-hover:text-brand-500 transition-colors shrink-0">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                                </div>
                                <span class="truncate"><?php echo esc_html($user->user_email); ?></span>
                            </a>
                        <?php endif; ?>
                        
                        <div class="flex items-center gap-2.5 text-sm text-gray-500">
                            <div class="p-1.5 bg-gray-50 rounded-md text-gray-400 group-hover:bg-brand-50 group-hover:text-brand-500 transition-colors shrink-0">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                            </div>
                            <span class="font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
                                <?php echo esc_html(sprintf(_n('%1$d %2$s', '%1$d %3$s', $count, 'nexdirectory'), $count, strtolower((string) $singular_label), strtolower((string) $plural_label))); ?>
                            </span>
                        </div>
                    </div>

                    <a href="<?php echo esc_url($events_link); ?>" class="w-full flex items-center justify-center gap-2 py-2.5 px-4 bg-gray-50 hover:bg-gray-100 border border-gray-200 text-gray-700 active:scale-95 text-sm font-semibold rounded-xl transition-all shadow-sm group-hover:bg-brand-50 group-hover:text-brand-700 group-hover:border-brand-200">
                        <?php echo esc_html($organizer_items_cta); ?>
                        <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                    </a>
                </article>

            <?php 
                $current_delay += $delay_step;
            endforeach; 
            ?>
        </div>
    </main>
</div>