From e3024a6cdc2ad258210815e1bf7832074aa7c07e Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sat, 4 Jul 2026 13:31:06 -0500
Subject: [PATCH] feat(contact): rewrite contact-info block to two-column
 layout

---
 views/blocks/contact-info/contact-info.php | 55 +++++++++++++++++-----
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/views/blocks/contact-info/contact-info.php b/views/blocks/contact-info/contact-info.php
index cd4a637..34496e4 100644
--- a/views/blocks/contact-info/contact-info.php
+++ b/views/blocks/contact-info/contact-info.php
@@ -2,36 +2,65 @@
 /**
  * Block Name: Contact Info
  *
- * Display contact information from global fields with icons and optional form.
+ * Two-column contact page layout: contact info, address/email/phone,
+ * and a Gravity Forms contact form on the left; Leaflet map placeholder
+ * on the right. Reads from the global `contact_info` option.
  *
  * @package CWC
  */
 
 namespace CWC;
 
+$info    = get_field( 'contact_info', 'option' );
+$address = $info['address'] ?? '';
+$email   = $info['email']   ?? '';
+$phone   = $info['phone']   ?? '';
+
 $classes = 'contact-info';
 $wrapper = blockWrapperAttributes( $classes, $is_preview );
 ?>
 
 <section <?php echo esc_attr( $wrapper ); ?>>
-	<div class="flex flex-col lg:flex-row">
-        <div class="w-full lg:w-1/2 p-6">
-            <h2 class="text-2xl font-bold mb-4">Contact Information</h2>
+    <div class="contact-info__grid">
+        <div class="contact-info__details">
+            <h1 class="contact-info__heading">Contact</h1>
 
-            <div class="not-prose text-black my-4">
-                <h3 class="mb-0"><?php echo esc_html__( 'Mailing Address', 'cwc' ); ?></h3>
-                <p class="my-0.5"><?php echo wp_kses_post( get_field( 'contact_info', 'option' )['address'] ); ?></p>
+            <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; ?>
 
-                <h3 class="mb-0"><?php echo esc_html__( 'Email', 'cwc' ); ?></h3>
-                <p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="mailto:<?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['email'] ); ?></a></p>
+                <?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; ?>
 
-                <h3 class="mb-0"><?php echo esc_html__( 'Phone', 'cwc' ); ?></h3>
-                <p class="my-0.5"><a class="hover:opacity-80 transition-colors duration-100" href="tel:<?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?>"><?php echo esc_html( get_field( 'contact_info', 'option' )['phone'] ); ?></a></p>
+                <?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">
+                <?php echo do_shortcode( '[gravityform id="1" title="false" description="false" ajax="true"]' ); ?>
             </div>
         </div>
 
-        <div class="w-full lg:w-1/2 p-6">
-            <InnerBlocks />
+        <div class="contact-info__map" id="contact-map" aria-label="Map of downtown Winnipeg" role="region">
+            <!-- Leaflet map will mount here. Pin: orange-01 + white map marker (TBD). -->
         </div>
     </div>
 </section>