<?php

/**
 * Template Name: Contact Us
 *
 * Uses front-page header/footer chrome (header.php / footer.php); contact styles from contact-us-page.
 *
 * @package ViitorX
 */

if (! defined('ABSPATH')) {
	exit;
}

$viitorx_contact_uri = get_template_directory_uri() . '/contact-us-page/contact-us-page';

get_header();
?>

<div class="page contact-us-page">
	<main id="primary">
		<section class="hero-inner hero-contact" aria-label="<?php esc_attr_e('Contact hero', 'viitorx'); ?>">
			<?php get_template_part('template-parts/hero-wordmark'); ?>
			<video class="hero-inner__video" autoplay muted loop playsinline preload="metadata" fetchpriority="high" aria-hidden="true">
				<source src="<?php echo esc_url( get_template_directory_uri() . '/assets/videos/inner-page-hero-video.webm' ); ?>" type="video/webm">
			</video>
			<div class="hero-inner__overlay" aria-hidden="true"></div>

			<div class="container hero-inner__content" data-section-reveal>
				<nav class="hero-breadcrumb" aria-label="<?php esc_attr_e('Breadcrumb', 'viitorx'); ?>">
					<a href="<?php echo esc_url(home_url('/')); ?>"><?php esc_html_e('Home', 'viitorx'); ?></a>
					<span class="hero-breadcrumb__sep" aria-hidden="true">&gt;</span>
					<span class="hero-breadcrumb__current"><?php esc_html_e('Contact Us', 'viitorx'); ?></span>
				</nav>
				<h1 class="hero-inner__title"><?php esc_html_e('Bring the brief.', 'viitorx'); ?><br><?php esc_html_e('We will bring everything else.', 'viitorx'); ?></h1>
			</div>
		</section>

		<section class="contact" aria-label="<?php esc_attr_e('Contact section', 'viitorx'); ?>">
			<div class="container contact__inner">
				<div class="contact__left" aria-label="<?php esc_attr_e('Contact details', 'viitorx'); ?>">
					<h2 class="contact__headline"><?php esc_html_e('Let\'s Create', 'viitorx'); ?><br><?php esc_html_e('Something Bold', 'viitorx'); ?></h2>

					<div class="contact__items" aria-label="<?php esc_attr_e('Contact methods', 'viitorx'); ?>">
						<div class="contact-item">
							<div class="contact-item__icon" aria-hidden="true">
								<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/social/mail.svg' ); ?>" alt="" class="contact-item__icon-img" width="32" height="32">
							</div>
							<a class="contact-item__text" href="mailto:[email protected]" aria-label="<?php esc_attr_e('Email support at viitorx dot com', 'viitorx'); ?>" tabindex="0">[email protected]</a>
						</div>

						<div class="contact-item">
							<div class="contact-item__icon" aria-hidden="true">
								<img src="<?php echo esc_url($viitorx_contact_uri . '/assets/Images/Frame-phone.png'); ?>" alt="" class="contact-item__icon-img" width="32" height="32">
							</div>
							<a class="contact-item__text" href="tel:+918488964723" aria-label="<?php esc_attr_e('Call plus nine one eight four eight eight nine six four seven two three', 'viitorx'); ?>" tabindex="0">(+91) 84889 64723</a>
						</div>

						<div class="contact-item contact-item--address">
							<div class="contact-item__icon" aria-hidden="true">
								<img src="<?php echo esc_url($viitorx_contact_uri . '/assets/Images/laravel%204-loction.png'); ?>" alt="" class="contact-item__icon-img" width="32" height="32">
							</div>
							<p class="contact-item__text"><?php esc_html_e('Avdhesh House, 301-303, opp. Gurudwara, Bodakdev,', 'viitorx'); ?><br><?php esc_html_e('Ahmedabad, Gujarat 380054', 'viitorx'); ?></p>
						</div>
					</div>
				</div>

				<div class="contact__right" aria-label="<?php esc_attr_e('Contact form', 'viitorx'); ?>">
					<p class="contact__desc"><?php esc_html_e('Have a vision, project, or idea you\'re ready to bring to life? Fill out the form below and we will get back to you within 24 hours.', 'viitorx'); ?></p>

					<div class="contact-form-cf7">
						<?php echo viitorx_get_contact_form_7_markup(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 
						?>
					</div>
				</div>
			</div>
		</section>
	</main>
</div>

<?php
get_footer();