@props(['page'])

@php
$sections = $page->sections;
@endphp

@if($sections->isEmpty())
    <p>No content available.</p>
@else
    @foreach($sections as $section)
        @php
            $content = $section->content ?? [];
            $sectionName = $section->section_name;
        @endphp

        @switch($sectionName)
            @case('hero')
                <section class="hero" style="background: {{ $content['background_color'] ?? '#f5f5f5' }}; padding: 60px 20px; text-align: center;">
                    @if(isset($content['title']))
                        <h1 style="font-size: 48px; margin-bottom: 20px;">{{ $content['title'] }}</h1>
                    @endif
                    @if(isset($content['subtitle']))
                        <p style="font-size: 20px; color: #666;">{{ $content['subtitle'] }}</p>
                    @endif
                    @if(isset($content['button_text']))
                        <a href="{{ $content['button_link'] ?? '#' }}" class="btn" style="display: inline-block; margin-top: 20px; padding: 12px 30px; background: #007bff; color: white; text-decoration: none; border-radius: 4px;">{{ $content['button_text'] }}</a>
                    @endif
                </section>
                @break

            @case('features')
                <section class="features" style="padding: 60px 20px; background: white;">
                    @if(isset($content['title']))
                        <h2 style="text-align: center; margin-bottom: 40px; font-size: 32px;">{{ $content['title'] }}</h2>
                    @endif
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto;">
                        @for($i = 1; $i <= 3; $i++)
                            @if(isset($content["feature_{$i}_title"]))
                                <div style="text-align: center; padding: 20px;">
                                    @if(isset($content["feature_{$i}_icon"]))
                                        <div style="font-size: 40px; margin-bottom: 15px;">{{ $content["feature_{$i}_icon"] }}</div>
                                    @endif
                                    <h3>{{ $content["feature_{$i}_title"] }}</h3>
                                    <p style="color: #666;">{{ $content["feature_{$i}_description"] ?? '' }}</p>
                                </div>
                            @endif
                        @endfor
                    </div>
                </section>
                @break

            @case('about')
                <section class="about" style="padding: 60px 20px; background: #f5f5f5;">
                    <div style="max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;">
                        @if(isset($content['image']))
                            <div>
                                <img src="{{ $content['image'] }}" alt="About" style="width: 100%; border-radius: 8px;">
                            </div>
                        @endif
                        <div>
                            @if(isset($content['title']))
                                <h2 style="margin-bottom: 20px; font-size: 32px;">{{ $content['title'] }}</h2>
                            @endif
                            @if(isset($content['content']))
                                <p style="line-height: 1.8; color: #666;">{{ $content['content'] }}</p>
                            @endif
                        </div>
                    </div>
                </section>
                @break

            @case('cta')
                <section class="cta" style="padding: 60px 20px; background: #007bff; color: white; text-align: center;">
                    @if(isset($content['title']))
                        <h2 style="margin-bottom: 15px;">{{ $content['title'] }}</h2>
                    @endif
                    @if(isset($content['subtitle']))
                        <p style="margin-bottom: 25px; opacity: 0.9;">{{ $content['subtitle'] }}</p>
                    @endif
                    @if(isset($content['button_text']))
                        <a href="{{ $content['button_link'] ?? '#' }}" style="padding: 12px 30px; background: white; color: #007bff; text-decoration: none; border-radius: 4px; font-weight: 600;">{{ $content['button_text'] }}</a>
                    @endif
                </section>
                @break

            @case('contact')
                <section class="contact" style="padding: 60px 20px; background: white;">
                    <div style="max-width: 600px; margin: 0 auto; text-align: center;">
                        @if(isset($content['title']))
                            <h2 style="margin-bottom: 30px;">{{ $content['title'] }}</h2>
                        @endif
                        @if(isset($content['email']))
                            <p>Email: <a href="mailto:{{ $content['email'] }}">{{ $content['email'] }}</a></p>
                        @endif
                        @if(isset($content['phone']))
                            <p>Phone: {{ $content['phone'] }}</p>
                        @endif
                        @if(isset($content['address']))
                            <p>Address: {{ $content['address'] }}</p>
                        @endif
                    </div>
                </section>
                @break

            @case('text')
                <section class="text-content" style="padding: 60px 20px; max-width: 800px; margin: 0 auto;">
                    @if(isset($content['title']))
                        <h2>{{ $content['title'] }}</h2>
                    @endif
                    @if(isset($content['content']))
                        <div style="line-height: 1.8; color: #333;">{!! nl2br(e($content['content'])) !!}</div>
                    @endif
                </section>
                @break

            @default
                <section class="custom-section" style="padding: 40px 20px;">
                    @if(isset($content['title']))
                        <h2>{{ $content['title'] }}</h2>
                    @endif
                    <pre style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow-x: auto;">{{ json_encode($content, JSON_PRETTY_PRINT) }}</pre>
                </section>
        @endswitch
    @endforeach
@endif