{{-- Universal Component Renderer --}}
@php
    $type = $componentData['type'] ?? 'unknown';
    $content = $componentData['content'] ?? [];
    $children = $componentData['children'] ?? [];
    $classes = $componentData['classes'] ?? [];
    $styles = $componentData['styles'] ?? [];
    $variables = $componentData['variables'] ?? [];

    // Build class string
    $classString = is_array($classes) ? implode(' ', $classes) : $classes;

    // Build style string
    $styleString = '';
    if (is_array($styles) && !empty($styles)) {
        $styleParts = [];
        foreach ($styles as $property => $value) {
            $styleParts[] = $property . ': ' . $value;
        }
        $styleString = implode('; ', $styleParts);
    }
@endphp

@if($type === 'container')
    {{-- Container Component --}}
    @php
        $containerSettings = $content['containerSettings'] ?? [];
        $width = $containerSettings['width'] ?? 'container';
        $background = $containerSettings['background'] ?? [];
        $minHeight = $containerSettings['minHeight'] ?? null;
        $minHeightUnit = $containerSettings['minHeightUnit'] ?? 'px';
        $padding = $containerSettings['padding'] ?? null;

        $widthClass = $width === 'full' ? 'container-fluid' : 'container';

        $containerStyles = [];
        if (isset($background['type']) && $background['type'] === 'color' && isset($background['color'])) {
            $containerStyles[] = 'background-color: ' . $background['color'];
        }
        if ($minHeight) {
            $containerStyles[] = 'min-height: ' . $minHeight . $minHeightUnit;
        }
        if ($padding) {
            $containerStyles[] = 'padding: ' . $padding;
        }
        if ($styleString) {
            $containerStyles[] = $styleString;
        }
        $containerStyleAttr = !empty($containerStyles) ? 'style="' . implode('; ', $containerStyles) . '"' : '';
    @endphp

    <div class="{{ $widthClass }} {{ $classString }}" {!! $containerStyleAttr !!}>
        @if(!empty($children))
            @foreach($children as $child)
                @include('themes.dynamic.components.component-renderer', ['componentData' => $child])
            @endforeach
        @endif
    </div>

@elseif($type === 'section')
    {{-- Section Component --}}
    <section class="{{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>
        @if(!empty($children))
            @foreach($children as $child)
                @include('themes.dynamic.components.component-renderer', ['componentData' => $child])
            @endforeach
        @endif
    </section>

@elseif($type === 'row')
    {{-- Row Component --}}
    <div class="row {{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>
        @if(!empty($children))
            @foreach($children as $child)
                @include('themes.dynamic.components.component-renderer', ['componentData' => $child])
            @endforeach
        @endif
    </div>

@elseif($type === 'column')
    {{-- Column Component --}}
    @php
        $colSize = $content['size'] ?? 'col-md-4';
    @endphp
    <div class="{{ $colSize }} {{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>
        @if(!empty($children))
            @foreach($children as $child)
                @include('themes.dynamic.components.component-renderer', ['componentData' => $child])
            @endforeach
        @endif
    </div>

@elseif($type === 'heading')
    {{-- Heading Component --}}
    @php
        $tag = $content['tag'] ?? 'h2';
        $text = $content['text'] ?? '';
    @endphp
    <{{ $tag }} class="{{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>{!! $text !!}</{{ $tag }}>

@elseif($type === 'paragraph')
    {{-- Paragraph Component --}}
    @php
        $text = $content['text'] ?? '';
    @endphp
    <p class="{{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>{!! $text !!}</p>

@elseif($type === 'button')
    {{-- Button Component --}}
    @php
        $text = $content['text'] ?? 'Button';
        $href = $content['href'] ?? '#';
    @endphp
    <a href="{{ $href }}" class="{{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>{{ $text }}</a>

@elseif($type === 'image')
    {{-- Image Component --}}
    @php
        $src = $content['src'] ?? 'https://via.placeholder.com/400x300';
        $alt = $content['alt'] ?? 'Image';
    @endphp
    <img src="{{ $src }}" alt="{{ $alt }}" class="{{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>

@elseif($type === 'icon')
    {{-- Icon Component --}}
    @php
        $iconClass = $content['icon'] ?? 'bi-star';
    @endphp
    <i class="bi {{ $iconClass }} {{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif></i>

@elseif($type === 'card')
    {{-- Card Component --}}
    <div class="card {{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>
        @if(!empty($children))
            @foreach($children as $child)
                @include('themes.dynamic.components.component-renderer', ['componentData' => $child])
            @endforeach
        @endif
    </div>

@elseif($type === 'slider')
    {{-- Slider Component --}}
    @include('themes.dynamic.components.slider', ['data' => $componentData])

@elseif($type === 'navbar')
    {{-- Navbar Component --}}
    @include('themes.dynamic.components.navbar', ['data' => $componentData])

@elseif($type === 'menu')
    {{-- Menu Component --}}
    @include('themes.dynamic.components.menu', ['data' => $componentData])

@elseif($type === 'contact-info')
    {{-- Contact Info Component --}}
    @include('themes.dynamic.components.contact-info', ['data' => $componentData])

@elseif($type === 'social-links')
    {{-- Social Links Component --}}
    @include('themes.dynamic.components.social-links', ['data' => $componentData])

@elseif($type === 'features_grid' || $type === 'features-grid')
    {{-- Features Grid Component --}}
    @include('themes.dynamic.components.features-grid', ['component' => $componentData])

@elseif($type === 'service_cards' || $type === 'service-cards')
    {{-- Service Cards Component --}}
    @include('themes.dynamic.components.service-cards', ['component' => $componentData])

@elseif($type === 'testimonial_slider' || $type === 'testimonial-slider')
    {{-- Testimonial Slider Component --}}
    @include('themes.dynamic.components.testimonial-slider', ['component' => $componentData])

@elseif($type === 'team_grid' || $type === 'team-grid')
    {{-- Team Grid Component --}}
    @include('themes.dynamic.components.team-grid', ['component' => $componentData])

@elseif($type === 'stats_grid' || $type === 'stats-grid')
    {{-- Stats Grid Component --}}
    @include('themes.dynamic.components.stats-grid', ['component' => $componentData])

@elseif($type === 'contact_form' || $type === 'contact-form')
    {{-- Contact Form Component --}}
    @include('themes.dynamic.components.contact-form', ['component' => $componentData])

@elseif($type === 'ecommerce_products' || $type === 'ecommerce-products')
    {{-- E-Commerce Products Component --}}
    @include('themes.dynamic.components.ecommerce-products', ['component' => $componentData])

@elseif($type === 'booking_widget' || $type === 'booking-widget')
    {{-- Booking Widget Component --}}
    @include('themes.dynamic.components.booking-widget', ['component' => $componentData])

@elseif($type === 'theme-section')
    {{-- Theme Section (custom theme component) --}}
    <div class="theme-section {{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>
        @if(isset($variables) && !empty($variables))
            {{-- Render theme section with variables --}}
            @if(!empty($children))
                @foreach($children as $child)
                    @include('themes.dynamic.components.component-renderer', ['componentData' => $child])
                @endforeach
            @endif
        @endif
    </div>

@else
    {{-- Generic/Unknown Component Type --}}
    <div class="component component-{{ $type }} {{ $classString }}" @if($styleString) style="{{ $styleString }}" @endif>
        @if(!empty($children))
            @foreach($children as $child)
                @include('themes.dynamic.components.component-renderer', ['componentData' => $child])
            @endforeach
        @elseif(isset($content['html']))
            {!! $content['html'] !!}
        @elseif(isset($content['text']))
            {!! $content['text'] !!}
        @endif
    </div>
@endif