<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php
  if (is_singular('post')) {
    $post_id = get_queried_object_id();
    $title = get_the_title($post_id);
    $description = has_excerpt($post_id)
      ? get_the_excerpt($post_id)
      : wp_trim_words(wp_strip_all_tags(get_post_field('post_content', $post_id)), 30, '...');
    $url = get_permalink($post_id);
    $image = has_post_thumbnail($post_id) ? get_the_post_thumbnail_url($post_id, 'large') : '';
    $site_name = get_bloginfo('name');
    $author = get_the_author_meta('display_name', get_post_field('post_author', $post_id));
    $published = get_the_date('c', $post_id);
    $modified = get_the_modified_date('c', $post_id);
    $logo = '';
    if (function_exists('has_custom_logo') && has_custom_logo()) {
      $logo_id = get_theme_mod('custom_logo');
      $logo = $logo_id ? wp_get_attachment_image_url($logo_id, 'full') : '';
    }
  ?>
    <meta property="og:type" content="article">
    <meta property="og:title" content="<?php echo esc_attr($title); ?>">
    <meta property="og:description" content="<?php echo esc_attr($description); ?>">
    <meta property="og:url" content="<?php echo esc_url($url); ?>">
    <meta property="og:site_name" content="<?php echo esc_attr($site_name); ?>">
    <?php if ($image) : ?>
      <meta property="og:image" content="<?php echo esc_url($image); ?>">
    <?php endif; ?>
    <meta name="twitter:card" content="<?php echo $image ? 'summary_large_image' : 'summary'; ?>">
    <meta name="twitter:title" content="<?php echo esc_attr($title); ?>">
    <meta name="twitter:description" content="<?php echo esc_attr($description); ?>">
    <?php if ($image) : ?>
      <meta name="twitter:image" content="<?php echo esc_url($image); ?>">
    <?php endif; ?>
    <?php
    $schema = [
      '@context' => 'https://schema.org',
      '@type' => 'Article',
      'headline' => $title,
      'description' => $description,
      'mainEntityOfPage' => [
        '@type' => 'WebPage',
        '@id' => $url,
      ],
      'datePublished' => $published,
      'dateModified' => $modified,
      'author' => [
        '@type' => 'Person',
        'name' => $author,
      ],
      'publisher' => [
        '@type' => 'Organization',
        'name' => $site_name,
      ],
    ];
    if ($image) {
      $schema['image'] = [$image];
    }
    if ($logo) {
      $schema['publisher']['logo'] = [
        '@type' => 'ImageObject',
        'url' => $logo,
      ];
    }
    ?>
    <script type="application/ld+json"><?php echo wp_json_encode($schema); ?></script>
  <?php } ?>
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <?php
  $topbar_enabled = get_theme_mod('fjord_topbar_enabled', 1);
  $topbar_messages_raw = get_theme_mod('fjord_topbar_messages', 'Save 20% on your first order');
  $topbar_messages = array_filter(array_map('trim', explode('|', $topbar_messages_raw)));
  ?>
  <?php if ($topbar_enabled && is_front_page() && !empty($topbar_messages)) : ?>
    <div class="fjord-topbar" aria-label="Promoción">
      <div class="fjord-topbar__inner">
        <div class="fjord-topbar__marquee">
          <?php foreach ([false, true] as $is_hidden) : ?>
            <div class="fjord-topbar__track"<?php echo $is_hidden ? ' aria-hidden="true"' : ''; ?>>
              <?php foreach ($topbar_messages as $index => $message) : ?>
                <?php if ($index > 0) : ?>
                  <span class="fjord-topbar__sep">-</span>
                <?php endif; ?>
                <span><?php echo esc_html($message); ?></span>
              <?php endforeach; ?>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  <?php endif; ?>
  <?php
  $header_logo_setting = get_theme_mod('fjord_header_logo_image');
  $header_logo_url = '';
  if ($header_logo_setting) {
    if (is_numeric($header_logo_setting)) {
      $header_logo_url = wp_get_attachment_image_url((int) $header_logo_setting, 'full');
    } else {
      $header_logo_url = esc_url_raw($header_logo_setting);
    }
  }
  $header_menu_id = get_theme_mod('fjord_header_menu');
  $cart_label = get_theme_mod('fjord_cart_label', 'Cart');
  $search_enabled = get_theme_mod('fjord_header_search_enabled', 1);
  $search_placeholder = get_theme_mod('fjord_header_search_placeholder', 'Search...');
  $header_logo_width = (int) get_theme_mod('fjord_header_logo_width', 90);
  $header_logo_style = $header_logo_width > 0
    ? ' style="width: ' . esc_attr($header_logo_width) . 'px;"'
    : '';
  ?>
  <?php $header_bg = get_theme_mod('fjord_header_background_color', '#ffffff'); ?>
  <header class="fjord-header" style="background: <?php echo esc_attr($header_bg); ?>">
    <div class="fjord-header__inner">
      <a class="fjord-logo" href="<?php echo esc_url(home_url('/')); ?>">
        <?php if ($header_logo_url) : ?>
          <img src="<?php echo esc_url($header_logo_url); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?> logo" class="fjord-logo__image"<?php echo $header_logo_style; ?>>
        <?php else : ?>
          <span class="fjord-logo__mark" aria-hidden="true"></span>
          <span class="fjord-logo__text">
            <span class="fjord-logo__name">Estudio Páchel</span>
          </span>
        <?php endif; ?>
      </a>
      <nav class="fjord-nav" aria-label="Navegación principal">
        <?php
        $nav_args = [
          'container' => false,
          'items_wrap' => '<ul class="fjord-nav__list">%3$s</ul>',
          'fallback_cb' => false,
        ];
        if ($header_menu_id) {
          $nav_args['menu'] = $header_menu_id;
        } else {
          $nav_args['theme_location'] = 'primary';
        }
        wp_nav_menu($nav_args);
        ?>
      </nav>
      <div class="fjord-actions">
        <button class="fjord-menu" type="button" data-mobile-menu-open>Menu</button>
        <?php if ($search_enabled) : ?>
          <button class="fjord-icon-button fjord-search-trigger" type="button" data-search-modal-open aria-label="Buscar">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle>
              <path d="M16.5 16.5L21 21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
            </svg>
          </button>
        <?php endif; ?>
        <a class="fjord-icon-button" href="<?php echo esc_url(function_exists('wc_get_page_permalink') ? wc_get_page_permalink('myaccount') : '#'); ?>" aria-label="Mi cuenta">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"></circle>
            <path d="M4 20c2.5-4 13.5-4 16 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
          </svg>
        </a>
        <?php
        $fjord_cart_count = function_exists('WC') && WC()->cart ? WC()->cart->get_cart_contents_count() : 0;
        ?>
        <a class="fjord-cart" href="<?php echo esc_url(function_exists('wc_get_cart_url') ? wc_get_cart_url() : '#'); ?>" data-cart-drawer-open>
          <span><?php echo esc_html($cart_label); ?></span>
          <span class="fjord-cart__count" data-cart-count>(<?php echo esc_html($fjord_cart_count); ?>)</span>
        </a>
      </div>
    </div>
  </header>

  <div class="fjord-mobile-menu" data-mobile-menu aria-hidden="true">
    <div class="fjord-mobile-menu__overlay" data-mobile-menu-close></div>
    <div class="fjord-mobile-menu__panel" role="dialog" aria-modal="true" aria-label="Menú">
      <div class="fjord-mobile-menu__top">
        <span class="fjord-mobile-menu__title">Menu</span>
        <button class="fjord-mobile-menu__close" type="button" data-mobile-menu-close aria-label="Cerrar menú">Close</button>
      </div>
      <nav class="fjord-mobile-menu__nav" aria-label="Navegación móvil">
        <?php
        $mobile_menu_id = get_theme_mod('fjord_mobile_menu');
        $mobile_nav_args = [
          'container' => false,
          'depth' => 1,
          'items_wrap' => '<ul class="fjord-mobile-menu__list">%3$s</ul>',
          'fallback_cb' => false,
        ];
        if ($mobile_menu_id) {
          $mobile_nav_args['menu'] = $mobile_menu_id;
        } elseif ($header_menu_id) {
          $mobile_nav_args['menu'] = $header_menu_id;
        } else {
          $mobile_nav_args['theme_location'] = 'primary';
        }
        wp_nav_menu($mobile_nav_args);
        ?>
      </nav>
      <?php
      $fjord_menu_categories = [];
      $fjord_uncategorized_id = 0;
      if (function_exists('get_terms')) {
        $uncategorized = get_term_by('slug', 'uncategorized', 'product_cat');
        $fjord_uncategorized_id = $uncategorized ? (int) $uncategorized->term_id : 0;
        if (function_exists('wc_get_default_product_cat')) {
          $default_cat = (int) wc_get_default_product_cat();
          if ($default_cat) {
            $fjord_uncategorized_id = $fjord_uncategorized_id ? $fjord_uncategorized_id : $default_cat;
          }
        }
        $fjord_menu_categories = get_terms([
          'taxonomy' => 'product_cat',
          'hide_empty' => true,
          'parent' => 0,
          'exclude' => $fjord_uncategorized_id ? [$fjord_uncategorized_id] : [],
        ]);
      }
      ?>
      <?php if (!empty($fjord_menu_categories) && !is_wp_error($fjord_menu_categories)) : ?>
        <?php
        $fjord_menu_categories = array_values(array_filter(
          $fjord_menu_categories,
          static function ($category) use ($fjord_uncategorized_id) {
            $name = function_exists('mb_strtolower') ? mb_strtolower($category->name, 'UTF-8') : strtolower($category->name);
            return (int) $category->term_id !== (int) $fjord_uncategorized_id
              && $category->slug !== 'uncategorized'
              && $name !== 'sin categorizar';
          }
        ));
        ?>
        <span class="fjord-mobile-menu__section-title">Categorías</span>
        <div class="fjord-mobile-menu__tiles">
          <?php foreach ($fjord_menu_categories as $category) : ?>
            <?php
            $thumbnail_id = function_exists('get_term_meta') ? get_term_meta($category->term_id, 'thumbnail_id', true) : 0;
            $image_url = $thumbnail_id ? wp_get_attachment_image_url($thumbnail_id, 'thumbnail') : '';
            ?>
            <a class="fjord-mobile-menu__tile" href="<?php echo esc_url(get_term_link($category)); ?>">
              <span class="fjord-mobile-menu__tile-thumb" style="<?php echo $image_url ? 'background-image: url(' . esc_url($image_url) . ');' : ''; ?>"></span>
              <span class="fjord-mobile-menu__tile-label"><?php echo esc_html($category->name); ?></span>
              <span class="fjord-mobile-menu__tile-arrow" aria-hidden="true">→</span>
            </a>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
    </div>
  </div>

  <div class="fjord-search-modal" data-search-modal aria-hidden="true">
    <div class="fjord-search-modal__overlay" data-search-modal-close></div>
    <div class="fjord-search-modal__panel" role="dialog" aria-modal="true" aria-label="Buscar">
      <form class="fjord-search-modal__form" role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
        <span class="fjord-search-modal__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" focusable="false">
            <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"></circle>
            <path d="M16.5 16.5L21 21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
          </svg>
        </span>
        <input class="fjord-search-modal__input" type="search" name="s" placeholder="<?php echo esc_attr($search_placeholder ?: 'Search...'); ?>" aria-label="Buscar productos">
        <input type="hidden" name="post_type" value="product">
      </form>
    </div>
  </div>
