{#
 # Accreditations & Associations Component
 # Luxury cream background with 4-card grid layout
 #
 # Fields Expected:
 # - sectionLabel (Plain Text) - e.g., "Why Choose Us"
 # - heading (Plain Text) - Main heading, e.g., "Accreditations & Associations"
 # - items (Matrix) - List of accreditation/association items
 #   - icon (SVG code or Asset) - Icon for the card
 #   - title (Plain Text) - Card title
 #   - description (Plain Text) - Card description
 # - backgroundScheme (Dropdown) - Background color option
 #
 # Usage: 
 #   {% include 'components/accreditations.twig' with { block: block } %}
 #   OR for standalone: {% include 'components/accreditations.twig' %}
 #}

{% import '_macros/images.twig' as imageMacro %}

{% set accreditationsBlock = block ?? entry ?? null %}

{# Get field values – no default copy; only show when content exists #}
{% set sectionLabel = accreditationsBlock.sectionLabel is defined and accreditationsBlock.sectionLabel|length ? accreditationsBlock.sectionLabel : null %}
{% set heading = accreditationsBlock.heading is defined and accreditationsBlock.heading|length ? accreditationsBlock.heading : null %}
{% set items = accreditationsBlock.items is defined and accreditationsBlock.items|length ? accreditationsBlock.items.all() : [] %}
{% set backgroundSchemeRaw = accreditationsBlock.backgroundScheme.value ?? accreditationsBlock.backgroundScheme ?? 'creamLight' %}

{# Normalize dropdown values #}
{% set backgroundScheme = backgroundSchemeRaw|string %}

{# Background classes #}
{% set bgClasses = {
  'navyDark': 'bg-gradient-navy',
  'creamLight': 'bg-cream',
  'whiteClean': 'bg-white',
  'beigeWarm': 'bg-beige',
  'goldLuxury': 'bg-gradient-gold',
  'gradientNavy': 'bg-gradient-navy',
  'gradientGold': 'bg-gradient-gold',
  'transparent': 'bg-transparent'
} %}

{# Text color classes #}
{% set textColorClasses = {
  'navyDark': 'text-white',
  'creamLight': 'text-navy',
  'whiteClean': 'text-navy',
  'beigeWarm': 'text-navy',
  'goldLuxury': 'text-navy',
  'gradientNavy': 'text-white',
  'gradientGold': 'text-navy',
  'transparent': 'text-navy'
} %}

{% set sectionBgClass = bgClasses[backgroundScheme] ?? bgClasses['creamLight'] %}
{% set sectionTextColor = textColorClasses[backgroundScheme] ?? textColorClasses['creamLight'] %}
{% set hasAccreditationsContent = sectionLabel or heading or items|length %}

{% if hasAccreditationsContent %}
<section class="section-luxury {{ sectionBgClass }} relative overflow-hidden bg-pattern-luxury">
    <div class="container-default relative">
        {% if sectionLabel or heading %}
        <div class="section-heading">
            {% if sectionLabel %}
            <div class="flex items-center justify-center gap-4 mb-6">
                <div class="w-12 h-px bg-gold"></div>
                <p class="text-gold tracking-widest text-2xl font-medium font-body">{{ sectionLabel }}</p>
                <div class="w-12 h-px bg-gold"></div>
            </div>
            {% endif %}
            {% if heading %}
            <h2 class="{{ sectionTextColor }} italic">{{ heading }}</h2>
            {% endif %}
        </div>
        {% endif %}
        
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
            {% if items|length > 0 %}
                {% for item in items %}
                    {% set itemTitle = item.title ?? item.itemTitle ?? '' %}
                    {% set itemDescription = item.description ?? item.itemDescription ?? '' %}
                    {% set hasIcon = (item.iconAsset is defined and item.iconAsset|length) or (item.iconSvg is defined and item.iconSvg|length) %}
                    {% if itemTitle or itemDescription or hasIcon %}
                    <div class="text-center p-8 lg:p-10 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 bg-white hover:-translate-y-2 group">
                        {% if item.iconAsset|length or item.iconSvg|length %}
                        <div class="w-18 h-18 mx-auto mb-6 rounded-full flex items-center justify-center bg-gold/10 group-hover:bg-gold/20 transition-colors">
                            {% if item.iconAsset|length %}
                                {% set iconImage = item.iconAsset.one() %}
                                {% if iconImage %}
                                    {{ imageMacro.optimizedImage(iconImage, {
                                      alt: '',
                                      class: 'w-9 h-9 text-gold',
                                      loading: 'lazy',
                                      width: iconImage.width,
                                      height: iconImage.height,
                                      autoResponsive: false,
                                      sizes: ''
                                    }) }}
                                {% endif %}
                            {% elseif item.iconSvg|length %}
                                {{ item.iconSvg|raw }}
                            {% endif %}
                        </div>
                        {% endif %}
                        {% if itemTitle %}<h5 class="text-navy font-semibold mb-3">{{ itemTitle }}</h5>{% endif %}
                        {% if itemDescription %}<p class="text-charcoal-light text-sm leading-relaxed">{{ itemDescription }}</p>{% endif %}
                    </div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </div>
    </div>
</section>
{% endif %}