<?php
$defaults = [
  'title' => 'FAQ',
  'introText' => "Welcome to our FAQ page! Here, you'll find answers to the most common questions about our products, shipping, returns, and more.",
  'imageUrl' => 'https://framerusercontent.com/images/BSeJTBUuGulfu3C3BJEl4DoQA.webp',
  'imageAlt' => 'FAQ',
  'cardBackground' => '',
  'textColor' => '',
  'useCustomColors' => false,
];

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

$card_style = '';
if (!empty($values['useCustomColors'])) {
  $card_style = sprintf(
    'style="background:%s;color:%s;"',
    esc_attr($values['cardBackground'] ?: '#f6f6f6'),
    esc_attr($values['textColor'] ?: '#0e1011')
  );
}
?>
<section class="fjord-faq-page__layout">
  <aside class="fjord-faq-page__media">
    <div class="fjord-faq-page__media-inner">
      <?php if (!empty($values['imageUrl'])) : ?>
        <img src="<?php echo esc_url($values['imageUrl']); ?>" alt="<?php echo esc_attr($values['imageAlt']); ?>">
      <?php endif; ?>
    </div>
  </aside>

  <div class="fjord-faq-page__content">
    <article class="fjord-faq-card fjord-faq-card--hero" <?php echo $card_style; ?>>
      <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>FAQ</span>
      </nav>
      <h1><?php echo esc_html($values['title']); ?></h1>
      <p><?php echo esc_html($values['introText']); ?></p>
    </article>
  </div>
</section>
