<?php
$defaults = [
  'woodImage' => 'https://framerusercontent.com/images/oaJMCWVJsdqXc6aQzq9Tl9QeDAc.webp?width=1400&height=1000',
  'woodTitle' => 'Wood',
  'woodText' => 'Our Wood Collection celebrates the natural beauty of wood.',
  'woodLinkText' => 'Ver producto',
  'woodLinkUrl' => '#',
  'woodCardBackground' => '',
  'woodTextColor' => '',
  'woodLinkColor' => '',
  'peopleImage' => 'https://framerusercontent.com/images/TRNAt6di5Swwdq8nGr6m4FLg4AU.webp?width=2000&height=1000',
  'darkTitle' => 'Dark',
  'darkText' => 'Rrefined finishes bring an air of sophistication and drama to any room.',
  'darkLinkText' => 'Ver producto',
  'darkLinkUrl' => '#',
  'darkCardBackground' => '',
  'darkTextColor' => '',
  'darkLinkColor' => '',
  'modernTitle' => 'Modern',
  'modernText' => 'The Modern Collection brings together graceful lines and luxurious finishes.',
  'modernLinkText' => 'Ver producto',
  'modernLinkUrl' => '#',
  'modernCardBackground' => '',
  'modernTextColor' => '',
  'modernLinkColor' => '',
  'chairImage' => 'https://framerusercontent.com/images/yWfiT9hCK49Xggoq1k9TvLHyUY.webp?width=2400&height=1200',
];

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

$style_attr = function ($styles) {
  $output = [];
  foreach ($styles as $key => $value) {
    if ($value === '') {
      continue;
    }
    $output[] = $key . ':' . $value;
  }
  return $output ? ' style="' . esc_attr(implode(';', $output)) . '"' : '';
};

$wood_card_style = $style_attr([
  'background' => $values['woodCardBackground'],
  'color' => $values['woodTextColor'],
]);
$wood_title_style = $values['woodTextColor'] ? ' style="color:' . esc_attr($values['woodTextColor']) . ';"' : '';
$wood_text_style = $values['woodTextColor'] ? ' style="color:' . esc_attr($values['woodTextColor']) . ';"' : '';
$wood_link_style = $values['woodLinkColor'] ? ' style="color:' . esc_attr($values['woodLinkColor']) . ';"' : '';

$dark_card_style = $style_attr([
  'background' => $values['darkCardBackground'],
  'color' => $values['darkTextColor'],
]);
$dark_title_style = $values['darkTextColor'] ? ' style="color:' . esc_attr($values['darkTextColor']) . ';"' : '';
$dark_text_style = $values['darkTextColor'] ? ' style="color:' . esc_attr($values['darkTextColor']) . ';"' : '';
$dark_link_style = $values['darkLinkColor'] ? ' style="color:' . esc_attr($values['darkLinkColor']) . ';"' : '';

$modern_card_style = $style_attr([
  'background' => $values['modernCardBackground'],
  'color' => $values['modernTextColor'],
]);
$modern_title_style = $values['modernTextColor'] ? ' style="color:' . esc_attr($values['modernTextColor']) . ';"' : '';
$modern_text_style = $values['modernTextColor'] ? ' style="color:' . esc_attr($values['modernTextColor']) . ';"' : '';
$modern_link_style = $values['modernLinkColor'] ? ' style="color:' . esc_attr($values['modernLinkColor']) . ';"' : '';
?>
<div class="fjord-collections-wrap fjord-reveal">
  <div class="fjord-collections-grid">
    <article class="fjord-collection-card fjord-collection-card--wood" style="--wood-image:url('<?php echo esc_url($values['woodImage']); ?>');">
      <div class="fjord-collection-card__content fjord-collection-card__content--dark"<?php echo $wood_card_style; ?>>
        <h3<?php echo $wood_title_style; ?>><?php echo esc_html($values['woodTitle']); ?></h3>
        <p<?php echo $wood_text_style; ?>><?php echo esc_html($values['woodText']); ?></p>
        <a class="fjord-collection-card__link" href="<?php echo esc_url($values['woodLinkUrl']); ?>"<?php echo $wood_link_style; ?>>
          <?php echo esc_html($values['woodLinkText']); ?>
        </a>
      </div>
    </article>
    <div class="fjord-collections-grid__right">
      <div class="fjord-collection-card fjord-collection-card--image fjord-collection-card--people" style="background-image:url('<?php echo esc_url($values['peopleImage']); ?>');"></div>
      <div class="fjord-collection-card fjord-collection-card--light fjord-collection-card--dark"<?php echo $dark_card_style; ?>>
        <h3<?php echo $dark_title_style; ?>><?php echo esc_html($values['darkTitle']); ?></h3>
        <p<?php echo $dark_text_style; ?>><?php echo esc_html($values['darkText']); ?></p>
        <a class="fjord-collection-card__link" href="<?php echo esc_url($values['darkLinkUrl']); ?>"<?php echo $dark_link_style; ?>>
          <?php echo esc_html($values['darkLinkText']); ?>
        </a>
      </div>
      <div class="fjord-collections-grid__row">
        <div class="fjord-collection-card fjord-collection-card--light fjord-collection-card--modern"<?php echo $modern_card_style; ?>>
          <h3<?php echo $modern_title_style; ?>><?php echo esc_html($values['modernTitle']); ?></h3>
          <p<?php echo $modern_text_style; ?>><?php echo esc_html($values['modernText']); ?></p>
          <a class="fjord-collection-card__link" href="<?php echo esc_url($values['modernLinkUrl']); ?>"<?php echo $modern_link_style; ?>>
            <?php echo esc_html($values['modernLinkText']); ?>
          </a>
        </div>
        <div class="fjord-collection-card fjord-collection-card--image fjord-collection-card--chair" style="background-image:url('<?php echo esc_url($values['chairImage']); ?>');"></div>
      </div>
    </div>
  </div>
</div>
