<?php
/*
Template Name: front-page
*/
?>

<?php
get_header();
?>

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

        <main>
            <!-- Hero Section -->
            <?php
            $hero = get_field('hero');

            $name = $hero['name'] ?? '';
            $tagline = $hero['tagline'] ?? '';
            $intro = $hero['intro'] ?? '';
            $hero_bg = $hero['hero_bg'] ?? null;
            ?>
            <section id="home" aria-labelledby="hero-heading">
                <div class="hero-media">
                    <img src="<?php echo esc_url($hero_bg['url'] ?? ''); ?>" alt="" aria-hidden="true">
                    <div class="hero-content">
                        <h1 id="hero-heading" class="hero-name">
                            <?php echo esc_html($name); ?>
                        </h1>
                        <p class="hero-tagline">
                            <?php echo esc_html($tagline); ?>
                        </p>
                    </div>
                </div>
                <div class="hero-intro">
                    <?php echo wp_kses_post($intro); ?>
                </div>
            </section>

            <!-- About Section -->
            <?php
            $about = get_field('about');
            $heading = $about['heading'] ?? '';
            $body = $about['body'] ?? '';
            $image = $about['image'] ?? null;
            ?>
            <?php if ($about): ?>
                <section id="about" class="section-about">
                    <div class="about-inner">
                        <div class="about-text">
                            <h2><?php echo esc_html($heading); ?></h2>
                            <?php echo wp_kses_post($body); ?>
                        </div>
                        <figure class="about-photo">
                            <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt'] ?? ''); ?>"
                                loading="lazy" decoding="async">
                        </figure>
                    </div>
                </section>
            <?php endif; ?>

            <!-- Skills Section -->
            <?php
            $skills = get_field('skills');
            $heading = $skills['heading'] ?? '';
            $body = $skills['body'] ?? '';
            ?>
            <?php if ($skills): ?>
                <section id="skills" class="section-skills">
                    <h2><?php echo esc_html($heading); ?></h2>
                    <?php echo wp_kses_post($body); ?>
                </section>
            <?php endif; ?>

            <!-- Education Section -->
            <?php
            $education = get_field('education');
            $heading = $education['heading'] ?? '';
            $body = $education['body'] ?? '';
            ?>
            <?php if ($education): ?>
                <section id="education" class="section-edu">
                    <h2><?php echo esc_html($heading); ?></h2>
                    <?php echo wp_kses_post($body); ?>
                </section>
            <?php endif; ?>

            <!-- Contact Section -->
            <!-- <section id="contact" class="section-contact">
                  <?php /*get_template_part('template-parts/content', 'cta');*/ ?> 
             </section> -->

        </main>

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

<?php
get_footer();
