<?php
/**
 * Front-page hero.
 *
 * @package Gustavo_Portfolio
 */

$gustavoo_hero_eyebrow         = (string) gustavoo_portfolio_get_setting( 'hero_eyebrow' );
$gustavoo_hero_title           = (string) gustavoo_portfolio_get_setting( 'hero_title' );
$gustavoo_hero_description     = (string) gustavoo_portfolio_get_setting( 'hero_description' );
$gustavoo_hero_primary_label   = (string) gustavoo_portfolio_get_setting( 'hero_primary_label' );
$gustavoo_hero_primary_url     = (string) gustavoo_portfolio_get_setting( 'hero_primary_url' );
$gustavoo_hero_secondary_label = (string) gustavoo_portfolio_get_setting( 'hero_secondary_label' );
$gustavoo_hero_secondary_url   = (string) gustavoo_portfolio_get_setting( 'hero_secondary_url' );
$gustavoo_hero_sources         = gustavoo_portfolio_get_picture_sources( 'hero-art' );
?>

<section class="hero-stage" aria-labelledby="hero-title">
	<div class="site-shell hero">
		<div class="hero__content">
			<?php if ( $gustavoo_hero_eyebrow ) : ?>
				<p class="eyebrow hero__eyebrow"><?php echo esc_html( $gustavoo_hero_eyebrow ); ?></p>
			<?php endif; ?>

			<h1 id="hero-title" class="hero__title"><?php echo esc_html( $gustavoo_hero_title ); ?></h1>
			<p class="hero__description"><?php echo esc_html( $gustavoo_hero_description ); ?></p>

			<div class="hero__actions">
				<?php if ( $gustavoo_hero_primary_label && $gustavoo_hero_primary_url ) : ?>
					<a class="button button--primary" href="<?php echo esc_url( $gustavoo_hero_primary_url ); ?>">
						<?php echo esc_html( $gustavoo_hero_primary_label ); ?> <span aria-hidden="true">→</span>
					</a>
				<?php endif; ?>

				<?php if ( $gustavoo_hero_secondary_label && $gustavoo_hero_secondary_url ) : ?>
					<a class="button button--secondary" href="<?php echo esc_url( $gustavoo_hero_secondary_url ); ?>">
						<?php echo esc_html( $gustavoo_hero_secondary_label ); ?>
					</a>
				<?php endif; ?>
			</div>

		</div>

		<div class="hero__visual" aria-hidden="true">
			<div class="hero__visual-glow"></div>
			<picture>
				<?php if ( $gustavoo_hero_sources['webp'] ) : ?>
					<source srcset="<?php echo esc_url( $gustavoo_hero_sources['webp'] ); ?>" type="image/webp">
				<?php endif; ?>
				<img class="hero__image" src="<?php echo esc_url( $gustavoo_hero_sources['fallback'] ); ?>" width="1234" height="1280" alt="" loading="eager" decoding="async" fetchpriority="high">
			</picture>
		</div>
	</div>
</section>
