{{-- 
    Publishing Block: Heading
    Section heading with optional description and theme colors
    
    Block Data Structure:
    {
        "type": "heading",
        "level": "h2", // h1, h2, h3, h4
        "text": "Heading Text",
        "description": "Optional description",
        "alignment": "left",
        "theme_color": "#10b981",
        "style": "default" // default, underline, boxed, highlight
    }
--}}
@php
    $level = $block['level'] ?? 'h2';
    $alignment = $block['alignment'] ?? 'left';
    $style = $block['style'] ?? 'default';
    $themeColor = $block['theme_color'] ?? '#10b981';
    
    $headingClasses = [
        'h1' => 'text-4xl md:text-5xl lg:text-6xl',
        'h2' => 'text-3xl md:text-4xl lg:text-5xl',
        'h3' => 'text-2xl md:text-3xl',
        'h4' => 'text-xl md:text-2xl',
    ];
    
    $alignmentClasses = [
        'left' => 'text-left',
        'center' => 'text-center',
        'right' => 'text-right',
    ];
@endphp

<section class="py-8 lg:py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        @if($style === 'boxed')
            <div class="bg-gray-50 rounded-lg p-8">
        @endif
        
        <div class="{{ $alignmentClasses[$alignment] ?? 'text-left' }}">
            @if($level === 'h1')
                <h1 class="{{ $headingClasses['h1'] }} font-bold text-gray-800 {{ $style === 'highlight' ? 'px-4 py-2 rounded' : '' }}" 
                    @if($style === 'highlight') style="background-color: {{ $themeColor }}20; border-left: 4px solid {{ $themeColor }};" @endif>
                    {{ $block['text'] ?? '' }}
                </h1>
            @elseif($level === 'h2')
                <h2 class="{{ $headingClasses['h2'] }} font-bold text-gray-800 {{ $style === 'highlight' ? 'px-4 py-2 rounded' : '' }}"
                    @if($style === 'highlight') style="background-color: {{ $themeColor }}20; border-left: 4px solid {{ $themeColor }};" @endif>
                    {{ $block['text'] ?? '' }}
                </h2>
            @elseif($level === 'h3')
                <h3 class="{{ $headingClasses['h3'] }} font-bold text-gray-800 {{ $style === 'highlight' ? 'px-4 py-2 rounded' : '' }}"
                    @if($style === 'highlight') style="background-color: {{ $themeColor }}20; border-left: 4px solid {{ $themeColor }};" @endif>
                    {{ $block['text'] ?? '' }}
                </h3>
            @else
                <h4 class="{{ $headingClasses['h4'] }} font-bold text-gray-800 {{ $style === 'highlight' ? 'px-4 py-2 rounded' : '' }}"
                    @if($style === 'highlight') style="background-color: {{ $themeColor }}20; border-left: 4px solid {{ $themeColor }};" @endif>
                    {{ $block['text'] ?? '' }}
                </h4>
            @endif
            
            @if($style === 'underline' && $alignment === 'center')
                <div class="w-24 h-1 mx-auto mt-4 rounded-full" style="background-color: {{ $themeColor }};"></div>
            @elseif($style === 'underline')
                <div class="w-24 h-1 mt-4 rounded-full" style="background-color: {{ $themeColor }};"></div>
            @endif
            
            @if(!empty($block['description']))
                <p class="mt-4 text-lg text-gray-600 max-w-3xl {{ $alignment === 'center' ? 'mx-auto' : '' }}">
                    {{ $block['description'] }}
                </p>
            @endif
        </div>
        
        @if($style === 'boxed')
            </div>
        @endif
    </div>
</section>
