<?php
get_header();
?>

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

        <main class="project-single">

            <section class="project-hero" aria-labelledby="project-title">
                <div class="project-hero__media">
                    <?php if (has_post_thumbnail()): ?>
                        <?php the_post_thumbnail('full', array(
                            'class' => 'project-hero__image',
                            'loading' => 'eager',
                            'decoding' => 'async'
                        )); ?>
                    <?php endif; ?>
                </div>

                <div class="project-hero__intro">
                    <h1 id="project-title">
                        <?php the_title(); ?>
                    </h1>

                    <?php if (has_excerpt()): ?>
                        <div class="project-hero__excerpt">
                            <?php the_excerpt(); ?>
                        </div>
                    <?php endif; ?>
                </div>
            </section>

            <section class="project-details" aria-labelledby="project-details-heading">
                <div class="project-details__inner">
                    <h2 id="project-details-heading">Project details</h2>

                    <?php
                    $project_details = get_field('project_details', get_the_ID());

                    $project_role = $project_details['project_role'] ?? '';
                    $project_tools = $project_details['project_tools'] ?? '';
                    ?>

                    <div class="project-details__grid">
                        <div class="project-details__item">
                            <h3>Role</h3>
                            <div class="project-details__content">
                                <?php if (!empty($project_role)): ?>
                                    <?php echo wpautop(esc_html($project_role)); ?>
                                <?php else: ?>
                                    <p>No role information added yet.</p>
                                <?php endif; ?>
                            </div>
                        </div>

                        <div class="project-details__item">
                            <h3>Tools</h3>
                            <div class="project-details__content">
                                <?php if (!empty($project_tools)): ?>
                                    <?php echo wpautop(esc_html($project_tools)); ?>
                                <?php else: ?>
                                    <p>No tools information added yet.</p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="project-content" aria-labelledby="project-content-heading">
                <div class="project-content__inner">
                    <h2 id="project-content-heading" class="screen-reader-text">Project content</h2>
                    <?php the_content(); ?>
                </div>
            </section>

            <nav class="project-navigation" aria-label="Project navigation">
                <div class="nav-previous">
                    <?php previous_post_link('%link', '← Previous Project'); ?>
                </div>

                <div class="nav-archive">
                    <a href="<?php echo esc_url(get_post_type_archive_link('project')); ?>">
                        View All Projects
                    </a>
                </div>

                <div class="nav-next">
                    <?php next_post_link('%link', 'Next Project →'); ?>
                </div>
            </nav>

            <section class="project-cta">
                <?php get_template_part('template-parts/content', 'cta'); ?>
            </section>

        </main>

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

<?php
get_footer();