<?php
/**
 * Front page template (Home)
 *
 * @package GoAskAuntie
 * @since 1.0.0
 */

namespace BasicWP;

get_header();

$logo_url    = get_theme_file_uri( '/static/img/logo.png' );
$home_left   = get_theme_file_uri( '/static/img/home-left.png' );
$home_right  = get_theme_file_uri( '/static/img/home-right.png' );
$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();
?>

<!-- Hero Section -->
<section class="md:h-screen bg-navy bg-hero bg-contain bg-no-repeat bg-bottom w-full relative md:pt-28" style="background-image: url('<?php echo esc_url( get_theme_file_uri( '/static/img/bg-hero.png' ) ); ?>');">
	<div class="flex flex-col min-h-screen items-center justify-center gap-2">
		<div class="prose prose-2xl text-white max-w-none text-center text-3xl pb-2 font-passion-one">
			<p class="uppercase text-2xl md:text-3xl lg:text-5xl pb-2 md:pb-0 mb-0">Ka Ni Kanichihk Mino Pimatisiwin</p>
			<h1 class="text-5xl lg:text-7xl tracking-wide font-bold uppercase text-red mx-auto md:text-left my-0 py-0">Sexual Wellness Lodge</h1>
			<p class="py-4 my-0">We're ready to welcome you.</p>
			<p class="uppercase text-teal font-bold text-4xl my-0 py-0 pb-4">QUESTIONS?</p>
		</div>
		<div class="flex flex-row max-w-none justify-between w-full mx-auto px-0 h-80">
			<img src="<?php echo esc_url( $home_left ); ?>" alt="Decorative stickers" class="h-96 flex-1 object-contain lg:flex hidden">
			<img src="<?php echo esc_url( $logo_url ); ?>" alt="Go Ask Auntie logo" class="max-h-80 flex-1 object-contain p-0 relative z-10">
			<img src="<?php echo esc_url( $home_right ); ?>" alt="Decorative stickers" class="h-96 flex-1 object-contain lg:flex hidden">
		</div>
	</div>
</section>

<!-- Location & Contact Section -->
<section class="w-full md:h-[52rem] bg-map bg-contain bg-purple bg-blend-overlay bg-opacity-50 flex items-end pb-16 pt-8 md:pt-0" style="background-image: url('<?php echo esc_url( get_theme_file_uri( '/static/img/bg-map.png' ) ); ?>');">
	<div class="flex md:flex-row flex-col justify-center items-end gap-16 md:h-2/3 xl:w-4/5 mx-auto">
		<div class="grid md:grid-cols-2 md:grid-rows-1 grid-rows-2 grid-cols-1 prose text-white max-w-3xl bg-red rounded-[45px] p-4 px-6 gap-10 h-fit md:h-full">
			<div>
				<h3 class="text-white text-7xl md:text-9xl font-bold uppercase text-center p-0 m-0">Free</h3>
				<p class="text-navy uppercase text-3xl text-center font-extrabold mb-0 mt-0 p-0">stbbi testing</p>
				<p class="mt-1"><span class="font-bold">Where to find us</span><br>Our clinic is part of Ka Ni Kanichihk, a trusted heart of Winnipeg's Indigenous community. You'll find us on the 1st Floor at 765 Main Street in the big red brick Social Enterprise Centre, right near the train tracks. The entrance is located on Austin Street. Ring the doorbell and our staff will greet you at the door! If you find your way here from the main building entrance, that's okay too!</p>
			</div>
			<div class="h-fit">
				<p class="font-bold">You can lock your bike in the parking lot of the Social Enterprise Building from 7 a.m. to 4:30 p.m.</p>
				<p class="font-bold">Ka Ni Kanichihk Reserved parking spots available. Parking is also available on Sutherland Avenue and Austin Street.</p>
				<p><span class="font-bold">Bus Routes: </span><br>
				D17 Talbot and Selkirk<br>
				31 Waterfront and North Main<br>
				FX2 St. Vital Centre, Garden City Centre<br>
				FX3 Redonda and Pandora NB, Sturgeon and Murray Park SB<br>
				43 Gateway, RRC Polytech</p>
			</div>
		</div>
		<div class="bg-white rounded-[45px] max-w-lg p-8 text-navy h-auto md:h-full">
			<h3 class="text-lg font-semibold font-sans mb-2">Ka Ni Kanichihk Mino Pimatisiwin Sexual Wellness Lodge</h3>
			<p>
				#102&ndash;765 Main Street<br>
				Winnipeg, MB<br>
				R2W 3N5<br><br>
				<span class="font-bold">Hours of Operation:</span><br>
				Tuesday 11 a.m. - 3 p.m.<br>
				Thursday 11 a.m. - 3 p.m.<br><br>
				<span class="font-bold">Contact Us:</span><br>
				Phone: 204-594-6500<br>
				(Phone not monitored 24/7)<br>
				Email: <a href="mailto:info@kanikanichihk.ca">info@kanikanichihk.ca</a><br><br>
				<span class="font-bold">We're Hiring:</span><br>
				Find out more <a class="underline" href="https://www.kanikanichihk.ca/employment/">here</a>.<br>
			</p>
		</div>
	</div>
</section>

<!-- Get Social Section -->
<section class="bg-white py-8">
	<div class="h-auto mx-6 lg:mx-auto max-w-5xl bg-white">
		<div class="flex flex-row justify-between items-end">
			<h2 class="uppercase text-purple text-3xl">Get social with <span class="text-red">Go Ask Auntie</span></h2>
			<?php get_template_part( 'views/partials/social-media' ); ?>
		</div>
	</div>
</section>

<!-- Q&A Widget Section -->
<section class="w-full py-16 md:px-24 bg-transparent">
	<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(); ?>