{% comment %}
  Yu-zriha Custom Homepage Section
  Designed for Shopify OS 2.0 themes
{% endcomment %}

<section
  id="yu-zriha-{{ section.id }}"
  class="yz-homepage"
>
  <div class="yz-stars"></div>

  <!-- HERO SECTION -->
  <section class="yz-hero">
    <div class="yz-hero-media">
      {% if section.settings.hero_image != blank %}
        {{
          section.settings.hero_image
          | image_url: width: 2400
          | image_tag:
            loading: 'eager',
            widths: '750, 1100, 1500, 2000, 2400',
            class: 'yz-hero-image'
        }}
      {% else %}
        {{ 'lifestyle-1' | placeholder_svg_tag: 'yz-placeholder' }}
      {% endif %}

      <div class="yz-container yz-hero-copy">
        {% if section.settings.hero_eyebrow != blank %}
          <span class="yz-eyebrow">{{ section.settings.hero_eyebrow }}</span>
        {% endif %}

        <h1>{{ section.settings.hero_heading }}</h1>

        {% if section.settings.hero_text != blank %}
          <div class="yz-hero-text">{{ section.settings.hero_text }}</div>
        {% endif %}

        <div class="yz-btn-row">
          {% if section.settings.hero_button_label != blank %}
            <a
              href="{{ section.settings.hero_button_link }}"
              class="yz-btn yz-btn-gold"
            >
              {{ section.settings.hero_button_label }}
            </a>
          {% endif %}

          {% if section.settings.hero_button_2_label != blank %}
            <a
              href="{{ section.settings.hero_button_2_link }}"
              class="yz-btn yz-btn-outline"
            >
              {{ section.settings.hero_button_2_label }}
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </section>

  <!-- ANNOUNCEMENT STRIP -->
  {% if section.settings.marquee_text != blank %}
    <div class="yz-marquee">
      <div class="yz-marquee-track">
        {% for i in (1..4) %}
          <span>✦ {{ section.settings.marquee_text }}</span>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  <!-- CATEGORY BLOCKS -->
  {% if section.blocks.size > 0 %}
    <section class="yz-categories">
      {% for block in section.blocks %}
        {% if block.type == 'category' %}
          <a
            href="{{ block.settings.link }}"
            class="yz-category-card"
            {{ block.shopify_attributes }}
          >
            {% if block.settings.icon != blank %}
              {{
                block.settings.icon
                | image_url: width: 120
                | image_tag: loading: 'lazy'
              }}
            {% endif %}

            <h3>{{ block.settings.title }}</h3>
            <p>{{ block.settings.text }}</p>
          </a>
        {% endif %}
      {% endfor %}
    </section>
  {% endif %}

  <!-- FEATURED COLLECTION -->
  {% if section.settings.collection != blank %}
    {% assign featured_collection = section.settings.collection %}

    <section class="yz-products">
      <div class="yz-container">
        <div class="yz-section-heading">
          <div>
            {% if section.settings.collection_eyebrow != blank %}
              <span class="yz-eyebrow">
                {{ section.settings.collection_eyebrow }}
              </span>
            {% endif %}

            <h2>{{ section.settings.collection_heading }}</h2>
          </div>

          {% if section.settings.collection_text != blank %}
            <div class="yz-section-description">
              {{ section.settings.collection_text }}
            </div>
          {% endif %}
        </div>

        <div class="yz-product-grid">
          {% for product in featured_collection.products limit: section.settings.products_to_show %}
            <article class="yz-product-card">
              <a href="{{ product.url }}" class="yz-product-image">
                {% if product.featured_image != blank %}
                  {{
                    product.featured_image
                    | image_url: width: 900
                    | image_tag:
                      loading: 'lazy',
                      widths: '400, 600, 900'
                  }}
                {% else %}
                  {{ 'product-1' | placeholder_svg_tag }}
                {% endif %}

                {% if product.compare_at_price > product.price %}
                  <span class="yz-tag">Sale</span>
                {% endif %}
              </a>

              <div class="yz-product-info">
                {% if product.vendor != blank %}
                  <span class="yz-product-vendor">
                    {{ product.vendor }}
                  </span>
                {% endif %}

                <h3>
                  <a href="{{ product.url }}">
                    {{ product.title }}
                  </a>
                </h3>

                <div class="yz-price">
                  {% if product.compare_at_price > product.price %}
                    <s>{{ product.compare_at_price | money }}</s>
                  {% endif %}
                  {{ product.price | money }}
                </div>

                <form method="post" action="/cart/add">
                  <input
                    type="hidden"
                    name="id"
                    value="{{ product.selected_or_first_available_variant.id }}"
                  >

                  <button
                    type="submit"
                    class="yz-add-btn"
                    {% unless product.available %}disabled{% endunless %}
                  >
                    {% if product.available %}
                      Add to cart
                    {% else %}
                      Sold out
                    {% endif %}
                  </button>
                </form>
              </div>
            </article>
          {% endfor %}
        </div>

        {% if section.settings.collection_button_label != blank %}
          <div class="yz-center">
            <a
              href="{{ featured_collection.url }}"
              class="yz-btn yz-btn-outline"
            >
              {{ section.settings.collection_button_label }}
            </a>
          </div>
        {% endif %}
      </div>
    </section>
  {% endif %}

  <!-- IMAGE BANNER -->
  {% if section.settings.banner_image != blank %}
    <section class="yz-image-banner">
      {{
        section.settings.banner_image
        | image_url: width: 2400
        | image_tag: loading: 'lazy'
      }}

      <div class="yz-banner-overlay">
        <div class="yz-container">
          {% if section.settings.banner_eyebrow != blank %}
            <span class="yz-eyebrow">
              {{ section.settings.banner_eyebrow }}
            </span>
          {% endif %}

          <h2>{{ section.settings.banner_heading }}</h2>

          {% if section.settings.banner_button_label != blank %}
            <a
              href="{{ section.settings.banner_button_link }}"
              class="yz-btn yz-btn-gold"
            >
              {{ section.settings.banner_button_label }}
            </a>
          {% endif %}
        </div>
      </div>
    </section>
  {% endif %}

  <!-- TRUST POINTS -->
  <section class="yz-trust">
    <div class="yz-trust-item">
      <h3>{{ section.settings.trust_1_title }}</h3>
      <p>{{ section.settings.trust_1_text }}</p>
    </div>

    <div class="yz-trust-item">
      <h3>{{ section.settings.trust_2_title }}</h3>
      <p>{{ section.settings.trust_2_text }}</p>
    </div>

    <div class="yz-trust-item">
      <h3>{{ section.settings.trust_3_title }}</h3>
      <p>{{ section.settings.trust_3_text }}</p>
    </div>

    <div class="yz-trust-item">
      <h3>{{ section.settings.trust_4_title }}</h3>
      <p>{{ section.settings.trust_4_text }}</p>
    </div>
  </section>

  <!-- TESTIMONIAL -->
  {% if section.settings.quote != blank %}
    <section class="yz-testimonial">
      <div class="yz-container">
        <div class="yz-stars-rating">★★★★★</div>

        <blockquote>
          “{{ section.settings.quote }}”
        </blockquote>

        {% if section.settings.quote_author != blank %}
          <cite>— {{ section.settings.quote_author }}</cite>
        {% endif %}
      </div>
    </section>
  {% endif %}
</section>

<style>
  #yu-zriha-{{ section.id }} {
    --yz-ink: #182452;
    --yz-ink-2: #20306B;
    --yz-panel: #263B7D;
    --yz-panel-2: #2C4189;
    --yz-gold: #C9A227;
    --yz-gold-light: #E9CD7E;
    --yz-cream: #F4EFE2;
    --yz-muted: #9AA3D1;
    --yz-line: rgba(226,193,110,.18);

    background: var(--yz-ink);
    color: var(--yz-cream);
    overflow: hidden;
    position: relative;
  }

  #yu-zriha-{{ section.id }} * {
    box-sizing: border-box;
  }

  #yu-zriha-{{ section.id }} .yz-container {
    width: min(1240px, calc(100% - 64px));
    margin: auto;
  }

  #yu-zriha-{{ section.id }} .yz-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .25;
    background-image:
      radial-gradient(circle at 10% 20%, #fff 1px, transparent 1px),
      radial-gradient(circle at 80% 10%, #fff 1px, transparent 1px),
      radial-gradient(circle at 60% 70%, #fff 1px, transparent 1px);
    background-size: 300px 300px;
  }

  /* HERO */
  #yu-zriha-{{ section.id }} .yz-hero-media {
    height: min(78vh, 760px);
    min-height: 560px;
    position: relative;
    display: flex;
    align-items: center;
  }

  #yu-zriha-{{ section.id }} .yz-hero-image,
  #yu-zriha-{{ section.id }} .yz-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #yu-zriha-{{ section.id }} .yz-hero-media:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(24,36,82,.94), rgba(24,36,82,.55), transparent),
      linear-gradient(0deg, rgba(24,36,82,.65), transparent 50%);
  }

  #yu-zriha-{{ section.id }} .yz-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 1240px;
  }

  #yu-zriha-{{ section.id }} .yz-hero-copy > * {
    max-width: 620px;
  }

  #yu-zriha-{{ section.id }} .yz-eyebrow {
    color: var(--yz-gold-light);
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 18px;
  }

  #yu-zriha-{{ section.id }} h1,
  #yu-zriha-{{ section.id }} h2,
  #yu-zriha-{{ section.id }} h3 {
    color: var(--yz-cream);
    line-height: 1.1;
  }

  #yu-zriha-{{ section.id }} .yz-hero h1 {
    font-size: clamp(48px, 6vw, 76px);
    margin: 0;
  }

  #yu-zriha-{{ section.id }} .yz-hero-text {
    color: var(--yz-muted);
    font-size: 17px;
    line-height: 1.7;
    margin: 20px 0 32px;
  }

  /* BUTTONS */
  #yu-zriha-{{ section.id }} .yz-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  #yu-zriha-{{ section.id }} .yz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s ease;
  }

  #yu-zriha-{{ section.id }} .yz-btn-gold {
    background: var(--yz-gold);
    color: #181204;
    border: 1px solid var(--yz-gold);
  }

  #yu-zriha-{{ section.id }} .yz-btn-outline {
    border: 1px solid var(--yz-gold-light);
    color: var(--yz-cream);
    background: transparent;
  }

  /* MARQUEE */
  #yu-zriha-{{ section.id }} .yz-marquee {
    overflow: hidden;
    white-space: nowrap;
    border-block: 1px solid var(--yz-line);
    background: var(--yz-panel);
    padding: 14px 0;
  }

  #yu-zriha-{{ section.id }} .yz-marquee-track {
    display: inline-block;
    animation: yz-scroll 30s linear infinite;
  }

  #yu-zriha-{{ section.id }} .yz-marquee-track span {
    margin-right: 50px;
    color: var(--yz-gold-light);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  @keyframes yz-scroll {
    to { transform: translateX(-25%); }
  }

  /* CATEGORIES */
  #yu-zriha-{{ section.id }} .yz-categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--yz-line);
  }

  #yu-zriha-{{ section.id }} .yz-category-card {
    padding: 35px 20px;
    text-align: center;
    text-decoration: none;
    background: var(--yz-ink-2);
    border-right: 1px solid var(--yz-line);
  }

  #yu-zriha-{{ section.id }} .yz-category-card img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin: 0 auto 15px;
  }

  #yu-zriha-{{ section.id }} .yz-category-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
  }

  #yu-zriha-{{ section.id }} .yz-category-card p {
    margin: 0;
    color: var(--yz-muted);
    font-size: 13px;
  }

  /* PRODUCTS */
  #yu-zriha-{{ section.id }} .yz-products {
    padding: 100px 0;
    position: relative;
  }

  #yu-zriha-{{ section.id }} .yz-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 45px;
  }

  #yu-zriha-{{ section.id }} .yz-section-heading h2 {
    font-size: clamp(34px, 4vw, 52px);
    margin: 0;
  }

  #yu-zriha-{{ section.id }} .yz-section-description {
    max-width: 380px;
    color: var(--yz-muted);
    line-height: 1.6;
  }

  #yu-zriha-{{ section.id }} .yz-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
  }

  #yu-zriha-{{ section.id }} .yz-product-card {
    background: var(--yz-panel);
    border: 1px solid var(--yz-line);
  }

  #yu-zriha-{{ section.id }} .yz-product-image {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  #yu-zriha-{{ section.id }} .yz-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
  }

  #yu-zriha-{{ section.id }} .yz-product-card:hover .yz-product-image img {
    transform: scale(1.05);
  }

  #yu-zriha-{{ section.id }} .yz-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 10px;
    background: var(--yz-ink);
    border: 1px solid var(--yz-line);
    color: var(--yz-gold-light);
    font-size: 10px;
    text-transform: uppercase;
  }

  #yu-zriha-{{ section.id }} .yz-product-info {
    padding: 20px;
  }

  #yu-zriha-{{ section.id }} .yz-product-vendor {
    color: var(--yz-muted);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  #yu-zriha-{{ section.id }} .yz-product-info h3 {
    margin: 8px 0;
    font-size: 21px;
  }

  #yu-zriha-{{ section.id }} .yz-product-info h3 a {
    color: inherit;
    text-decoration: none;
  }

  #yu-zriha-{{ section.id }} .yz-price {
    color: var(--yz-gold-light);
    font-size: 18px;
    margin: 14px 0;
  }

  #yu-zriha-{{ section.id }} .yz-price s {
    color: var(--yz-muted);
    margin-right: 8px;
    font-size: 13px;
  }

  #yu-zriha-{{ section.id }} .yz-add-btn {
    width: 100%;
    padding: 13px;
    border: 1px solid var(--yz-gold);
    background: transparent;
    color: var(--yz-cream);
    cursor: pointer;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .12em;
  }

  #yu-zriha-{{ section.id }} .yz-center {
    text-align: center;
    margin-top: 40px;
  }

  /* IMAGE BANNER */
  #yu-zriha-{{ section.id }} .yz-image-banner {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
  }

  #yu-zriha-{{ section.id }} .yz-image-banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.55);
  }

  #yu-zriha-{{ section.id }} .yz-banner-overlay {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  #yu-zriha-{{ section.id }} .yz-banner-overlay h2 {
    font-size: clamp(36px, 5vw, 62px);
    max-width: 800px;
    margin: 15px auto 30px;
  }

  /* TRUST */
  #yu-zriha-{{ section.id }} .yz-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid var(--yz-line);
  }

  #yu-zriha-{{ section.id }} .yz-trust-item {
    padding: 32px 20px;
    text-align: center;
    background: var(--yz-ink-2);
    border-right: 1px solid var(--yz-line);
  }

  #yu-zriha-{{ section.id }} .yz-trust-item h3 {
    color: var(--yz-gold-light);
    margin: 0 0 8px;
    font-size: 19px;
  }

  #yu-zriha-{{ section.id }} .yz-trust-item p {
    color: var(--yz-muted);
    font-size: 12px;
    margin: 0;
  }

  /* TESTIMONIAL */
  #yu-zriha-{{ section.id }} .yz-testimonial {
    padding: 100px 0;
    text-align: center;
  }

  #yu-zriha-{{ section.id }} .yz-testimonial .yz-container {
    max-width: 800px;
  }

  #yu-zriha-{{ section.id }} .yz-stars-rating {
    color: var(--yz-gold-light);
    letter-spacing: 6px;
    margin-bottom: 25px;
  }

  #yu-zriha-{{ section.id }} blockquote {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.5;
    margin: 0 0 25px;
  }

  #yu-zriha-{{ section.id }} cite {
    color: var(--yz-muted);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  @media screen and (max-width: 990px) {
    #yu-zriha-{{ section.id }} .yz-product-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    #yu-zriha-{{ section.id }} .yz-categories,
    #yu-zriha-{{ section.id }} .yz-trust {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 749px) {
    #yu-zriha-{{ section.id }} .yz-container {
      width: calc(100% - 36px);
    }

    #yu-zriha-{{ section.id }} .yz-hero-media {
      min-height: 600px;
    }

    #yu-zriha-{{ section.id }} .yz-section-heading {
      display: block;
    }

    #yu-zriha-{{ section.id }} .yz-section-description {
      margin-top: 15px;
    }

    #yu-zriha-{{ section.id }} .yz-products {
      padding: 70px 0;
    }
  }
</style>

{% schema %}
{
  "name": "Yu-zriha Homepage",
  "settings": [
    {
      "type": "header",
      "content": "Hero section"
    },
    {
      "type": "image_picker",
      "id": "hero_image",
      "label": "Hero image"
    },
    {
      "type": "text",
      "id": "hero_eyebrow",
      "label": "Small heading",
      "default": "The Nightwatch Collection"
    },
    {
      "type": "text",
      "id": "hero_heading",
      "label": "Main heading",
      "default": "Sleep better, anywhere."
    },
    {
      "type": "textarea",
      "id": "hero_text",
      "label": "Description",
      "default": "Softly-lit, quietly clever objects for the hours between dusk and dawn."
    },
    {
      "type": "text",
      "id": "hero_button_label",
      "label": "Primary button",
      "default": "Shop collection"
    },
    {
      "type": "url",
      "id": "hero_button_link",
      "label": "Primary button link"
    },
    {
      "type": "text",
      "id": "hero_button_2_label",
      "label": "Secondary button",
      "default": "Discover more"
    },
    {
      "type": "url",
      "id": "hero_button_2_link",
      "label": "Secondary button link"
    },
    {
      "type": "text",
      "id": "marquee_text",
      "label": "Scrolling announcement",
      "default": "Sleep better. Live softer. Stay awhile."
    },
    {
      "type": "header",
      "content": "Featured products"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Choose collection"
    },
    {
      "type": "text",
      "id": "collection_eyebrow",
      "label": "Small heading",
      "default": "Curated for the night"
    },
    {
      "type": "text",
      "id": "collection_heading",
      "label": "Collection heading",
      "default": "Quietly clever essentials"
    },
    {
      "type": "textarea",
      "id": "collection_text",
      "label": "Collection description"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "label": "Products to show",
      "min": 2,
      "max": 8,
      "step": 1,
      "default": 4
    },
    {
      "type": "text",
      "id": "collection_button_label",
      "label": "View collection button",
      "default": "View all"
    },
    {
      "type": "header",
      "content": "Image banner"
    },
    {
      "type": "image_picker",
      "id": "banner_image",
      "label": "Banner image"
    },
    {
      "type": "text",
      "id": "banner_eyebrow",
      "label": "Small heading"
    },
    {
      "type": "text",
      "id": "banner_heading",
      "label": "Banner heading"
    },
    {
      "type": "text",
      "id": "banner_button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "banner_button_link",
      "label": "Button link"
    },
    {
      "type": "header",
      "content": "Trust points"
    },
    {
      "type": "text",
      "id": "trust_1_title",
      "label": "Trust point 1 title",
      "default": "Thoughtfully Made"
    },
    {
      "type": "text",
      "id": "trust_1_text",
      "label": "Trust point 1 text",
      "default": "Designed for everyday comfort"
    },
    {
      "type": "text",
      "id": "trust_2_title",
      "label": "Trust point 2 title",
      "default": "Secure Checkout"
    },
    {
      "type": "text",
      "id": "trust_2_text",
      "label": "Trust point 2 text",
      "default": "Safe and secure payments"
    },
    {
      "type": "text",
      "id": "trust_3_title",
      "label": "Trust point 3 title",
      "default": "Easy Returns"
    },
    {
      "type": "text",
      "id": "trust_3_text",
      "label": "Trust point 3 text",
      "default": "Shop with confidence"
    },
    {
      "type": "text",
      "id": "trust_4_title",
      "label": "Trust point 4 title",
      "default": "Made for You"
    },
    {
      "type": "text",
      "id": "trust_4_text",
      "label": "Trust point 4 text",
      "default": "Small comforts, every day"
    },
    {
      "type": "header",
      "content": "Testimonial"
    },
    {
      "type": "textarea",
      "id": "quote",
      "label": "Customer quote"
    },
    {
      "type": "text",
      "id": "quote_author",
      "label": "Customer name"
    }
  ],
  "blocks": [
    {
      "type": "category",
      "name": "Category",
      "limit": 4,
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Category icon"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Category name",
          "default": "Category"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Description",
          "default": "Explore the collection"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Category link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Yu-zriha Homepage",
      "blocks": [
        { "type": "category" },
        { "type": "category" },
        { "type": "category" },
        { "type": "category" }
      ]
    }
  ]
}
{% endschema %}