{% comment %}
  ShipShop checkout — Shopify theme section (v1.0.0)
  Adds a "Ship with ShipShop" button, or the ShipShop checkout page itself, anywhere in your store.
  ShipShop takes no payments here: it only books the shipment. Your customers pay through your own
  Shopify payment methods.
  How to install: Online Store -> Themes -> ... -> Edit code -> Sections -> Add a new section ->
  name it  shipshop-checkout  -> paste this whole file -> Save. Then open the Theme editor, press
  "Add section" on any page and choose "ShipShop checkout".
{% endcomment %}

{%- assign ss_link = section.settings.link | strip -%}
{%- if ss_link contains 'https://shipshop.in/checkout/' -%}
  <div class="shipshop-section page-width" style="margin: 24px auto; text-align: {{ section.settings.align }};">
    {%- if section.settings.mode == 'embed' -%}
      <iframe
        src="{{ ss_link }}"
        title="ShipShop checkout"
        loading="lazy"
        style="width: 100%; min-height: {{ section.settings.height }}px; border: 0;"
      ></iframe>
    {%- else -%}
      <a
        href="{{ ss_link }}"
        target="_blank"
        rel="noopener"
        style="display: inline-block; background: {{ section.settings.button_color }}; color: {{ section.settings.button_text_color }}; padding: 12px 22px; border-radius: 8px; font-weight: 600; text-decoration: none;"
      >{{ section.settings.button_label | escape }}</a>
    {%- endif -%}
  </div>
{%- elsif request.design_mode -%}
  <div class="shipshop-section page-width" style="margin: 24px auto; padding: 16px; border: 1px dashed #999; border-radius: 8px;">
    Paste your ShipShop checkout link in this section's settings. It looks like
    https://shipshop.in/checkout/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
    (ShipShop dashboard -> Integrations).
  </div>
{%- endif -%}

{% schema %}
{
  "name": "ShipShop checkout",
  "tag": "section",
  "class": "shipshop-checkout",
  "settings": [
    {
      "type": "text",
      "id": "link",
      "label": "ShipShop checkout link",
      "info": "Copy it from ShipShop dashboard -> Integrations. Must start with https://shipshop.in/checkout/"
    },
    {
      "type": "select",
      "id": "mode",
      "label": "Show as",
      "options": [
        { "value": "button", "label": "Button (opens the ShipShop checkout page)" },
        { "value": "embed", "label": "Embedded checkout page" }
      ],
      "default": "button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button text",
      "default": "Ship with ShipShop"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button colour",
      "default": "#C79A3A"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text colour",
      "default": "#FFFFFF"
    },
    {
      "type": "select",
      "id": "align",
      "label": "Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Centre" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "range",
      "id": "height",
      "label": "Embedded page height",
      "min": 400,
      "max": 2000,
      "step": 100,
      "unit": "px",
      "default": 900
    }
  ],
  "presets": [
    { "name": "ShipShop checkout" }
  ]
}
{% endschema %}