<?php
/**
 * Block Name: Homepage Hero
 *
 * @package CWC
 */

namespace CWC;

// Retrieve ACF fields
$media   = get_field( 'media' );
$heading = get_field( 'heading' );
$intro   = get_field( 'intro' );
$ctas    = get_field( 'calls_to_action' );

if ( $media === 'image' ) {
    $heroImage = get_field( 'hero_image' );

    if ( $heroImage ) {
        $heroURL = $heroImage['url'];
    }
} elseif ( $media === 'video' ) {
    $heroVideo = get_field( 'hero_video' );

    if ( $heroVideo ) {
        $heroURL = $heroVideo;
    }
}

$classes = 'homepage-hero mx-break-out relative text-light overflow-hidden';
$wrapper = blockWrapperAttributes( $classes, $is_preview );
?>

<section <?php echo wp_kses_post( $wrapper ); ?>>
    <div class="container pl-0! content-wrapper relative z-30">
        <div class="max-w-4xl sm:text-center lg:text-left lg:items-center ml-0 pt-52">
            <?php if ( ! empty( $heading ) ) : ?>
                <h1 class="text-4xl lg:text-5xl font-bold leading-tight mb-4">
                    <?php echo esc_html( $heading ); ?>
                </h1>
            <?php endif; ?>

            <?php if ( ! empty( $intro ) ) : ?>
                <div class="intro">
                    <?php echo wp_kses_post( $intro ); ?>
                </div>
            <?php endif; ?>

            <?php if ( ! empty( $ctas ) ) : ?>
                <div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-4">
                    <?php foreach ( $ctas as $index => $cta ) : ?>
                        <?php
                        $ctaLink   = $cta['link'];
                        $ctaURL    = $ctaLink['url'] ?? '#';
                        $ctaTarget = $ctaLink['target'] ?? '_self';
                        $ctaTitle  = $ctaLink['title'] ?? '';

                        // Handle admin preview
                        if ( is_admin() && $ctaURL ) {
                            $ctaURL = '#';
                        }
                        ?>
                        <x-button
                            btnclasses="button text-center min-w-32 dark"
                            element="a"
                            url="<?php echo esc_url( $ctaURL ); ?>"
                            target="<?php echo esc_attr( $ctaTarget ); ?>"
                            title="<?php echo esc_attr( $ctaTitle ); ?>"
                            color="primary"
                            <?php if ( $index !== 0 ) { ?>
                                variant="outline"
                            <?php } ?>
                        ></x-button>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="heroVector absolute inset-0 z-10">
        <div class="vector absolute bottom-8 w-full">
            <?php get_template_part( 'views/partials/hero-vector' ); ?>
        </div>
    </div>

    <div class="homepage-hero__location" aria-hidden="true">
        <svg viewBox="0 0 24 24" focusable="false">
            <path d="M12 21s7-5.6 7-12a7 7 0 1 0-14 0c0 6.4 7 12 7 12Z" />
            <circle cx="12" cy="9" r="2.5" />
        </svg>
        <span><?php echo esc_html__( 'Location / Nation Information', 'cwc' ); ?></span>
    </div>

    <div class="topGradient absolute inset-0 z-1"><!-- Rectangle 88 --></div>

    <div class="bgVector absolute inset-0 z-1"><!-- Rectangle 83 --></div>

    <div class="heroBG absolute inset-0 z-1"><!-- Rectangle 2 --></div>

    <div class="heroMedia absolute inset-0 z-0">
        <?php if ( ! empty( $heroURL ) ) : ?>
            <?php if ( $media === 'image' ) : ?>
                <img
                    src="<?php echo esc_url( $heroURL ); ?>"
                    alt="<?php echo esc_attr( $heading ); ?>"
                    class="w-full h-full object-cover object-center"
                />
            <?php elseif ( $media === 'video' ) : ?>
                <video
                    autoplay
                    loop
                    muted
                    playsinline
                    disablePictureInPicture
                    class="w-full h-full object-cover object-center"
                >
                    <source src="<?php echo esc_url( $heroURL ); ?>" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</section>
