---
import Icon from '../../../components/icon/icon.astro';
import { iconsBlocks } from '../../../data';
import type { IconBlock } from '../../../types';
---

<section class="container mt-4">
  <div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
    <h1 class="h1 text-white">¿Como lo hacemos?</h1>
  </div>

  <div class="row">
    {iconsBlocks &&
      iconsBlocks.map((block: IconBlock) => (
        <div class="col-md-4 mb-7">
          <div class="text-center px-lg-3">
            <span class="svg-icon svg-icon-lg text-white mb-3">
              <Icon name={block.icon} />
            </span>

            <h3 class="text-white">{block.title}</h3>
            <span class="text-white">{block.content}</span>
          </div>
        </div>
      ))}
  </div>
</section>
