@php
    // 0 No square
    // 1 Top square
    // 2 Bottom square
    $calloutBarSquare = rand(0, 2);
@endphp

@if(rand(0, 1))
    <div class="u-styling__pre-footer">
        @include('site.components.ornaments.triangle', ['hideShapeShadow' => true])
    </div>
@endif

<div class="o-callout-bar">
    <div class="l-contain">

        <div class="o-callout-bar__main">
            <div class="o-callout-bar__content  s-text">
                {!! $calloutBarDescription ?? __('site/global.calloutBar') !!}
            </div>
            @if(!empty($buttonLink) && !empty($buttonText))
                <div class="o-callout-bar__actions">
                    @include('site.components.button', ['modifiers' => ['icon']])
                </div>

            @elseif(isset($showPhoneButton) && $showPhoneButton)
                <div class="o-callout-bar__actions">

                    @include('site.components.button', [
                    'buttonLink' => 'tel:' . config('site.contactPersons.henk.phone.call'),
                    'buttonText' => __('site/global.call') . ' ' . config('site.contactPersons.henk.phone.display'),
                    ])

                </div>
            @endif
        </div>

    </div>

    @if($calloutBarSquare === 1)
        <div class="o-callout-bar__square  o-callout-bar__square--top">
            @include('site.components.ornaments.square')
        </div>
    @endif

    @if(rand(0, 1))
        <div class="o-callout-bar__triangle">
            @include('site.components.ornaments.triangle', ['hideShapeShadow' => true])
        </div>
    @endif

</div>

@if($calloutBarSquare === 2)
    <div class="o-callout-bar__square  o-callout-bar__square--bottom">
        @include('site.components.ornaments.square')
    </div>
@endif