<section
  class='{% render 'fn.get_section_padding', section: section %} relative container mx-auto'
  {{ section.shopify_attributes }}
>
  {% assign alignment_class = '' %}
  {% case section.settings.alignment %}
    {% when 'left' %}
      {% assign alignment_class = 'text-left items-start' %}
    {% when 'center' %}
      {% assign alignment_class = 'text-center items-center' %}
    {% when 'right' %}
      {% assign alignment_class = 'text-right items-end' %}
  {% endcase %}

  <div class='flex flex-col {{ alignment_class }}'>
    {% if section.settings.headline %}
      <p class='uppercase font-semibold text-xs text-gray-600 mb-2'>{{ section.settings.headline }}</p>
    {% endif %}
    {% if section.settings.title %}
      <h2 class='font-bold text-4xl lg:text-5xl mb-3 -tracking-[0.06em] text-brown'>
        {{ section.settings.title }}
      </h2>
    {% endif %}
    {% if section.settings.content %}
      <p class='text-lg text-gray-800'>{{ section.settings.content }}</p>
    {% endif %}
    {% if section.settings.button_text and section.settings.button_link %}
      <a
        href='{{ section.settings.button_link }}'
        class='bg-red-500 text-white rounded-lg px-6 py-2 inline-block mt-4 lg:mt-5'
      >
        {{ section.settings.button_text }}
      </a>
    {% endif %}
  </div>
</section>

{% schema %}
{
  "name": "Page Title",
  "settings": [
    {
      "type": "text",
      "id": "headline",
      "label": "Headline"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Your Page Title"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Text Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "textarea",
      "id": "content",
      "label": "Content"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "select",
      "id": "padding_top",
      "label": "Padding top",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    },
    {
      "type": "select",
      "label": "Padding bottom",
      "id": "padding_bottom",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "base",
          "label": "Normal"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "base"
    }
  ],
  "presets": [
    {
      "name": "Page Title",
      "settings": {
        "headline": "Welcome",
        "title": "Discover Our Story",
        "alignment": "left",
        "content": "Learn more about our mission and values.",
        "button_text": "Read More",
        "button_link": "/about",
        "padding_top": "base",
        "padding_bottom": "base"
      }
    }
  ]
}
{% endschema %}