<?php
$defaults = [
  'title' => 'Fácil de instalar, fácil de editar y',
  'text' => 'Plantilla lista para ser editada de manera simple. Colores, textos, imágenes.',
  'linkText' => 'Explore',
  'linkUrl' => '#our-mission',
  'imageUrl' => 'https://framerusercontent.com/images/xz7hJ6ESQ5b48HiLq5UkSZLMyM.webp',
  'imageAlt' => 'We are Fjord',
  'tagText' => 'We are Fjord',
  'cardBackground' => '',
  'textColor' => '',
  'linkColor' => '',
];

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

$tag_text = trim((string) $values['tagText']);
$image_alt = trim((string) $values['imageAlt']);
if ($image_alt === '') {
  $image_alt = $tag_text;
}

$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-page__layout fjord-about-page__layout--hero">
  <aside class="fjord-about-page__media">
    <div class="fjord-about-page__media-inner">
      <?php if (!empty($values['imageUrl'])) : ?>
        <img src="<?php echo esc_url($values['imageUrl']); ?>" alt="<?php echo esc_attr($image_alt); ?>">
      <?php endif; ?>
      <?php if ($tag_text !== '') : ?>
        <span class="fjord-about-page__tag"><?php echo esc_html($tag_text); ?></span>
      <?php endif; ?>
    </div>
  </aside>

  <div class="fjord-about-page__content">
    <article class="fjord-about-card fjord-about-card--hero"<?php echo $card_style_attr; ?>>
      <nav class="fjord-blog-post__breadcrumb" aria-label="Breadcrumb">
        <a href="<?php echo esc_url(home_url('/')); ?>">Home</a>
        <span class="fjord-blog-post__breadcrumb-sep">/</span>
        <span>About</span>
      </nav>
      <h1<?php echo $text_style; ?>><?php echo nl2br(esc_html($values['title'])); ?></h1>
      <p<?php echo $text_style; ?>><?php echo esc_html($values['text']); ?></p>
      <?php if ($values['linkText'] !== '') : ?>
        <a class="fjord-about-link" href="<?php echo esc_url($values['linkUrl']); ?>"<?php echo $link_style; ?>>
          <?php echo esc_html($values['linkText']); ?> <span aria-hidden="true">↓</span>
        </a>
      <?php endif; ?>
    </article>
  </div>
</section>
