<?php
global $bookingStepPatternParams;

$sectionContent = '<!-- wp:group {"tagName":"section","align":"wide","layout":{"type":"constrained"},"hasAnimation":true,"animationType":"fadeInBottom","animationDistance":50,"animationDuration":300,"animationDelay":0,"triggerPoint":10,"scrollBehavior":"playOnView"} -->
<section class="wp-block-group alignwide orphic-motion-animation" data-animation-type="fadeInBottom" data-animation-distance="50" data-animation-duration="300" data-animation-delay="0" data-animation-trigger="10" data-scroll-behavior="playOnView"><!-- wp:spacer {"height":"25px"} -->
<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">' . $bookingStepPatternParams['title'] . '</h2>
<!-- /wp:heading -->

<!-- wp:heading {"textAlign":"center","level":3} -->
<h3 class="wp-block-heading has-text-align-center">' . $bookingStepPatternParams['description'] . '</h3>
<!-- /wp:heading -->

<!-- wp:spacer {"height":"25px"} -->
<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"wide","layout":{"type":"constrained","contentSize":"1050px"}} -->
<div class="wp-block-group alignwide"><!-- wp:acf/icon-cards {"name":"acf/icon-cards","data":{"field_659eeea81c198":"col3","field_6769b2d41153d":"' . $bookingStepPatternParams['theme'] . '"},"mode":"preview"} -->';

foreach ($bookingStepPatternParams['steps'] as $step) {
  $sectionContent .= '<!-- wp:acf/icon-card {"name":"acf/icon-card","data":{"icon":"' . $step['icon'] . '","_icon":"field_659ef0b922182"},"mode":"preview"} -->
  <!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"fontSize":"large"} -->
  <h4 class="wp-block-heading has-text-align-center has-large-font-size" style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);font-style:normal;font-weight:600">' . $step['title'] . '</h4>
  <!-- /wp:heading -->
  
  <!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
  <p class="has-text-align-center" style="margin-top:0;margin-bottom:0">' . $step['stepDescription'] . '</p>
  <!-- /wp:paragraph -->
  <!-- /wp:acf/icon-card -->';
}

$sectionContent .= '<!-- /wp:acf/icon-cards --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"25px"} -->
<div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></section>
<!-- /wp:group -->';

return $sectionContent;
