{% doc %}
  @prompt
    Give me two buttons that show up under this content, Can you match my theme? I'd like them to be the same font, size, and left/right layout as the rest of the theme, Match the styling of the current homepage theme -- see the section called "Gallery" for reference. The font should be outfit. , I need the ability to change the font, size, and padding for the button section, I WANT TO ADD PADDING ABOVE AND BELOW THE BUTTONS 
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-dual-buttons-{{ ai_gen_id }} {
    display: block;
    width: 100%;
    padding-top: {{ block.settings.section_padding_top }}px;
    padding-bottom: {{ block.settings.section_padding_bottom }}px;
  }

  .ai-dual-buttons__container-{{ ai_gen_id }} {
    display: flex;
    gap: {{ block.settings.button_spacing }}px;
    justify-content: {{ block.settings.alignment }};
    align-items: center;
    flex-wrap: wrap;
    width: {{ block.settings.desktop_width_percent }}%;
    margin: 0 auto;
  }

  .ai-dual-buttons__button-{{ ai_gen_id }} {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: {{ block.settings.button_padding_vertical }}px {{ block.settings.button_padding_horizontal }}px;
    font-family: {{ block.settings.button_font.family }}, {{ block.settings.button_font.fallback_families }};
    font-weight: {{ block.settings.button_font.weight }};
    font-size: {{ block.settings.button_font_size }}px;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: {{ settings.buttons_radius }}px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: {{ settings.buttons_border_thickness }}px solid;
    min-width: 160px;
    text-align: center;
    text-transform: none;
  }

  .ai-dual-buttons__button--primary-{{ ai_gen_id }} {
    background-color: {{ settings.button_primary_bg }};
    color: {{ settings.button_primary_text }};
    border-color: {{ settings.button_primary_border }};
  }

  .ai-dual-buttons__button--primary-{{ ai_gen_id }}:hover {
    background-color: {{ settings.button_primary_bg_hover }};
    color: {{ settings.button_primary_text_hover }};
    border-color: {{ settings.button_primary_border_hover }};
  }

  .ai-dual-buttons__button--secondary-{{ ai_gen_id }} {
    background-color: {{ settings.button_secondary_bg }};
    color: {{ settings.button_secondary_text }};
    border-color: {{ settings.button_secondary_border }};
  }

  .ai-dual-buttons__button--secondary-{{ ai_gen_id }}:hover {
    background-color: {{ settings.button_secondary_bg_hover }};
    color: {{ settings.button_secondary_text_hover }};
    border-color: {{ settings.button_secondary_border_hover }};
  }

  @media screen and (max-width: 749px) {
    .ai-dual-buttons-{{ ai_gen_id }} {
      padding-top: {{ block.settings.section_padding_top_mobile }}px;
      padding-bottom: {{ block.settings.section_padding_bottom_mobile }}px;
    }

    .ai-dual-buttons__container-{{ ai_gen_id }} {
      width: 100%;
      {% if block.settings.stack_on_mobile %}
        flex-direction: column;
      {% endif %}
    }

    .ai-dual-buttons__button-{{ ai_gen_id }} {
      {% if block.settings.stack_on_mobile %}
        width: 100%;
      {% endif %}
      font-size: {{ block.settings.button_font_size_mobile }}px;
      padding: {{ block.settings.button_padding_vertical_mobile }}px {{ block.settings.button_padding_horizontal_mobile }}px;
    }
  }
{% endstyle %}

<dual-buttons-{{ ai_gen_id }} class="ai-dual-buttons-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
  <div class="ai-dual-buttons__container-{{ ai_gen_id }}">
    {% if block.settings.primary_button_text != blank %}
      <a
        href="{{ block.settings.primary_button_link }}"
        class="ai-dual-buttons__button-{{ ai_gen_id }} ai-dual-buttons__button--primary-{{ ai_gen_id }}"
      >
        {{ block.settings.primary_button_text }}
      </a>
    {% endif %}

    {% if block.settings.secondary_button_text != blank %}
      <a
        href="{{ block.settings.secondary_button_link }}"
        class="ai-dual-buttons__button-{{ ai_gen_id }} ai-dual-buttons__button--secondary-{{ ai_gen_id }}"
      >
        {{ block.settings.secondary_button_text }}
      </a>
    {% endif %}
  </div>
</dual-buttons-{{ ai_gen_id }}>

<script>
  (function() {
    class DualButtons{{ ai_gen_id }} extends HTMLElement {
      constructor() {
        super();
      }
    }

    customElements.define('dual-buttons-{{ ai_gen_id }}', DualButtons{{ ai_gen_id }});
  })();
</script>

{% schema %}
{
  "name": "Dual buttons",
  "tag": null,
  "settings": [
    {
      "type": "header",
      "content": "Primary button"
    },
    {
      "type": "text",
      "id": "primary_button_text",
      "label": "Text",
      "default": "Shop now"
    },
    {
      "type": "url",
      "id": "primary_button_link",
      "label": "Link"
    },
    {
      "type": "header",
      "content": "Secondary button"
    },
    {
      "type": "text",
      "id": "secondary_button_text",
      "label": "Text",
      "default": "Learn more"
    },
    {
      "type": "url",
      "id": "secondary_button_link",
      "label": "Link"
    },
    {
      "type": "header",
      "content": "Button style"
    },
    {
      "type": "font_picker",
      "id": "button_font",
      "label": "Font",
      "default": "assistant_n4"
    },
    {
      "type": "range",
      "id": "button_font_size",
      "label": "Font size (desktop)",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "button_font_size_mobile",
      "label": "Font size (mobile)",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "range",
      "id": "button_padding_vertical",
      "label": "Vertical padding (desktop)",
      "min": 8,
      "max": 32,
      "step": 2,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "button_padding_horizontal",
      "label": "Horizontal padding (desktop)",
      "min": 16,
      "max": 64,
      "step": 4,
      "unit": "px",
      "default": 32
    },
    {
      "type": "range",
      "id": "button_padding_vertical_mobile",
      "label": "Vertical padding (mobile)",
      "min": 8,
      "max": 32,
      "step": 2,
      "unit": "px",
      "default": 12
    },
    {
      "type": "range",
      "id": "button_padding_horizontal_mobile",
      "label": "Horizontal padding (mobile)",
      "min": 16,
      "max": 64,
      "step": 4,
      "unit": "px",
      "default": 24
    },
    {
      "type": "header",
      "content": "Section spacing"
    },
    {
      "type": "range",
      "id": "section_padding_top",
      "label": "Padding top (desktop)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "section_padding_bottom",
      "label": "Padding bottom (desktop)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "section_padding_top_mobile",
      "label": "Padding top (mobile)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "section_padding_bottom_mobile",
      "label": "Padding bottom (mobile)",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "alignment",
      "label": "Alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "flex-end",
          "label": "Right"
        }
      ],
      "default": "flex-start"
    },
    {
      "type": "range",
      "id": "button_spacing",
      "label": "Space between buttons",
      "min": 8,
      "max": 40,
      "step": 4,
      "unit": "px",
      "default": 16
    },
    {
      "type": "range",
      "id": "desktop_width_percent",
      "label": "Desktop width",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 100
    },
    {
      "type": "checkbox",
      "id": "stack_on_mobile",
      "label": "Stack buttons on mobile",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Dual buttons"
    }
  ]
}
{% endschema %}