<?php get_header(); ?>

<main id="main" class="main-content">

    <!-- ======= Carousel ======= -->
    <section class="hero-carousel" aria-label="<?php esc_attr_e( 'Image carousel', 'municipio' ); ?>">
        <?php
        $slides = new WP_Query( [
            'post_type'      => 'carousel_slide',
            'posts_per_page' => 10,
            'post_status'    => 'publish',
            'orderby'        => 'menu_order',
            'order'          => 'ASC',
            'no_found_rows'  => true,
        ] );
        $slide_count = $slides->post_count;
        ?>

        <?php if ( $slides->have_posts() ) : ?>
        <div class="carousel-track" aria-live="polite">
            <?php $i = 0; while ( $slides->have_posts() ) : $slides->the_post(); ?>
            <div
                class="carousel-slide<?php echo $i === 0 ? ' is-active' : ''; ?>"
                role="group"
                aria-label="<?php printf( esc_attr__( 'Slide %d of %d', 'municipio' ), $i + 1, $slide_count ); ?>"
                aria-hidden="<?php echo $i === 0 ? 'false' : 'true'; ?>"
            >
                <?php if ( has_post_thumbnail() ) : ?>
                    <?php the_post_thumbnail( 'full', [
                        'alt'     => get_the_title(),
                        'loading' => $i === 0 ? 'eager' : 'lazy',
                    ] ); ?>
                <?php endif; ?>
                <?php if ( get_the_title() ) : ?>
                    <div class="slide-caption">
                        <p><?php the_title(); ?></p>
                    </div>
                <?php endif; ?>
            </div>
            <?php $i++; endwhile; wp_reset_postdata(); ?>
        </div>

        <?php if ( $slide_count > 1 ) : ?>
        <div class="carousel-controls" aria-label="<?php esc_attr_e( 'Carousel controls', 'municipio' ); ?>">
            <button class="carousel-btn carousel-prev" aria-label="<?php esc_attr_e( 'Previous slide', 'municipio' ); ?>">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <div class="carousel-dots" role="tablist" aria-label="<?php esc_attr_e( 'Slide indicators', 'municipio' ); ?>">
                <?php for ( $j = 0; $j < $slide_count; $j++ ) : ?>
                    <button
                        class="carousel-dot<?php echo $j === 0 ? ' is-active' : ''; ?>"
                        data-index="<?php echo esc_attr( $j ); ?>"
                        role="tab"
                        aria-selected="<?php echo $j === 0 ? 'true' : 'false'; ?>"
                        aria-label="<?php printf( esc_attr__( 'Go to slide %d', 'municipio' ), $j + 1 ); ?>"
                    ></button>
                <?php endfor; ?>
            </div>
            <button class="carousel-btn carousel-next" aria-label="<?php esc_attr_e( 'Next slide', 'municipio' ); ?>">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
        </div>
        <?php endif; ?>
        <?php endif; ?>
    </section>

    <!-- ======= Quote / Heading ======= -->
    <?php
    $quote_title = get_theme_mod( 'municipio_quote_title', '' );
    $quote_text  = get_theme_mod( 'municipio_quote_text', '' );
    if ( $quote_title || $quote_text ) :
    ?>
    <section class="hero-quote">
        <div class="container">
            <?php if ( $quote_title ) : ?>
                <h1 class="quote-title"><?php echo esc_html( $quote_title ); ?></h1>
            <?php endif; ?>
            <?php if ( $quote_text ) : ?>
                <blockquote class="quote-body">
                    <p><?php echo nl2br( esc_html( $quote_text ) ); ?></p>
                </blockquote>
            <?php endif; ?>
        </div>
    </section>
    <?php endif; ?>

    <!-- ======= Map ======= -->
    <section class="map-section" id="mapa">
        <div class="container">
            <?php $map_heading = get_theme_mod( 'municipio_map_heading', '' ); ?>
            <?php if ( $map_heading ) : ?>
                <h2 class="section-heading"><?php echo esc_html( $map_heading ); ?></h2>
            <?php endif; ?>
            <div class="map-wrapper">
                <?php $map_shortcode = get_theme_mod( 'municipio_map_shortcode', '' ); ?>
                <?php if ( $map_shortcode ) : ?>
                    <?php echo do_shortcode( wp_kses_post( $map_shortcode ) ); ?>
                <?php else : ?>
                    <p class="map-placeholder">
                        <?php esc_html_e( 'Configure the map shortcode in Appearance → Customize → Landing Page.', 'municipio' ); ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>
    </section>

</main>

<?php get_footer(); ?>
