{%- comment -%}
  Product Name Badge — product title as a standalone badge/eyebrow.
  Useful above a hero or inside a bundle block. Falls back to a manual
  title when there is no product context.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
  assign p = s.product
  if p == blank and product != blank
    assign p = product
  endif
  assign title = s.custom_title
  if title == blank and p != blank
    assign title = p.title
  endif
-%}

{%- if title != blank -%}
{% style %}
  .pnb-{{ uid }} { padding: {{ s.padding_y }}px 0; text-align: {{ s.align }}; }
  .pnb-{{ uid }}__badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: {{ s.pad_y }}px {{ s.pad_x }}px;
    border-radius: {{ s.radius }}px;
    background: {{ s.bg_color }}; color: {{ s.text_color }};
    border: {{ s.border_width }}px solid {{ s.border_color }};
    font-size: {{ s.text_size }}px; font-weight: {{ s.weight }};
    {% if s.uppercase %}text-transform: uppercase; letter-spacing: .08em;{% endif %}
  }
  .pnb-{{ uid }}__dot { width: 7px; height: 7px; border-radius: 50%; background: {{ s.accent }}; flex: 0 0 auto; }
{% endstyle %}

<div class="pnb-{{ uid }}">
  <div class="page-width">
    <span class="pnb-{{ uid }}__badge">
      {%- if s.show_dot -%}<span class="pnb-{{ uid }}__dot"></span>{%- endif -%}
      {%- if s.prefix != blank -%}{{ s.prefix | escape }} {% endif -%}
      {{ title | escape }}
    </span>
  </div>
</div>
{%- endif -%}

{% schema %}
{
  "name": "Product Name Badge",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "product",
      "id": "product",
      "label": "Product",
      "info": "Leave blank on a product page."
    },
    {
      "type": "text",
      "id": "custom_title",
      "label": "Custom title",
      "info": "Overrides the product title."
    },
    {
      "type": "text",
      "id": "prefix",
      "label": "Prefix",
      "default": "You're viewing"
    },
    {
      "type": "checkbox",
      "id": "show_dot",
      "label": "Show dot",
      "default": true
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "select",
      "id": "align",
      "label": "Alignment",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Centre"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 12
    },
    {
      "type": "select",
      "id": "weight",
      "label": "Weight",
      "default": "600",
      "options": [
        {
          "value": "400",
          "label": "Regular"
        },
        {
          "value": "600",
          "label": "Semibold"
        },
        {
          "value": "700",
          "label": "Bold"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "uppercase",
      "label": "Uppercase",
      "default": true
    },
    {
      "type": "range",
      "id": "pad_x",
      "min": 4,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Horizontal padding",
      "default": 12
    },
    {
      "type": "range",
      "id": "pad_y",
      "min": 2,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Vertical padding",
      "default": 6
    },
    {
      "type": "range",
      "id": "radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 30
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 0,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 1
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background",
      "default": "#f7f5f2"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border",
      "default": "#e2ded8"
    },
    {
      "type": "color",
      "id": "accent",
      "label": "Dot colour",
      "default": "#1e8f4e"
    },
    {
      "type": "range",
      "id": "padding_y",
      "min": 0,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Vertical padding",
      "default": 8
    }
  ],
  "presets": [
    {
      "name": "Product Name Badge"
    }
  ]
}
{% endschema %}
