<?php
/**
 * Page Hero Partial
 *
 * @package CWC
 */

namespace CWC;

// Set variables
$bgColor    = get_field( 'background_color' );
$isDark     = get_field( 'is_dark' );
$heading    = get_field( 'heading' );
$heroImage  = get_field( 'hero_image' );
$heroVector = get_field( 'hero_vector' );
$intro      = get_field( 'intro' );
$ctas       = get_field( 'ctas' );

// Fallback for heading
if ( ! $heading ) {
    $heading = getTheTitle();
}

// The wrapper color is the gradient from .page-hero in page-hero.css. The
// editor's background_color ACF field overrides the gradient with a solid color.
$wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '';
?>

<div class="page-hero-services text-light" <?php if ( $wrapperStyle ) { // phpcs:ignore ?>style="<?php echo esc_attr( $wrapperStyle ); ?>"<?php } ?>>
    <div class="page-hero-services__content container mx-auto px-0!">
        <!-- <div id="breadcrumbs">
            <?php Breadcrumbs::render(); ?>
        </div> -->

        <h1 class="page-hero-services__heading">
            <?php echo wp_kses_post( $heading ); ?><em>.</em>
        </h1>

        <?php if ( $intro ) : ?>
            <div class="page-hero-services__intro">
                <?php echo wp_kses_post( $intro ); ?>
            </div>
        <?php endif; ?>

        <?php if ( $ctas ) : ?>
            <div class="reset mt-4 sm:mt-6 lg:mt-10 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'] ?? '';
                    ?>

                    <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>

    <?php if ( $heroImage ) : ?>
        <img
            class="page-hero-services__media"
            src="<?php echo esc_url( $heroImage['url'] ); ?>"
            alt=""
            loading="lazy"
            aria-hidden="true"
            role="presentation"
        />
    <?php endif; ?>

    <?php if ( $heroVector ) : ?>
        <img
            class="page-hero-services__vector"
            src="<?php echo esc_url( $heroVector['url'] ); ?>"
            alt=""
            loading="lazy"
            aria-hidden="true"
            role="presentation"
        />
    <?php endif; ?>
</div>
