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

<main class="fjord-main fjord-about-page">
  <?php
  if (have_posts()) {
    the_post();
  }

  $post_content = get_post_field('post_content', get_the_ID());
  $content_blocks = $post_content ? parse_blocks($post_content) : [];
  $about_hero_attrs = [];
  $filtered_blocks = [];
  foreach ($content_blocks as $block) {
    if (!empty($block['blockName']) && $block['blockName'] === 'fjord/about-hero') {
      $about_hero_attrs = isset($block['attrs']) ? (array) $block['attrs'] : [];
      continue;
    }
    $filtered_blocks[] = $block;
  }
  $hero_defaults = [
    'title' => 'Things to Look for When Comparing Branding Alternatives',
    'text' => "Scandinavian design emphasizes simplicity, natural light, and clean lines. Explore how this minimalist style can transform your home into a calming, functional space that's both stylish and inviting.",
    'linkText' => 'Explore',
    'linkUrl' => '#our-mission',
    'imageUrl' => 'https://framerusercontent.com/images/xz7hJ6ESQ5b48HiLq5UkSZLMyM.webp',
    'imageAlt' => 'We are Fjord',
    'tagText' => 'We are Fjord',
    'cardBackground' => '',
    'textColor' => '',
    'linkColor' => '',
  ];
  $hero_values = wp_parse_args($about_hero_attrs, $hero_defaults);
  ?>

  <section class="fjord-about-page__layout" id="about-content">
    <aside class="fjord-about-page__media">
      <div class="fjord-about-page__media-inner">
        <img src="<?php echo esc_url($hero_values['imageUrl']); ?>" alt="<?php echo esc_attr($hero_values['imageAlt']); ?>">
        <span class="fjord-about-page__tag"><?php echo esc_html($hero_values['tagText']); ?></span>
      </div>
    </aside>

    <div class="fjord-about-page__content">
      <?php if (!empty($content_blocks)) : ?>
        <?php
        $card_styles = [];
        if ($hero_values['cardBackground'] !== '') {
          $card_styles[] = 'background:' . $hero_values['cardBackground'];
        }
        if ($hero_values['textColor'] !== '') {
          $card_styles[] = 'color:' . $hero_values['textColor'];
        }
        $card_style_attr = $card_styles ? ' style="' . esc_attr(implode(';', $card_styles)) . '"' : '';
        $text_style = $hero_values['textColor'] !== '' ? ' style="color:' . esc_attr($hero_values['textColor']) . ';"' : '';
        $link_style = $hero_values['linkColor'] !== '' ? ' style="color:' . esc_attr($hero_values['linkColor']) . ';"' : '';
        ?>
        <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($hero_values['title'])); ?></h1>
          <p<?php echo $text_style; ?>><?php echo esc_html($hero_values['text']); ?></p>
          <?php if ($hero_values['linkText'] !== '') : ?>
            <a class="fjord-about-link" href="<?php echo esc_url($hero_values['linkUrl']); ?>"<?php echo $link_style; ?>>
              <?php echo esc_html($hero_values['linkText']); ?> <span aria-hidden="true">↓</span>
            </a>
          <?php endif; ?>
        </article>

        <?php if (!empty($filtered_blocks)) : ?>
          <?php
          foreach ($filtered_blocks as $block) {
            echo render_block($block);
          }
          ?>
        <?php else : ?>
          <div class="fjord-about-brands" aria-label="Brand partners">
            <div class="fjord-about-brands__track" aria-hidden="true">
              <span>acme</span>
              <span>kanba</span>
              <span>goldline</span>
              <span>asgardia</span>
              <span>acme</span>
              <span>kanba</span>
              <span>goldline</span>
              <span>asgardia</span>
            </div>
          </div>

          <div class="fjord-about-pill" id="our-mission">Our Mission</div>

          <article class="fjord-about-card fjord-about-card--mission">
            <h2>The Liberating Power of Minimalism</h2>
            <p>Decluttering begins with the act of letting go. It's about freeing ourselves from the weight of excess possessions that no longer serve us. By evaluating each item and asking ourselves whether it brings us joy or serves a practical purpose, we can make mindful decisions about what to keep and what to release. Letting go of the unnecessary allows us to create a physical and mental space that promotes clarity and tranquility.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lorem quis pretium posuere. Nam gravida orci in massa convallis vestibulum. Sed venenatis hendrerit gravida. In nec lectus diam. Sed tellus justo, aliquam id eros sit amet, condimentum ullamcorper justo. In lacinia, purus ut congue pharetra, elit sapien aliquam turpis, non viverra dui ante id orci. Nam laoreet ornare urna, en varius nibh finibus sit amet. Quisque sed.</p>
          </article>

          <div class="fjord-about-pill">Our Team</div>

          <div class="fjord-about-team">
            <article class="fjord-about-team__card">
              <span class="fjord-about-team__name">Erik Jansen</span>
              <img src="https://framerusercontent.com/images/HuqNTe7ZlAoHRwcSqCGZZ9PGYQQ.webp" alt="Erik Jansen">
              <div class="fjord-about-team__overlay">
                <span class="fjord-about-team__role">Brand Designer</span>
                <div class="fjord-about-team__social">
                  <a href="#" aria-label="Instagram">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                  <a href="#" aria-label="LinkedIn">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </div>
              </div>
            </article>
            <article class="fjord-about-team__card">
              <span class="fjord-about-team__name">Ingrid Dahl</span>
              <img src="https://framerusercontent.com/images/h1y6JnX5fmEv7JAvfZNIqpWM.webp" alt="Ingrid Dahl">
              <div class="fjord-about-team__overlay">
                <span class="fjord-about-team__role">Brand Director</span>
                <div class="fjord-about-team__social">
                  <a href="#" aria-label="Instagram">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                  <a href="#" aria-label="LinkedIn">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </div>
              </div>
            </article>
            <article class="fjord-about-team__card">
              <span class="fjord-about-team__name">Lars Nielsen</span>
              <img src="https://framerusercontent.com/images/2CRV7Lv7j9PMwzDEghUpkq1E.webp" alt="Lars Nielsen">
              <div class="fjord-about-team__overlay">
                <span class="fjord-about-team__role">Graphic Designer</span>
                <div class="fjord-about-team__social">
                  <a href="#" aria-label="Instagram">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                  <a href="#" aria-label="LinkedIn">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </div>
              </div>
            </article>
            <article class="fjord-about-team__card">
              <span class="fjord-about-team__name">Freja Lindberg</span>
              <img src="https://framerusercontent.com/images/rvdz4HAqDoqO5NrNPW0qi7zWhg.webp" alt="Freja Lindberg">
              <div class="fjord-about-team__overlay">
                <span class="fjord-about-team__role">Product Designer</span>
                <div class="fjord-about-team__social">
                  <a href="#" aria-label="Instagram">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                  <a href="#" aria-label="LinkedIn">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                  </a>
                </div>
              </div>
            </article>
          </div>
        <?php endif; ?>
      <?php else : ?>
        <article class="fjord-about-card fjord-about-card--hero">
          <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>Things to Look for When Comparing Branding Alternatives</h1>
          <p>Scandinavian design emphasizes simplicity, natural light, and clean lines. Explore how this minimalist style can transform your home into a calming, functional space that's both stylish and inviting.</p>
          <a class="fjord-about-link" href="#our-mission">Explore <span aria-hidden="true">↓</span></a>
        </article>

        <div class="fjord-about-brands" aria-label="Brand partners">
          <div class="fjord-about-brands__track" aria-hidden="true">
            <span>acme</span>
            <span>kanba</span>
            <span>goldline</span>
            <span>asgardia</span>
            <span>acme</span>
            <span>kanba</span>
            <span>goldline</span>
            <span>asgardia</span>
          </div>
        </div>

        <div class="fjord-about-pill" id="our-mission">Our Mission</div>

        <article class="fjord-about-card fjord-about-card--mission">
          <h2>The Liberating Power of Minimalism</h2>
          <p>Decluttering begins with the act of letting go. It's about freeing ourselves from the weight of excess possessions that no longer serve us. By evaluating each item and asking ourselves whether it brings us joy or serves a practical purpose, we can make mindful decisions about what to keep and what to release. Letting go of the unnecessary allows us to create a physical and mental space that promotes clarity and tranquility.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis lorem quis pretium posuere. Nam gravida orci in massa convallis vestibulum. Sed venenatis hendrerit gravida. In nec lectus diam. Sed tellus justo, aliquam id eros sit amet, condimentum ullamcorper justo. In lacinia, purus ut congue pharetra, elit sapien aliquam turpis, non viverra dui ante id orci. Nam laoreet ornare urna, en varius nibh finibus sit amet. Quisque sed.</p>
        </article>

        <div class="fjord-about-pill">Our Team</div>

        <div class="fjord-about-team">
          <article class="fjord-about-team__card">
            <span class="fjord-about-team__name">Erik Jansen</span>
            <img src="https://framerusercontent.com/images/HuqNTe7ZlAoHRwcSqCGZZ9PGYQQ.webp" alt="Erik Jansen">
            <div class="fjord-about-team__overlay">
              <span class="fjord-about-team__role">Brand Designer</span>
              <div class="fjord-about-team__social">
                <a href="#" aria-label="Instagram">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
                <a href="#" aria-label="LinkedIn">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
              </div>
            </div>
          </article>
          <article class="fjord-about-team__card">
            <span class="fjord-about-team__name">Ingrid Dahl</span>
            <img src="https://framerusercontent.com/images/h1y6JnX5fmEv7JAvfZNIqpWM.webp" alt="Ingrid Dahl">
            <div class="fjord-about-team__overlay">
              <span class="fjord-about-team__role">Brand Director</span>
              <div class="fjord-about-team__social">
                <a href="#" aria-label="Instagram">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
                <a href="#" aria-label="LinkedIn">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
              </div>
            </div>
          </article>
          <article class="fjord-about-team__card">
            <span class="fjord-about-team__name">Lars Nielsen</span>
            <img src="https://framerusercontent.com/images/2CRV7Lv7j9PMwzDEghUpkq1E.webp" alt="Lars Nielsen">
            <div class="fjord-about-team__overlay">
              <span class="fjord-about-team__role">Graphic Designer</span>
              <div class="fjord-about-team__social">
                <a href="#" aria-label="Instagram">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
                <a href="#" aria-label="LinkedIn">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
              </div>
            </div>
          </article>
          <article class="fjord-about-team__card">
            <span class="fjord-about-team__name">Freja Lindberg</span>
            <img src="https://framerusercontent.com/images/rvdz4HAqDoqO5NrNPW0qi7zWhg.webp" alt="Freja Lindberg">
            <div class="fjord-about-team__overlay">
              <span class="fjord-about-team__role">Product Designer</span>
              <div class="fjord-about-team__social">
                <a href="#" aria-label="Instagram">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4Zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
                <a href="#" aria-label="LinkedIn">
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M6 9v9m0-12v.01M10 18v-5a3 3 0 0 1 6 0v5m-6 0v-5a3 3 0 0 1 6 0v5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
              </div>
            </div>
          </article>
        </div>
      <?php endif; ?>
    </div>
  </section>
</main>

<?php get_footer(); ?>
