<div class="shopify-section-landscape" style="background-color: {{ section.settings.primary_bg }};">
  
  <!-- WIDESCREEN HERO GRID -->
  <header class="hero-landscape-grid">
    <div class="hero-left-card">
      <span class="sub-tag-line">{{ section.settings.hero_subtag }}</span>
      <h1 class="hero-main-title">{{ section.settings.hero_heading }}</h1>
      <p class="hero-copy-text">{{ section.settings.hero_text }}</p>
      <a href="{{ section.settings.hero_link }}" class="cta-outline-btn">{{ section.settings.hero_button_label }} &rarr;</a>
    </div>
    <div class="hero-right-media" style="background-image: url('{{ section.settings.hero_bg_image | image_url: width: 1400 }}');">
      {% if section.settings.hero_bg_image == blank %}
        {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg-landscape' }}
      {% endif %}
    </div>
  </header>

  <!-- QUICK DECK FILTER CONTROLS -->
  <section class="horizontal-nav-bar">
    <div class="nav-bar-label">{{ section.settings.filter_heading }}</div>
    <div class="nav-nodes">
      <div class="nav-node" data-filter="all"><div class="node-bullet"></div>All Vehicles</div>
      <div class="nav-node" data-filter="utes"><div class="node-bullet"></div>Utes</div>
      <div class="nav-node" data-filter="4wd"><div class="node-bullet"></div>4WD & Off-Road</div>
      <div class="nav-node" data-filter="suvs"><div class="node-bullet"></div>SUVs</div>
      <div class="nav-node" data-filter="vans"><div class="node-bullet"></div>Vans & Touring</div>
    </div>
  </section>

  <!-- PORTFOLIO MATRIX -->
  <main class="portfolio-matrix" style="background-color: {{ section.settings.grid_bg }};">
    <div class="asymmetric-stream">

      <!-- FIXED BUILD 1: TOYOTA HILUX (UTES) -->
      <div class="stream-card" data-category="utes">
        <div class="stream-image-container">
          <img src="{{ 'image_ZQ3Cvf.png' | asset_url }}" alt="Toyota Hilux Custom Dual Cab Setup" loading="lazy">
        </div>
        <div class="stream-card-body">
          <span class="card-meta">Build 1A • image_ZQ3Cvf.png</span>
          <h2 class="stream-headline">Toyota Hilux Dual Cab</h2>
          <p class="stream-paragraph">Overland cab roof platform system combined with mid-height tub-mount crossbars for active gear configurations.</p>
          <a href="#" class="stream-link-anchor">EXPLORE UTE RACKS &rarr;</a>
        </div>
      </div>

      <!-- FIXED BUILD 2: TOYOTA LAND CRUISER 60 (4WD) -->
      <div class="stream-card" data-category="4wd">
        <div class="stream-image-container">
          <img src="{{ 'image_wQoc3M.png' | asset_url }}" alt="Toyota Land Cruiser 60 Overland Build" loading="lazy">
        </div>
        <div class="stream-card-body">
          <span class="card-meta">Build 1B • image_wQoc3M.png</span>
          <h2 class="stream-headline">Toyota Land Cruiser 60</h2>
          <p class="stream-paragraph">Heavy-duty full-length gutter-mount roof tray engineered to support extreme fuel capacities and storage vaults.</p>
          <a href="#" class="stream-link-anchor">EXPLORE 4WD RACKS &rarr;</a>
        </div>
      </div>

      <!-- FIXED BUILD 3: JEEP WRANGLER JL (SUVS) -->
      <div class="stream-card" data-category="suvs">
        <div class="stream-image-container">
          <img src="{{ 'image_nJNzGH.png' | asset_url }}" alt="Jeep Wrangler JL Platform Setup" loading="lazy">
        </div>
        <div class="stream-card-body">
          <span class="card-meta">Build 1C • image_nJNzGH.png</span>
          <h2 class="stream-headline">Jeep Wrangler JL</h2>
          <p class="stream-paragraph">Low-profile platform integrated directly to factory composite hardtop tracking brackets for structural weight distribution.</p>
          <a href="#" class="stream-link-anchor">EXPLORE SUV RACKS &rarr;</a>
        </div>
      </div>

      <!-- DYNAMIC BLOCKS FOR ADDITIONAL IMAGES VIA THEME CUSTOMIZER -->
      {% for block in section.blocks %}
        <div class="stream-card" data-category="{{ block.settings.category_tag }}" {{ block.shopify_attributes }}>
          <div class="stream-image-container">
            {% if block.settings.item_image != blank %}
              <img src="{{ block.settings.item_image | image_url: width: 900 }}" alt="{{ block.settings.card_title | escape }}" loading="lazy">
            {% else %}
              {{ 'image' | placeholder_svg_tag: 'stream-placeholder' }}
            {% endif %}
          </div>
          <div class="stream-card-body">
            <span class="card-meta">{{ block.settings.block_filename }}</span>
            <h2 class="stream-headline">{{ block.settings.card_title }}</h2>
            <p class="stream-paragraph">{{ block.settings.card_description }}</p>
            <a href="{{ block.settings.card_link_url }}" class="stream-link-anchor">{{ block.settings.card_link_text }} &rarr;</a>
          </div>
        </div>
      {% endfor %}

    </div>
  </main>

</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const filterNodes = document.querySelectorAll('.nav-node');
    const streamCards = document.querySelectorAll('.stream-card');

    filterNodes.forEach(node => {
      node.addEventListener('click', function() {
        const filterValue = this.getAttribute('data-filter');
        
        filterNodes.forEach(n => n.style.color = '#b0a7a2');
        this.style.color = '#ffffff';

        streamCards.forEach(card => {
          if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) {
            card.style.display = 'flex';
          } else {
            card.style.display = 'none';
          }
        });
      });
    });
  });
</script>

{% schema %}
{
  "name": "Feldon Landscape Master",
  "settings": [
    {
      "type": "color",
      "id": "primary_bg",
      "label": "Hero/Header Background",
      "default": "#1b1613"
    },
    {
      "type": "color",
      "id": "grid_bg",
      "label": "Gallery Base Background",
      "default": "#e4dec3"
    },
    {
      "type": "text",
      "id": "hero_subtag",
      "label": "Hero Subtitle",
      "default": "ROOF RACKS"
    },
    {
      "type": "text",
      "id": "hero_heading",
      "label": "Hero Heading",
      "default": "BUILT FOR REAL ADVENTURES"
    },
    {
      "type": "textarea",
      "id": "hero_text",
      "label": "Hero Paragraph Copy",
      "default": "Rugged, reliable roof rack systems for 4WDs, utes, SUVs and touring vehicles. Carry more gear, go further and make the most of New Zealand's outdoors."
    },
    {
      "type": "text",
      "id": "hero_button_label",
      "label": "Hero Button Text",
      "default": "EXPLORE ROOF RACKS"
    },
    {
      "type": "url",
      "id": "hero_link",
      "label": "Hero Action Destination"
    },
    {
      "type": "image_picker",
      "id": "hero_bg_image",
      "label": "Hero Landscape Image"
    },
    {
      "type": "text",
      "id": "filter_heading",
      "label": "Filter Bar Text Label",
      "default": "FIND YOUR VEHICLE"
    }
  ],
  "blocks": [
    {
      "type": "gallery_item",
      "name": "Widescreen Grid Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "item_image",
          "label": "Card Display Photo"
        },
        {
          "type": "select",
          "id": "category_tag",
          "label": "Filter Grouping category",
          "options": [
            { "value": "utes", "label": "Utes" },
            { "value": "4wd", "label": "4WD & Off-Road" },
            { "value": "suvs", "label": "SUVs" },
            { "value": "vans", "label": "Vans & Touring" }
          ],
          "default": "4wd"
        },
        {
          "type": "text",
          "id": "card_title",
          "label": "Category Headline Title",
          "default": "4WD & OFF-ROAD"
        },
        {
          "type": "textarea",
          "id": "card_description",
          "label": "Category Short Subtext",
          "default": "Heavy-duty roof racks and storage systems for your next adventure."
        },
        {
          "type": "text",
          "id": "block_filename",
          "label": "Asset Filename Reference",
          "default": "image_filename.png"
        },
        {
          "type": "text",
          "id": "card_link_text",
          "label": "Action Text Link Label",
          "default": "EXPLORE RACKS"
        },
        {
          "type": "url",
          "id": "card_link_url",
          "label": "Card Redirection Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Feldon Landscape Master"
    }
  ]
}
{% endschema %}

<style>
  .hero-landscape-grid {
    display: grid;
    grid-template-columns: 43% 57%;
    min-height: 560px;
  }
  .hero-left-card {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .sub-tag-line {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 3px;
    color: #b0a7a2;
    margin-bottom: 15px;
  }
  .hero-main-title {
    color: #ffffff;
    font-size: 3.2rem;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0 0 25px 0;
    letter-spacing: 1px;
    font-weight: 800;
  }
  .hero-copy-text {
    color: #b0a7a2;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 40px 0;
    max-width: 480px;
  }
  .cta-outline-btn {
    align-self: flex-start;
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 14px 32px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .cta-outline-btn:hover {
    background-color: #ffffff;
    color: #1b1613;
  }
  .hero-right-media {
    background-size: cover;
    background-position: center;
    background-color: #15110f;
  }
  .horizontal-nav-bar {
    background-color: #27211e;