<?php
$defaults = [
  'title' => 'Una plantilla fácil de editar y',
  'text' => 'Disfruta de la calidad hecha una plantilla para WordPress. Adaptación, edición, velocidad, elegancia y mucho más.',
  'linkText' => 'Ir a tienda',
  'linkUrl' => '#',
  'imageUrl' => 'https://framerusercontent.com/images/4edEXYzlI9czhhBmZMvj3fhSs.webp?width=2000&height=2400',
  'textColor' => '',
  'cardBackground' => '',
  'linkColor' => '',
];

$values = array_merge($defaults, array_filter((array) $attributes, static function ($value) {
  return $value !== null && $value !== '';
}));

$card_styles = [];
if ($values['cardBackground'] !== '') {
  $card_styles[] = 'background:' . $values['cardBackground'];
}
if ($values['textColor'] !== '') {
  $card_styles[] = 'color:' . $values['textColor'];
}
$card_style_attr = $card_styles ? ' style="' . esc_attr(implode(';', $card_styles)) . '"' : '';

$text_style = $values['textColor'] !== '' ? ' style="color:' . esc_attr($values['textColor']) . ';"' : '';
$link_style = $values['linkColor'] !== '' ? ' style="color:' . esc_attr($values['linkColor']) . ';"' : '';
?>
<section class="fjord-about fjord-reveal">
  <div class="fjord-about__grid fjord-reveal">
    <div class="fjord-about__image">
      <img src="<?php echo esc_url($values['imageUrl']); ?>" alt="">
    </div>
    <div class="fjord-about__content"<?php echo $card_style_attr; ?>>
      <h3<?php echo $text_style; ?>><?php echo nl2br(esc_html($values['title'])); ?></h3>
      <p<?php echo $text_style; ?>><?php echo esc_html($values['text']); ?></p>
      <a class="fjord-about__link fjord-collection-card__link" href="<?php echo esc_url($values['linkUrl']); ?>"<?php echo $link_style; ?>>
        <?php echo esc_html($values['linkText']); ?>
      </a>
    </div>
  </div>
</section>
