{%- style -%}
  #shopify-section-{{ section.id }} > div  {
    padding-block-start: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_top }});
    padding-block-end: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_bottom }});
  }
  #shopify-section-{{ section.id }} > div .section__heading {
    margin-block-end: calc(var(--section-spacing-unit-size) * 1.5);
  }
  #shopify-section-{{ section.id }} > div > div.gradient {
    padding: calc(var(--spacing-unit-size) * {{ section.settings.spacing_inner }});
    border-radius: var(--card-corner-radius);
  }
{%- endstyle -%}


{%- assign anchor_id = section.settings.custom_id | strip | handleize -%}

<div {% if anchor_id != blank %}id="{{ anchor_id }}"{% endif %}
  class="{% if section.settings.section_layout == 'boxed' %}container {{ section.settings.section_width }}{% else %}color-{{ section.settings.color_scheme }} gradient{% endif %}">
  <div class="{% if section.settings.section_layout == 'normal' %}container {{ section.settings.section_width }}{% else %}color-{{ section.settings.color_scheme }} gradient{% endif %}">
    <div class="seo-content js-animation-fade-in">


      {%- assign has_arrow = false -%}
      {%- if section.settings.button_style == 'arrow' and section.settings.button_link != blank -%}
        {%- assign has_arrow = true -%}
      {%- endif -%}

      {%- comment -%}
        Map theme button variants for the TEXT button via the snippet:
        Filled   => button--filled
        Outlined => button--outlined
        Text     => button--text
      {%- endcomment -%}
      {%- assign btn_style = 'button--filled' -%}
      {%- case section.settings.text_button_style -%}
        {%- when 'outlined' -%}{%- assign btn_style = 'button--outlined' -%}
        {%- when 'text' -%}{%- assign btn_style = 'button--text' -%}
      {%- endcase -%}

      <div class="text-{{ section.settings.content_alignment }}{% if has_arrow %} has-arrow{% endif %}">
        {%- if section.settings.heading != blank -%}
          <h2 class="section__heading {{ section.settings.heading_size }}">
            {{- section.settings.heading -}}
          </h2>
        {%- endif -%}

        <div class="rte">
          {{- section.settings.text -}}
        </div>

        {%- if section.settings.button_link != blank and section.settings.button_style == 'button with text' and section.settings.button_label != blank -%}
          <div class="section__button">
            {%- render 'button',
              type: 'link',
              href: section.settings.button_link,
              value: section.settings.button_label,
              class: 'button',
              button_style: btn_style
            -%}
          </div>
        {%- endif -%}

        {%- if has_arrow -%}
          <div class="tsr-cta-arrow">
            <a href="{{ section.settings.button_link }}"
               class="tsr-arrow"
               aria-label="{{ section.settings.button_label | default: 'Learn more' }}">
              <svg viewBox="0 0 32 32" class="tsr-arrow__icon" aria-hidden="true" focusable="false">
                <!-- Circle + arrow, strokes follow currentColor -->
                <circle cx="16" cy="16" r="13"
                        fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/>
                <polyline points="14,11.8 18.2,16 14,20.2"
                          fill="none" stroke="currentColor" stroke-width="2"
                          stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/>
              </svg>
            </a>
          </div>
        {%- endif -%}

      </div>
    </div>
  </div>
</div>

<style>
/* Arrow BESIDE the text (two-column layout only when arrow is enabled) */
#shopify-section-{{ section.id }} .seo-content .has-arrow{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto; /* text, then arrow */
  align-items: center;
  gap: 12px;
}

/* Arrow button container — no fill; color drives SVG strokes */
#shopify-section-{{ section.id }} .tsr-arrow{
  /* Use the scheme's CTA/bg token; fallback to foreground */
  --tsr-arrow-color: rgb(var(--color-button-background, var(--color-foreground)));
  color: var(--tsr-arrow-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  border-radius: 9999px;  /* circular hit area */
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

#shopify-section-{{ section.id }} .tsr-arrow__icon{
  width: 32px; height: 32px;
  display: block;
}

#shopify-section-{{ section.id }} .tsr-arrow:hover{ opacity: 0.9; }

@media (max-width: 640px){
  #shopify-section-{{ section.id }} .tsr-arrow{ width:44px; height:44px; }
  #shopify-section-{{ section.id }} .tsr-arrow__icon{ width:28px; height:28px; }
}
</style>

{% schema %}
{
  "name": "Rich text with button",
  "tag": "section",
  "settings": [
    { "type": "select", "id": "section_layout", "label": "Layout",
      "options": [
        { "value": "normal", "label": "Normal" },
        { "value": "boxed", "label": "Boxed" }
      ],
      "default": "normal"
    },
    {
  "type": "text",
  "id": "custom_id",
  "label": "Custom section ID (for anchor links)",
  "placeholder": "e.g. raina-drop",
  "info": "Letters, numbers, and spaces are OK — we’ll auto-handleize to a safe id."
},

    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Heading for rich text section" },
    { "type": "select", "id": "heading_size", "label": "Heading size",
      "options": [
        { "value": "h6", "label": "XS" }, { "value": "h5", "label": "S" },
        { "value": "h4", "label": "M" }, { "value": "h3", "label": "L" }, { "value": "h2", "label": "XL" }
      ],
      "default": "h3"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Enter your long text content here.</p>" },
    { "type": "select", "id": "content_alignment", "label": "Content alignment",
      "options": [
        { "value": "start", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "end", "label": "Right" }
      ],
      "default": "center"
    },

    /* CTA mode (text button vs arrow) */
    { "type": "select", "id": "button_style", "label": "CTA type",
      "options": [
        { "value": "button with text", "label": "Text button (stacked)" },
        { "value": "arrow", "label": "Arrow button (side-by-side)" }
      ],
      "default": "button with text"
    },

    /* Text button settings */
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Button Label" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "select", "id": "text_button_style", "label": "Button style",
      "options": [
        { "value": "filled", "label": "Filled" },
        { "value": "outlined", "label": "Outlined" },
        { "value": "text", "label": "Text" }
      ],
      "default": "filled"
    },

    { "type": "select", "id": "section_width", "label": "Section width",
      "options": [
        { "value": "max-w-page", "label": "Page" },
        { "value": "max-w-narrower", "label": "Narrower" },
        { "value": "max-w-fluid", "label": "Full width" }
      ],
      "default": "max-w-narrower"
    },
    { "type": "color_scheme", "id": "color_scheme", "label": "Color scheme", "default": "scheme-1" },
    { "type": "select", "id": "spacing_inner", "label": "Inner spacing",
      "options": [
        { "value": "0", "label": "None" }, { "value": "1", "label": "S" }, { "value": "2", "label": "M" },
        { "value": "4", "label": "L" }, { "value": "6", "label": "XL" }
      ],
      "default": "2"
    },
    { "type": "select", "id": "spacing_top", "label": "Top spacing",
      "options": [
        { "value": "0", "label": "None" }, { "value": "1", "label": "S" }, { "value": "2", "label": "M" },
        { "value": "4", "label": "L" }, { "value": "6", "label": "XL" }
      ],
      "default": "2"
    },
    { "type": "select", "id": "spacing_bottom", "label": "Bottom spacing",
      "options": [
        { "value": "0", "label": "None" }, { "value": "1", "label": "S" }, { "value": "2", "label": "M" },
        { "value": "4", "label": "L" }, { "value": "6", "label": "XL" }
      ],
      "default": "2"
    }
  ],
  "presets": [{ "name": "Rich text with button" }]
}
{% endschema %}