{#
# Call to Action Component
# Luxury styled CTA section
#
# Usage: {% include 'components/call-to-action.twig' with { block: block } %}
#}

{# Handle callToAction entry type fields #}
{# callToAction entry type has: linkText, urlAddress, buttonType #}
{# Also check for standalone CTA component fields: heading, subheading, buttonText, buttonUrl, backgroundColor #}

{# Check if this is a callToAction entry type (used in flexible section) or standalone CTA #}
{% set isCallToActionEntry = block.linkText is defined or block.urlAddress is defined %}

{% if isCallToActionEntry %}
  {# This is a callToAction entry type - simple button #}
  {% set linkTextRaw = block.linkText ?? null %}
  {% set urlAddressRaw = block.urlAddress ?? null %}
  {% set buttonTypeRaw = block.buttonType ?? null %}
  
  {% set linkText = linkTextRaw ? (linkTextRaw.value ?? linkTextRaw) : null %}
  {% set urlAddress = urlAddressRaw ? (urlAddressRaw.value ?? urlAddressRaw) : null %}
  {% set buttonType = buttonTypeRaw ? (buttonTypeRaw.value ?? buttonTypeRaw) : 'cta' %}
  
  {% if linkText and urlAddress %}
  {% set buttonClass = buttonType == 'ctaAlt' ? 'btn-outline' : (buttonType == 'normal' ? 'btn-navy' : 'btn-gold') %}
  <a href="{{ urlAddress }}" class="{{ buttonClass }} inline-flex items-center group">
    <span>{{ linkText }}</span>
    <svg class="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path       stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
    </svg>
  </a>
  {% endif %}
{% else %}
  {# This is a standalone CTA component with heading, subheading, etc. #}
  {% set headingRaw = block.heading ?? null %}
  {% set subheadingRaw = block.subheading ?? null %}
  {% set buttonTextRaw = block.buttonText ?? null %}
  {% set buttonUrlRaw = block.buttonUrl ?? null %}
  {% set backgroundColorRaw = block.backgroundColor ?? null %}
  
  {% set heading = headingRaw ? (headingRaw.value ?? headingRaw) : null %}
  {% set subheading = subheadingRaw ? (subheadingRaw.value ?? subheadingRaw) : null %}
  {% set buttonText = buttonTextRaw ? (buttonTextRaw.value ?? buttonTextRaw) : null %}
  {% set buttonUrl = buttonUrlRaw ? (buttonUrlRaw.value ?? buttonUrlRaw) : null %}
  {% set backgroundColor = backgroundColorRaw ? (backgroundColorRaw.value ?? backgroundColorRaw) : 'navy' %}

  {% if backgroundColor == 'gold' %}
      {% set bgClasses = 'bg-gold' %}
      {% set textColor = 'text-navy' %}
      {% set buttonClass = 'btn-navy' %}
  {% elseif backgroundColor == 'cream' %}
      {% set bgClasses = 'bg-cream' %}
      {% set textColor = 'text-navy' %}
      {% set buttonClass = 'btn-gold' %}
  {% else %}
      {% set bgClasses = 'bg-navy' %}
      {% set textColor = 'text-white' %}
      {% set buttonClass = 'btn-gold' %}
  {% endif %}

  {% if heading or subheading or (buttonText and buttonUrl) %}
  <section class="section-luxury {{ bgClasses }} relative overflow-hidden">
      <div class="absolute top-0 left-0 w-64 h-64 border border-gold/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-0 w-64 h-64 border border-gold/10 rounded-full translate-x-1/2 translate-y-1/2"></div>
      
      <div class="container-default relative z-10">
          <div class="max-w-4xl mx-auto text-center">
              <div class="flex items-center justify-center gap-4 mb-6">
                  <div class="w-12 h-px bg-gold"></div>
                  <div class="w-2 h-2 rounded-full bg-gold"></div>
                  <div class="w-12 h-px bg-gold"></div>
              </div>
              
              {% if heading %}<h2 class="{{ textColor }} mb-6">{{ heading }}</h2>{% endif %}
              
              {% if subheading %}
              <p class="{{ textColor }}/80 text-lg lg:text-xl mb-10 max-w-2xl mx-auto">
                  {{ subheading }}
              </p>
              {% endif %}
              
              {% if buttonText and buttonUrl %}
              <a href="{{ buttonUrl }}" class="{{ buttonClass }} inline-flex items-center group">
                  <span>{{ buttonText }}</span>
                  <svg class="w-5 h-5 ml-3 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                  </svg>
              </a>
              {% endif %}
          </div>
      </div>
      
      <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-gold/40 to-transparent"></div>
  </section>
  {% endif %}
{% endif %}