<?php
/*
Template Name: FAQ
*/
get_header();
?>

<main class="fjord-main fjord-faq-page">
  <?php
  if (have_posts()) {
    the_post();
  }
  $post_content = get_post_field('post_content', get_the_ID());
  $blocks = $post_content ? parse_blocks($post_content) : [];
  $hero_attrs = [];
  foreach ($blocks as $block) {
    if (!empty($block['blockName']) && $block['blockName'] === 'fjord/faq-hero') {
      $hero_attrs = isset($block['attrs']) ? (array) $block['attrs'] : [];
      break;
    }
  }
  $hero_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' => '#f6f6f6',
    'textColor' => '#0e1011',
    'useCustomColors' => true,
  ];
  $hero_values = wp_parse_args($hero_attrs, $hero_defaults);
  $card_style = '';
  if (!empty($hero_values['useCustomColors'])) {
    $card_style = sprintf(
      'style="background:%s;color:%s;"',
      esc_attr($hero_values['cardBackground']),
      esc_attr($hero_values['textColor'])
    );
  }
  ?>

  <section class="fjord-faq-page__layout" aria-labelledby="fjord-faq-title">
    <aside class="fjord-faq-page__media">
      <div class="fjord-faq-page__media-inner">
        <?php if (!empty($hero_values['imageUrl'])) : ?>
          <img src="<?php echo esc_url($hero_values['imageUrl']); ?>" alt="<?php echo esc_attr($hero_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 id="fjord-faq-title"><?php echo esc_html($hero_values['title']); ?></h1>
        <p><?php echo esc_html($hero_values['introText']); ?></p>
      </article>

      <?php
      $faq_markups = array_filter($blocks, static function ($block) {
        return !empty($block['blockName']) && $block['blockName'] === 'fjord/faq-pills';
      });
      if (!empty($faq_markups)) {
        echo render_block(reset($faq_markups));
      }
      ?>
    </div>
  </section>
</main>

<?php get_footer(); ?>
