@extends('frontend.layout')

@php
    // Admin can save EITHER a structured array (title / subtitle /
    // reasons[]) OR a raw HTML string. Detect which one and render
    // the right path below.
    $rawHtml   = is_string($content) && trim($content) !== '' ? $content : null;
    $c         = is_array($content) ? $content : [];
    $pageTitle = $c['title'] ?? __('Why Us');
@endphp

@section('title', $pageTitle . ' — ' . config('app.name'))

@section('content')
<main class="flex-1 pt-32 pb-20">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            @if($rawHtml)
                <div class="prose prose-invert max-w-none
                            prose-headings:text-ink prose-headings:tracking-tight
                            prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl
                            prose-p:text-muted prose-p:leading-relaxed
                            prose-a:text-brand prose-strong:text-ink
                            prose-li:text-muted prose-ul:my-4 prose-ol:my-4">
                    {!! $rawHtml !!}
                </div>
            @else
                <div x-data="{ shown: false }" x-init="setTimeout(() => shown = true, 0)"
                     class="space-y-6 mb-16 text-center transition-all duration-700 transform"
                     :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'">
                    <h1 class="text-4xl md:text-6xl font-bold tracking-tight">Why <span class="text-brand italic">Choose Us</span></h1>
                    @if(!empty($c['subtitle']))
                    <p class="text-xl text-muted leading-relaxed max-w-2xl mx-auto">{{ $c['subtitle'] }}</p>
                    @endif
                </div>

                @if(!empty($c['reasons']) && is_array($c['reasons']))
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    @foreach($c['reasons'] as $i => $reason)
                    @if(!empty($reason['title']))
                    <div x-data="{ shown: false }" x-intersect="shown = true"
                         style="transition-delay: {{ $i * 100 }}ms"
                         class="p-8 rounded-[2rem] bg-surface-2 border border-border shadow-sm hover:shadow-xl transition-all group transform"
                         :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'">
                        <div class="h-10 w-10 rounded-xl bg-brand/10 text-brand flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                            <span class="text-lg font-bold">{{ $i + 1 }}</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">{{ $reason['title'] }}</h3>
                        <p class="text-muted leading-relaxed text-sm">{{ $reason['desc'] ?? '' }}</p>
                    </div>
                    @endif
                    @endforeach
                </div>
                @endif
            @endif
        </div>
    </div>
</main>
@endsection