{#
  CTA Button Component
  
  Usage:
  - Single CTA entry: {% include 'components/cta-button' with { 'cta': ctaEntry } %}
  - Button element: {% include 'components/cta-button' with { 'cta': element } %}
  - Multiple CTAs: {% include 'components/cta-button' with { 'ctas': entry.ctaButtons } %}
#}

{# Multiple CTAs rendering #}
{% if ctas is defined and ctas|length %}
  {% set layout = layout ?? 'horizontal' %}
  {% set spacing = spacing ?? 'gap-4' %}
  
  {# Layout classes #}
  {% set layoutClasses = {
    'horizontal': 'flex flex-wrap ' ~ spacing,
    'vertical': 'flex flex-col ' ~ spacing,
    'centered': 'flex flex-wrap justify-center ' ~ spacing
  } %}

  <div class="{{ layoutClasses[layout] }}">
    {% for ctaEntry in ctas %}
      {# Render each CTA #}
      {% set buttonText = ctaEntry.linkText ?? ctaEntry.buttonText ?? ctaEntry.title ?? '' %}
      {% set buttonUrl = ctaEntry.urlAddress ?? ctaEntry.buttonUrl ?? ctaEntry.url ?? null %}
      {% set buttonType = ctaEntry.buttonType.value ?? ctaEntry.buttonType ?? ctaEntry.buttonStyle ?? 'cta' %}

      {# Button type classes #}
      {% set typeClasses = {
        'normal': 'btn-navy',
        'cta': 'btn-gold',
        'ctaAlt': 'btn-outline',
        'primary': 'btn-gold',
        'secondary': 'btn-navy',
        'outline': 'btn-outline',
        'text': 'text-gold hover:text-navy transition-colors underline'
      } %}

      {# Render the button #}
      {% if buttonText and buttonUrl %}
        <a href="{{ buttonUrl }}" class="{{ typeClasses[buttonType] ?? 'btn-gold' }} inline-flex items-center">
          {{ buttonText }}
        </a>
      {% endif %}
    {% endfor %}
  </div>
{% endif %}

{# Single CTA rendering #}
{% if cta is defined %}
  {# Support both entry-based CTA and button element #}
  {% set buttonText = cta.linkText ?? cta.buttonText ?? cta.title ?? '' %}
  {% set buttonUrl = cta.urlAddress ?? cta.buttonUrl ?? cta.url ?? null %}
  {% set buttonType = cta.buttonType.value ?? cta.buttonType ?? cta.buttonStyle ?? 'primary' %}
  {# Default values - buttonSize and fullWidth don't exist on callToAction Entry objects #}
  {# These are only used for Matrix block elements, so we use safe defaults #}
  {% set buttonSize = 'medium' %}
  {% set fullWidth = false %}

  {# Button type classes #}
  {% set typeClasses = {
    'normal': 'btn-navy',
    'cta': 'btn-gold',
    'ctaAlt': 'btn-outline',
    'primary': 'btn-gold',
    'secondary': 'btn-navy',
    'outline': 'btn-outline',
    'text': 'text-gold hover:text-navy transition-colors underline'
  } %}
  
  {# Button size classes #}
  {% set sizeClasses = {
    'small': 'px-6 py-2 text-sm',
    'medium': 'px-8 py-3 text-base',
    'large': 'btn-gold-lg'
  } %}

  {# Render the button only when both text and URL have content #}
  {% if buttonText|length and buttonUrl %}
    <a href="{{ buttonUrl }}" class="{{ typeClasses[buttonType] ?? 'btn-gold' }} {{ buttonType != 'text' ? (sizeClasses[buttonSize] ?? 'px-8 py-3 text-base') : '' }} {{ fullWidth ? 'w-full inline-block' : 'inline-flex items-center' }}">
      {{ buttonText }}
    </a>
  {% endif %}
{% endif %}