<?php /*template name: programs*/ 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">
	<div class="uk-container">
		<div class="uk-text-center uk-padding"  uk-scrollspy="target: > h3, h4, p; cls: uk-animation-slide-bottom-medium; delay: 200">
			<h4 class="nunito">
				PROGRAMS
			</h4>
			<h3 class="">
				<span class="pink">What</span> we offer 
			</h3>
			<p class="uk-margin-auto uk-width-2-3@m">We offer age-specific daycare programs that nurture each child’s growth in a safe and caring setting. Our educators prioritize development and communication with parents. Learn more about our programs today.</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; cls: uk-animation-slide-bottom-medium; delay: 200">
			<div>
				<img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/infant-toddler-care-inner.webp">
			</div>
			<div>
				<h4 class="nunito uk-margin-remove">
					6m - 36m
				</h4>
				<h3 class="uk-margin-remove">
					<span class="blue">Infant/Toddler </span>care
				</h3>
				<p>
					Our Infant/Toddler programs provide a safe, loving environment for ages 6 months to 36 months. A warm, responsive environment where children are cradled in gentle arms, spoken to with care and met with attentive eyes. Soft lullabies during diaper changes, playful coos during tummy time, the steady support of first steps-are filled with meaning. These daily moments are rooted in trust, predictable routines and heartfelt connection.
				</p>
				<p><a href="<?= home_url(); ?>/enroll/" class="btn blue_btn">Enroll now</a></p>
			</div>
		</div>
	</div>
</div>

<div class="yellow_bg uk-margin-large-top uk-margin-large-bottom padding-top-bottom">
	<div class="uk-container">
		<div class="uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-medium; delay: 200">
			<div>
				<h4 class="nunito uk-margin-remove">
					1y - 5y
				</h4>
				<h3 class="uk-margin-remove">
					<span class="yellow">Multi-age </span>care
				</h3>
				<p>
				In our Multi-Age classrooms, children are guided with care and encouragement. With wide-eyed curiosity, they explore hands-on experiences, develop independence and courage, and learn that all emotions are honored. They are free to wonder, make mistakes, and bloom at their own pace.
				</p>
				<p><a href="<?= home_url(); ?>/enroll/" class="btn yellow_btn">Enroll now</a></p>
			</div>
			<div>
				<img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/multi-age-care-inner.webp">
			</div>
		</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; cls: uk-animation-slide-bottom-medium; delay: 200">
			<div>
				<img class="rounded" uk-img data-src="<?php echo get_template_directory_uri(); ?>/images/kinder-prep-care-inner.webp">
			</div>
			<div>
				<h4 class="nunito uk-margin-remove">
					3y - 5y
				</h4>
				<h3 class="uk-margin-remove">
					<span class="pink">Kinder-prep </span>care
				</h3>
				<p>
					Our Kinder-Prep Care Programs are designed for children ages 3 to 5. In these classrooms, children engage in activities such as sensory exploration, building and creating with natural materials, and role-playing. Through a focus on virtues like kindness, patience, and respect, children grow in confidence, develop empathy, and gain the social and emotional skills they need to thrive beyond the classroom.
				</p>
				<p><a href="<?= home_url(); ?>/enroll/" class="btn pink_btn">Enroll now</a></p>
			</div>
		</div>
	</div>
</div>



<div class="cloud_bg_programs">
	<div class="uk-container"  uk-scrollspy="target: > h2, p; cls: uk-animation-slide-bottom-medium; delay: 200">
		<h2 class="white uk-text-center">
			Join our daycare<br class="uk-visible@m"> family today.
		</h2>
		<p class="uk-text-center">
			<a href="<?= home_url(); ?>/contact/" class="btn pink_btn">Contact us</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">

					<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(); ?>
