<?php /* Template Name: Homepage */ get_header(); ?>

<div class="uk-cover-container uk-text-center banner">
    <canvas class="uk-visible@m" width="" height="800"></canvas>
    <canvas class="uk-hidden@m" width="" height="500"></canvas>

		<?php $image = get_field('top_banner');

		if( $image ): 
			// Since 'full' isn't in ['sizes'], we use the top-level ['url']
			$url = $image['url']; 
			$alt = $image['alt'];
		?>
			<img class="uk-visible@m" 
				 uk-img 
				 data-src="<?php echo esc_url($url); ?>" 
				 alt="<?php echo esc_attr($alt); ?>" 
				 data-width 
				 data-height 
				 uk-cover />

		<?php else: ?>
			<img class="uk-visible@m" 
				 uk-img 
				 data-src="<?php echo get_template_directory_uri(); ?>/images/child-with-yellow-and-green-paint-on-hands.webp" 
				 data-width 
				 data-height 
				 uk-cover>
		<?php endif; ?>
	
	
		<?php 
		$image2 = get_field('top_banner_mobile');

		if( $image2 ): 
			// Use the top-level URL for the full size
			$url2 = $image2['url'];
			$alt2 = $image2['alt'];
		?>
			<img class="uk-hidden@m" 
				 uk-img 
				 data-src="<?php echo esc_url($url2); ?>" 
				 alt="<?php echo esc_attr($alt2); ?>" 
				 data-width 
				 data-height 
				 uk-cover />

		<?php else: ?>
			<img class="uk-hidden@m" 
				 uk-img 
				 data-src="<?php echo get_template_directory_uri(); ?>/images/child-with-yellow-and-green-paint-on-hands-mobile.webp" 
				 data-width 
				 data-height 
				 uk-cover>
		<?php endif; ?>
	
	<div class="uk-position-cover uk-text-center uk-container uk-flex uk-flex-center uk-flex-middle">
        <div  uk-scrollspy="target: > h2, p; cls: uk-animation-slide-bottom-medium; delay: 200">
           <h2 class="white">
			   Where little<br class="uk-visible@m">HE<i class="fa-regular fa-heart"></i>RTS BLO<i class="fa-regular fa-flower"></i>M
			</h2>
			<p class="white">
				A caring place to grow, play, and discover every day.
			</p>
			<p class="white">
				<a class="btn yellow_btn" href="<?= home_url(); ?>/enroll/">Enroll your kid</a>
			</p>
			
        </div>
    </div>
</div>


<div class="yellow_bg ">
	<div class="uk-container">
		<div class="uk-text-center uk-padding uk-inline-block our_mission"  uk-scrollspy="target: > h2, h3, p; cls: uk-animation-slide-bottom-medium; delay: 200">
			
			<h4 class="nunito">
				OUR MISSION
			</h4>
			<h3 class="nunito">
				Growing hearts,<br class="uk-visible@m"> minds, and <span class="red">smiles</span>
			</h3>
			<p class="uk-width-3-4@m uk-margin-auto">
				At Bloom and Play, we offer a warm, respectful early childhood experience rooted in presence and connection. We guide children with intention and heart, supporting their unique growth through purposeful play and gentle rhythms. Families can feel confident their child is valued, guided, and known.
			</p>
			
		</div>
	</div>
</div>

<div class="white_bg uk-margin-top uk-margin-large-bottom">
	<div class="uk-container">
		<h4 class="nunito uk-text-center">
			PROGRAMS
		</h4>
		<h3 class="uk-text-center">
			What we <span class="yellow">offer</span>
		</h3>
		<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-medium; delay: 200">
			<?php get_template_part('content-services'); ?>
		</div>
	</div>
</div>

<div class="cloud_bg">
	<div class="uk-container" uk-scrollspy="target: > h2, p; cls: uk-animation-slide-bottom-medium; delay: 200">
		<h2 class="white uk-text-center">
			Big smiles and new<br class="uk-visible@m"> adventures start here!
		</h2>
		<p class="uk-text-center">
			<a href="<?= home_url(); ?>/enroll/" class="btn blue_btn">Enroll child</a>
		</p>
	</div>
</div>

<div class="uk-container uk-hidden">
	<main role="main">
			<section>

			<?php if (have_posts()): while (have_posts()) : the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

					<?php the_content(); ?>

					<br class="clear">

					<?php edit_post_link( __('Edit this page'), '', '', 0, 'post-edit-link uk-label uk-float-right' ); ?>

				</article>

			<?php endwhile; ?><?php endif; ?>

			</section>
	</main>
</div>
<?php get_footer(); ?>