@php
$settings = $section->settings ?? [];
$alignment = $settings['alignment'] ?? 'left';
$alignClass = match($alignment) {
'center' => 'text-center mx-auto',
'right' => 'text-right ml-auto',
default => 'text-left mr-auto',
};
@endphp

@php
    $pt = $settings['padding_top'] ?? '80px';
    $pb = $settings['padding_bottom'] ?? '80px';
    $bg = $settings['bg_color'] ?? 'transparent';
    $tx = $settings['text_color'] ?? 'inherit';

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
    $txStyle = $tx !== 'inherit' ? "color: $tx;" : '';

    $maxWidth = $settings['max_width'] ?? '5xl';
    $containerClass = match($maxWidth) {
        'container' => 'container mx-auto px-6',
        'full' => 'w-full px-6',
        default => 'max-w-' . $maxWidth . ' mx-auto px-6',
    };
@endphp

<section class="relative overflow-hidden" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }} {{ $txStyle }}"
    id="section-{{ $section->id }}">
    {{-- Decorative Background Effect --}}
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[500px] h-[500px] bg-brand-500/5 blur-[120px] rounded-full pointer-events-none"></div>

    <div class="{{ $alignClass }} relative z-10">
        @if($settings['title'] ?? false)
        <h2 class="text-4xl md:text-6xl font-display font-900 text-text-base mb-12 leading-tight tracking-tight uppercase">
            {{ $settings['title'] }}
        </h2>
        @endif

        <div class="prose dark:prose-invert prose-lg max-w-none text-text-muted leading-relaxed font-500 uppercase tracking-wide">
            {!! $settings['content'] ?? '' !!}
        </div>
    </div>
</section>

<style>
    #section-{{ $section->id }} .prose h1,
    #section-{{ $section->id }} .prose h2,
    #section-{{ $section->id }} .prose h3 {
        color: var(--text-base);
        font-weight: 800;
        margin-top: 2.5em;
        text-transform: uppercase;
        letter-spacing: -0.02em;
    }

    #section-{{ $section->id }} .prose p {
        margin-bottom: 2em;
    }

    #section-{{ $section->id }} .prose a {
        color: var(--brand-500);
        text-decoration: none;
        border-bottom: 2px solid rgba(var(--primary-rgb), 0.2);
        transition: all 0.3s ease;
        font-weight: 800;
    }

    #section-{{ $section->id }} .prose a:hover {
        border-bottom-color: var(--brand-500);
        background: rgba(var(--primary-rgb), 0.05);
    }

    #section-{{ $section->id }} .prose strong {
        color: var(--text-base);
        font-weight: 800;
    }

    #section-{{ $section->id }} .prose li::marker {
        color: var(--brand-500);
    }
</style>