<?php
/**
 * Block Name: Contact Info
 *
 * Two-column contact page layout: contact info, address/email/phone,
 * and a Gravity Forms contact form on the left; Leaflet map on the right.
 * Contact details read from global `contact_info`; map coordinates/zoom are
 * block-level ACF fields.
 *
 * @package CWC
 */

namespace CWC;

$info    = get_field( 'contact_info', 'option' );
$address = $info['address'] ?? '';
$email   = $info['email'] ?? '';
$phone   = $info['phone'] ?? '';

$heading = get_field( 'heading' );

$map_lat_value  = get_field( 'map_latitude' );
$map_lng_value  = get_field( 'map_longitude' );
$map_zoom_value = get_field( 'map_zoom' );

$map_lat  = is_numeric( $map_lat_value ) ? (float) $map_lat_value : 49.8951;
$map_lng  = is_numeric( $map_lng_value ) ? (float) $map_lng_value : -97.1384;
$map_zoom = is_numeric( $map_zoom_value ) ? (int) $map_zoom_value : 14;
$map_zoom = max( 1, min( 19, $map_zoom ) );

$map_popup = $address ? wp_strip_all_tags( $address ) : 'Our office';

$marker_svg_path = get_theme_file_path( '/views/blocks/contact-info/map-marker.svg' );
$map_marker_svg  = '';

if ( file_exists( $marker_svg_path ) ) {
	$map_marker_svg = file_get_contents( $marker_svg_path ); // phpcs:ignore
}

$map_marker = get_theme_file_uri( '/views/blocks/contact-info/map-marker.svg' );

$classes = 'contact-info mx-break-out';
$wrapper = blockWrapperAttributes( $classes, $is_preview );
?>

<section <?php echo wp_kses_post( $wrapper ); ?>>
	<div class="contact-info__grid">
		<div class="container contact-info__details">
			<?php if ( $heading ) : ?>
				<h1 class="contact-info__heading"><?php echo wp_kses_post( $heading ); ?></h1>
			<?php endif; ?>

            <ul class="contact-info__items">
				<?php if ( $address ) : ?>
					<li class="contact-info__item contact-info__item--address">
						<span class="contact-info__icon" aria-hidden="true">
							<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-address.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
						</span>
						<span class="contact-info__value"><?php echo wp_kses_post( $address ); ?></span>
					</li>
				<?php endif; ?>

				<?php if ( $email ) : ?>
					<li class="contact-info__item contact-info__item--email">
						<span class="contact-info__icon" aria-hidden="true">
							<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-email.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
						</span>
						<a class="contact-info__value" href="mailto:<?php echo esc_attr( $email ); ?>"><?php echo esc_html( $email ); ?></a>
					</li>
				<?php endif; ?>

				<?php if ( $phone ) : ?>
					<li class="contact-info__item contact-info__item--phone">
						<span class="contact-info__icon" aria-hidden="true">
							<img src="<?php echo esc_url( get_theme_file_uri( '/static/img/contact/icon-phone.svg' ) ); ?>" alt="" width="24" height="24" loading="lazy" />
						</span>
						<a class="contact-info__value" href="tel:<?php echo esc_attr( $phone ); ?>"><?php echo esc_html( $phone ); ?></a>
					</li>
				<?php endif; ?>
			</ul>

			<div class="contact-info__form">
                <InnerBlocks />
            </div>
		</div>

		<div
			class="contact-info__map"
			id="contact-map"
			aria-label="Map of downtown Winnipeg"
			role="region"
			data-lat="<?php echo esc_attr( $map_lat ); ?>"
			data-lng="<?php echo esc_attr( $map_lng ); ?>"
			data-zoom="<?php echo esc_attr( $map_zoom ); ?>"
			data-popup="<?php echo esc_attr( $map_popup ); ?>"
			data-marker="<?php echo esc_url( $map_marker ); ?>"
			data-marker-svg="<?php echo esc_attr( $map_marker_svg ); ?>"
		>
			<!-- Leaflet map mounts in this container. -->
		</div>
	</div>
</section>
