<?php
$steps = get_sub_field('steps');
$total = is_array($steps) ? count($steps) : 0;
?>

<section id="collaboration" class="section-boxes-repeater">
  <div class="wrapper wrapper--inner">
    <h2 class="section-heading heading--md"><?php the_sub_field('section_heading'); ?></h2>
    <?php if ($total > 0) : ?>
    <div class="collaboration-steps" style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
      <?php $index = 0; ?>
      <?php while (have_rows('steps')) : the_row(); ?>
        <div class="collaboration-step" style="display: flex; align-items: flex-start; gap: 20px; margin-bottom: <?= ($index < $total - 1) ? '40px' : '0' ?>; position: relative;">
          <div class="step-number" style="flex-shrink: 0; width: 60px; height: 60px; background: linear-gradient(135deg, #88b14b 0%, #6a8f3a 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; box-shadow: 0 4px 8px rgba(136, 177, 75, 0.3); position: relative; z-index: 2;">
            <?= $index + 1 ?>
          </div>

          <?php if ($index < $total - 1) : ?>
            <div class="step-connector" style="position: absolute; left: 30px; top: 60px; width: 2px; height: 40px; background: linear-gradient(to bottom, #88b14b, #e0e0e0); z-index: 1;"></div>
          <?php endif; ?>

          <div class="step-content" style="flex: 1; background-color: #f8f9fa; padding: 20px 25px; border-radius: 8px; border-left: 4px solid #88b14b; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.3s ease;">
            <h3 class="step-title" style="margin: 0; font-size: 18px; font-weight: 600; color: #333; line-height: 1.4;">
              <?php the_sub_field('step_title'); ?>
            </h3>
          </div>
        </div>
        <?php $index++; ?>
      <?php endwhile; ?>
    </div>
    <?php endif; ?>
    <?php if (get_sub_field('bottom_text')) : ?>
    <div class="col-text-content mt-4 text-center">
      <p><?php the_sub_field('bottom_text'); ?></p>
    </div>
    <?php endif; ?>
  </div>
</section>

<style>
.collaboration-step:hover .step-content {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(136, 177, 75, 0.15);
}

.collaboration-step:hover .step-number {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .collaboration-step {
        gap: 15px !important;
    }

    .step-number {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    .step-connector {
        left: 25px !important;
        top: 50px !important;
    }

    .step-content {
        padding: 15px 20px !important;
    }

    .step-title {
        font-size: 16px !important;
    }
}
</style>
