<?php
/**
 * Template Name: Q & A
 *
 * @package GoAskAuntie
 * @since 1.0.0
 */

namespace BasicWP;

get_header();

$qa_image  = get_theme_file_uri( '/static/img/q-and-a.png' );
$bg_condom = get_theme_file_uri( '/static/img/bg-condom.png' );

$questions = get_field( 'questions', 'option' ) ?: array();
?>

<section class="w-full pb-24 bg-pattern bg-teal-light bg-contain bg-repeat-y bg-top relative">
	<div class="md:mx-6 lg:mx-auto pt-12 lg:pt-32 text-gray relative">
		<h1 class="text-4xl font-bold md:text-6xl lg:text-7xl tracking-wide uppercase text-white mb-16 mx-auto text-left">Q+A</h1>
	</div>
</section>

<section class="p-0 w-full bg-pattern bg-teal-light bg-contain bg-repeat-y bg-top">
	<div class="q-and-a rounded-[45px] bg-white p-4 pt-8 md:p-8 mx-auto w-full md:w-auto relative">
		<div class="text-purple flex gap-6 w-fit text-2xl items-end">
			<img src="<?php echo esc_url( $qa_image ); ?>" alt="Q&A logo" class="h-24 inline hidden md:block">
			<span class="block mb-4">Do you have a question?<br class="p-0">Find Auntie's answers here.</span>
		</div>
		<div class="absolute top-0 right-0 h-96 w-96 -mt-24 bg-contain bg-no-repeat hidden md:flex items-center flex-col justify-center" style="background-image: url('<?php echo esc_url( $bg_condom ); ?>');">
			<h2 class="text-4xl uppercase text-white text-center">Resources</h2>
			<a href="<?php echo esc_url( home_url( '/resources/' ) ); ?>" class="btn bg-red rounded-full border-4 border-white text-white px-8 py-2 text-center hover:shadow-lg">Learn More</a>
		</div>
		<div class="p-4">
			<div class="grid md:grid-cols-2 gap-6">
				<?php
				if ( $questions ) {
					foreach ( $questions as $qa ) {
						$question = $qa['question'] ?? '';
						$answer   = $qa['answer'] ?? '';
						if ( empty( $question ) && empty( $answer ) ) {
							continue;
						}
						echo '<div class="prose my-4">';
						if ( $question ) {
							echo '<p class="my-4 font-bold text-navy">Q: ' . esc_html( $question ) . '</p>';
						}
						if ( $answer ) {
							echo '<p class="!m-0 pb-0 font-extrabold uppercase text-red text-xl">AUNTIE:</p>';
							echo '<p class="mb-4 !mt-1 pt-0 text-red-900">' . esc_html( $answer ) . '</p>';
						}
						echo '</div>';
					}
				}
				?>
			</div>
		</div>
	</div>
</section>

<?php get_footer(); ?>