@props(['blocks'])

@if ($blocks)
    @if (is_array($blocks))
        @foreach ($blocks as $block)
            <div class="content-block mb-4">
                @switch($block['type'])
                    @case('rich_text')
                    @case('html')
                        <div class="rich-text-content">
                            {!! $block['data']['content'] !!}
                        </div>
                    @break

                    @case('markdown')
                        <div class="markdown-content">
                            {!! \Illuminate\Support\Str::markdown($block['data']['content']) !!}
                        </div>
                    @break

                    @case('image')
                        <div class="image-block text-center mt-3">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($block['data']['url']) }}"
                                alt="{{ $block['data']['alt'] ?? '' }}" class="img-fluid rounded shadow-sm">
                        </div>
                    @break

                    @case('pdf_embed')
                        <div class="pdf-embed-block mb-4 shadow-sm rounded overflow-hidden">
                            <iframe src="{{ \Illuminate\Support\Facades\Storage::url($block['data']['url']) }}" width="100%"
                                height="600px" style="border: none;"></iframe>
                            <div class="p-2 bg-light text-center">
                                <a href="{{ \Illuminate\Support\Facades\Storage::url($block['data']['url']) }}" target="_blank"
                                    class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-file-earmark-pdf"></i> 別タブでPDFを開く
                                </a>
                            </div>
                        </div>
                    @break

                    @case('youtube_video')
                        <div class="youtube-block mb-4">
                            @php
                                preg_match(
                                    '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/',
                                    $block['data']['url'],
                                    $matches,
                                );
                                $blockVideoId = $matches[1] ?? null;
                            @endphp
                            @if ($blockVideoId)
                                <div class="ratio ratio-16x9 rounded shadow-sm overflow-hidden">
                                    <iframe src="https://www.youtube.com/embed/{{ $blockVideoId }}" title="YouTube video"
                                        allowfullscreen></iframe>
                                </div>
                            @endif
                        </div>
                    @break

                    @case('hero')
                        <div class="page-hero position-relative overflow-hidden mb-5 rounded shadow-sm" style="height: 300px;">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($block['data']['image_url']) }}"
                                alt="{{ $block['data']['title'] ?? '' }}" class="w-100 h-100 object-fit-cover">
                            <div class="position-absolute top-50 start-50 translate-middle text-center text-white w-100 p-4"
                                style="background: rgba(0,0,0,0.4);">
                                @if (!empty($block['data']['title']))
                                    <h2 class="display-5 fw-bold mb-2">{{ $block['data']['title'] }}</h2>
                                @endif
                                @if (!empty($block['data']['subtitle']))
                                    <p class="lead mb-0">{{ $block['data']['subtitle'] }}</p>
                                @endif
                            </div>
                        </div>
                    @break

                    @case('alert')
                        <div class="alert alert-{{ $block['data']['type'] }} shadow-sm rounded-3 p-4 mb-4">
                            {!! $block['data']['content'] !!}
                        </div>
                    @break

                    @case('button_snippet')
                        <div class="button-snippet text-center my-4">
                            <a href="{{ $block['data']['url'] }}"
                                class="btn btn-{{ $block['data']['style'] }} btn-{{ $block['data']['size'] }} rounded-pill px-4">
                                {{ $block['data']['label'] }}
                            </a>
                        </div>
                    @break

                    @case('card_snippet')
                        <div class="card border-0 shadow-sm mb-4 overflow-hidden rounded-3 transition-hover">
                            @if (!empty($block['data']['image']))
                                <img src="{{ \Illuminate\Support\Facades\Storage::url($block['data']['image']) }}"
                                    class="card-img-top" alt="{{ $block['data']['title'] ?? '' }}">
                            @endif
                            <div class="card-body p-4 text-center">
                                @if (!empty($block['data']['title']))
                                    <h4 class="card-title mb-3">{{ $block['data']['title'] }}</h4>
                                @endif
                                <div class="card-text text-muted mb-4">
                                    {!! $block['data']['content'] !!}
                                </div>
                                @if (!empty($block['data']['button_label']) && !empty($block['data']['button_url']))
                                    <a href="{{ $block['data']['button_url'] }}" class="btn btn-primary rounded-pill px-4">
                                        {{ $block['data']['button_label'] }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    @break

                    @default
                        <p>Unknown block type: {{ $block['type'] }}</p>
                @endswitch
            </div>
        @endforeach
    @elseif(is_string($blocks))
        <div class="content-block mb-4">
            {!! $blocks !!}
        </div>
    @endif
@endif