<?php
/**
 * Template Name: Yogagenda Home 2026
 * Description: Homepage editorial basada en el rediseño de Google Stitch.
 */

get_header();

$destinos_busqueda = function_exists('yg_get_home_search_destinos') ? yg_get_home_search_destinos() : [];
$estilos_busqueda  = function_exists('yg_get_home_search_estilos') ? yg_get_home_search_estilos() : [];
$home_img_base     = 'https://yogagenda.eu/wp-content/uploads/2026/05/';
$retreat_img       = $home_img_base . 'yogagenda-home-retreat.jpg';
$hero_img          = $retreat_img;
$training_img      = $home_img_base . 'yogagenda-home-training.jpg';
$city_img          = $home_img_base . 'yogagenda-home-city.jpg';
$events_url        = home_url('/eventos/');
$privacy_url       = function_exists('get_privacy_policy_url') ? get_privacy_policy_url() : '';

$yg_home_unique_terms = function ($terms) {
    if (is_wp_error($terms) || empty($terms)) {
        return [];
    }

    $unique = [];
    foreach ($terms as $term) {
        if (!empty($term->slug)) {
            $unique[$term->slug] = $term;
        }
    }

    return array_values($unique);
};

$event_types_raw = taxonomy_exists('tipo_evento') ? get_terms([
    'taxonomy'   => 'tipo_evento',
    'hide_empty' => true,
    'orderby'    => 'name',
    'order'      => 'ASC',
]) : [];
$experience_estilos_raw = taxonomy_exists('estilo') ? get_terms([
    'taxonomy'   => 'estilo',
    'hide_empty' => true,
    'orderby'    => 'name',
    'order'      => 'ASC',
]) : [];
$event_types         = $yg_home_unique_terms($event_types_raw);
$experience_estilos  = $yg_home_unique_terms($experience_estilos_raw);

$yg_home_find_event_type = function ($needles) use ($event_types) {
    foreach ($event_types as $type) {
        $slug = strtolower($type->slug);
        $name = strtolower(remove_accents($type->name));

        foreach ((array) $needles as $needle) {
            if (strpos($slug, $needle) !== false || strpos($name, $needle) !== false) {
                return $type;
            }
        }
    }

    return null;
};

$workshop_type = $yg_home_find_event_type(['taller', 'workshop']);
$training_type = $yg_home_find_event_type(['formacion', 'formaci', 'curso']);
$workshops_url = $workshop_type ? add_query_arg('tipo', $workshop_type->slug, $events_url) : $events_url;
$trainings_url = $training_type ? add_query_arg('tipo', $training_type->slug, $events_url) : $events_url;

$quick_links = [
    ['label' => 'Retiros', 'url' => home_url('/retiros/')],
    ['label' => 'Talleres', 'url' => $workshops_url],
    ['label' => 'Formaciones', 'url' => $trainings_url],
    ['label' => 'Barcelona', 'url' => add_query_arg('destino', 'barcelona', $events_url)],
];

$nav_items = [
    'Estudios'    => home_url('/estudios/'),
    'Retiros'     => home_url('/retiros/'),
    'Talleres'    => $events_url,
    'Formaciones' => $events_url,
    'Profesores'  => home_url('/estudios/'),
];

$category_cards = [
    [
        'title' => 'Estudios',
        'text'  => 'Centros y shalas cerca de ti.',
        'url'   => home_url('/estudios/'),
        'icon'  => 'studio',
    ],
    [
        'title' => 'Retiros',
        'text'  => 'Escapadas para desconectar y profundizar.',
        'url'   => home_url('/retiros/'),
        'icon'  => 'retreat',
    ],
    [
        'title' => 'Talleres',
        'text'  => 'Eventos, workshops y sesiones intensivas.',
        'url'   => $events_url,
        'icon'  => 'event',
    ],
    [
        'title' => 'Formaciones',
        'text'  => 'Cursos para profundizar o enseñar yoga.',
        'url'   => $events_url,
        'icon'  => 'book',
    ],
    [
        'title' => 'Profesores',
        'text'  => 'Guías y facilitadores de yoga.',
        'url'   => home_url('/estudios/'),
        'icon'  => 'person',
    ],
];

$experience_cards = [
    ['title' => 'Retiros de fin de semana', 'label' => 'Escapadas', 'url' => home_url('/retiros/'), 'class' => 'yg-home-experience-card--retreat', 'img' => $retreat_img, 'cta' => 'Explorar retiros'],
    ['title' => 'Talleres urbanos', 'label' => 'Ciudad', 'url' => $workshops_url, 'class' => 'yg-home-experience-card--workshop', 'img' => $training_img, 'cta' => 'Ver talleres'],
    ['title' => 'Formaciones de yoga', 'label' => 'Aprendizaje', 'url' => $trainings_url, 'class' => 'yg-home-experience-card--training', 'img' => $training_img, 'cta' => 'Ver formaciones'],
    ['title' => 'Experiencias de bienestar', 'label' => 'Bienestar', 'url' => $events_url, 'class' => 'yg-home-experience-card--wellness', 'img' => $retreat_img, 'cta' => 'Descubrir bienestar'],
];

$cities = [
    ['name' => 'Barcelona', 'slug' => 'barcelona', 'featured' => true],
    ['name' => 'Madrid', 'slug' => 'madrid', 'featured' => true],
    ['name' => 'Valencia', 'slug' => 'valencia', 'featured' => true],
    ['name' => 'Sevilla', 'slug' => 'sevilla', 'featured' => false],
    ['name' => 'Málaga', 'slug' => 'malaga', 'featured' => false],
    ['name' => 'Bilbao', 'slug' => 'bilbao', 'featured' => false],
];

$featured_experiences = [];
$yg_home_format_ymd = function ($value) {
    if (empty($value)) {
        return '';
    }

    $date = DateTime::createFromFormat('Ymd', (string) $value);
    return $date ? $date->format('d/m/Y') : '';
};
$yg_home_format_price = function ($value) {
    if ($value === null || $value === '') {
        return '';
    }

    return number_format((float) $value, 0, ',', '.') . ' €';
};
$yg_home_format_person_or_post = function ($value) {
    if (empty($value)) {
        return '';
    }

    if (is_object($value) && !empty($value->ID)) {
        return get_the_title($value);
    }

    if (is_numeric($value)) {
        return get_the_title((int) $value);
    }

    if (is_array($value)) {
        $first = reset($value);
        if (is_object($first) && !empty($first->ID)) {
            return get_the_title($first);
        }
        if (is_numeric($first)) {
            return get_the_title((int) $first);
        }
        if (is_string($first)) {
            return $first;
        }
    }

    return is_string($value) ? $value : '';
};
$featured_query = new WP_Query([
    'post_type'           => ['retiro', 'evento'],
    'post_status'         => 'publish',
    'posts_per_page'      => 3,
    'orderby'             => 'date',
    'order'               => 'DESC',
    'ignore_sticky_posts' => true,
    'no_found_rows'       => true,
]);

if ($featured_query->have_posts()) {
    while ($featured_query->have_posts()) {
        $featured_query->the_post();
        $post_id = get_the_ID();
        $post_type = get_post_type($post_id);
        $label = $post_type === 'retiro' ? 'Retiro' : 'Evento';
        $image = get_the_post_thumbnail_url($post_id, 'large');
        $meta = [];
        $cta = $post_type === 'retiro' ? 'Ver retiro' : 'Ver detalles';

        if ($post_type === 'evento') {
            $types = get_the_terms($post_id, 'tipo_evento');
            if (!is_wp_error($types) && !empty($types)) {
                $label = $types[0]->name;
                $type_slug = strtolower($types[0]->slug);
                $type_name = strtolower(remove_accents($types[0]->name));

                if (strpos($type_slug, 'taller') !== false || strpos($type_name, 'taller') !== false || strpos($type_name, 'workshop') !== false) {
                    $cta = 'Ver taller';
                } elseif (strpos($type_slug, 'formacion') !== false || strpos($type_name, 'formacion') !== false || strpos($type_name, 'curso') !== false) {
                    $cta = 'Ver formación';
                }
            }

            $event_date = $yg_home_format_ymd(get_field('fecha_inicio', $post_id));
            $event_price = $yg_home_format_price(get_field('precio', $post_id));
            $event_destinos = get_the_terms($post_id, 'destino');
            $event_profesor = get_field('profesor_nombre', $post_id);
            $event_organizer = get_field('organizado_por', $post_id);

            if (!is_wp_error($event_destinos) && !empty($event_destinos)) {
                $meta[] = $event_destinos[0]->name;
            }
            if ($event_date) {
                $meta[] = $event_date;
            }
            $event_organizer_label = $yg_home_format_person_or_post($event_organizer);
            $event_profesor_label = $yg_home_format_person_or_post($event_profesor);

            if ($event_organizer_label) {
                $meta[] = $event_organizer_label;
            } elseif ($event_profesor_label) {
                $meta[] = $event_profesor_label;
            }
            if ($event_price) {
                $meta[] = 'Desde ' . $event_price;
            }
        } elseif (taxonomy_exists('tipo-retiro')) {
            $types = get_the_terms($post_id, 'tipo-retiro');
            if (!is_wp_error($types) && !empty($types)) {
                $label = $types[0]->name;
            }
        }

        if ($post_type === 'retiro') {
            $retreat_destinos = get_the_terms($post_id, 'destino');
            $retreat_date = $yg_home_format_ymd(get_field('fecha_de_inicio', $post_id));
            $retreat_duration = get_field('duracion', $post_id);
            $retreat_price = $yg_home_format_price(get_field('precio', $post_id));
            $retreat_teachers = get_field('profesores', $post_id);

            if (!is_wp_error($retreat_destinos) && !empty($retreat_destinos)) {
                $meta[] = $retreat_destinos[0]->name;
            }
            if ($retreat_date) {
                $meta[] = $retreat_date;
            }
            if ($retreat_duration) {
                $meta[] = $retreat_duration;
            }
            if (!empty($retreat_teachers[0]['info_group']['nombre'])) {
                $meta[] = $retreat_teachers[0]['info_group']['nombre'];
            }
            if ($retreat_price) {
                $meta[] = 'Desde ' . $retreat_price;
            }
        }

        $featured_experiences[] = [
            'title' => get_the_title($post_id),
            'label' => $label,
            'url'   => get_permalink($post_id),
            'img'   => $image ?: ($post_type === 'retiro' ? $retreat_img : $training_img),
            'meta'  => array_slice(array_filter($meta), 0, 5),
            'cta'   => $cta,
        ];
    }
    wp_reset_postdata();
}

$footer_links = [
    'Sobre nosotros'     => home_url('/sobre-yogagenda/'),
    'Para organizadores' => home_url('/reclamar-estudio/'),
    'Contacto'           => home_url('/contacto/'),
];

if ($privacy_url) {
    $footer_links = array_slice($footer_links, 0, 2, true) + ['Privacidad' => $privacy_url] + array_slice($footer_links, 2, null, true);
}

$render_icon = function ($name) {
    $icons = [
        'studio' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V8l8-4 8 4v12"/><path d="M9 20v-7h6v7"/><path d="M4 10h16"/></svg>',
        'retreat' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21c4-3 7-7 7-11a7 7 0 0 0-14 0c0 4 3 8 7 11Z"/><path d="M9 10c1.5 2 4.5 2 6 0"/><path d="M12 6v8"/></svg>',
        'event' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3v4M18 3v4M4 9h16M5 5h14v15H5z"/><path d="m8 14 2 2 5-5"/></svg>',
        'book' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h9a4 4 0 0 1 4 4v12H9a4 4 0 0 0-4 4z"/><path d="M5 4v16a4 4 0 0 1 4-4h9"/></svg>',
        'person' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>',
        'menu' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>',
        'user' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>',
        'pin' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s7-5.3 7-11a7 7 0 0 0-14 0c0 5.7 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg>',
        'search' => '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m16.5 16.5 4 4"/></svg>',
        'spa' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20c-4.4-2.6-7-6-7-10 3.8.3 6.1 2.2 7 5 .9-2.8 3.2-4.7 7-5 0 4-2.6 7.4-7 10Z"/><path d="M12 15V4"/></svg>',
        'filter' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M7 12h10M10 18h4"/></svg>',
        'calendar' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3v4M17 3v4M4 9h16M5 5h14v15H5z"/></svg>',
    ];

    echo $icons[$name] ?? $icons['spa'];
};
?>

<div class="yg-home yg-home--stitch">
    <header class="yg-home-topbar" aria-label="Navegación principal">
        <div class="yg-home-topbar__inner">
            <details class="yg-home-mobile-menu">
                <summary class="yg-home-icon-btn" aria-label="Abrir menú">
                    <?php $render_icon('menu'); ?>
                </summary>
                <nav class="yg-home-mobile-menu__panel" aria-label="Secciones móviles">
                    <?php foreach ($nav_items as $label => $url): ?>
                        <a href="<?php echo esc_url($url); ?>"><?php echo esc_html($label); ?></a>
                    <?php endforeach; ?>
                </nav>
            </details>

            <a class="yg-home-brand" href="<?php echo esc_url(home_url('/')); ?>">Yogagenda</a>

            <nav class="yg-home-nav" aria-label="Secciones">
                <?php foreach ($nav_items as $label => $url): ?>
                    <a href="<?php echo esc_url($url); ?>"><?php echo esc_html($label); ?></a>
                <?php endforeach; ?>
            </nav>

            <a class="yg-home-icon-btn" href="<?php echo esc_url(is_user_logged_in() ? home_url('/mi-cuenta/') : home_url('/acceder/')); ?>" aria-label="Mi cuenta">
                <?php $render_icon('user'); ?>
            </a>
        </div>
    </header>

    <main class="yg-home-main">
        <section class="yg-home-hero" aria-labelledby="yg-home-title">
            <div class="yg-home-container yg-home-hero__inner">
                <h1 id="yg-home-title" class="yg-home-hero__title">
                    Retiros y experiencias de yoga en España
                </h1>
                <p class="yg-home-hero__lead">
                    Descubre retiros, talleres y formaciones por destino, fecha y tipo de experiencia. También puedes encontrar estudios de yoga cerca de ti.
                </p>

                <figure class="yg-home-hero__media">
                    <img src="<?php echo esc_url($hero_img); ?>" alt="Retiro de yoga en un entorno natural" loading="eager" fetchpriority="high" onerror="this.parentElement.classList.add('is-image-missing'); this.remove();">
                </figure>

                <div id="buscador-experiencias" class="yg-home-search yg-home-search--autocomplete yg-home-search--stitch">
                    <div class="yg-home-search__intro">
                        <span>Busca experiencias de yoga</span>
                    </div>
                    <form class="yg-home-experience-search__form" action="<?php echo esc_url($events_url); ?>" method="get">
                        <div class="yg-home-search__inner">
                            <div class="yg-home-search__group">
                                <label class="yg-home-search__label" for="experience_destino">
                                    <?php $render_icon('pin'); ?>
                                    <span>Destino</span>
                                </label>
                                <input id="experience_destino" name="destino" class="yg-home-search__select yg-home-experience-search__input" type="text" placeholder="Ciudad, provincia o destino" autocomplete="off">
                            </div>

                            <?php if (!empty($event_types)): ?>
                                <div class="yg-home-search__group">
                                    <label class="yg-home-search__label" for="experience_tipo">
                                        <?php $render_icon('filter'); ?>
                                        <span>Tipo</span>
                                    </label>
                                    <select id="experience_tipo" name="tipo" class="yg-home-search__select">
                                        <option value="">Todos los tipos</option>
                                        <?php foreach ($event_types as $type): ?>
                                            <option value="<?php echo esc_attr($type->slug); ?>"><?php echo esc_html($type->name); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            <?php endif; ?>

                            <?php if (!empty($experience_estilos)): ?>
                                <div class="yg-home-search__group">
                                    <label class="yg-home-search__label" for="experience_estilo">
                                        <?php $render_icon('spa'); ?>
                                        <span>Estilo</span>
                                    </label>
                                    <select id="experience_estilo" name="estilo" class="yg-home-search__select">
                                        <option value="">Cualquier estilo</option>
                                        <?php foreach ($experience_estilos as $estilo): ?>
                                            <option value="<?php echo esc_attr($estilo->slug); ?>"><?php echo esc_html($estilo->name); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            <?php endif; ?>

                            <button type="submit" class="yg-home-search__btn">
                                <?php $render_icon('search'); ?>
                                <span>Buscar experiencias</span>
                            </button>
                        </div>
                    </form>
                    <div class="yg-home-quick-links" aria-label="Accesos rápidos a experiencias">
                        <?php foreach ($quick_links as $link): ?>
                            <a href="<?php echo esc_url($link['url']); ?>"><?php echo esc_html($link['label']); ?></a>
                        <?php endforeach; ?>
                    </div>
                    <script>
                        (function () {
                            var form = document.querySelector('.yg-home-experience-search__form');

                            if (!form) {
                                return;
                            }

                            function slugify(value) {
                                return String(value || '')
                                    .trim()
                                    .toLowerCase()
                                    .normalize('NFD')
                                    .replace(/[\u0300-\u036f]/g, '')
                                    .replace(/[^a-z0-9]+/g, '-')
                                    .replace(/^-+|-+$/g, '');
                            }

                            form.addEventListener('submit', function () {
                                var destino = form.querySelector('input[name="destino"]');

                                if (destino && destino.value.trim()) {
                                    destino.value = slugify(destino.value);
                                }

                                Array.prototype.forEach.call(form.querySelectorAll('input[name], select[name]'), function (field) {
                                    if (!field.value) {
                                        field.disabled = true;
                                        field.setAttribute('data-yg-disabled-empty', '1');
                                    }
                                });

                                window.setTimeout(function () {
                                    Array.prototype.forEach.call(form.querySelectorAll('[data-yg-disabled-empty]'), function (field) {
                                        field.disabled = false;
                                        field.removeAttribute('data-yg-disabled-empty');
                                    });
                                }, 0);
                            });
                        })();
                    </script>
                </div>
            </div>
        </section>

        <section class="yg-home-section yg-home-section--featured" aria-labelledby="yg-home-featured-title">
            <div class="yg-home-container">
                <div class="yg-home-section__split-header">
                    <div>
                        <h2 id="yg-home-featured-title" class="yg-home-section__title">Experiencias destacadas</h2>
                        <p class="yg-home-section__text">Retiros, talleres y formaciones seleccionadas para profundizar en tu práctica.</p>
                    </div>
                    <a class="yg-home-link-btn" href="<?php echo esc_url($events_url); ?>">Ver talleres y formaciones</a>
                </div>

                <div class="yg-home-featured-grid">
                    <?php if (count($featured_experiences) >= 3): ?>
                        <?php foreach ($featured_experiences as $card): ?>
                            <a class="yg-home-featured-card" href="<?php echo esc_url($card['url']); ?>">
                                <span class="yg-home-featured-card__media">
                                    <img src="<?php echo esc_url($card['img']); ?>" alt="<?php echo esc_attr($card['title']); ?>" loading="lazy" onerror="this.parentElement.classList.add('is-image-missing'); this.remove();">
                                </span>
                                <span class="yg-home-featured-card__body">
                                    <span class="yg-home-featured-card__label"><?php echo esc_html($card['label']); ?></span>
                                    <span class="yg-home-featured-card__title"><?php echo esc_html($card['title']); ?></span>
                                    <?php if (!empty($card['meta'])): ?>
                                        <span class="yg-home-featured-card__meta">
                                            <?php echo esc_html(implode(' · ', $card['meta'])); ?>
                                        </span>
                                    <?php endif; ?>
                                    <span class="yg-home-featured-card__cta"><?php echo esc_html($card['cta']); ?></span>
                                </span>
                            </a>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <?php foreach (array_slice($experience_cards, 0, 3) as $card): ?>
                            <a class="yg-home-featured-card" href="<?php echo esc_url($card['url']); ?>">
                                <span class="yg-home-featured-card__media">
                                    <img src="<?php echo esc_url($card['img']); ?>" alt="<?php echo esc_attr($card['title']); ?>" loading="lazy" onerror="this.parentElement.classList.add('is-image-missing'); this.remove();">
                                </span>
                                <span class="yg-home-featured-card__body">
                                    <span class="yg-home-featured-card__label"><?php echo esc_html($card['label']); ?></span>
                                    <span class="yg-home-featured-card__title"><?php echo esc_html($card['title']); ?></span>
                                    <span class="yg-home-featured-card__cta">Explorar experiencia</span>
                                </span>
                            </a>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
            </div>
        </section>

        <section class="yg-home-section yg-home-section--studies" aria-labelledby="yg-home-studies-title">
            <div class="yg-home-container">
                <div class="yg-home-study-path" aria-label="Buscar estudios de yoga">
                    <div class="yg-home-study-path__copy">
                        <h2 id="yg-home-studies-title">¿Buscas clases regulares o un estudio cerca de ti?</h2>
                        <p>Encuentra centros y shalas por ciudad y estilo.</p>
                    </div>
                    <div class="yg-home-study-path__form yg-home-search--stitch yg-home-study-search">
                        <div class="yg-home-search__intro">
                            <span>Buscar estudios</span>
                        </div>
                        <form class="yg-home-search__form" action="<?php echo esc_url(home_url('/estudios/')); ?>" method="get" data-estudios-base="<?php echo esc_url(home_url('/estudios/')); ?>">
                            <div class="yg-home-search__inner">
                                <div class="yg-home-search__group">
                                    <label class="yg-home-search__label" for="search_destino">
                                        <?php $render_icon('pin'); ?>
                                        <span>Ciudad</span>
                                    </label>
                                    <select id="search_destino" name="destino" class="yg-home-search__select" data-yg-combobox="destino" data-placeholder="¿Dónde buscas?">
                                        <option value="">¿Dónde buscas?</option>
                                        <?php if (!empty($destinos_busqueda)): ?>
                                            <?php foreach ($destinos_busqueda as $dest): ?>
                                                <option value="<?php echo esc_attr($dest['slug']); ?>"><?php echo esc_html($dest['name']); ?></option>
                                            <?php endforeach; ?>
                                        <?php else: ?>
                                            <option value="madrid">Madrid</option>
                                            <option value="barcelona">Barcelona</option>
                                        <?php endif; ?>
                                    </select>
                                </div>

                                <div class="yg-home-search__group">
                                    <label class="yg-home-search__label" for="search_estilo">
                                        <?php $render_icon('spa'); ?>
                                        <span>Estilo</span>
                                    </label>
                                    <select id="search_estilo" name="estilo" class="yg-home-search__select" data-yg-combobox="estilo" data-placeholder="Cualquier estilo">
                                        <option value="">Cualquier estilo</option>
                                        <?php if (!empty($estilos_busqueda)): ?>
                                            <?php foreach ($estilos_busqueda as $estilo): ?>
                                                <option value="<?php echo esc_attr($estilo['slug']); ?>"><?php echo esc_html($estilo['name']); ?></option>
                                            <?php endforeach; ?>
                                        <?php endif; ?>
                                    </select>
                                </div>

                                <button type="submit" class="yg-home-search__btn">
                                    <?php $render_icon('search'); ?>
                                    <span>Buscar estudios</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <section class="yg-home-section yg-home-section--experiences" aria-labelledby="yg-home-experiences-title">
            <div class="yg-home-container">
                <div class="yg-home-section__split-header">
                    <div>
                        <h2 id="yg-home-experiences-title" class="yg-home-section__title">Explora por tipo de experiencia</h2>
                        <p class="yg-home-section__text">Explora experiencias organizadas por profesores, estudios y centros especializados.</p>
                    </div>
                    <a class="yg-home-link-btn" href="<?php echo esc_url($events_url); ?>">Explorar experiencias</a>
                </div>

                <div class="yg-home-experience-grid">
                    <?php foreach ($experience_cards as $index => $card): ?>
                        <a class="yg-home-experience-card <?php echo esc_attr($card['class']); ?> <?php echo $index === 0 ? 'yg-home-experience-card--wide' : ''; ?>" href="<?php echo esc_url($card['url']); ?>">
                        <img src="<?php echo esc_url($card['img']); ?>" alt="<?php echo esc_attr($card['title']); ?>" loading="lazy" onerror="this.parentElement.classList.add('is-image-missing'); this.remove();">
                            <span class="yg-home-experience-card__overlay" aria-hidden="true"></span>
                            <span class="yg-home-experience-card__content">
                                <span class="yg-home-pill"><?php echo esc_html($card['label']); ?></span>
                                <span class="yg-home-experience-card__title"><?php echo esc_html($card['title']); ?></span>
                                <span class="yg-home-experience-card__cta"><?php echo esc_html($card['cta']); ?></span>
                            </span>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <section class="yg-home-section yg-home-section--cities" aria-labelledby="yg-home-cities-title">
            <div class="yg-home-container">
                <h2 id="yg-home-cities-title" class="yg-home-section__title yg-home-section__title--center">Yoga por ciudad</h2>
                <p class="yg-home-section__text yg-home-section__text--center">Descubre estudios, retiros y talleres en las principales ciudades.</p>

                <div class="yg-home-city-layout">
                    <?php foreach (array_slice($cities, 0, 3) as $city): ?>
                        <a class="yg-home-city-card <?php echo $city['slug'] === 'barcelona' ? 'yg-home-city-card--large' : ''; ?>" href="<?php echo esc_url(add_query_arg('destino', $city['slug'], $events_url)); ?>">
                        <img src="<?php echo esc_url($city_img); ?>" alt="<?php echo esc_attr('Yoga en ' . $city['name']); ?>" loading="lazy" onerror="this.parentElement.classList.add('is-image-missing'); this.remove();">
                            <span class="yg-home-city-card__shade" aria-hidden="true"></span>
                            <span class="yg-home-city-card__content">
                                <span class="yg-home-city-card__name"><?php echo esc_html($city['name']); ?></span>
                                <span class="yg-home-city-card__cta">Explorar ciudad</span>
                            </span>
                        </a>
                    <?php endforeach; ?>
                </div>

                <div class="yg-home-city-chips">
                    <?php foreach (array_slice($cities, 3) as $city): ?>
                        <a href="<?php echo esc_url(add_query_arg('destino', $city['slug'], $events_url)); ?>"><?php echo esc_html($city['name']); ?></a>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <section class="yg-home-section yg-home-section--categories" aria-labelledby="yg-home-categories-title">
            <div class="yg-home-container">
                <h2 id="yg-home-categories-title" class="screen-reader-text">Categorías principales de Yogagenda</h2>
                <div class="yg-home-category-grid">
                    <?php foreach ($category_cards as $card): ?>
                        <a class="yg-home-category-card" href="<?php echo esc_url($card['url']); ?>">
                            <span class="yg-home-category-card__icon"><?php $render_icon($card['icon']); ?></span>
                            <span class="yg-home-category-card__title"><?php echo esc_html($card['title']); ?></span>
                            <span class="yg-home-category-card__text"><?php echo esc_html($card['text']); ?></span>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <section class="yg-home-organizers" aria-labelledby="yg-home-organizers-title">
            <div class="yg-home-container yg-home-organizers__inner">
                <span class="yg-home-organizers__icon"><?php $render_icon('calendar'); ?></span>
                <h2 id="yg-home-organizers-title" class="yg-home-section__title">¿Organizas retiros, talleres o formaciones?</h2>
                <p class="yg-home-section__text">Publica tu actividad en Yogagenda y llega a personas que ya están buscando experiencias de yoga en España.</p>
                <ul class="yg-home-organizers__benefits">
                    <li>Publica tu ficha fácilmente</li>
                    <li>Aparece en categorías y ciudades</li>
                    <li>Recibe tráfico cualificado</li>
                    <li>Refuerza tu presencia online</li>
                </ul>
                <a class="yg-home-primary-btn" href="<?php echo esc_url(home_url('/mi-cuenta/')); ?>">Publicar actividad</a>
            </div>
        </section>

        <section class="yg-home-section yg-home-section--trust" aria-labelledby="yg-home-trust-title">
            <div class="yg-home-container">
                <h2 id="yg-home-trust-title" class="yg-home-section__title yg-home-section__title--center">Una plataforma pensada para descubrir yoga con calma</h2>
                <div class="yg-home-trust-grid">
                    <article class="yg-home-trust-item">
                        <span><?php $render_icon('spa'); ?></span>
                        <h3>Estética cuidada</h3>
                        <p>Diseñado sin distracciones, priorizando el espacio, la legibilidad y la belleza visual para una experiencia relajante.</p>
                    </article>
                    <article class="yg-home-trust-item">
                        <span><?php $render_icon('filter'); ?></span>
                        <h3>Búsqueda precisa</h3>
                        <p>Filtros intuitivos para encontrar lo que necesitas por estilo, ubicación y tipo de experiencia.</p>
                    </article>
                    <article class="yg-home-trust-item">
                        <span><?php $render_icon('person'); ?></span>
                        <h3>Comunidad local</h3>
                        <p>Apoyamos a estudios independientes, profesores y organizadores locales en España.</p>
                    </article>
                </div>
            </div>
        </section>
    </main>

    <footer class="yg-home-footer">
        <div class="yg-home-container yg-home-footer__inner">
            <div>
                <a class="yg-home-footer__brand" href="<?php echo esc_url(home_url('/')); ?>">Yogagenda</a>
                <p>El espacio de calma para la comunidad de yoga en España.</p>
                <p class="yg-home-footer__copyright">&copy; <?php echo esc_html(date_i18n('Y')); ?> Yogagenda.</p>
            </div>
            <nav class="yg-home-footer__nav" aria-label="Enlaces de pie de página">
                <?php foreach ($footer_links as $label => $url): ?>
                    <a href="<?php echo esc_url($url); ?>"><?php echo esc_html($label); ?></a>
                <?php endforeach; ?>
            </nav>
        </div>
    </footer>
</div>

<?php get_footer(); ?>