<?php
/**
 * Title: Contact Details with Form
 * Slug: nutrawell/contact-details
 * Categories: nutrawell, featured
 * Description: Contact section with form and contact information details.
 */
?>

<!-- wp:group {"align":"full","className":"contact-detils-form"} -->
<div class="wp-block-group alignfull contact-detils-form">

	<!-- wp:group {"className":"container"} -->
	<div class="wp-block-group container">

		<!-- wp:group {"className":"contact-detils-wrapper","layout":{"type":"grid","columnCount":2,"spacing":{"blockGap":"var:preset|spacing|xl"}}} -->
		<div class="wp-block-group contact-detils-wrapper">

			<!-- wp:group {"className":"contact-form-detils"} -->
			<div class="wp-block-group contact-form-detils">

				<!-- wp:group {"className":"title"} -->
				<div class="wp-block-group title">

					<!-- wp:paragraph {"className":"sub-title","textColor":"deep-green"} -->
					<p class="sub-title has-deep-green-color has-text-color">
						<strong><?php echo esc_html__( 'Connect With Us', 'nutrawell' ); ?></strong>
					</p>
					<!-- /wp:paragraph -->

					<!-- wp:heading {"level":2} -->
					<h2><?php echo esc_html__( 'Get in Touch with Our Team', 'nutrawell' ); ?></h2>
					<!-- /wp:heading -->

				</div>
				<!-- /wp:group -->

				<!-- wp:paragraph {"className":"contact-form-placeholder"} -->
				<p class="contact-form-placeholder">
					<?php echo esc_html__( 'Please insert your contact form here.', 'nutrawell' ); ?>
				</p>
				<!-- /wp:paragraph -->

			</div>
			<!-- /wp:group -->

		<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() . '/assets/img/contact-detils.jpg' ); ?>","dimRatio":0,"overlayColor":"base","isUserOverlayColor":false,"className":"contact-detils"} -->
			<div class="wp-block-cover contact-detils">
				<span aria-hidden="true"
					class="wp-block-cover__background has-base-background-color has-background-dim-0 has-background-dim"></span>

				<img
					class="wp-block-cover__image-background"
					src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/contact-detils.jpg' ); ?>"
					alt=""
					data-object-fit="cover"
				/>

				<div class="wp-block-cover__inner-container">

					<!-- wp:group {"className":"contact-detail-items","layout":{"type":"grid","columnCount":1,"spacing":{"blockGap":"var:preset|spacing|lg"}}} -->
					<div class="wp-block-group contact-detail-items">

						<!-- wp:group {"className":"contact-detail-item"} -->
						<div class="wp-block-group contact-detail-item">

							<!-- wp:heading {"level":3} -->
							<h3><?php echo esc_html__( 'Contact Details', 'nutrawell' ); ?></h3>
							<!-- /wp:heading -->

							<!-- wp:group {"className":"contact-detail-dec","layout":{"type":"flex","flexWrap":"nowrap"}} -->
							<div class="wp-block-group contact-detail-dec">

								<!-- wp:group {"className":"contact-detil-icon"} -->
								<div class="wp-block-group contact-detil-icon">
									<!-- wp:image {"width":40,"height":40,"linkDestination":"none"} -->
									<figure class="wp-block-image is-resized contact-detil-icon">
										<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/phone.png' ); ?>" alt="<?php echo esc_attr__( 'Phone Icon', 'nutrawell' ); ?>" width="40" height="40" />
									</figure>
									<!-- /wp:image -->
								</div>
								<!-- /wp:group -->

								<!-- wp:group {"className":"contact-detil-text"} -->
								<div class="wp-block-group contact-detil-text">
									<!-- wp:paragraph -->
									<p><?php echo esc_html__( 'Call Us:', 'nutrawell' ); ?> <a href="tel:+1123456789"><?php echo esc_html__( '+1 123 456 789', 'nutrawell' ); ?></a></p>
									<!-- /wp:paragraph -->
									<!-- wp:paragraph -->
									<p><?php echo esc_html__( 'E-mail:', 'nutrawell' ); ?> <a href="mailto:support@example.com"><?php echo esc_html__( 'support@example.com', 'nutrawell' ); ?></a></p>
									<!-- /wp:paragraph -->
								</div>
								<!-- /wp:group -->

							</div>
							<!-- /wp:group -->

						</div>
						<!-- /wp:group -->

						<!-- wp:group {"className":"contact-detail-item"} -->
						<div class="wp-block-group contact-detail-item">

							<!-- wp:heading {"level":3} -->
							<h3><?php echo esc_html__( 'Address', 'nutrawell' ); ?></h3>
							<!-- /wp:heading -->

							<!-- wp:group {"className":"contact-detail-dec","layout":{"type":"flex","flexWrap":"nowrap"}} -->
							<div class="wp-block-group contact-detail-dec">

								<!-- wp:group {"className":"contact-detil-icon"} -->
								<div class="wp-block-group contact-detil-icon">
									<!-- wp:image {"width":40,"height":40,"linkDestination":"none"} -->
									<figure class="wp-block-image is-resized contact-detil-icon">
										<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/location.png' ); ?>" alt="<?php echo esc_attr__( 'Location Icon', 'nutrawell' ); ?>" width="40" height="40" />
									</figure>
									<!-- /wp:image -->
								</div>
								<!-- /wp:group -->

								<!-- wp:group {"className":"contact-detil-text"} -->
								<div class="wp-block-group contact-detil-text">
									<!-- wp:paragraph -->
									<p><?php echo esc_html__( '221 Broadway Center,', 'nutrawell' ); ?><br><?php echo esc_html__( 'Unit B12, Los Angeles, CA 90014', 'nutrawell' ); ?></p>
									<!-- /wp:paragraph -->
								</div>
								<!-- /wp:group -->

							</div>
							<!-- /wp:group -->

						</div>
						<!-- /wp:group -->

						<!-- wp:group {"className":"contact-detail-item"} -->
						<div class="wp-block-group contact-detail-item">

							<!-- wp:heading {"level":3} -->
							<h3><?php echo esc_html__( 'Business Hours', 'nutrawell' ); ?></h3>
							<!-- /wp:heading -->

							<!-- wp:group {"className":"contact-detail-dec","layout":{"type":"flex","flexWrap":"nowrap"}} -->
							<div class="wp-block-group contact-detail-dec">

								<!-- wp:group {"className":"contact-detil-icon"} -->
								<div class="wp-block-group contact-detil-icon">
									<!-- wp:image {"width":40,"height":40,"linkDestination":"none"} -->
									<figure class="wp-block-image is-resized contact-detil-icon">
										<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/clock.png' ); ?>" alt="<?php echo esc_attr__( 'Clock Icon', 'nutrawell' ); ?>" width="40" height="40" />
									</figure>
									<!-- /wp:image -->
								</div>
								<!-- /wp:group -->

								<!-- wp:group {"className":"contact-detil-text"} -->
								<div class="wp-block-group contact-detil-text">
									<!-- wp:paragraph -->
									<p><?php echo esc_html__( 'Mon - Fri: 9:00 AM - 6:00 PM', 'nutrawell' ); ?><br><?php echo esc_html__( 'Sat: 10:00 AM - 4:00 PM', 'nutrawell' ); ?></p>
									<!-- /wp:paragraph -->
								</div>
								<!-- /wp:group -->

							</div>
							<!-- /wp:group -->

						</div>
						<!-- /wp:group -->

					</div>
					<!-- /wp:group -->

				</div>
			</div>
			<!-- /wp:cover -->

		</div>
		<!-- /wp:group -->

	</div>
	<!-- /wp:group -->

</div>
<!-- /wp:group -->
