<?php
$podcast_guru_options = podcast_guru_theme_options();

$banner_title = $podcast_guru_options['banner_title'];
$banner_desc = $podcast_guru_options['banner_desc'];
$banner_bg_image = $podcast_guru_options['banner_bg_image'];
$spotify_button_url = $podcast_guru_options['spotify_button_url'];
$itunes_button_url = $podcast_guru_options['itunes_button_url'];
$pocketcasts_button_url = $podcast_guru_options['pocketcasts_button_url'];




$single_button = $podcast_guru_options['single_button'];
$single_button_url = $podcast_guru_options['single_button_url'];
if(!empty($banner_bg_image)){
    $background_style = "style='background-image:url(".esc_url($banner_bg_image).")'";
}
else{
    $background_style = '';
}

?>


<div class="hero-section">
     <div class="image" data-type="background" data-speed="2"  <?php echo wp_kses_post($background_style); ?>></div>
    <div class="stuff" data-type="content">
        <h1><?php echo esc_html($banner_title); ?></h1>
		<span><?php echo esc_html($banner_desc); ?></span>
		<div class="btn-wrap">
        <?php  if( $single_button && $single_button_url):?>
        <a href="<?php echo esc_url($single_button_url); ?>" class="btn btn-default"><?php echo esc_html($single_button); ?></a>
        <?php endif; ?>
		</div>
    </div>

</div>
</div>



<div class="below-banner header-social">

<span><?php esc_html__('Listen to us on','podcast-guru'); ?></span>
<?php 

if($spotify_button_url) 
echo '<div class="social-icon ft-spotify"><a href="'.esc_url($spotify_button_url).'"><i class="fa-brands fa-spotify"></i><span>'.esc_html__('Spotify', 'podcast-guru').'</span></a></div>';

if($itunes_button_url) 
echo '<div class="social-icon ft-itunes"><a href="'.esc_url($itunes_button_url).'"><i class="fa-brands fa-apple"></i><span>'.esc_html__("iTunes", "podcast-guru").'</span></a></div>';


if($pocketcasts_button_url) 
echo '<div class="social-icon"><a href="'.esc_url($pocketcasts_button_url).'"><svg width="20px" height="20px" viewBox="0 0 24 24" role="img" xmlns="
http://www.w3.org/2000/svg"><title>Pocket
Casts icon</title><path d="M12,0C5.372,0,0,5.372,0,12c0,6.628,5.372,12,12,12c6.628,0,12-5.372,12-12 C24,5.372,18.628,0,12,0z M15.564,12c0-1.968-1.596-3.564-3.564-3.564c-1.968,0-3.564,1.595-3.564,3.564 c0,1.968,1.595,3.564,3.564,3.564V17.6c-3.093,0-5.6-2.507-5.6-5.6c0-3.093,2.507-5.6,5.6-5.6c3.093,0,5.6,2.507,5.6,5.6H15.564z M19,12c0-3.866-3.134-7-7-7c-3.866,0-7,3.134-7,7c0,3.866,3.134,7,7,7v2.333c-5.155,0-9.333-4.179-9.333-9.333 c0-5.155,4.179-9.333,9.333-9.333c5.155,0,9.333,4.179,9.333,9.333H19z"/></svg><span  style="margin-left:4px;">'.esc_html__("Pocket Casts", "podcast-guru").'</span></a></div>';
?>

</div>

