<?php /*template name: about*/ get_header(); ?>
<div class="uk-cover-container uk-text-center banner" style="background-color: <?= get_field('colour_picker_banner_bg'); ?>">
    <canvas class="uk-visible@m" width="" height="400"></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/banner.jpg" 
         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/banner-mobile.jpg" 
         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">
			   <?= get_field('banner_title'); ?>
			</h2>
			<p class="white uk-width-2-3@m uk-margin-auto">
				<?= get_field('banner_text'); ?>
			</p>
        </div>
    </div>
</div>



<div class="white_bg uk-margin-large-top uk-margin-large-bottom">
	<div class="uk-container">
		<div class="uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-scrollspy="target: > div, p; cls: uk-animation-slide-bottom-medium; delay: 200">
			<div>
				<img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/two-children-walking-through-tall-grass-toward-mountain-range.webp">
			</div>
			<div>
				<h4 class="nunito uk-margin-remove">
					ABOUT US
				</h4>
				<h3 class="uk-margin-remove">
					Our <span class="pink">story</span>
				</h3>
				<p>
					Bloom & Play was founded on the belief that children, like flowers, thrive with warmth, patience, and care. What began as a small dream has blossomed into a bright, welcoming space, inspired by nature and filled with creativity and discovery. Here, every child is encouraged to grow at their own pace to root deeply, reach high, and bloom beautifully.
				</p>
			</div>
		</div>
	</div>
</div>


<div class="yellow_bg">
	<div class="uk-container">
		<div class="uk-text-center uk-padding">
			<h4 class="nunito">
				WHY CHOOSE US
			</h4>
			<h3 class="">
				Our Core <span class="blue">Values</span>
			</h3>
			<p class="uk-margin-auto uk-width-2-3@m">At Bloom and Play, our core values define everything we do, from the way we interact with children to how we work with families. These values guide us in providing a safe, nurturing, and educational environment where children can thrive.</p>
			<div class="uk-child-width-1-5@m icons_five" uk-grid uk-scrollspy="target: > h2, p; cls: uk-animation-slide-bottom-medium; delay: 200">
				<div>
					<div class="values_icons values_icons_green"><img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/hand-plus-icon.webp"></div>
					<h3>Relationships &amp; Belonging</h3>
					<p class="small">We nurture respectful, caring connections where everyone feels seen, heard, and valued.</p>
				</div>
				<div>
					<div class="values_icons values_icons_pink"><img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/heart-icon.webp"></div>
					<h3>Presence &amp; Guidance</h3>
					<p class="small">We lead with mindfulness, empathy, heart, supporting growth, confidence, and resilience.</p>
				</div>
				<div>
					<div class="values_icons values_icons_yellow"><img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/light-bulb-icon.webp"></div>
					<h3>Curiosity &amp; Creativity</h3>
					<p class="small">We honor curiosity and inspire wonder through play, exploration, and joyful discovery.</p>
				</div>
				<div>
					<div class="values_icons values_icons_purple"><img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/gear-icon.webp"></div>
					<h3>Kindness &amp; Community</h3>
					<p class="small">We act with compassion and generosity, fostering a supportive and caring community.</p>
				</div>
				<div>
					<div class="values_icons values_icons_blue"><img uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/puzzle-icon.webp"></div>
					<h3>Integrity &amp; Growth</h3>
					<p class="small">We stay true to our values and support each other as we learn, grow, and become our best selves.</p>
				</div>
				
			</div>
			
		</div>
	</div>
</div>

<div class="cloud_bg_about">
	<div class="uk-container"  uk-scrollspy="target: > h2, p; cls: uk-animation-slide-bottom-medium; delay: 200">
		<h2 class="white uk-text-center">
			Watch them grow, learn, <br class="uk-visible@m">bloom &amp; play
		</h2>
		<p class="uk-text-center">
			<a href="<?= home_url(); ?>/programs/" class="btn pink_btn">Programs</a>
		</p>
	</div>
</div>


<div class="white_bg">
	<div class="uk-container">
		<div class="uk-text-center uk-padding"  uk-scrollspy="target: > h2, h3, p; cls: uk-animation-slide-bottom-medium; delay: 200">
			<h4 class="nunito">
				WHO WE ARE
			</h4>
			<h3 class="">
				Meet Our <span class="blue">Educators</span>
			</h3>
			<p class="uk-margin-auto uk-width-2-3@m">Our educators are caring, qualified professionals who create a warm and engaging environment for every child. They support learning through play, curiosity, and consistent encouragement.</p>
			<h4 class="grey">Coming soon...</h4>
		</div>
	</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">

					<p class="uk-text-right"><?php edit_post_link( __('Edit this page'), '', '', 0, 'post-edit-link uk-text-large uk-padding-small uk-button-large uk-button uk-button-primary' ); ?></p>

				</article>

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

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